Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/customizer panels #4373

Merged
merged 14 commits into from
Feb 3, 2025
Merged

Feat/customizer panels #4373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9af1ab0
chore: rename Layout customizer panel to Global
abaicus Jan 31, 2025
631f1b5
fix: dashboard customizer section style
abaicus Jan 31, 2025
f6bc24b
fix: dashboard responsive & skeleton loader
abaicus Jan 31, 2025
9ed6a64
chore: hide customizer promo section when starter content is displayed
abaicus Jan 31, 2025
dda0a8f
feat: reorganize customizer panels and sections [closes #2915]
abaicus Jan 31, 2025
458ccde
chore: update starter content H2 typography
abaicus Jan 31, 2025
5ede057
chore: compact docs and promo sections in customizer
abaicus Jan 31, 2025
8bb90f0
chore: add back notifications in the main app
abaicus Jan 31, 2025
e5125b2
chore: fix TPC notice install e2e test
abaicus Jan 31, 2025
c519fd1
chore: fix form fields e2e test
abaicus Jan 31, 2025
2bbc670
chore: fix blog archive e2e test
abaicus Jan 31, 2025
e5064ad
chore: fix custom global colors e2e test
abaicus Jan 31, 2025
85a563c
chore: fix hfg menu item description test
abaicus Jan 31, 2025
773aeab
chore: fix e2e
abaicus Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 25 additions & 18 deletions assets/apps/customizer-controls/src/scss/_documentation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,32 @@
.control-section.neve-documentation {
display: block !important;
margin-bottom: 0;
margin-top: -1px;
.documentation-inner {
display: flex;
}
.neve-customizer-heading {
padding: 7px 10px 7px 14px;
display: flex;
flex-grow: 1;
margin: auto;
letter-spacing: initial;
font-size: 14px;
font-weight: 600;
display: block !important;
margin-bottom: 0;
margin-top: -1px;

&:hover, &:focus-within {
cursor: default;
.documentation-inner {
display: flex;
}
.neve-customizer-heading {
padding: 5px 15px 5px 18px;
display: flex;
flex-grow: 1;
margin: auto;
align-items: center;
justify-content: space-between;
letter-spacing: initial;
font-size: 14px;
font-weight: 600;
gap: 10px;
height: unset;

&:hover,
&:focus-within {
cursor: default;
}
}

.components-button {
margin-left: auto;
height: auto;
padding: 9px 15px;
}
}
}
63 changes: 37 additions & 26 deletions assets/apps/customizer-controls/src/scss/_upsell.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,47 @@
$upsell_blue: #0065A6 !default;
$upsell_blue: #0065a6 !default;

.control-section.neve-upsell {
margin-bottom: 0;
.upsell-inner {
display: flex;
border-top: none !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

&:hover {
border-left-color: $upsell_blue;
}

margin-bottom: 0;
.upsell-inner {
display: flex;
}
.neve-customizer-heading {
color: $upsell_blue;
padding: 7px 10px 7px 14px;
display: flex;
flex-grow: 1;
margin: auto;
letter-spacing: initial;
font-size: 14px;
font-weight: 600;
color: $upsell_blue;
padding: 5px 15px 5px 18px;
display: flex;
flex-grow: 1;
margin: auto;
letter-spacing: initial;
font-size: 14px;
align-items: center;
gap: 10px;
justify-content: space-between;
height: auto;

&:hover, &:focus-within {
background-color: $upsell_blue;
color: #fff;
cursor: default;
&:hover,
&:focus-within {
background-color: $upsell_blue;
color: #fff;
cursor: default;

.components-button {
background: #fff;
color: $upsell_blue;
.components-button {
background: #fff;
color: $upsell_blue;
}
}
}

.components-button {
margin-left: auto;
font-weight: 600;
font-size: 14px;
background: $upsell_blue;
}
.components-button {
background: $upsell_blue;
height: auto;
padding: 9px 15px;
}
}
}
29 changes: 23 additions & 6 deletions assets/apps/dashboard/src/Components/Content/Welcome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import { LucidePanelsTopLeft } from 'lucide-react';

import Card from '../../Layout/Card';
import { NEVE_HAS_PRO } from '../../utils/constants';
import Link from '../Common/Link';

import TransitionWrapper from '../Common/TransitionWrapper';
import ModuleGrid from './ModuleGrid';
import PluginsCard from './Sidebar/PluginsCard';
import Button from '../Common/Button';

export default () => (
<TransitionWrapper className="grid gap-6">
Expand All @@ -19,19 +20,35 @@ export default () => (

const CustomizerShortcutsCard = () => (
<Card
title={__('Essential Settings', 'neve')}
title={__('Get Started', 'neve')}
icon={<LucidePanelsTopLeft size={18} />}
className="border border-blue-300"
afterTitle={
<Button isPrimary href={neveDash.customizerURL}>
{__('Go to Customizer', 'neve')}
</Button>
}
>
<div className="grid sm:grid-cols-2 gap-x-8 gap-y-4">
<div className="grid sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-6">
{neveDash.customizerShortcuts.map(({ text, link, description }) => (
<div key={link} className="grid gap-1">
<Link text={text} url={link} />
<a
href={link}
key={link}
className="grid gap-1 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors group"
>
<span
className={
'text-base text-blue-600 group-hover:text-blue-700 group-hover:underline'
}
>
{text}
</span>
{description && (
<span className="text-gray-600 text-xs">
{description}
</span>
)}
</div>
</a>
))}
</div>
</Card>
Expand Down
148 changes: 60 additions & 88 deletions assets/apps/dashboard/src/Components/SkeletonLoader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,131 +1,103 @@
const SkeletonLoader = () => (
<div className="antialiased grow flex flex-col gap-6 h-full">
<header className="bg-white z-50">
<div>
const SkeletonLoader = () => {
return (
<div className="antialiased grow flex flex-col gap-6 h-full">
{/* Header Skeleton */}
<header className="bg-white z-50">
<div className="border-b border-gray-100">
<div className="max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6">
<div className="flex items-center justify-between h-14">
<div className="flex flex-col gap-5 py-2 sm:flex-row items-center justify-between">
<div className="flex items-center space-x-3">
<div className="size-7 bg-gray-200 rounded-sm" />
<div className="h-4 w-16 bg-gray-200 rounded" />
<div className="h-5 w-14 bg-gray-200 rounded" />
<div className="h-4 w-16 bg-gray-200 rounded" />
<div className="size-7 rounded-sm bg-gray-200 animate-pulse" />
<div className="w-16 h-4 bg-gray-200 animate-pulse rounded" />
</div>
<div className="flex items-center">
<div className="flex items-center gap-2 px-3 py-2">
<div className="size-5 bg-gray-200 rounded" />
<div className="h-4 w-24 bg-gray-200 rounded" />
</div>
<div className="w-px h-4 bg-gray-200 mx-3" />
<div className="flex items-center gap-2 px-3 py-2">
<div className="size-5 bg-gray-200 rounded" />
<div className="h-4 w-20 bg-gray-200 rounded" />
</div>
<div className="flex items-center gap-3">
<div className="w-28 h-8 bg-gray-200 animate-pulse rounded" />
<div className="w-px h-4 bg-gray-200" />
<div className="w-28 h-8 bg-gray-200 animate-pulse rounded" />
</div>
</div>
</div>
</div>
<div className="border-b border-gray-200">
<div className="max-w-[90vw] lg:container mx-auto px-2 lg:px-6">
<nav className="flex -mb-px">
{[...Array(4)].map((item, i) => (
<div className="max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6">
<nav className="flex -mb-px justify-center sm:justify-start">
{[1, 2, 3].map((i) => (
<div
key={i}
className={`px-4 py-3 ${
i === 0
? 'border-b-2 border-gray-200'
: ''
}`}
>
<div className="h-4 w-20 bg-gray-200 rounded" />
</div>
className="w-24 h-4 bg-gray-200 animate-pulse rounded m-4"
/>
))}
</nav>
</div>
</div>
</div>
</header>
</header>

<div className="max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6 flex flex-col lg:flex-row gap-6 h-full grow">
<div className="grow">
<div className="grid gap-6">
<div className="p-6 rounded-lg bg-white shadow-sm">
{/* Main Content Skeleton */}
<div className="max-w-[90vw] w-full lg:container mx-auto px-2 lg:px-6 flex flex-col lg:flex-row gap-6">
<div className="grow">
{/* Get Started Section */}
<div className="p-6 rounded-lg shadow-sm bg-white border border-gray-200">
<div className="flex items-center mb-6 gap-3">
<div className="size-5 bg-gray-200 rounded" />
<div className="h-5 w-40 bg-gray-200 rounded" />
<div className="w-5 h-5 bg-gray-200 animate-pulse rounded" />
<div className="w-24 h-5 bg-gray-200 animate-pulse rounded" />
<div className="ml-auto">
<div className="w-32 h-10 bg-gray-200 animate-pulse rounded" />
</div>
</div>
<div className="grid grid-cols-2 gap-x-8 gap-y-4">
{[...Array(8)].map((_, i) => (
<div className="grid sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-6">
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
<div
key={i}
className="h-4 w-32 bg-gray-200 rounded"
className="h-20 bg-gray-100 rounded-lg animate-pulse"
/>
))}
</div>
</div>

<div className="grid xl:grid-cols-2 gap-6">
<div className="xl:col-span-2 flex items-center justify-between">
<div className="h-6 w-40 bg-gray-200 rounded" />
<div className="h-4 w-24 bg-gray-200 rounded" />
{/* Plugins Section */}
<div className="mt-6 p-6 rounded-lg shadow-sm bg-white">
<div className="flex items-center mb-6 gap-3">
<div className="w-40 h-5 bg-gray-200 animate-pulse rounded" />
</div>
{[...Array(8)].map((_, i) => (
<div
key={i}
className="p-6 rounded-lg bg-white shadow-sm"
>
<div className="flex items-center mb-6 gap-3">
<div className="size-5 bg-gray-200 rounded" />
<div className="h-5 w-32 bg-gray-200 rounded" />
<div className="ml-auto">
<div className="h-5 w-12 bg-gray-200 rounded" />
<div className="grid gap-4 2xl:grid-cols-2">
{[1, 2, 3, 4, 5, 6].map((i) => (
<div
key={i}
className="flex items-start p-3 bg-white rounded-lg border border-gray-100"
>
<div className="flex-grow">
<div className="flex gap-4 items-center">
<div className="w-6 h-6 bg-gray-200 animate-pulse rounded" />
<div className="w-24 h-4 bg-gray-200 animate-pulse rounded" />
<div className="ml-auto w-24 h-4 bg-gray-200 animate-pulse rounded" />
</div>
<div className="w-48 h-4 bg-gray-200 animate-pulse rounded mt-2" />
</div>
</div>
<div className="h-4 w-full bg-gray-200 rounded" />
</div>
))}
))}
</div>
</div>
</div>
</div>

<div className="shrink-0 lg:w-[435px]">
<div className="grid gap-6">
{[...Array(2)].map((_, i) => (
<div
key={i}
className="p-6 rounded-lg bg-white shadow-sm"
>
<div className="flex items-center mb-6 gap-3">
<div className="h-5 w-32 bg-gray-200 rounded" />
</div>
<div className="h-4 w-full bg-gray-200 rounded mb-4" />
<div className="h-4 w-40 bg-gray-200 rounded" />
</div>
))}
<div className="p-6 rounded-lg bg-white shadow-sm space-y-3">
<div className="flex items-center mb-6 gap-3">
<div className="h-5 w-40 bg-gray-200 rounded" />
</div>
{[...Array(6)].map((_, i) => (
{/* Sidebar Skeleton */}
<div className="shrink-0 lg:w-[435px]">
<div className="grid gap-6">
{[1, 2, 3, 4].map((i) => (
<div
key={i}
className="flex items-start p-3 bg-white rounded-lg border border-gray-100"
className="p-6 rounded-lg shadow-sm bg-white"
>
<div className="flex-grow">
<div className="flex gap-4 items-center">
<div className="size-6 bg-gray-200 rounded" />
<div className="h-4 w-24 bg-gray-200 rounded" />
<div className="ml-auto h-4 w-32 bg-gray-200 rounded" />
</div>
<div className="h-4 w-3/4 bg-gray-200 rounded mt-1" />
<div className="flex items-center mb-6 gap-3">
<div className="w-32 h-5 bg-gray-200 animate-pulse rounded" />
</div>
<div className="w-full h-24 bg-gray-100 rounded animate-pulse" />
</div>
))}
</div>
</div>
</div>
</div>
</div>
);
);
};

export default SkeletonLoader;
5 changes: 5 additions & 0 deletions assets/customizer/css/_generic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,4 +94,9 @@
#nv-starter-content-notice .nv-notice-error {
text-align: center;
color: red;
}

.neve-separator-section {
margin: 20px auto;
max-width: 90%;
}
9 changes: 9 additions & 0 deletions assets/customizer/js/separator-section.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
wp.customize.sectionConstructor.neve_separator = wp.customize.Section.extend({
// No events for this type of section.
attachEvents() {},

// Always make the section active.
isContextuallyActive() {
return true;
},
});
1 change: 1 addition & 0 deletions e2e-tests/fixtures/customizer/form-fields/form-fields-setup.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"neve_single_post_sidebar_layout": "right",
"neve_migrated_hfg_colors": true,
"nav_menu_locations": [],
"ti_prev_theme": "twentytwentyone",
Expand Down
Loading
Loading