Skip to content

Commit

Permalink
refine ui between default and custom shadows
Browse files Browse the repository at this point in the history
  • Loading branch information
@madhusudhand
madhusudhand committed Apr 15, 2024
1 parent 2a83155 commit 8d1ae96
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 20 deletions.
1 change: 0 additions & 1 deletion packages/components/src/palette-edit/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,6 @@ function Option< T extends Color | Gradient >( {
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
const [ popoverAnchor, setPopoverAnchor ] = useState( null );
console.log({receivedPopoverProps})
const popoverProps = useMemo(
() => ( {
...receivedPopoverProps,
Expand Down
63 changes: 44 additions & 19 deletions packages/edit-site/src/components/global-styles/shadows-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
__experimentalSpacer as Spacer,
__experimentalItemGroup as ItemGroup,
__experimentalHeading as Heading,
__experimentalInputControl as InputControl,
Popover,
RangeControl,
Button,
Expand All @@ -33,7 +34,7 @@ const shadowIndicatorStyle = {
borderRadius: '2px',
boxSizing: 'border-box',
color: '#2f2f2f',
cursor: 'pointer',
cursor: 'default',
height: '26px',
width: '26px',
padding: 0,
Expand All @@ -56,11 +57,11 @@ export default function ShadowsPanel() {
>
<ShadowsEditor label={ __( 'Default' ) } shadows={ defaultShadows || [] } />
<ShadowsEditor label={ __( 'Theme' ) } shadows={ themeShadows || [] } placeholder={ __('Theme shadows are empty!') } />
<ShadowsEditor label={ __( 'Custom' ) } shadows={ customShadows || [] } placeholder={ __('Custom shadows are empty!') } canCreate={true} onCreate={setCustomShadows}/>
<ShadowsEditor label={ __( 'Custom' ) } shadows={ customShadows || [] } placeholder={ __('Custom shadows are empty!') } isCustom={true} onCreate={setCustomShadows}/>
</VStack>;
}

function ShadowsEditor({label, placeholder, shadows: savedShadows, canCreate, onCreate}) {
function ShadowsEditor({label, placeholder, shadows: savedShadows, isCustom, onCreate}) {
const [isEditing, setIsEditing] = useState(false);
const [shadows, setShadows] = useState(savedShadows || []);

Expand All @@ -74,14 +75,23 @@ function ShadowsEditor({label, placeholder, shadows: savedShadows, canCreate, on
{
name: 'Custom shadow ' + (shadows.length + 1),
slug: 'custom-shadow-' + (shadows.length + 1),
shadow: '0 0 4 4 rgba(0, 0, 0, 0.3)',
shadow: '0 0 4px 4px rgba(0, 0, 0, 0.3)',
}
]
setShadows(newShadows);

// onCreate();
}

const handleShadowChange = (index, shadow) => {
const newShadows = [
...shadows.slice(0, index),
shadow,
...shadows.slice(index + 1),
];
setShadows(newShadows);
}

return <div>
<div style={{display: 'flex', justifyContent: 'space-between'}}>
<Subtitle level={2}>
Expand All @@ -99,7 +109,7 @@ function ShadowsEditor({label, placeholder, shadows: savedShadows, canCreate, on
{ __( 'Done' ) }
</Button>
) }
{canCreate && <Button
{isCustom && <Button
size="small"
icon={ plus }
label={ __( 'Add shadow' ) }
Expand Down Expand Up @@ -138,7 +148,7 @@ function ShadowsEditor({label, placeholder, shadows: savedShadows, canCreate, on
</div>
<Spacer height={ 4 } />

{ isEditing ? <ShadowsEditorView label={label} shadows={shadows} /> : <ShadowsReadOnlyView label={label} shadows={shadows} placeholder={placeholder} /> }
{ isEditing ? <ShadowsEditorView label={label} shadows={shadows} isCustom={isCustom} onChange={handleShadowChange} /> : <ShadowsReadOnlyView label={label} shadows={shadows} placeholder={placeholder} /> }

</div>
}
Expand Down Expand Up @@ -178,19 +188,22 @@ function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
);
}

function ShadowsEditorView({label, shadows}) {
function ShadowsEditorView({label, shadows, isCustom, onChange}) {
return <VStack spacing={ 3 }>
<ItemGroup isRounded>
{
shadows.map( ( { name, slug, shadow } ) => (
<ShadowEditableItem key={ slug } label={ name } shadow={ shadow } />
shadows.map( ( { name, slug, shadow }, index ) => (
<ShadowEditableItem key={ slug } label={ name } shadow={ shadow } isCustom={isCustom} onChange={(updated) => onChange(index, ({
name, slug,
shadow: updated,
}))} />
) )
}
</ItemGroup>
</VStack>
}

function ShadowEditableItem({label, shadow}) {
function ShadowEditableItem({label, shadow, onChange, isCustom}) {
const [isEditing, setIsEditing] = useState(false);
const [ popoverAnchor, setPopoverAnchor ] = useState( null );
const popoverProps = useMemo(
Expand All @@ -208,18 +221,27 @@ function ShadowEditableItem({label, shadow}) {
<div style={{marginBottom: '-4px'}}>
<Icon icon={ shadowIcon } />
</div>
<div style={{flexGrow: 1, margin: '0 6px'}} onClick={() => {setIsEditing(true)}}>{label}</div>
<div style={{flexGrow: 1, margin: '0 6px'}}>
{
isCustom ?
<InputControl
value={ label }
onChange={ () => {} }
onFocus={ () => {setIsEditing(true)} }
/> : <div style={{cursor: 'pointer'}} onClick={() => {setIsEditing(true)}}>{label}</div>
}
</div>
<div style={{marginBottom: '-4px'}}>
<Icon icon={ lineSolid } />
</div>
</div>
{
isEditing && <ShadowPopover shadow={shadow} popoverProps={popoverProps} onClose={ () => setIsEditing( false ) } />
isEditing && <ShadowPopover shadow={shadow} popoverProps={popoverProps} onClose={ () => setIsEditing( false ) } onChange={onChange} />
}
</div>
}

function ShadowPopover({shadow: savedShadow, popoverProps, onClose}) {
function ShadowPopover({shadow: savedShadow, popoverProps, onClose, onChange}) {
const shadowParts = shadowStringToObject(savedShadow || '');
const [ shadow, setShadow ] = useState( {
x: shadowParts.x,
Expand All @@ -231,7 +253,8 @@ function ShadowPopover({shadow: savedShadow, popoverProps, onClose}) {

const shadowString = `${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${shadow.color}`;

const onChange = ( key, value ) => {
const handleChange = ( key, value ) => {
onChange(shadowString);
setShadow( {
...shadow,
[ key ]: value,
Expand All @@ -241,7 +264,9 @@ function ShadowPopover({shadow: savedShadow, popoverProps, onClose}) {
return <Popover {...popoverProps} onClose={onClose}>
<div className="block-editor-global-styles__shadow-popover-container">
<VStack spacing={ 4 }>
<Heading level={ 5 }>{ __( 'Drop shadow' ) }</Heading>
<div style={{padding: '0.5rem'}}>
<Heading level={ 5 }>{ __( 'Drop shadow' ) }</Heading>
</div>
<div style={{padding: '0.5rem',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden'}}>
<div style={ { ...shadowIndicatorStyle, boxShadow: shadowString } }
></div>
Expand All @@ -250,7 +275,7 @@ function ShadowPopover({shadow: savedShadow, popoverProps, onClose}) {
<div>
<RangeControl label="X position"
value={ shadow.x }
onChange={ ( value ) => onChange( 'x', value ) }
onChange={ ( value ) => handleChange( 'x', value ) }
withInputField={ false }
min={ 0 }
max={ 10 }
Expand All @@ -259,7 +284,7 @@ function ShadowPopover({shadow: savedShadow, popoverProps, onClose}) {
<div>
<RangeControl label="Y position"
value={ shadow.y }
onChange={ ( value ) => onChange( 'y', value ) }
onChange={ ( value ) => handleChange( 'y', value ) }
withInputField={ false }
min={ 0 }
max={ 10 }
Expand All @@ -268,7 +293,7 @@ function ShadowPopover({shadow: savedShadow, popoverProps, onClose}) {
<div>
<RangeControl label="Blur"
value={ shadow.blur }
onChange={ ( value ) => onChange( 'blur', value ) }
onChange={ ( value ) => handleChange( 'blur', value ) }
withInputField={ false }
min={ 0 }
max={ 10 }
Expand All @@ -277,7 +302,7 @@ function ShadowPopover({shadow: savedShadow, popoverProps, onClose}) {
<div>
<RangeControl label="Spread"
value={ shadow.spread }
onChange={ ( value ) => onChange( 'spread', value ) }
onChange={ ( value ) => handleChange( 'spread', value ) }
withInputField={ false }
min={ 0 }
max={ 10 }
Expand Down

0 comments on commit 8d1ae96

Please sign in to comment.