From 5c0a76ab5fd48d8ec4a32fa014ac2e152943aa43 Mon Sep 17 00:00:00 2001 From: ajayadav09 Date: Thu, 1 Feb 2024 12:10:49 +0530 Subject: [PATCH] UI bug fixes reported (#436) * rename re-render issue * moved the rename logic to the center component * update homepage title as editor view changes * fixed linting * fixed custom fonts icon * fixed linting * added ellipses for longer version names in editor header * two previews on Ipad * trim whitespace and update only when needed * width according to device * fixed lint * fixed heart svg size on mobile --- .../stylesheet.scss | 7 +- .../Customize/DesignFontsPanel/index.js | 18 +- .../steps/SiteGen/Editor/Header/center.js | 201 ++++++++++++------ .../steps/SiteGen/Editor/Header/index.js | 5 - .../steps/SiteGen/Editor/stylesheet.scss | 9 + .../steps/SiteGen/Preview/stylesheet.scss | 37 +++- 6 files changed, 177 insertions(+), 100 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss index 9bac39f2d..6148fa1de 100644 --- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss @@ -8,14 +8,9 @@ justify-content: center; flex-wrap: wrap; - @media (min-width: #{ ($break-mobile) }) and (max-width: #{ ($break-wide) }) { - width: 340px; - padding: 15px; - } - @media (max-width: #{ ($break-mobile) }) { width: 300px; - padding: 10px; + padding: 20px 0; } &__live-preview-container { diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 04b991008..9d211da7d 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -2,7 +2,7 @@ import { forwardRef, useImperativeHandle } from 'react'; import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { PanelBody, PanelRow, Button, Dashicon } from '@wordpress/components'; +import { PanelBody, PanelRow, Button } from '@wordpress/components'; import './stylesheet.scss'; import { store as nfdOnboardingStore } from '../../../../../store'; import { __ } from '@wordpress/i18n'; @@ -154,17 +154,11 @@ const CustomFontsDisplay = ( { role="presentation" onClick={ () => handleGroupSelect( 'custom' ) } > - +
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js index f7bdfd9e2..c6fe6106e 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js @@ -1,73 +1,19 @@ import { Icon, chevronDown, reusableBlock } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; -import { useRef } from '@wordpress/element'; +import { useRef, useState, useEffect, memo } from '@wordpress/element'; import { ReactComponent as FavoriteIconStroked } from '../../../../static/icons/sitegen/heart-stroked.svg'; import { ReactComponent as FavoriteFilled } from '../../../../static/icons/sitegen/heart-filled.svg'; import { Dropdown, MenuGroup, MenuItem } from '@wordpress/components'; -const StepEditorHeaderCenter = ( { - handleFavorite, - handleRename, - handleViewAll, - handleRegenerate, - handleCustomize, - handleIsRenaming, - isRenaming, - homepageTitle, - isFavorite, -} ) => { - const isLargeViewport = useViewportMatch( 'medium' ); - const inputRef = useRef( null ); - - const onRegenerate = () => { - if ( typeof handleRegenerate === 'function' ) { - return handleRegenerate(); - } - }; - - const onFavorite = () => { - if ( typeof onFavorite === 'function' ) { - return handleFavorite(); - } - }; - - const onCustomize = () => { - if ( typeof handleCustomize === 'function' ) { - return handleCustomize(); - } - }; - - const onViewAll = () => { - if ( typeof handleViewAll === 'function' ) { - return handleViewAll(); - } - }; - - const onRenameItemSelect = () => { - if ( typeof handleIsRenaming === 'function' ) { - handleIsRenaming( true ); - return inputRef.current.focus(); - } - }; - - const onRename = () => { - if ( typeof handleRename === 'function' ) { - handleRename( inputRef.current.value ); - } - }; - - const onTitleInputBlur = () => { - if ( typeof handleIsRenaming === 'function' ) { - return handleIsRenaming( false ); - } - }; - - if ( isRenaming ) { - inputRef.current.focus(); - } - - const DropDownMenu = () => { +const DropDownMenu = memo( + ( { + onRegenerate, + onCustomize, + onRenameItemSelect, + onViewAll, + isLargeViewport, + } ) => { return ( { ! isLargeViewport && ( @@ -91,9 +37,49 @@ const StepEditorHeaderCenter = ( { ); - }; + } +); + +const TitleContent = memo( + ( { + isFavorite, + homepageTitle, + onFavorite, + onRename, + inputRef, + onRegenerate, + onCustomize, + onRenameItemSelect, + onViewAll, + isLargeViewport, + isInputEnabled, + enableInput, + } ) => { + const [ renameInputValue, setRenameInputValue ] = + useState( homepageTitle ); + + const handleOnChange = () => { + setRenameInputValue( inputRef.current.value ); + }; + + const onTitleInputBlur = () => { + const newTitleValue = inputRef.current.value.trim(); + if ( newTitleValue && newTitleValue !== homepageTitle ) { + onRename( newTitleValue ); + } + enableInput( false ); + }; + + useEffect( () => { + if ( isInputEnabled ) { + inputRef.current?.focus(); + } + }, [ isInputEnabled, inputRef ] ); + + useEffect( () => { + setRenameInputValue( homepageTitle ); + }, [ homepageTitle ] ); - const TitleContent = () => { return ( ( @@ -122,12 +108,12 @@ const StepEditorHeaderCenter = ( {
) } - renderContent={ DropDownMenu } + renderContent={ () => ( + + ) } /> ); + } +); + +const StepEditorHeaderCenter = ( { + handleFavorite, + handleRename, + handleViewAll, + handleRegenerate, + handleCustomize, + homepageTitle, + isFavorite, +} ) => { + const isLargeViewport = useViewportMatch( 'medium' ); + const inputRef = useRef( null ); + const [ isInputEnabled, setInputEnabled ] = useState( false ); + const enableInput = ( isEnabled ) => { + setInputEnabled( isEnabled ); + if ( isEnabled ) { + inputRef.current?.focus(); + } + }; + + const onRegenerate = () => { + if ( typeof handleRegenerate === 'function' ) { + return handleRegenerate(); + } + }; + + const onFavorite = () => { + if ( typeof onFavorite === 'function' ) { + return handleFavorite(); + } + }; + + const onCustomize = () => { + if ( typeof handleCustomize === 'function' ) { + return handleCustomize(); + } + }; + + const onViewAll = () => { + if ( typeof handleViewAll === 'function' ) { + return handleViewAll(); + } + }; + + const onRenameItemSelect = () => { + enableInput( true ); + }; + + const onRename = ( newTitleValue ) => { + if ( typeof handleRename === 'function' ) { + handleRename( newTitleValue ); + } }; return (
- +
); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index 32e376392..454ca9838 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -24,7 +24,6 @@ const StepSiteGenEditorHeader = () => { const [ homepage, setHomepage ] = useState(); const [ isSaving, setIsSaving ] = useState( false ); const [ isRegenerating, setIsRegenerating ] = useState( false ); - const [ isEditingTitle, setIsEditingTitle ] = useState( false ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -176,13 +175,9 @@ const StepSiteGenEditorHeader = () => { handleViewAll={ handleViewAll } handleCustomize={ handleCustomize } handleRegenerate={ handleRegenerate } - handleIsRenaming={ ( isRenaming ) => - setIsEditingTitle( isRenaming ) - } handleRename={ handleRename } homepageTitle={ homepage.title } isFavorite={ homepage.isFavorite } - isRenaming={ isEditingTitle } /> ) } diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss index 9721852bf..6a18936cb 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss @@ -15,10 +15,19 @@ color: var(--nfd-onboarding-header-contrast); background-color: var(--nfd-onboarding-header-base); width: 150px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; @media (max-width: #{ ($break-small) }) { width: 80px; } + + &:focus { + overflow: visible; + white-space: normal; + text-overflow: clip; + } } } diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss index e7ffaf1b2..70fc27b7e 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss @@ -44,17 +44,26 @@ } &__options { - - @media (max-width: #{ ($break-xlarge) }) { - flex-direction: column; - } - display: flex; flex-direction: row; text-align: center; margin: 10px 10px 55px 10px; flex-wrap: wrap; - max-width: 1440px; + width: 1380px; + + @media (max-width: #{ ($break-huge) }) { + width: 920px; + } + + @media (max-width: #{ ($break-large) }) { + flex-direction: column; + width: 480px; + } + + @media (max-width: #{ ($break-mobile) }) { + width: 300px; + } + } &__note { @@ -65,13 +74,17 @@ align-items: center; background: var(--nfd-onboarding-card-background); color: var(--nfd-onboarding-primary); - gap: 18px; + gap: 14px; padding: 16px; font-size: 16px; line-height: 22px; text-align: center; border-radius: 12px; margin-bottom: 70px; + + @media (max-width: #{ ($break-mobile) }) { + gap: 8px; + } } @keyframes heartBeat { @@ -92,6 +105,11 @@ .heart { stroke-width: 2px; stroke: var(--nfd-onboarding-heart-icon-stroke); + + @media (max-width: #{ ($break-mobile) }) { + width: 50px; + height: auto; + } } .heart path { @@ -134,6 +152,11 @@ padding: 60px; box-sizing: border-box; + @media (max-width: #{ ($break-mobile) }) { + width: 300px; + } + + &__title { color: var(--nfd-onboarding-primary); }