Skip to content

Commit 89affc9

Browse files
kaeizenkaeizen
committed
add reset and delete func, rearranged stuff
1 parent 4759205 commit 89affc9

File tree

9 files changed

+152
-108
lines changed

9 files changed

+152
-108
lines changed

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,32 @@
1+
.stk-global-color-scheme__preview__background {
2+
padding: 8px;
3+
flex-shrink: 0;
4+
display: flex;
5+
flex-direction: column;
6+
justify-content: center;
7+
height: 100%;
8+
box-sizing: border-box;
9+
> div {
10+
display: flex;
11+
justify-content: center;
12+
gap: 4px;
13+
}
14+
}
15+
.stk-global-color-scheme__preview__typography {
16+
margin-top: 0;
17+
margin-bottom: 4px;
18+
font-size: 20px;
19+
line-height: normal;
20+
gap: 0 !important;
21+
}
22+
.stk-global-color-scheme__preview__button {
23+
width: 30px;
24+
height: 11px;
25+
flex-shrink: 0;
26+
box-sizing: border-box;
27+
}
28+
129
.stk-preset-color-schemes__preset-wrapper {
2-
border: 1px solid #e0e0e0;
330
display: grid;
431
gap: 4px;
532
grid-template-columns: repeat(2, 1fr);

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button } from '@wordpress/components'
1+
import { Button, BaseControl } from '@wordpress/components'
22

33
export const DEFAULT_COLOR_SCHEME_COLORS = {
44
backgroundColor: { desktop: 'var(--stk-container-background-color, #fff)' },
@@ -49,4 +49,18 @@ const ColorSchemePreview = ( { colors, onClick = NOOP } ) => {
4949
)
5050
}
5151

52+
export const PresetColorSchemesPicker = ( {
53+
label, presets, onPresetClick,
54+
} ) => {
55+
return (
56+
<BaseControl label={ label } >
57+
<div className="stk-preset-color-schemes__preset-wrapper">
58+
{ presets.map( ( colors, index ) => {
59+
return <ColorSchemePreview key={ index } colors={ colors } onClick={ () => onPresetClick( colors ) } />
60+
} ) }
61+
</div>
62+
</BaseControl>
63+
)
64+
}
65+
5266
export default ColorSchemePreview

‎src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ export { default as FontPairPicker } from './font-pair-picker'
121121
export { SectionSettings } from './section-settings'
122122
export {
123123
default as ColorSchemePreview,
124+
PresetColorSchemesPicker,
124125
DEFAULT_COLOR_SCHEME_COLORS,
125126
DEFAULT_BACKGROUND_COLOR_SCHEME_COLORS,
126127
} from './color-scheme-preview'

‎src/components/sortable-picker/editor.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.stk-sortable-picker__item-name {
2+
margin-bottom: 0;
3+
margin-top: 0;
4+
text-align: left;
5+
line-height: normal;
6+
}
7+
8+
.ugb-global-settings-color-picker {
9+
.stk-control__reset-button {
10+
position: unset;
11+
}
12+
.block-editor-panel-color-gradient-settings__dropdown {
13+
max-width: 201px;
14+
}
15+
}

‎src/components/sortable-picker/index.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
} from '@wordpress/components'
2020
import { useState, useEffect } from '@wordpress/element'
2121
import { __ } from '@wordpress/i18n'
22+
import { ResetButton } from '../base-control2/reset-button'
2223

2324
const addItemPopoverProps = {
2425
placement: 'left-start',
@@ -111,6 +112,7 @@ const SortablePicker = props => {
111112
editableName={ editableName }
112113
className={ props.buttonClassName }
113114
onItemClick={ props.onItemClick }
115+
showReset={ props.showResetCallback ? props.showResetCallback( item ) : true }
114116
/> )
115117
) }
116118
{ items?.map( ( item, i ) => (
@@ -158,12 +160,12 @@ const LabeledItemIndicator = props => {
158160
item,
159161
onDelete,
160162
onChange,
161-
onReset = () => {},
162163
ItemPreview = null,
163164
ItemPicker = null,
164165
updateOnBlur = false, // If true, onChange will be called only when the input is blurred.
165166
sortable = true,
166167
editableName = true,
168+
showReset = true,
167169
} = props
168170

169171
const [ isFocused, setIsFocused ] = useState( false )
@@ -260,14 +262,19 @@ const LabeledItemIndicator = props => {
260262
<ItemPicker item={ item } onChange={ onChange } />
261263
) }
262264
/>
263-
<Button
264-
aria-label={ sortable ? 'Delete' : 'Reset' }
265-
className={ sortable ? 'stk-global-settings-color-picker__delete-button' : 'stk-global-settings-sortable-picker__reset-button' }
266-
icon={ sortable ? 'trash' : 'image-rotate' }
265+
{ sortable && <Button
266+
aria-label="Delete"
267+
className="stk-global-settings-color-picker__delete-button"
268+
icon="trash"
267269
isSmall
268270
isTertiary
269-
onClick={ sortable ? onDelete : onReset }
271+
onClick={ onDelete }
272+
/> }
273+
{ ! sortable && <ResetButton
274+
showReset={ showReset }
275+
onChange={ onDelete }
270276
/>
277+
}
271278
</HStack>
272279
)
273280
}

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

Lines changed: 80 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Internal dependencies
33
*/
44
import { hoverState } from '../utils'
5-
import { PresetColorSchemesPicker } from './presetColorSchemes'
5+
import PRESET_COLOR_SCHEMES from './preset-color-schemes.json'
66
/**
77
* External dependencies
88
*/
@@ -13,20 +13,26 @@ import {
1313
ColorPaletteControl,
1414
AdvancedTextControl,
1515
ColorSchemePreview,
16+
PresetColorSchemesPicker,
1617
DEFAULT_COLOR_SCHEME_COLORS,
1718
DEFAULT_BACKGROUND_COLOR_SCHEME_COLORS,
1819
} from '~stackable/components'
1920
import { useBlockHoverState } from '~stackable/hooks'
2021
import { extractColor } from '~stackable/util'
22+
import { cloneDeep, isEqual } from 'lodash'
2123

22-
import { useRef } from '@wordpress/element'
24+
import {
25+
useRef, useState, useEffect,
26+
} from '@wordpress/element'
2327
import { useSelect, dispatch } from '@wordpress/data'
2428
import { models } from '@wordpress/api'
2529
import { __ } from '@wordpress/i18n'
2630
import { applyFilters, doAction } from '@wordpress/hooks'
2731

2832
let saveTimeout = null
2933

34+
const PRESETS = [ ...PRESET_COLOR_SCHEMES ]
35+
3036
const COLOR_SETTINGS = [ {
3137
label: __( 'Background Color', i18n ),
3238
property: 'backgroundColor',
@@ -63,32 +69,54 @@ const ColorSchemePicker = props => {
6369
const { colorSchemes } = useSelect( select => {
6470
const { colorSchemes: _colorSchemes } = select( 'stackable/global-color-schemes' ).getSettings()
6571
return {
66-
colorSchemes: [ ..._colorSchemes ],
72+
colorSchemes: cloneDeep( _colorSchemes ),
6773
}
6874
} )
6975

70-
// console.log( 'colorSchemes', colorSchemes )
76+
const [ subHeaderControls, setSubHeaderControls ] = useState( { showTrash: false, showReset: false } )
7177
const [ currentHoverState ] = useBlockHoverState( { forceUpdateHoverState: true } )
78+
const currentState = `desktop${ hoverState[ currentHoverState ] }`
79+
80+
const showResetButton = item => {
81+
return item.key === 'scheme-default-2'
82+
? ! isEqual( item.colorScheme, DEFAULT_BACKGROUND_COLOR_SCHEME_COLORS )
83+
: ! isEqual( item.colorScheme, DEFAULT_COLOR_SCHEME_COLORS )
84+
}
85+
86+
useEffect( () => {
87+
if ( ! itemInEdit ) {
88+
setSubHeaderControls( { showTrash: false, showReset: false } )
89+
return
90+
}
91+
const controls = {
92+
showTrash: ! itemInEdit.key.startsWith( 'scheme-default' ),
93+
showReset: showResetButton( itemInEdit ),
94+
}
95+
96+
setSubHeaderControls( controls )
97+
}, [ itemInEdit ] )
7298

7399
const customColorSchemes = applyFilters( 'stackable.global-settings.global-color-schemes.custom-color-schemes', [] )
74100

101+
const getDefaultPreviewColors = item => {
102+
return item.key === 'scheme-default-2' ? DEFAULT_BACKGROUND_COLOR_SCHEME_COLORS : DEFAULT_COLOR_SCHEME_COLORS
103+
}
104+
75105
const handleAddItem = () => {
76106
doAction( 'stackable.global-settings.global-color-schemes.custom-color-schemes.add-color-scheme', saveTimeout )
77107
}
78108

79-
const currentState = `desktop${ hoverState[ currentHoverState ] }`
80-
81-
const getDefaultPreviewColors = item => {
82-
return item.key === 'scheme-default-2' ? DEFAULT_BACKGROUND_COLOR_SCHEME_COLORS : DEFAULT_COLOR_SCHEME_COLORS
109+
const onSortEnd = props => {
110+
doAction( 'stackable.global-settings.global-color-schemes.custom-color-schemes.sort-color-schemes', props, saveTimeout )
83111
}
84112

85113
const updateColorSchemes = currentItem => {
86114
clearTimeout( saveTimeout )
87115

88-
const customUpdate = applyFilters( 'stackable.global-settings.global-color-schemes.update-color-schemes', currentItem, saveTimeout )
116+
const customUpdate = applyFilters( 'stackable.global-settings.global-color-schemes.update-color-schemes', false, currentItem, saveTimeout )
89117

90118
if ( ! customUpdate ) {
91-
const updatedColorSchemes = [ ...colorSchemes ]
119+
const updatedColorSchemes = cloneDeep( colorSchemes )
92120
const currentIndex = colorSchemes.findIndex( c => c.key === currentItem.key )
93121
updatedColorSchemes[ currentIndex ] = currentItem
94122

@@ -106,7 +134,7 @@ const ColorSchemePicker = props => {
106134
if ( ! itemInEdit ) {
107135
return
108136
}
109-
const currentItem = { ...itemInEdit }
137+
const currentItem = cloneDeep( itemInEdit )
110138
currentItem.name = name
111139
setItemInEdit( currentItem )
112140

@@ -117,7 +145,7 @@ const ColorSchemePicker = props => {
117145
if ( ! itemInEdit ) {
118146
return
119147
}
120-
const currentItem = { ...itemInEdit }
148+
const currentItem = cloneDeep( itemInEdit )
121149
currentItem.colorScheme[ property ][ currentState ] = color
122150
setItemInEdit( currentItem )
123151

@@ -128,7 +156,7 @@ const ColorSchemePicker = props => {
128156
if ( ! itemInEdit ) {
129157
return
130158
}
131-
const currentItem = { ...itemInEdit }
159+
const currentItem = cloneDeep( itemInEdit )
132160
Object.entries( colors ).forEach( ( [ property, color ] ) => {
133161
currentItem.colorScheme[ property ].desktop = color
134162
} )
@@ -137,6 +165,30 @@ const ColorSchemePicker = props => {
137165
updateColorSchemes( currentItem )
138166
}
139167

168+
const onReset = item => {
169+
// eslint-disable-next-line no-alert
170+
const confirmReset = window.confirm( __( 'Are you sure you want to reset this color scheme to their default values?', i18n ) )
171+
if ( ! confirmReset ) {
172+
return
173+
}
174+
175+
const currentItem = cloneDeep( item )
176+
currentItem.colorScheme = item.key === 'scheme-default-2' ? cloneDeep( DEFAULT_BACKGROUND_COLOR_SCHEME_COLORS ) : cloneDeep( DEFAULT_COLOR_SCHEME_COLORS )
177+
178+
if ( itemInEdit ) {
179+
setItemInEdit( currentItem )
180+
}
181+
updateColorSchemes( currentItem )
182+
}
183+
184+
const onDeleteItem = item => {
185+
const customDelete = applyFilters( 'stackable.global-settings.global-color-schemes.delete-color-scheme', false, item, setItemInEdit, saveTimeout )
186+
187+
if ( ! customDelete ) {
188+
onReset( item )
189+
}
190+
}
191+
140192
const ItemPreview = ( { item, withWrapper = false } ) => {
141193
const defaults = getDefaultPreviewColors( item )
142194

@@ -158,14 +210,6 @@ const ColorSchemePicker = props => {
158210
> { Preview } </div> : Preview
159211
}
160212

161-
const onItemClick = item => {
162-
setItemInEdit( item )
163-
}
164-
165-
const onBack = () => {
166-
setItemInEdit( null )
167-
}
168-
169213
return ( ! itemInEdit ? <SortablePicker
170214
ref={ ref }
171215
{ ...props }
@@ -174,19 +218,23 @@ const ColorSchemePicker = props => {
174218
nonSortableItems={ colorSchemes }
175219
editableName={ false }
176220
// onChangeItem={ onChangeColorScheme }
177-
// onDeleteItem={ onColorSchemeDelete }
221+
onDeleteItem={ onDeleteItem }
178222
handleAddItem={ handleAddItem }
179-
// onSortEnd={ onSortEnd }
223+
onSortEnd={ onSortEnd }
180224
ItemPreview={ ItemPreview }
181225
ItemPicker={ null }
182226
buttonClassName="stk-global-color-scheme__color-scheme-item"
183227
enableAddItem={ isPro }
184-
onItemClick={ onItemClick }
228+
onItemClick={ item => setItemInEdit( item ) }
229+
showResetCallback={ item => showResetButton( item ) }
185230
/> : <>
186231
<InspectorSubHeader
187232
title={ __( 'Editing Color Scheme', i18n ) }
188-
onBack={ onBack }
189-
showTrash={ false }
233+
onBack={ () => setItemInEdit( null ) }
234+
showTrash={ subHeaderControls.showTrash }
235+
showReset={ subHeaderControls.showReset }
236+
onTrash={ () => onDeleteItem( itemInEdit ) }
237+
onReset={ () => onReset( itemInEdit ) }
190238
/>
191239
<div className="stk-global-color-scheme__edit-panel-preview">
192240
<p> { __( 'Editing this scheme will also change all blocks that currently use this color scheme.', i18n ) } </p>
@@ -203,8 +251,13 @@ const ColorSchemePicker = props => {
203251
} }
204252
/>
205253

206-
<PresetColorSchemesPicker onPresetClick={ onPresetClick } />
254+
<PresetColorSchemesPicker
255+
label={ __( 'Preset Color Schemes', i18n ) }
256+
presets={ PRESETS }
257+
onPresetClick={ onPresetClick }
258+
/>
207259
</div>
260+
208261
{ COLOR_SETTINGS.map( ( settings, index ) => (
209262
<ColorPaletteControl
210263
key={ index }

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

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,3 @@
1-
.stk-global-color-scheme__preview__background {
2-
// background-color: gray;
3-
padding: 8px;
4-
flex-shrink: 0;
5-
display: flex;
6-
flex-direction: column;
7-
justify-content: center;
8-
height: 100%;
9-
box-sizing: border-box;
10-
> div {
11-
display: flex;
12-
justify-content: center;
13-
gap: 4px;
14-
}
15-
}
16-
.stk-global-color-scheme__preview__typography {
17-
// color: red;
18-
margin-top: 0;
19-
margin-bottom: 4px;
20-
font-size: 20px;
21-
line-height: normal;
22-
gap: 0 !important;
23-
}
24-
.stk-global-color-scheme__preview__button {
25-
// background-color: blue;
26-
width: 30px;
27-
height: 11px;
28-
flex-shrink: 0;
29-
box-sizing: border-box;
30-
}
31-
321
.stk-global-color-scheme-picker {
332
.ugb-global-settings-color-picker__color-indicators > div {
343
display: flex;

0 commit comments

Comments
 (0)