Skip to content

Commit

Permalink
Pass only modified color-palette styles
Browse files Browse the repository at this point in the history
  • Loading branch information
Antonis Lilis committed Jul 15, 2020
1 parent 7aec919 commit a152a4a
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 27 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ function MediaPlaceholder( props ) {
multiple,
value = [],
children,
customEmptyStateContainer,
customEmptyStateTitle,
customEmptyStateContainerStyles,
customEmptyStateTitleStyles,
} = props;

// use ref to keep media array current for callbacks during rerenders
Expand Down Expand Up @@ -94,7 +94,7 @@ function MediaPlaceholder( props ) {
}

const emptyStateTitleStyle = getStylesFromColorScheme(
[ styles.emptyStateTitle, props.customEmptyStateTitle ],
[ styles.emptyStateTitle, customEmptyStateTitleStyles ],
styles.emptyStateTitleDark
);
const addMediaButtonStyle = getStylesFromColorScheme(
Expand Down Expand Up @@ -137,7 +137,7 @@ function MediaPlaceholder( props ) {
styles.appenderDark
);
const emptyStateContainerStyle = getStylesFromColorScheme(
[ styles.emptyStateContainer, props.customEmptyStateContainer ],
[ styles.emptyStateContainer, customEmptyStateContainerStyles ],
styles.emptyStateContainerDark
);

Expand Down
11 changes: 8 additions & 3 deletions packages/block-library/src/cover/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -346,10 +346,10 @@ const Cover = ( {
return (
<View>
<MediaPlaceholder
customEmptyStateContainer={
customEmptyStateContainerStyles={
styles.mediaPlaceholderEmptyStateContainer
}
customEmptyStateTitle={
customEmptyStateTitleStyles={
styles.mediaPlaceholderEmptyStateTitle
}
icon={ placeholderIcon }
Expand All @@ -362,7 +362,12 @@ const Cover = ( {
>
<View style={ styles.colorPaletteWrapper }>
<ColorPalette
customStyles={ styles }
customColorIndicatorStyles={
styles.paletteColorIndicator
}
customIndicatorWrapperStyles={
styles.paletteCustomIndicatorWrapper
}
setColor={ setColor }
onCustomPress={ noop }
defaultSettings={ coverDefaultPalette }
Expand Down
17 changes: 5 additions & 12 deletions packages/block-library/src/cover/style.native.scss
Original file line number Diff line number Diff line change
Expand Up @@ -80,21 +80,14 @@
min-height: 58px;
}

.contentContainer {
flex-direction: row;
padding: 0 $grid-unit-20;
}

.container {
padding-bottom: $grid-unit-20;
}

.colorIndicator {
.paletteColorIndicator {
margin-top: 0;
margin-bottom: 0;
width: 32px;
height: 32px;
}

.customIndicatorWrapper {
.paletteCustomIndicatorWrapper {
flex-direction: row;
align-items: center;
width: 32px;
Expand All @@ -108,4 +101,4 @@
.mediaPlaceholderEmptyStateTitle {
margin-top: 4;
margin-bottom: 16;
}
}
29 changes: 21 additions & 8 deletions packages/components/src/color-palette/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
/**
* Internal dependencies
*/
import defaultStyles from './style.scss';
import styles from './style.scss';
import ColorIndicator from '../color-indicator';
import { colorsUtils } from '../mobile/color-settings/utils';
import { performLayoutAnimation } from '../mobile/layout-animation';
Expand All @@ -42,10 +42,9 @@ function ColorPalette( {
shouldEnableBottomSheetScroll,
shouldShowCustomIndicatorOption = true,
shouldShowCustomLabel = true,
customStyles,
customColorIndicatorStyles,
customIndicatorWrapperStyles,
} ) {
const styles = customStyles === undefined ? defaultStyles : customStyles;

const customSwatchGradients = [
'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)',
'linear-gradient(240deg, rgba(0,255,0,.8), 0%, rgba(0,255,0,0) 70.71%)',
Expand Down Expand Up @@ -228,15 +227,21 @@ function ColorPalette( {
color={ color }
isSelected={ isSelected( color ) }
opacity={ opacity }
style={ styles.colorIndicator }
style={ [
styles.colorIndicator,
customColorIndicatorStyles,
] }
/>
</Animated.View>
</TouchableWithoutFeedback>
);
} ) }
{ shouldShowCustomIndicator && (
<View
style={ styles.customIndicatorWrapper }
style={ [
styles.customIndicatorWrapper,
customIndicatorWrapperStyles,
] }
onLayout={ onCustomIndicatorLayout }
>
<View style={ verticalSeparatorStyle } />
Expand All @@ -246,12 +251,20 @@ function ColorPalette( {
accessibilityState={ { selected: isSelectedCustom() } }
accessibilityHint={ accessibilityHint }
>
<View style={ styles.customIndicatorWrapper }>
<View
style={ [
styles.customIndicatorWrapper,
customIndicatorWrapperStyles,
] }
>
<ColorIndicator
withCustomPicker={ ! isGradientSegment }
color={ customIndicatorColor }
isSelected={ isSelectedCustom() }
style={ styles.colorIndicator }
style={ [
styles.colorIndicator,
customColorIndicatorStyles,
] }
/>
{ shouldShowCustomLabel && (
<Text style={ customTextStyle }>
Expand Down

0 comments on commit a152a4a

Please sign in to comment.