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

Press2 1570 visual fixes preview editor #431

Merged
merged 17 commits into from
Jan 29, 2024
Merged

Press2 1570 visual fixes preview editor #431

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
1d2f64d
Visual fixes
ajayadav09 Jan 24, 2024
6430d3f
Removed DEFAULT colors
ajayadav09 Jan 24, 2024
dcc6d81
changed customize icon
ajayadav09 Jan 25, 2024
193affa
added white stroked outline on selected preview
ajayadav09 Jan 25, 2024
1d79814
editor sidebar view all tab fixes
ajayadav09 Jan 25, 2024
e7d1a10
postioned the loader in the center of viewport
ajayadav09 Jan 25, 2024
d6203bf
Merge remote-tracking branch 'origin/enhance/ai-onboarding' into PRES…
ajayadav09 Jan 25, 2024
d075cff
merged enhance/ai-onboarding
ajayadav09 Jan 25, 2024
3b517a7
update package.lock file
arunshenoy99 Jan 25, 2024
3f612ab
update package.lock file
arunshenoy99 Jan 25, 2024
3ea4e95
removed border on sidebar
ajayadav09 Jan 25, 2024
b7dbbdf
fixed js linting
ajayadav09 Jan 25, 2024
6ef3250
removed unsed secondary palatte
ajayadav09 Jan 25, 2024
cf5216a
Merge branch 'enhance/ai-onboarding' of https://github.com/newfold-la…
ajayadav09 Jan 29, 2024
0197d58
refactored logic for click and mouseover event in sidebar tab
ajayadav09 Jan 29, 2024
699b68f
icon via background image
ajayadav09 Jan 29, 2024
469a49b
fixed lint
ajayadav09 Jan 29, 2024
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
4,165 changes: 2,276 additions & 1,889 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 20 additions & 16 deletions src/OnboardingSPA/components/CardWithOptions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,28 @@ const CardWithOptions = ( { title, options, skip, callback } ) => {
}
} }
>
<div className={ 'nfd-sg-card__data__option__left' }>
<div
className={ 'nfd-sg-card__data__option__left_top' }
>
{ data.title }
</div>
<div
className={
'nfd-sg-card__data__option__left_bottom'
}
>
{ data.desc }
<div className={ 'nfd-sg-card__data__option__wrapper' }>
<div className={ 'nfd-sg-card__data__option__left' }>
<div
className={
'nfd-sg-card__data__option__left_top'
}
>
{ data.title }
</div>
<div
className={
'nfd-sg-card__data__option__left_bottom'
}
>
{ data.desc }
</div>
</div>
<Icon
className={ 'nfd-sg-card__data__option__right' }
icon={ chevronRight }
/>
</div>
<Icon
className={ 'nfd-sg-card__data__option__right' }
icon={ chevronRight }
/>
</div>
);
} );
Expand Down
41 changes: 24 additions & 17 deletions src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,43 +18,49 @@ $background-color: var(--nfd-onboarding-card-background);
&__title {
color: var(--nfd-onboarding-primary);
margin: 16px;
line-height: 2;
line-height: 1.5;
font-size: 18px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1.5px;
font-weight: 400;
letter-spacing: 1.5;
}

&__data {
margin: 12px;

&__option {
display: flex;
cursor: pointer;
margin: 16px 4px;
align-items: center;
border-radius: 4px 4px 0 0;
padding: 16px 12px 16px 12px;
justify-content: space-between;
transition: background-color 400ms ease-in-out;

&:not(:last-child) {
border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
&__wrapper {
display: flex;
cursor: pointer;
margin: 16px 4px;
align-items: center;
border-radius: 8px;
padding: 16px 12px 16px 12px;
justify-content: space-between;
transition: background-color 400ms ease-in-out;

&:hover {
background-color: var(--nfd-onboarding-hover);
}
}

&:hover {
background-color: var(--nfd-onboarding-hover);
&:not(:last-child) {
border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
}

&__left_top {
color: var(--nfd-onboarding-primary);
font-size: 16px;
font-size: 15px;
font-weight: 500;
padding-bottom: 12px;
margin-bottom: 7px;
line-height: 24px;
}

&__left_bottom {
color: var(--nfd-onboarding-primary);
color: rgba(var(--nfd-onboarding-primary-rgb), 0.7);

font-size: 14px;
font-weight: 300;
}
Expand All @@ -76,6 +82,7 @@ $background-color: var(--nfd-onboarding-card-background);
margin: 0 20px 6px 20px;
transition: color 200ms ease-in-out;
color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
font-weight: 500;

&:hover {
color: var(--nfd-onboarding-primary);
Expand Down
4 changes: 1 addition & 3 deletions src/OnboardingSPA/components/ColorPickerButton/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,7 @@ const ColorPickerButton = ( {
style={ {
backgroundColor: `${ color }`,
} }
>
{ isColorSelected ? <>&#10003;</> : null }
</div>
></div>
<div className="custom-palette__below__row__text">{ name }</div>
</div>
);
Expand Down
4 changes: 0 additions & 4 deletions src/OnboardingSPA/components/Drawer/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -479,10 +479,6 @@
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 0, 0, 0.3);

&--selected-border {
box-shadow: 0 0 5px 3px rgba(var(--nfd-onboarding-highlighted--rgb), 0.5);
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
padding: 6px 56px 6px 56px;
border-radius: 8px;
gap: 6px;
border: none;
}

&:hover {
Expand Down
13 changes: 7 additions & 6 deletions src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ $background-color: var(--nfd-onboarding-card-background);

.nfd-sg-loader {

margin: 8px;
margin-bottom: 8px;
max-width: 90vw;
padding: 16px 12px;
padding: 18px 12px 10px 12px;
border-radius: 12px;
background-color: $background-color;
width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
Expand All @@ -16,16 +16,17 @@ $background-color: var(--nfd-onboarding-card-background);
}

&__title {
line-height: 2;
font-size: 18px;
line-height: 19px;
font-size: 16px;
text-align: center;
letter-spacing: 1.5px;
font-weight: 500;
color: var(--nfd-onboarding-primary);
letter-spacing: 1.5;
}

&__progress {
display: flex;
margin: 20px 60px;
margin: 17px 60px 04px 60px;
align-items: center;
justify-content: center;

Expand Down
12 changes: 2 additions & 10 deletions ...SPA/components/Sidebar/components/Customize/DesignColorsPanel/CustomColorPalette/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,14 @@ import { ColorPalette, Popover } from '@wordpress/components';
import './stylesheet.scss';
import { __ } from '@wordpress/i18n';

const CustomColorPalette = ( {
onChange,
paletteSecondaryColors,
palettePrimaryColors,
} ) => {
const CustomColorPalette = ( { onChange, palettePrimaryColors } ) => {
const [ color, setColor ] = useState( palettePrimaryColors[ 0 ].color );
const baseClassName =
'nfd-onboarding-sidebar--customize__custom-color-palette';
const colors = [
{
colors: palettePrimaryColors,
name: __( 'Primary colors', 'wp-module-onboarding' ),
},
{
colors: paletteSecondaryColors,
name: __( 'Secondary colors', 'wp-module-onboarding' ),
name: __( 'THEME', 'wp-module-onboarding' ),
},
];
const handleColorChange = ( newColor ) => {
Expand Down
19 changes: 3 additions & 16 deletions src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,18 +50,6 @@ const DesignColorsPanel = ( {
const [ showColorPicker, setShowColorPicker ] = useState( false );
const customPaletteId = colors.length - 1;

const paletteSecondaryColors = Object.entries( colorPalettes[ 1 ] )
.map( ( [ name, color ] ) => {
if ( name !== 'name' ) {
return {
name: __( 'Custom', 'wp-module-onboarding' ),
color,
};
}
return null;
} )
.filter( Boolean );

const handleApplyCustomColors = () => {
setSelectedCustomColors( true );
setIsEditingCustomColors( false );
Expand Down Expand Up @@ -219,7 +207,6 @@ const DesignColorsPanel = ( {
<CustomColorPalette
onChange={ handleColorPicker }
palettePrimaryColors={ palettePrimaryColors }
paletteSecondaryColors={ paletteSecondaryColors }
/>
) }
</div>
Expand Down Expand Up @@ -263,9 +250,9 @@ const DesignColorsPanel = ( {
label={
idx === 0
? __(
'Default',
'wp-module-onboarding'
)
'Default',
'wp-module-onboarding'
)
: ''
}
selectedPalette={ selectedPalette }
Expand Down
20 changes: 10 additions & 10 deletions src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { PanelBody, PanelRow, Button, Dashicon } from '@wordpress/components';
import './stylesheet.scss';
import { store as nfdOnboardingStore } from '../../../../../store';
import { __ } from '@wordpress/i18n';
import { ReactComponent as RadioChecked } from '../../../../../static/icons/sitegen/radio-checked.svg';
import { ReactComponent as RadioUnchecked } from '../../../../../static/icons/sitegen/radio-unchecked.svg';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add these via css? like done for other svg's?


const FontGroup = ( {
baseClassName,
Expand All @@ -20,17 +22,15 @@ const FontGroup = ( {
role="presentation"
onClick={ () => handleGroupSelect( group.id ) }
>
<Dashicon
<span
className={ `${ baseClassName }__font-group__container__button__icon` }
icon={ 'yes-alt' }
size={ 30 }
style={ {
color:
selectedGroup === group.id
? 'var(--nfd-onboarding-sitegen-customize-icon-selected)'
: 'var(--nfd-onboarding-sitegen-customize-grey-1)',
} }
/>
>
{ selectedGroup === group.id ? (
<RadioChecked />
) : (
<RadioUnchecked />
) }
</span>
<div
className={ `${ baseClassName }__font-group__container__button__font-name__container` }
>
Expand Down
12 changes: 7 additions & 5 deletions src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@
);
} ),
} );
}, [ homepages, activeHomepage, globalStyles ] );

Check warning on line 161 in src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'handleFavorite' and 'handlePreview'. Either include them or remove the dependency array

return (
<Fill
Expand Down Expand Up @@ -286,11 +286,6 @@
'wp-module-onboarding'
) }
</p>
<Button
className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__icon"
onClick={ closeSideBar }
icon={ closeSmall }
></Button>
</div>
),
content:
Expand Down Expand Up @@ -358,8 +353,15 @@
},
] }
callback={ setActiveTab }
triggerEvent="click"
></TabPanelHover>
</div>

<Button
className="nfd-onboarding-sidebar--sitegen-editor-patterns__header__icon"
onClick={ closeSideBar }
icon={ closeSmall }
></Button>
</PanelHeader>
{ activeTab &&
homepages &&
Expand Down
16 changes: 14 additions & 2 deletions src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,18 @@

&__tab-panel {
font-size: 13px;
width: 300px;

.components-tab-panel__tabs-item {

&.is-active {
color: #1e1e1e;
box-shadow: inset 0 0 - ($border-width-tab - 0.5) 0 0 #1e1e1e;
}

&.is-not-active {
box-shadow: none !important;
}
}

&__favorites-tab {
display: flex;
Expand Down Expand Up @@ -68,7 +79,8 @@
height: 140px;
border-radius: 8px;
cursor: pointer;
border: 3px solid #0060f0;
border: 3px solid #fff;
box-shadow: 0 0 0 3px #0060f0;
}
}
}
Expand Down
1 change: 1 addition & 0 deletions src/OnboardingSPA/components/Sidebar/stylesheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@

.nfd-onboarding-sidebar__panel.is-open {
width: $nav-sidebar-width;
border-left: 1px solid var(--nfd-onboarding-sidebar-border-left);

.nfd-onboarding-sidebar__panel-inner,
.interface-interface-skeleton__sidebar {
Expand Down
12 changes: 10 additions & 2 deletions src/OnboardingSPA/components/TabPanelHover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,12 @@
notActiveClass = 'is-not-active',
callback,
onSelect = noop,
triggerEvent = 'click',
} ) {
const instanceId = useInstanceId( TabPanelHover, 'tab-panel' );
const [ selected, setSelected ] = useState( null );

const handleMouseOver = ( tabKey ) => {
const handleEvent = ( tabKey ) => {
setSelected( tabKey );
onSelect( tabKey );
const selectedTab = find( tabs, { name: tabKey } );
Expand All @@ -68,7 +69,7 @@
initialTabName || ( tabs.length > 0 ? tabs[ 0 ].name : null )
);
}
}, [ tabs ] );

Check warning on line 72 in src/OnboardingSPA/components/TabPanelHover/index.js

View workflow job for this annotation

GitHub Actions / Run Lint Checks 

React Hook useEffect has missing dependencies: 'initialTabName' and 'selected'. Either include them or remove the dependency array. If 'setSelected' needs the current value of 'initialTabName', you can also switch to useReducer instead of useState and read 'initialTabName' in the reducer

return (
<div className={ className }>
Expand All @@ -87,7 +88,14 @@
aria-controls={ `${ instanceId }-${ tab.name }-view` }
selected={ tab.name === selected }
key={ tab.name }
onMouseOver={ partial( handleMouseOver, tab.name ) }
{ ...( triggerEvent === 'click'
? { onClick: partial( handleEvent, tab.name ) }
: {
onMouseOver: partial(
handleEvent,
tab.name
),
} ) }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be in the defined component above itself?

>
{ tab.title }
</TabButton>
Expand Down
4 changes: 4 additions & 0 deletions src/OnboardingSPA/static/icons/sitegen/radio-checked.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/OnboardingSPA/static/icons/sitegen/radio-unchecked.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/OnboardingSPA/static/icons/sitegen/settings-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading