Skip to content

Commit

Permalink
Refactor Global Setting Modal with wordpress components
Browse files Browse the repository at this point in the history
  • Loading branch information
@t-hamano
t-hamano committed Oct 20, 2024
1 parent 5a060b9 commit b82f350
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 145 deletions.
183 changes: 129 additions & 54 deletions src/settings/global-settings/setting-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useDispatch } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
import {
Button,
Flex,
Notice,
Modal,
Popover,
Expand All @@ -24,6 +25,7 @@ import {
__experimentalSpacer as Spacer,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
__experimentalHeading as Heading,
__experimentalUnitControl as UnitControl,
__experimentalUseCustomUnits as useCustomUnits,
__experimentalToggleGroupControl as ToggleGroupControl,
Expand Down Expand Up @@ -193,9 +195,9 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
onRequestClose={ () => setIsSettingModalOpen( false ) }
>
{ isWaiting && (
<div className="ftb-global-setting-modal__loading">
<HStack justify="center" className="ftb-global-setting-modal__loading">
<Spinner />
</div>
</HStack>
) }
<TabPanel
className="ftb-global-setting-modal__tab-panel"
Expand All @@ -220,12 +222,18 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
] }
>
{ ( { name } ) => (
<>
<Spacer marginBottom={ 22 }>
{ name === 'table' && (
<>
<h2>{ __( 'Default table styles', 'flexible-table-block' ) }</h2>
<div className="ftb-global-setting-modal__styles">
<div className="ftb-global-setting-modal__styles-item">
<VStack spacing={ 4 }>
<Heading level={ 5 }>
{ __( 'Default table styles', 'flexible-table-block' ) }
</Heading>
<Flex wrap align="stretch">
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<UnitControl
label={ __( 'Table width', 'flexible-table-block' ) }
units={ tableWidthUnits }
Expand All @@ -243,8 +251,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
size="__unstable-large"
__unstableInputWidth="110px"
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<UnitControl
label={ __( 'Table max width', 'flexible-table-block' ) }
units={ tableWidthUnits }
Expand All @@ -262,8 +274,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
size="__unstable-large"
__unstableInputWidth="110px"
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ToggleGroupControl
__nextHasNoMarginBottom
label={ __( 'Cell borders', 'flexible-table-block' ) }
Expand Down Expand Up @@ -302,11 +318,17 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
/>
) ) }
</ToggleGroupControl>
</div>
</div>
<h2>{ __( 'Default striped table styles', 'flexible-table-block' ) }</h2>
<div className="ftb-global-setting-modal__styles">
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
</Flex>
<Heading level={ 5 }>
{ __( 'Default striped table styles', 'flexible-table-block' ) }
</Heading>
<Flex wrap align="stretch">
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ColorControl
label={ __(
'Striped style background color ( odd rows )',
Expand All @@ -323,8 +345,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ColorControl
label={ __(
'Striped style background color ( even rows )',
Expand All @@ -341,15 +367,21 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
</div>
</>
</Spacer>
</Flex>
</VStack>
) }
{ name === 'cell' && (
<>
<h2>{ __( 'Default cell styles', 'flexible-table-block' ) }</h2>
<div className="ftb-global-setting-modal__styles">
<div className="ftb-global-setting-modal__styles-item">
<VStack spacing={ 4 }>
<Heading level={ 5 }>
{ __( 'Default cell styles', 'flexible-table-block' ) }
</Heading>
<Flex wrap align="stretch">
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ColorControl
label={ createInterpolateElement(
__( 'Cell text color ( <code>th</code> tag )', 'flexible-table-block' ),
Expand All @@ -366,8 +398,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ColorControl
label={ createInterpolateElement(
__( 'Cell text color ( <code>td</code> tag )', 'flexible-table-block' ),
Expand All @@ -384,8 +420,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ColorControl
label={ createInterpolateElement(
__(
Expand All @@ -405,8 +445,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ColorControl
label={ createInterpolateElement(
__(
Expand All @@ -426,8 +470,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<PaddingControl
label={ __( 'Cell padding', 'flexible-table-block' ) }
values={ currentOptions?.block_style.cell_padding || {} }
Expand All @@ -441,8 +489,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<BorderWidthControl
label={ __( 'Cell border width', 'flexible-table-block' ) }
values={ { top: currentOptions.block_style?.cell_border_width } }
Expand All @@ -458,8 +510,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<BorderStyleControl
label={ __( 'Cell border style', 'flexible-table-block' ) }
values={ { top: currentOptions.block_style?.cell_border_style } }
Expand All @@ -479,8 +535,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ColorControl
label={ __( 'Cell border color', 'flexible-table-block' ) }
value={ currentOptions.block_style?.cell_border_color }
Expand All @@ -494,8 +554,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
} );
} }
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ToggleGroupControl
__nextHasNoMarginBottom
label={ __( 'Cell text alignment', 'flexible-table-block' ) }
Expand Down Expand Up @@ -527,8 +591,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
/>
) ) }
</ToggleGroupControl>
</div>
<div className="ftb-global-setting-modal__styles-item">
</Spacer>
<Spacer
padding={ 2 }
marginBottom={ 0 }
className="ftb-global-setting-modal__styles-item"
>
<ToggleGroupControl
__nextHasNoMarginBottom
label={ __( 'Cell vertical alignment', 'flexible-table-block' ) }
Expand Down Expand Up @@ -560,13 +628,15 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
/>
) ) }
</ToggleGroupControl>
</div>
</div>
</>
</Spacer>
</Flex>
</VStack>
) }
{ name === 'responsive' && (
<>
<h2>{ __( 'Responsive breakpoint (px)', 'flexible-table-block' ) }</h2>
<VStack spacing={ 4 }>
<Heading level={ 5 }>
{ __( 'Responsive breakpoint (px)', 'flexible-table-block' ) }
</Heading>
<RangeControl
id="flexible-table-block-global-breakpoint"
help={ __(
Expand All @@ -592,10 +662,10 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
__next40pxDefaultSize
__nextHasNoMarginBottom
/>
</>
</VStack>
) }
{ name === 'options' && (
<>
<VStack spacing={ 4 }>
<ToggleControl
label={ __( 'Show section labels', 'flexible-table-block' ) }
help={ __(
Expand Down Expand Up @@ -712,9 +782,9 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
__nextHasNoMarginBottom
/>
) }
</>
</VStack>
) }
</>
</Spacer>
) }
</TabPanel>
{ noticeInfo?.status && noticeInfo?.message && (
Expand All @@ -729,7 +799,12 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
{ noticeInfo.message }
</Notice>
) }
<div className="ftb-global-setting-modal__buttons">
<Spacer
as={ HStack }
marginBottom={ 0 }
paddingX={ 6 }
className="ftb-global-setting-modal__buttons"
>
<Button
variant="primary"
disabled={ isWaiting }
Expand Down Expand Up @@ -770,7 +845,7 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
</Popover>
) }
</Button>
</div>
</Spacer>
</Modal>
);
}
Loading

0 comments on commit b82f350

Please sign in to comment.