From a152a4afb6109f2d2a059b625dd5aba16571d137 Mon Sep 17 00:00:00 2001 From: Antonis Lilis <antonis.lilis@automattic.com> Date: Wed, 15 Jul 2020 10:18:44 +0300 Subject: [PATCH] Pass only modified color-palette styles --- .../media-placeholder/index.native.js | 8 ++--- .../block-library/src/cover/edit.native.js | 11 +++++-- .../block-library/src/cover/style.native.scss | 17 ++++------- .../src/color-palette/index.native.js | 29 ++++++++++++++----- 4 files changed, 38 insertions(+), 27 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 1e1714ab93537..2a0fc55f7defe 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -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 @@ -94,7 +94,7 @@ function MediaPlaceholder( props ) { } const emptyStateTitleStyle = getStylesFromColorScheme( - [ styles.emptyStateTitle, props.customEmptyStateTitle ], + [ styles.emptyStateTitle, customEmptyStateTitleStyles ], styles.emptyStateTitleDark ); const addMediaButtonStyle = getStylesFromColorScheme( @@ -137,7 +137,7 @@ function MediaPlaceholder( props ) { styles.appenderDark ); const emptyStateContainerStyle = getStylesFromColorScheme( - [ styles.emptyStateContainer, props.customEmptyStateContainer ], + [ styles.emptyStateContainer, customEmptyStateContainerStyles ], styles.emptyStateContainerDark ); diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 44f45b720831a..3c55ea7ec8127 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -346,10 +346,10 @@ const Cover = ( { return ( <View> <MediaPlaceholder - customEmptyStateContainer={ + customEmptyStateContainerStyles={ styles.mediaPlaceholderEmptyStateContainer } - customEmptyStateTitle={ + customEmptyStateTitleStyles={ styles.mediaPlaceholderEmptyStateTitle } icon={ placeholderIcon } @@ -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 } diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss index 35150a13c9f60..3db3aa2824af0 100644 --- a/packages/block-library/src/cover/style.native.scss +++ b/packages/block-library/src/cover/style.native.scss @@ -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; @@ -108,4 +101,4 @@ .mediaPlaceholderEmptyStateTitle { margin-top: 4; margin-bottom: 16; -} \ No newline at end of file +} diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index f85eac5ce2567..8b1b5f2646037 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -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'; @@ -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%)', @@ -228,7 +227,10 @@ function ColorPalette( { color={ color } isSelected={ isSelected( color ) } opacity={ opacity } - style={ styles.colorIndicator } + style={ [ + styles.colorIndicator, + customColorIndicatorStyles, + ] } /> </Animated.View> </TouchableWithoutFeedback> @@ -236,7 +238,10 @@ function ColorPalette( { } ) } { shouldShowCustomIndicator && ( <View - style={ styles.customIndicatorWrapper } + style={ [ + styles.customIndicatorWrapper, + customIndicatorWrapperStyles, + ] } onLayout={ onCustomIndicatorLayout } > <View style={ verticalSeparatorStyle } /> @@ -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 }>