Skip to content

Commit 0805879

Browse files
kaeizenkaeizen
committed
update preset picker, add duplicate fx
1 parent 0c5c666 commit 0805879

File tree

9 files changed

+119
-24
lines changed

9 files changed

+119
-24
lines changed

‎src/components/color-scheme-preview/editor.scss‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,44 @@
2020
gap: 0 !important;
2121
}
2222
.stk-global-color-scheme__preview__button {
23-
width: 30px;
24-
height: 11px;
23+
width: 20px;
24+
height: 8px;
2525
flex-shrink: 0;
2626
box-sizing: border-box;
2727
}
28+
.stk-global-color-scheme__preview__circle {
29+
width: 8px;
30+
height: 8px;
31+
flex-shrink: 0;
32+
box-sizing: border-box;
33+
border-radius: 100px;
34+
}
2835

36+
.stk-preset-color-schemes__control {
37+
margin-bottom: 12px;
38+
.components-base-control__field {
39+
display: flex;
40+
justify-content: space-between;
41+
align-items: center;
42+
}
43+
.components-base-control__label {
44+
margin-bottom: 0;
45+
}
46+
}
47+
48+
.stk-preset-color-schemes__popover {
49+
width: 240px;
50+
height: 300px;
51+
overflow-y: scroll;
52+
margin: -8px;
53+
padding: 16px 12px 8px;
54+
}
2955
.stk-preset-color-schemes__preset-wrapper {
3056
display: grid;
31-
gap: 4px;
57+
gap: 8px;
3258
grid-template-columns: repeat(2, 1fr);
33-
margin-bottom: 16px;
59+
60+
.stk-global-color-scheme__preview__background {
61+
outline: 1px solid #e0e0e0;
62+
}
3463
}

‎src/components/color-scheme-preview/index.js‎

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { Button, BaseControl } from '@wordpress/components'
1+
import {
2+
Button, BaseControl, Dropdown,
3+
} from '@wordpress/components'
24

35
export const DEFAULT_COLOR_SCHEME_COLORS = {
46
backgroundColor: { desktop: '' },
@@ -39,21 +41,57 @@ const ColorSchemePreview = ( { colors, onClick = NOOP } ) => {
3941
borderColor: `${ colors?.buttonOutlineColor || colors?.buttonBackgroundColor || 'var(--stk-button-background-color)' }`,
4042
} }
4143
/>
44+
<div
45+
className="stk-global-color-scheme__preview__circle"
46+
style={ { backgroundColor: `${ colors?.linkColor || colors?.textColor || 'var(--stk-container-color)' }` } }
47+
/>
48+
<div
49+
className="stk-global-color-scheme__preview__circle"
50+
style={ { backgroundColor: `${ colors?.accentColor || 'var(--stk-icon-color)' }` } }
51+
/>
4252
</div>
4353
</TagName>
4454
)
4555
}
4656

57+
const popoverProps = {
58+
placement: 'left-start',
59+
offset: 245,
60+
shift: true,
61+
}
62+
4763
export const PresetColorSchemesPicker = ( {
4864
label, presets, onPresetClick,
4965
} ) => {
5066
return (
51-
<BaseControl label={ label } >
52-
<div className="stk-preset-color-schemes__preset-wrapper">
53-
{ presets.map( ( colors, index ) => {
54-
return <ColorSchemePreview key={ index } colors={ colors } onClick={ () => onPresetClick( colors ) } />
55-
} ) }
56-
</div>
67+
<BaseControl label={ label } className="stk-preset-color-schemes__control">
68+
<Dropdown
69+
popoverProps={ popoverProps }
70+
focusOnMount={ false }
71+
renderToggle={ ( { onToggle, isOpen } ) => (
72+
<Button
73+
className="ugb-global-settings-color-picker__add-button"
74+
onClick={ onToggle }
75+
icon="screenoptions"
76+
iconPosition="right"
77+
aria-expanded={ isOpen }
78+
size="small"
79+
variant="tertiary"
80+
/>
81+
) }
82+
renderContent={ ( { onClose } ) => (
83+
<BaseControl label={ label } className="stk-preset-color-schemes__popover">
84+
<div className="stk-preset-color-schemes__preset-wrapper">
85+
{ presets.map( ( colors, index ) => {
86+
return <ColorSchemePreview key={ index } colors={ colors } onClick={ () => {
87+
onPresetClick( colors )
88+
onClose()
89+
} } />
90+
} ) }
91+
</div>
92+
</BaseControl>
93+
) }
94+
/>
5795
</BaseControl>
5896
)
5997
}

‎src/components/inspector-sub-header/editor.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
justify-content: space-between;
44
align-items: center;
55
gap: 8px;
6+
margin-bottom: 12px;
67
.components-base-control__label {
78
flex: 1;
89
margin: 0;
@@ -16,4 +17,7 @@
1617
font-size: 12px;
1718
}
1819
}
20+
.stk-inspector-sub-header__duplicate .dashicon {
21+
font-size: 16px;
22+
}
1923
}

‎src/components/inspector-sub-header/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ const InspectorSubHeader = props => {
99
onBack = NOOP,
1010
onTrash = NOOP,
1111
onReset = NOOP,
12+
onDuplicate = NOOP,
1213
title = '',
1314
showTrash = true,
1415
showReset = false,
16+
showDuplicate = false,
1517
} = props
1618
return (
1719
<div className="stk-inspector-sub-header">
@@ -21,6 +23,15 @@ const InspectorSubHeader = props => {
2123
onClick={ onBack }
2224
/>
2325
<h2 className="components-base-control__label">{ title }</h2>
26+
{ showDuplicate && (
27+
<Button
28+
className="stk-inspector-sub-header__duplicate"
29+
size="small"
30+
icon="admin-page"
31+
alt={ __( 'Duplicate', i18n ) }
32+
onClick={ onDuplicate }
33+
/>
34+
) }
2435
{ showTrash && (
2536
<Button
2637
className="stk-inspector-sub-header__trash"

‎src/plugins/global-settings/color-schemes/color-scheme-picker.js‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,8 @@ const ColorSchemePicker = props => {
9797
const customColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', [] )
9898

9999
// Add a custom color scheme
100-
const handleAddItem = () => {
101-
doAction( 'stackable.global-settings.global-color-schemes.custom-color-schemes.add-color-scheme', saveTimeout )
100+
const handleAddItem = ( scheme = null ) => {
101+
doAction( 'stackable.global-settings.global-color-schemes.custom-color-schemes.add-color-scheme', scheme, setItemInEdit, saveTimeout )
102102
}
103103

104104
// For sorting custom color schemes
@@ -192,13 +192,22 @@ const ColorSchemePicker = props => {
192192
}
193193
}
194194

195+
const onDuplicate = item => {
196+
// eslint-disable-next-line no-alert
197+
const confirmDuplicate = window.confirm( __( 'Do you want to duplicate this color scheme?', i18n ) )
198+
199+
if ( confirmDuplicate ) {
200+
handleAddItem( item )
201+
}
202+
}
203+
195204
// If the property does not have a value for hover/parent-hover states, return the desktop value
196205
const getInheritedValue = property => {
197-
if ( property[ currentState ] ) {
206+
if ( property?.[ currentState ] ) {
198207
return property[ currentState ]
199208
}
200209

201-
return property.desktop
210+
return property?.desktop
202211
}
203212

204213
const ItemPreview = ( { item, withWrapper = false } ) => {
@@ -221,6 +230,8 @@ const ColorSchemePicker = props => {
221230
backgroundColor: backgroundColorStyle,
222231
headingColor: getInheritedValue( item.colorScheme.headingColor ) || defaults.headingColor.desktop,
223232
textColor: getInheritedValue( item.colorScheme.textColor ) || defaults.textColor.desktop,
233+
linkColor: getInheritedValue( item.colorScheme.linkColor ) || defaults.linkColor.desktop,
234+
accentColor: getInheritedValue( item.colorScheme.accentColor ) || defaults.accentColor.desktop,
224235
buttonBackgroundColor: getInheritedValue( item.colorScheme.buttonBackgroundColor ) || defaults.buttonBackgroundColor.desktop,
225236
buttonOutlineColor: getInheritedValue( item.colorScheme.buttonOutlineColor ) || defaults.buttonOutlineColor.desktop,
226237
}
@@ -251,12 +262,14 @@ const ColorSchemePicker = props => {
251262
showResetCallback={ item => showResetButton( item ) }
252263
/> : <>
253264
<InspectorSubHeader
254-
title={ __( 'Editing Color Scheme', i18n ) }
265+
title={ __( 'Edit Color Scheme', i18n ) }
255266
onBack={ () => setItemInEdit( null ) }
256267
showTrash={ subHeaderControls.showTrash }
257268
showReset={ subHeaderControls.showReset }
269+
showDuplicate={ isPro }
258270
onTrash={ () => onDeleteItem( itemInEdit ) }
259271
onReset={ () => onReset( itemInEdit ) }
272+
onDuplicate={ () => onDuplicate( itemInEdit ) }
260273
/>
261274
<div className="stk-global-color-scheme__edit-panel-preview">
262275
<p> { __( 'Editing this scheme will also change all blocks that currently use this color scheme.', i18n ) } </p>

‎src/plugins/global-settings/color-schemes/editor.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,9 @@
2424
outline: 1px solid #e0e0e0;
2525
margin-bottom: 16px;
2626
padding: 8px;
27+
28+
.stk-global-color-scheme__preview__background {
29+
padding: 0;
30+
transform: scale(1.3);
31+
}
2732
}

‎src/plugins/global-settings/color-schemes/index.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,7 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/global-color-scheme
2828
return (
2929
<Fragment>
3030
{ output }
31-
<PanelAdvancedSettings
32-
title={ __( 'Global Color Schemes', i18n ) }
33-
initialOpen={ true }
34-
>
31+
<PanelAdvancedSettings title={ __( 'Global Color Schemes', i18n ) }>
3532
{ ! itemInEdit && <p className="components-base-control__help">
3633
{ __( 'Color schemes are applied to all blocks and sections of your entire website.', i18n ) }
3734
&nbsp;

‎src/plugins/global-settings/color-schemes/index.php‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,8 +202,6 @@ public function add_global_color_schemes_styles( $current_css ) {
202202
);
203203
}
204204

205-
206-
error_log( print_r( $styles, true ));
207205
$generated_css = wp_style_engine_get_stylesheet_from_css_rules( $styles );
208206
if ( $generated_css != '' ) {
209207
$current_css .= "\n/* Global Color Schemes */\n";

‎src/plugins/global-settings/color-schemes/preset-color-schemes.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
"backgroundColor": "#e3e2df",
2424
"headingColor": "#5d001e",
2525
"textColor": "#5d001e",
26-
"linkColor": "#ee4c77c",
27-
"accentColor": "#ee4c77c",
26+
"linkColor": "#ee4c7c",
27+
"accentColor": "#ee4c7c",
2828
"buttonBackgroundColor": "#9a1750",
2929
"buttonTextColor": "#e3e2df",
3030
"buttonOutlineColor": "#9a1750"

0 commit comments

Comments
 (0)