diff --git a/src/controls/border-color-control.tsx b/src/controls/border-color-control.tsx index ce1d051..ddaa41c 100644 --- a/src/controls/border-color-control.tsx +++ b/src/controls/border-color-control.tsx @@ -39,10 +39,10 @@ type Props = { help?: string; onChange: ( event: any ) => void; values: { - top?: Property.BorderTopColor; - right?: Property.BorderRightColor; - bottom?: Property.BorderBottomColor; - left?: Property.BorderLeftColor; + top?: Property.Color; + right?: Property.Color; + bottom?: Property.Color; + left?: Property.Color; }; }; diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx index e332104..e8d7ba6 100644 --- a/src/controls/color-control.tsx +++ b/src/controls/color-control.tsx @@ -18,8 +18,8 @@ import { FlexItem, Popover, ColorPalette, - __experimentalVStack as VStack, __experimentalSpacer as Spacer, + __experimentalVStack as VStack, __experimentalText as Text, } from '@wordpress/components'; import { store as blockEditorStore } from '@wordpress/block-editor'; diff --git a/src/settings/global-settings/setting-modal.tsx b/src/settings/global-settings/setting-modal.tsx index 6d2f1ec..6da94bf 100644 --- a/src/settings/global-settings/setting-modal.tsx +++ b/src/settings/global-settings/setting-modal.tsx @@ -24,6 +24,7 @@ import { __experimentalSpacer as Spacer, __experimentalHStack as HStack, __experimentalVStack as VStack, + __experimentalHeading as Heading, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalToggleGroupControl as ToggleGroupControl, @@ -192,585 +193,600 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo className="ftb-global-setting-modal" onRequestClose={ () => setIsSettingModalOpen( false ) } > - { isWaiting && ( -
- -
- ) } - - { ( { name } ) => ( - <> - { name === 'table' && ( - <> -

{ __( 'Default table styles', 'flexible-table-block' ) }

-
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - table_width: sanitizeUnitValue( value ), - }, - } ); - } } - size="__unstable-large" - __unstableInputWidth="110px" - /> + + { isWaiting && ( + + + + ) } + + { ( { name } ) => ( + <> + { name === 'table' && ( + + + { __( 'Default table styles', 'flexible-table-block' ) } + +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + table_width: sanitizeUnitValue( value ), + }, + } ); + } } + size="__unstable-large" + __unstableInputWidth="110px" + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + table_max_width: sanitizeUnitValue( value ), + }, + } ); + } } + size="__unstable-large" + __unstableInputWidth="100px" + /> +
+
+ { + const isAllowedValue = ( + _value: any + ): _value is Properties[ 'borderCollapse' ] => { + return ( + ! value || + BORDER_COLLAPSE_CONTROLS.some( + ( control ) => control.value === _value + ) + ); + }; + if ( isAllowedValue( value ) ) { + const newValue = + currentOptions?.block_style?.table_border_collapse === value + ? undefined + : value; + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + table_border_collapse: newValue, + }, + } ); + } + } } + > + { BORDER_COLLAPSE_CONTROLS.map( ( { icon, label, value } ) => ( + + ) ) } + +
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - table_max_width: sanitizeUnitValue( value ), - }, - } ); - } } - size="__unstable-large" - __unstableInputWidth="110px" - /> + + { __( 'Default striped table styles', 'flexible-table-block' ) } + +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + row_odd_color: value, + }, + } ); + } } + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + row_even_color: value, + }, + } ); + } } + /> +
-
- { - const isAllowedValue = ( - _value: any - ): _value is Properties[ 'borderCollapse' ] => { - return ( - ! value || - BORDER_COLLAPSE_CONTROLS.some( ( control ) => control.value === _value ) - ); - }; - if ( isAllowedValue( value ) ) { + + ) } + { name === 'cell' && ( + + + { __( 'Default cell styles', 'flexible-table-block' ) } + +
+
+ th tag )', 'flexible-table-block' ), + { code: } + ) } + value={ currentOptions.block_style?.cell_text_color_th } + onChange={ ( value ) => { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_text_color_th: value, + }, + } ); + } } + /> +
+
+ td tag )', 'flexible-table-block' ), + { code: } + ) } + value={ currentOptions.block_style?.cell_text_color_td } + onChange={ ( value ) => { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_text_color_td: value, + }, + } ); + } } + /> +
+
+ th tag )', + 'flexible-table-block' + ), + { code: } + ) } + value={ currentOptions.block_style?.cell_background_color_th } + onChange={ ( value ) => { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_background_color_th: value, + }, + } ); + } } + /> +
+
+ td tag )', + 'flexible-table-block' + ), + { code: } + ) } + value={ currentOptions.block_style?.cell_background_color_td } + onChange={ ( value ) => { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_background_color_td: value, + }, + } ); + } } + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_padding: cleanEmptyObject( values ), + }, + } ); + } } + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_border_width: sanitizeUnitValue( value.top ), + }, + } ); + } } + /> +
+
+ { + const newValue = + currentOptions?.block_style?.cell_border_style === value.top + ? undefined + : value.top; + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_border_style: newValue, + }, + } ); + } } + /> +
+
+ { + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_border_color: value, + }, + } ); + } } + /> +
+
+ { + if ( typeof value !== 'string' && value !== undefined ) { + return; + } const newValue = - currentOptions?.block_style?.table_border_collapse === value + currentOptions?.block_style?.cell_text_align === value ? undefined : value; setCurrentOptions( { ...currentOptions, block_style: { ...currentOptions.block_style, - table_border_collapse: newValue, + cell_text_align: newValue, }, } ); - } - } } - > - { BORDER_COLLAPSE_CONTROLS.map( ( { icon, label, value } ) => ( - - ) ) } - + } } + > + { TEXT_ALIGNMENT_CONTROLS.map( ( { icon, label, value } ) => ( + + ) ) } + +
+
+ { + if ( typeof value !== 'string' && value !== undefined ) { + return; + } + const newValue = + currentOptions?.block_style?.cell_vertical_align === value + ? undefined + : value; + setCurrentOptions( { + ...currentOptions, + block_style: { + ...currentOptions.block_style, + cell_vertical_align: newValue, + }, + } ); + } } + > + { VERTICAL_ALIGNMENT_CONTROLS.map( ( { icon, label, value } ) => ( + + ) ) } + +
-
-

{ __( 'Default striped table styles', 'flexible-table-block' ) }

-
-
- + ) } + { name === 'responsive' && ( + + + { __( 'Responsive breakpoint (px)', 'flexible-table-block' ) } + + { + setCurrentOptions( { + ...currentOptions, + breakpoint: value ? value : DEFAULT_RESPONSIVE_BREAKPOINT, + } ); + } } + __next40pxDefaultSize + __nextHasNoMarginBottom + /> + + ) } + { name === 'options' && ( + + { + setCurrentOptions( { + ...currentOptions, + show_label_on_section: value, + } ); + } } + __nextHasNoMarginBottom + /> + { + setCurrentOptions( { + ...currentOptions, + show_control_button: value, + } ); + } } + __nextHasNoMarginBottom + /> + { ( currentOptions.show_label_on_section || + currentOptions.show_control_button ) && ( + { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - row_odd_color: value, - }, - } ); - } } - /> -
-
- { setCurrentOptions( { ...currentOptions, - block_style: { - ...currentOptions.block_style, - row_even_color: value, - }, + focus_control_button: value, } ); } } - /> -
-
- - ) } - { name === 'cell' && ( - <> -

{ __( 'Default cell styles', 'flexible-table-block' ) }

-
-
- th tag )', 'flexible-table-block' ), - { code: } - ) } - value={ currentOptions.block_style?.cell_text_color_th } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_text_color_th: value, - }, - } ); - } } - /> -
-
- td tag )', 'flexible-table-block' ), - { code: } - ) } - value={ currentOptions.block_style?.cell_text_color_td } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_text_color_td: value, - }, - } ); - } } - /> -
-
- th tag )', - 'flexible-table-block' - ), - { code: } - ) } - value={ currentOptions.block_style?.cell_background_color_th } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_background_color_th: value, - }, - } ); - } } - /> -
-
- td tag )', - 'flexible-table-block' - ), - { code: } - ) } - value={ currentOptions.block_style?.cell_background_color_td } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_background_color_td: value, - }, - } ); - } } - /> -
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_padding: cleanEmptyObject( values ), - }, - } ); - } } - /> -
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_border_width: sanitizeUnitValue( value.top ), - }, - } ); - } } - /> -
-
- { - const newValue = - currentOptions?.block_style?.cell_border_style === value.top - ? undefined - : value.top; - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_border_style: newValue, - }, - } ); - } } - /> -
-
- { - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_border_color: value, - }, - } ); - } } - /> -
-
- { - if ( typeof value !== 'string' && value !== undefined ) { - return; - } - const newValue = - currentOptions?.block_style?.cell_text_align === value - ? undefined - : value; - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_text_align: newValue, - }, - } ); - } } - > - { TEXT_ALIGNMENT_CONTROLS.map( ( { icon, label, value } ) => ( - - ) ) } - -
-
- { - if ( typeof value !== 'string' && value !== undefined ) { - return; - } - const newValue = - currentOptions?.block_style?.cell_vertical_align === value - ? undefined - : value; - setCurrentOptions( { - ...currentOptions, - block_style: { - ...currentOptions.block_style, - cell_vertical_align: newValue, - }, - } ); - } } - > - { VERTICAL_ALIGNMENT_CONTROLS.map( ( { icon, label, value } ) => ( - - ) ) } - -
-
- - ) } - { name === 'responsive' && ( - <> -

{ __( 'Responsive breakpoint (px)', 'flexible-table-block' ) }

- { - setCurrentOptions( { - ...currentOptions, - breakpoint: value ? value : DEFAULT_RESPONSIVE_BREAKPOINT, - } ); - } } - __next40pxDefaultSize - __nextHasNoMarginBottom - /> - - ) } - { name === 'options' && ( - <> - { - setCurrentOptions( { - ...currentOptions, - show_label_on_section: value, - } ); - } } - __nextHasNoMarginBottom - /> - ) } - checked={ !! currentOptions.show_control_button } - onChange={ ( value ) => { - setCurrentOptions( { - ...currentOptions, - show_control_button: value, - } ); - } } - __nextHasNoMarginBottom - /> - { ( currentOptions.show_label_on_section || - currentOptions.show_control_button ) && ( { setCurrentOptions( { ...currentOptions, - focus_control_button: value, + show_dot_on_th: value, } ); } } __nextHasNoMarginBottom /> - ) } - { - setCurrentOptions( { - ...currentOptions, - show_dot_on_th: value, - } ); - } } - __nextHasNoMarginBottom - /> - { - setCurrentOptions( { - ...currentOptions, - tab_move: value, - } ); - } } - __nextHasNoMarginBottom - /> - { - setCurrentOptions( { - ...currentOptions, - merge_content: value, - } ); - } } - __nextHasNoMarginBottom - /> - { isAdministrator && ( { + setCurrentOptions( { + ...currentOptions, + tab_move: value, + } ); + } } + __nextHasNoMarginBottom + /> + { setCurrentOptions( { ...currentOptions, - show_global_setting: value, + merge_content: value, } ); } } __nextHasNoMarginBottom /> - ) } - - ) } - - ) } - - { noticeInfo?.status && noticeInfo?.message && ( - { - setNoticeInfo( undefined ); - focusModal(); - } } - > - { noticeInfo.message } - - ) } -
- - - - - - + { isAdministrator && ( + { + setCurrentOptions( { + ...currentOptions, + show_global_setting: value, + } ); + } } + __nextHasNoMarginBottom + /> + ) } + + ) } + ) } - -
+ + { noticeInfo?.status && noticeInfo?.message && ( + { + setNoticeInfo( undefined ); + focusModal(); + } } + > + { noticeInfo.message } + + ) } + + + + + + + + + ) } + + + + { /* @ts-ignore Slot is not currently typed on Popover */ } + ); } diff --git a/src/settings/global-settings/style.scss b/src/settings/global-settings/style.scss index 443852a..8b327eb 100644 --- a/src/settings/global-settings/style.scss +++ b/src/settings/global-settings/style.scss @@ -12,46 +12,6 @@ @media (min-width: 960px) { height: 75%; } - - h2 { - margin-top: 2em; - margin-bottom: 1em; - font-size: 0.9rem; - - &:first-of-type { - margin-top: 0; - } - } - - hr { - margin: 1em 0; - } - - .components-modal__content { - padding-bottom: 40px; - margin-bottom: 60px; - } - - .components-toggle-control { - margin-bottom: 16px; - - .components-base-control__help { - margin-top: 0; - margin-left: 48px; - } - } - - .components-range-control__mark { - background-color: #d7dade; - } - - .components-range-control__mark-label { - color: currentColor; - } - - .components-disabled label { - opacity: 0.3; - } } .ftb-global-setting-modal__tab-panel { @@ -119,28 +79,11 @@ } } -.ftb-global-setting-modal__styles-color { - position: relative; - padding-left: 28px; - - .component-color-indicator { - position: absolute; - top: 50%; - left: 0; - margin-top: -8px; - margin-left: 0; - } -} - .ftb-global-setting-modal__buttons { position: absolute; bottom: 0; left: 0; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - height: 60px; + height: 56px; padding: 0 24px; background: #fff; } @@ -155,34 +98,12 @@ bottom: 60px; left: 24px; z-index: 6; - padding-top: 0; - padding-bottom: 0; - margin: 0; - - &.is-dismissible { - padding-right: 8px; - - svg { - width: 16px; - height: 16px; - } - } - - .components-button { - align-self: center; - } } .ftb-global-setting-modal__loading { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + inset: 0; z-index: 5; - display: flex; - align-items: center; - justify-content: center; background: rgba(0, 0, 0, 0.2); }