Skip to content

Commit 8d8414b

Browse files
kaeizenkaeizen
committed
fix issues
- modify color schemes dropdown - fix paddings disappearing when global settings have value
1 parent 2bdccb9 commit 8d8414b

File tree

3 files changed

+70
-56
lines changed

3 files changed

+70
-56
lines changed

‎src/components/design-library-list/design-library-list-item.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { Tooltip } from '~stackable/components'
2323
import {
2424
forwardRef, useEffect, useRef, useState,
2525
} from '@wordpress/element'
26-
import { useSelect } from '@wordpress/data'
26+
import { select, useSelect } from '@wordpress/data'
2727
import { Dashicon } from '@wordpress/components'
2828
import { __ } from '@wordpress/i18n'
2929
import { serialize } from '@wordpress/blocks'
@@ -187,9 +187,18 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
187187

188188
const hostStyles = document.createElement( 'style' )
189189
hostStyles.setAttribute( 'id', 'stk-design-library-styles' )
190-
hostStyles.innerHTML = ! hasBackgroundTargetRef.current
191-
? `body > .stk-block-columns { padding: 75px; } body > .stk-block-background:not(.stk--no-padding) { padding: calc(75px + var(--stk-block-background-padding)); }`
192-
: `[stk-design-library__bg-target="true"] { padding: 25px; } [stk-design-library__bg-target="true"].stk-block-background:not(.stk--no-padding) { padding: calc(25px + var(--stk-block-background-padding)); }`
190+
191+
const blockLayouts = select( 'stackable/global-spacing-and-borders' ).getBlockLayouts()
192+
hostStyles.innerHTML = ! hasBackgroundTargetRef.current ? 'body > .stk-block-columns { padding: 75px; }' : '[stk-design-library__bg-target="true"] { padding: 50px; }'
193+
194+
if ( ( Array.isArray( blockLayouts ) && ! blockLayouts.length ) ||
195+
( typeof blockLayouts === 'object' && ! blockLayouts[ 'block-background-padding' ] )
196+
) {
197+
hostStyles.innerHTML += ! hasBackgroundTargetRef.current
198+
? ` body > .stk-block-background:not(.stk--no-padding) { padding: calc(75px + var(--stk-block-background-padding)); }`
199+
: ` [stk-design-library__bg-target="true"].stk-block-background:not(.stk--no-padding) { padding: calc(26px + var(--stk-block-background-padding)); }`
200+
}
201+
193202
hostStyles.innerHTML += `.stk-block-count-up__text:not(.stk--count-up-active) { opacity: 1; }`
194203
styleNodes.push( hostStyles )
195204

‎src/components/modal-design-library/editor.scss‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -408,17 +408,14 @@ div.ugb-modal-design-library__enable-background {
408408
position: absolute;
409409
right: 60px;
410410
}
411-
.stk-design-library__plan-dropdown, .ugb-modal-design-library__stk-color-scheme-list {
411+
.stk-design-library__plan-dropdown, .ugb-design-library__color-scheme-popover {
412412
--wp-admin-theme-color: #f00069;
413413
--wp-admin-theme-color-darker-10: #{ darken(#f00069, 10%) };
414414
--wp-admin-theme-color-darker-20: #{ darken(#f00069, 20%) };
415415
}
416416

417-
.ugb-modal-design-library__stk-color-scheme-list-wrapper {
418-
max-height: 145px;
419-
}
420417
.ugb-modal-design-library__stk-color-scheme-list {
421-
padding: 0 0 8px;
418+
padding: 8px;
422419
.stk-color-scheme__none {
423420
padding: 8px;
424421
min-height: 30px;
@@ -458,3 +455,27 @@ div.ugb-modal-design-library__enable-background {
458455
.ugb-modal-design-library__style-options-tooltip .stk-tooltip__text a {
459456
display: inline;
460457
}
458+
459+
.ugb-design-library__color-scheme-popover .components-popover__content {
460+
padding: 0;
461+
}
462+
463+
.ugb-modal-design-library__stk-color-scheme-list-header {
464+
display: flex;
465+
justify-content: space-between;
466+
padding: 0;
467+
margin: 0 0 4px;
468+
border-bottom: 1px solid #e0e0e0;
469+
470+
p {
471+
margin: 6px 6px 4px;
472+
font-size: 11px;
473+
font-weight: 500;
474+
}
475+
476+
.components-button.has-icon {
477+
padding: 0;
478+
height: unset;
479+
min-width: unset;
480+
}
481+
}

‎src/components/modal-design-library/modal.js‎

Lines changed: 31 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,7 @@ import {
2626
Spinner,
2727
ToggleControl,
2828
} from '@wordpress/components'
29-
import {
30-
useEffect, useState, useRef,
31-
} from '@wordpress/element'
29+
import { useEffect, useState } from '@wordpress/element'
3230
import { sprintf, __ } from '@wordpress/i18n'
3331
import { useBlockColorSchemes } from '~stackable/hooks'
3432
import ColorSchemePreview from '../color-scheme-preview'
@@ -37,6 +35,7 @@ import Tooltip from '../tooltip'
3735

3836
const PLAN_OPTIONS = [ { key: '', label: __( 'All', i18n ) }, { key: 'free', label: __( 'Free', i18n ) }, { key: 'premium', label: __( 'Premium', i18n ) } ]
3937
const popoverProps = {
38+
className: 'ugb-design-library__color-scheme-popover',
4039
placement: 'right-start',
4140
shift: true,
4241
}
@@ -66,8 +65,6 @@ export const ModalDesignLibrary = props => {
6665
const [ selectedContainerScheme, setSelectedContainerScheme ] = useState( '' )
6766
const [ selectedBackgroundScheme, setSelectedBackgroundScheme ] = useState( '' )
6867

69-
const openDropdownRef = useRef( null )
70-
7168
// For version 4, the default tab is now 'patterns' and for category, we use '' instead of 'All'.
7269
// So we need to update the local storage values here.
7370
useEffect( () => {
@@ -162,17 +159,10 @@ export const ModalDesignLibrary = props => {
162159
onClick={ () => setDoReset( true ) }
163160
/>
164161
<Dropdown
165-
focusOnMount={ false }
166-
renderToggle={ ( { onToggle, onClose } ) => (
162+
focusOnMount="container"
163+
renderToggle={ ( { onToggle } ) => (
167164
<Button
168-
onClick={ () => {
169-
if ( openDropdownRef.current ) {
170-
openDropdownRef.current()
171-
}
172-
173-
openDropdownRef.current = onClose
174-
onToggle()
175-
} }
165+
onClick={ onToggle }
176166
style={ { height: 'auto' } }
177167
icon="arrow-down-alt2"
178168
iconSize={ 12 }
@@ -190,7 +180,6 @@ export const ModalDesignLibrary = props => {
190180
key={ i }
191181
onClick={ () => {
192182
setSelectedPlan( plan )
193-
openDropdownRef.current = null
194183
onClose()
195184
} }
196185
>
@@ -246,17 +235,10 @@ export const ModalDesignLibrary = props => {
246235
<Dropdown
247236
className="ugb-modal-design-library__color-scheme-dropdown"
248237
popoverProps={ popoverProps }
249-
focusOnMount={ false }
250-
renderToggle={ ( { onToggle, onClose } ) => (
238+
focusOnMount="container"
239+
renderToggle={ ( { onToggle } ) => (
251240
<Button
252-
onClick={ () => {
253-
if ( openDropdownRef.current ) {
254-
openDropdownRef.current()
255-
}
256-
257-
openDropdownRef.current = onClose
258-
onToggle()
259-
} }
241+
onClick={ onToggle }
260242
className="ugb-modal-design-library__stk-color-scheme stk-color-scheme__toggle"
261243
>
262244
{ selectedBackgroundScheme !== ''
@@ -266,7 +248,16 @@ export const ModalDesignLibrary = props => {
266248
</Button>
267249
) }
268250
renderContent={ ( { onClose } ) => (
269-
<div className="ugb-modal-design-library__stk-color-scheme-list-wrapper">
251+
<div>
252+
<div className="ugb-modal-design-library__stk-color-scheme-list-header">
253+
<p> { __( 'Background Scheme', i18n ) }</p>
254+
<Button
255+
icon="no"
256+
onClick={ () => {
257+
onClose()
258+
} }
259+
/>
260+
</div>
270261
<div className="ugb-modal-design-library__stk-color-scheme-list">
271262
<Button
272263
className={ `ugb-modal-design-library__stk-color-scheme${ selectedBackgroundScheme === '' ? ' stk-color-scheme__selected' : '' }` }
@@ -275,8 +266,6 @@ export const ModalDesignLibrary = props => {
275266
setEnableBackground( true )
276267
}
277268
setSelectedBackgroundScheme( '' )
278-
openDropdownRef.current = null
279-
onClose()
280269
} }
281270
>
282271
<span className="stk-color-scheme-name stk-color-scheme__none"> { __( 'Default', i18n ) } </span>
@@ -290,9 +279,6 @@ export const ModalDesignLibrary = props => {
290279
setEnableBackground( true )
291280
}
292281
setSelectedBackgroundScheme( key )
293-
294-
openDropdownRef.current = null
295-
onClose()
296282
} }
297283
>
298284
<ColorSchemePreview colors={ scheme.desktopColors } isCollapsed={ true } />
@@ -314,17 +300,10 @@ export const ModalDesignLibrary = props => {
314300
>
315301
<Dropdown
316302
popoverProps={ popoverProps }
317-
focusOnMount={ false }
318-
renderToggle={ ( { onToggle, onClose } ) => (
303+
focusOnMount="container"
304+
renderToggle={ ( { onToggle } ) => (
319305
<Button
320-
onClick={ () => {
321-
if ( openDropdownRef.current ) {
322-
openDropdownRef.current()
323-
}
324-
325-
openDropdownRef.current = onClose
326-
onToggle()
327-
} }
306+
onClick={ onToggle }
328307
className="ugb-modal-design-library__stk-color-scheme stk-color-scheme__toggle"
329308
>
330309
{ selectedContainerScheme !== ''
@@ -334,14 +313,21 @@ export const ModalDesignLibrary = props => {
334313
</Button>
335314
) }
336315
renderContent={ ( { onClose } ) => (
337-
<div className="ugb-modal-design-library__stk-color-scheme-list-wrapper">
316+
<div>
317+
<div className="ugb-modal-design-library__stk-color-scheme-list-header">
318+
<p> { __( 'Container Scheme', i18n ) }</p>
319+
<Button
320+
icon="no"
321+
onClick={ () => {
322+
onClose()
323+
} }
324+
/>
325+
</div>
338326
<div className="ugb-modal-design-library__stk-color-scheme-list">
339327
<Button
340328
className={ `ugb-modal-design-library__stk-color-scheme${ selectedContainerScheme === '' ? ' stk-color-scheme__selected' : '' }` }
341329
onClick={ () => {
342330
setSelectedContainerScheme( '' )
343-
openDropdownRef.current = null
344-
onClose()
345331
} }
346332
>
347333
<span className="stk-color-scheme-name stk-color-scheme__none"> { __( 'Default', i18n ) } </span>
@@ -352,8 +338,6 @@ export const ModalDesignLibrary = props => {
352338
className={ `ugb-modal-design-library__stk-color-scheme${ selectedContainerScheme === key ? ' stk-color-scheme__selected' : '' }` }
353339
onClick={ () => {
354340
setSelectedContainerScheme( key )
355-
openDropdownRef.current = null
356-
onClose()
357341
} }
358342
>
359343
<ColorSchemePreview colors={ scheme.desktopColors } isCollapsed={ true } />

0 commit comments

Comments
 (0)