From ed821f9e2fcf5d474987d3d8c49864ed86f5384e Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 9 Mar 2020 14:17:13 +0100 Subject: [PATCH 01/68] First color picker implementation --- .../block-library/src/button/edit.native.js | 89 +++++++++++++++++-- packages/components/src/index.native.js | 6 +- .../src/mobile/bottom-sheet/index.native.js | 37 +++++++- 3 files changed, 119 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index be1215a9cdbca0..86e0ad40e09cc2 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -2,6 +2,7 @@ * External dependencies */ import { View, AccessibilityInfo, Platform, Clipboard } from 'react-native'; +import HsvColorPicker from 'react-native-hsv-color-picker'; /** * WordPress dependencies */ @@ -18,10 +19,10 @@ import { ToggleControl, PanelBody, RangeControl, - UnsupportedFooterControl, ToolbarGroup, ToolbarButton, BottomSheet, + Consumer, } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; @@ -56,6 +57,8 @@ class ButtonEdit extends Component { this.onToggleLinkSettings = this.onToggleLinkSettings.bind( this ); this.onToggleButtonFocus = this.onToggleButtonFocus.bind( this ); this.setRef = this.setRef.bind( this ); + this.onSatValPickerChange = this.onSatValPickerChange.bind( this ); + this.onHuePickerChange = this.onHuePickerChange.bind( this ); // `isEditingURL` property is used to prevent from automatically pasting // URL from clipboard while trying to clear `Button URL` field and then @@ -69,6 +72,9 @@ class ButtonEdit extends Component { maxWidth: INITIAL_MAX_WIDTH, isLinkSheetVisible: false, isButtonFocused, + hue: 0, + sat: 0.5, + val: 0.5, }; } @@ -278,6 +284,19 @@ class ButtonEdit extends Component { this.richTextRef = richText; } + onSatValPickerChange( { saturation, value } ) { + this.setState( { + sat: saturation, + val: value, + } ); + } + + onHuePickerChange( { hue } ) { + this.setState( { + hue, + } ); + } + render() { const { attributes, @@ -294,7 +313,14 @@ class ButtonEdit extends Component { linkTarget, rel, } = attributes; - const { maxWidth, isLinkSheetVisible, isButtonFocused } = this.state; + const { + maxWidth, + isLinkSheetVisible, + isButtonFocused, + hue, + sat, + val, + } = this.state; const borderRadiusValue = borderRadius !== undefined @@ -415,13 +441,58 @@ class ButtonEdit extends Component { { this.getLinkSettings( url, rel, linkTarget, true ) } - - + + + { ( { + isBottomSheetScrolling, + shouldEnableBottomSheetScroll, + } ) => { + return ( + + shouldEnableBottomSheetScroll( + false + ) + } + onSatValPickerDragEnd={ () => + shouldEnableBottomSheetScroll( + true + ) + } + onHuePickerDragStart={ () => + shouldEnableBottomSheetScroll( + false + ) + } + onHuePickerDragEnd={ () => + shouldEnableBottomSheetScroll( + true + ) + } + ref={ this.colorPicker } + containerStyle={ { marginBottom: 20 } } + /> + ); + } } + diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 58a0ad7765cbc2..5bf6073829afde 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -46,7 +46,11 @@ export { default as withNotices } from './higher-order/with-notices'; export { default as withSpokenMessages } from './higher-order/with-spoken-messages'; // Mobile Components -export { default as BottomSheet } from './mobile/bottom-sheet'; +export { + default as BottomSheet, + Provider, + Consumer, +} from './mobile/bottom-sheet'; export { default as HTMLTextInput } from './mobile/html-text-input'; export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view'; export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list'; diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 4df6fc064a0884..b4ccb56e9e5b42 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -17,7 +17,7 @@ import SafeArea from 'react-native-safe-area'; /** * WordPress dependencies */ -import { Component } from '@wordpress/element'; +import { Component, createContext } from '@wordpress/element'; import { withPreferredColorScheme } from '@wordpress/compose'; /** @@ -32,11 +32,15 @@ import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; +export const { Provider, Consumer } = createContext(); + class BottomSheet extends Component { constructor() { super( ...arguments ); this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind( this ); this.onScroll = this.onScroll.bind( this ); + this.isScrolling = this.isScrolling.bind( this ); + this.onShouldEnableScroll = this.onShouldEnableScroll.bind( this ); this.onDimensionsChange = this.onDimensionsChange.bind( this ); this.keyboardWillShow = this.keyboardWillShow.bind( this ); this.keyboardDidHide = this.keyboardDidHide.bind( this ); @@ -46,6 +50,8 @@ class BottomSheet extends Component { bounces: false, maxHeight: 0, keyboardHeight: 0, + scrollEnabled: true, + isScrolling: false, }; SafeArea.getSafeAreaInsetsForRootView().then( @@ -163,6 +169,14 @@ class BottomSheet extends Component { } } + onShouldEnableScroll( value ) { + this.setState( { scrollEnabled: value } ); + } + + isScrolling( value ) { + this.setState( { isScrolling: value } ); + } + render() { const { title = '', @@ -178,7 +192,13 @@ class BottomSheet extends Component { children, ...rest } = this.props; - const { maxHeight, bounces, safeAreaBottomInset } = this.state; + const { + maxHeight, + bounces, + safeAreaBottomInset, + isScrolling, + scrollEnabled, + } = this.state; const panResponder = PanResponder.create( { onMoveShouldSetPanResponder: ( evt, gestureState ) => { @@ -232,9 +252,11 @@ class BottomSheet extends Component { } swipeDirection="down" onMoveShouldSetResponder={ + scrollEnabled && panResponder.panHandlers.onMoveShouldSetResponder } onMoveShouldSetResponderCapture={ + scrollEnabled && panResponder.panHandlers.onMoveShouldSetResponderCapture } onAccessibilityEscape={ onClose } @@ -262,8 +284,17 @@ class BottomSheet extends Component { hideHeader && styles.emptyHeader, contentStyle, ] } + scrollEnabled={ scrollEnabled } > - { children } + + { children } + From f3eb7c9e63264839809b26ef82ebf5004dbbcd43 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 9 Mar 2020 16:34:50 +0100 Subject: [PATCH 02/68] Rename context provider and consumer --- packages/block-library/src/button/edit.native.js | 8 ++++---- packages/components/src/index.native.js | 3 +-- .../components/src/mobile/bottom-sheet/index.native.js | 8 +++++--- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 86e0ad40e09cc2..5d8e992800e170 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -22,7 +22,7 @@ import { ToolbarGroup, ToolbarButton, BottomSheet, - Consumer, + BottomSheetConsumer, } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; @@ -442,9 +442,9 @@ class ButtonEdit extends Component { { this.getLinkSettings( url, rel, linkTarget, true ) } - + { ( { - isBottomSheetScrolling, + isBottomSheetScrolling = false, shouldEnableBottomSheetScroll, } ) => { return ( @@ -492,7 +492,7 @@ class ButtonEdit extends Component { /> ); } } - + diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 5bf6073829afde..9b33e3635e0384 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -48,8 +48,7 @@ export { default as withSpokenMessages } from './higher-order/with-spoken-messag // Mobile Components export { default as BottomSheet, - Provider, - Consumer, + BottomSheetConsumer, } from './mobile/bottom-sheet'; export { default as HTMLTextInput } from './mobile/html-text-input'; export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view'; diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index b4ccb56e9e5b42..ff2d9ea8d1b1a8 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -32,7 +32,7 @@ import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; -export const { Provider, Consumer } = createContext(); +export const { Provider: BottomSheetProvider, Consumer } = createContext(); class BottomSheet extends Component { constructor() { @@ -277,6 +277,8 @@ class BottomSheet extends Component { disableScrollViewPanResponder bounces={ bounces } onScroll={ this.onScroll } + onScrollBeginDrag={ () => this.isScrolling( true ) } + onScrollEndDrag={ () => this.isScrolling( false ) } scrollEventThrottle={ 16 } style={ { maxHeight } } contentContainerStyle={ [ @@ -286,7 +288,7 @@ class BottomSheet extends Component { ] } scrollEnabled={ scrollEnabled } > - { children } - + From 073650a610f6bc959e1cdbbcf17cc63416aaa9ef Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 9 Mar 2020 17:11:41 +0100 Subject: [PATCH 03/68] Export BottomSheetConsumer --- packages/components/src/mobile/bottom-sheet/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index ff2d9ea8d1b1a8..8cd9c47de4f6fe 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -322,4 +322,5 @@ ThemedBottomSheet.PickerCell = PickerCell; ThemedBottomSheet.SwitchCell = SwitchCell; ThemedBottomSheet.RangeCell = RangeCell; +export { Consumer as BottomSheetConsumer }; export default ThemedBottomSheet; From ea04b220fdba9b35644a2feb107c2507f7c6117e Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 10 Mar 2020 17:46:42 +0100 Subject: [PATCH 04/68] Add first animation --- .../block-library/src/button/edit.native.js | 149 +++++++++++++++--- .../src/button/editor.native.scss | 18 +++ .../src/color-control/index.native.js | 31 ++++ packages/components/src/index.native.js | 1 + .../mobile/bottom-sheet/color-cell.native.js | 38 +++++ .../src/mobile/bottom-sheet/index.native.js | 27 +++- .../mobile/bottom-sheet/styles.native.scss | 10 ++ 7 files changed, 248 insertions(+), 26 deletions(-) create mode 100644 packages/components/src/color-control/index.native.js create mode 100644 packages/components/src/mobile/bottom-sheet/color-cell.native.js diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 5d8e992800e170..90ddb00151483d 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -1,7 +1,14 @@ /** * External dependencies */ -import { View, AccessibilityInfo, Platform, Clipboard } from 'react-native'; +import { + View, + AccessibilityInfo, + Platform, + Clipboard, + TouchableWithoutFeedback, + Text, +} from 'react-native'; import HsvColorPicker from 'react-native-hsv-color-picker'; /** * WordPress dependencies @@ -23,11 +30,12 @@ import { ToolbarButton, BottomSheet, BottomSheetConsumer, + ColorControl, } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; import { isURL, prependHTTP } from '@wordpress/url'; -import { link, external } from '@wordpress/icons'; +import { link, external, Icon, chevronLeft } from '@wordpress/icons'; /** * Internal dependencies @@ -59,6 +67,9 @@ class ButtonEdit extends Component { this.setRef = this.setRef.bind( this ); this.onSatValPickerChange = this.onSatValPickerChange.bind( this ); this.onHuePickerChange = this.onHuePickerChange.bind( this ); + this.changeBottomSheetContent = this.changeBottomSheetContent.bind( + this + ); // `isEditingURL` property is used to prevent from automatically pasting // URL from clipboard while trying to clear `Button URL` field and then @@ -75,6 +86,8 @@ class ButtonEdit extends Component { hue: 0, sat: 0.5, val: 0.5, + screen: 'Settings', + segment: 'Presets', }; } @@ -297,6 +310,12 @@ class ButtonEdit extends Component { } ); } + changeBottomSheetContent( onChangeContentWithOpacity, destination ) { + onChangeContentWithOpacity( () => + this.setState( { screen: destination } ) + ); + } + render() { const { attributes, @@ -320,6 +339,7 @@ class ButtonEdit extends Component { hue, sat, val, + screen, } = this.state; const borderRadiusValue = @@ -428,26 +448,105 @@ class ButtonEdit extends Component { - - - - - { this.getLinkSettings( url, rel, linkTarget, true ) } - - - - { ( { - isBottomSheetScrolling = false, - shouldEnableBottomSheetScroll, - } ) => { + + { ( { + isBottomSheetScrolling, + shouldEnableBottomSheetScroll, + onChangeContentWithOpacity, + } ) => { + if ( screen === 'Settings' ) { return ( + + + + + + { this.getLinkSettings( + url, + rel, + linkTarget, + true + ) } + + + { + this.changeBottomSheetContent( + onChangeContentWithOpacity, + 'Background' + ); + } } + label={ __( 'Background' ) } + color={ backgroundColor } + separatorType="fullWidth" + /> + { + this.changeBottomSheetContent( + onChangeContentWithOpacity, + 'Text' + ); + } } + label={ __( 'Text' ) } + color={ + textColor.color || '#fff' + } + separatorType="none" + /> + + + ); + } + return ( + + + { + this.changeBottomSheetContent( + onChangeContentWithOpacity, + 'Settings' + ); + } } + label={ __( 'Background' ) } + > + + + Back + + + + { screen } + + - ); - } } - - + + ); + } } + ); diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index ef2e1a54b69519..e217b0f2d711b1 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -39,3 +39,21 @@ .placeholderTextColor { color: rgba($color: $white, $alpha: 0.43); } + +.bottomSheetColorsHeader { + flex-direction: row; + align-items: center; +} + +.bottomSheetBackButton { + flex-direction: row; + align-items: center; + z-index: 2; +} + +.bottomSheetHeaderTitle { + position: absolute; + left: 0; + right: 0; + text-align: center; +} diff --git a/packages/components/src/color-control/index.native.js b/packages/components/src/color-control/index.native.js new file mode 100644 index 00000000000000..97c29a2e3d5af5 --- /dev/null +++ b/packages/components/src/color-control/index.native.js @@ -0,0 +1,31 @@ +/** + * Internal dependencies + */ +import ColorCell from '../mobile/bottom-sheet/color-cell'; + +function ColorControl( { + label, + help, + instanceId, + className, + onPress, + color, + ...props +} ) { + const id = `inspector-color-control-${ instanceId }`; + + return ( + + ); +} + +export default ColorControl; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 9b33e3635e0384..c2449aa8040029 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -35,6 +35,7 @@ export { default as ToggleControl } from './toggle-control'; export { default as SelectControl } from './select-control'; export { default as RangeControl } from './range-control'; export { default as UnsupportedFooterControl } from './unsupported-footer-control'; +export { default as ColorControl } from './color-control'; // Higher-Order Components export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing'; diff --git a/packages/components/src/mobile/bottom-sheet/color-cell.native.js b/packages/components/src/mobile/bottom-sheet/color-cell.native.js new file mode 100644 index 00000000000000..918e84fe4918c8 --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/color-cell.native.js @@ -0,0 +1,38 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Icon, chevronRight } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import Cell from './cell'; +import styles from './styles.scss'; + +export default function BottomSheetColorCell( props ) { + const { onPress, color, ...cellProps } = props; + + return ( + + + + + ); +} diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 8cd9c47de4f6fe..1a62f3c8e43670 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -10,6 +10,7 @@ import { ScrollView, Keyboard, StatusBar, + Animated, } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; @@ -44,6 +45,9 @@ class BottomSheet extends Component { this.onDimensionsChange = this.onDimensionsChange.bind( this ); this.keyboardWillShow = this.keyboardWillShow.bind( this ); this.keyboardDidHide = this.keyboardDidHide.bind( this ); + this.onChangeContentWithOpacity = this.onChangeContentWithOpacity.bind( + this + ); this.state = { safeAreaBottomInset: 0, @@ -52,6 +56,7 @@ class BottomSheet extends Component { keyboardHeight: 0, scrollEnabled: true, isScrolling: false, + opacity: new Animated.Value( 1 ), }; SafeArea.getSafeAreaInsetsForRootView().then( @@ -177,6 +182,22 @@ class BottomSheet extends Component { this.setState( { isScrolling: value } ); } + onHandleOpacityAnimation( value, callback ) { + const { opacity } = this.state; + Animated.timing( opacity, { + toValue: value, + duration: 400, + } ).start( callback ); + } + + onChangeContentWithOpacity( replaceBottomSheetContent ) { + const callback = () => { + this.onHandleOpacityAnimation( 1 ); + replaceBottomSheetContent(); + }; + this.onHandleOpacityAnimation( 0, callback ); + } + render() { const { title = '', @@ -198,6 +219,7 @@ class BottomSheet extends Component { safeAreaBottomInset, isScrolling, scrollEnabled, + opacity, } = this.state; const panResponder = PanResponder.create( { @@ -237,7 +259,7 @@ class BottomSheet extends Component { return ( { children } diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 04f1651bfc795a..dade1afd1b5d0b 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -169,3 +169,13 @@ font-size: $text-editor-font-size; color: $gray; } + +// Color Cell + +.colorCircle { + width: 30px; + height: 30px; + border-radius: 15px; + border-color: $gray; + border-width: $border-width; +} From 3e11cf25e0cec6ca6b8be06379471997af28affb Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 11 Mar 2020 09:54:24 +0100 Subject: [PATCH 05/68] Add second animation - layout animation --- .../block-library/src/button/edit.native.js | 17 +++++++++-------- .../src/mobile/bottom-sheet/index.native.js | 13 ------------- 2 files changed, 9 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 90ddb00151483d..819aab3d083f8d 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -8,6 +8,7 @@ import { Clipboard, TouchableWithoutFeedback, Text, + LayoutAnimation, } from 'react-native'; import HsvColorPicker from 'react-native-hsv-color-picker'; /** @@ -310,10 +311,15 @@ class ButtonEdit extends Component { } ); } - changeBottomSheetContent( onChangeContentWithOpacity, destination ) { - onChangeContentWithOpacity( () => - this.setState( { screen: destination } ) + changeBottomSheetContent( destination ) { + LayoutAnimation.configureNext( + LayoutAnimation.create( + 200, + LayoutAnimation.Types.easeInEaseOut, + LayoutAnimation.Properties.opacity + ) ); + this.setState( { screen: destination } ); } render() { @@ -452,7 +458,6 @@ class ButtonEdit extends Component { { ( { isBottomSheetScrolling, shouldEnableBottomSheetScroll, - onChangeContentWithOpacity, } ) => { if ( screen === 'Settings' ) { return ( @@ -491,7 +496,6 @@ class ButtonEdit extends Component { { this.changeBottomSheetContent( - onChangeContentWithOpacity, 'Background' ); } } @@ -502,7 +506,6 @@ class ButtonEdit extends Component { { this.changeBottomSheetContent( - onChangeContentWithOpacity, 'Text' ); } } @@ -524,7 +527,6 @@ class ButtonEdit extends Component { { this.changeBottomSheetContent( - onChangeContentWithOpacity, 'Settings' ); } } @@ -536,7 +538,6 @@ class ButtonEdit extends Component { } > - Back { - this.onHandleOpacityAnimation( 1 ); - replaceBottomSheetContent(); - }; - this.onHandleOpacityAnimation( 0, callback ); - } - render() { const { title = '', @@ -316,8 +305,6 @@ class BottomSheet extends Component { shouldEnableBottomSheetScroll: this .onShouldEnableScroll, isBottomSheetScrolling: isScrolling, - onChangeContentWithOpacity: this - .onChangeContentWithOpacity, } } > { children } From 67c78929694ca73da5184388e91c1fe27bd55014 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 11 Mar 2020 17:17:43 +0100 Subject: [PATCH 06/68] Add SegmentedControls component --- .../block-library/src/button/edit.native.js | 10 ++++ packages/components/src/index.native.js | 1 + .../mobile/segmented-control/index.native.js | 57 +++++++++++++++++++ .../segmented-control/style.native.scss | 43 ++++++++++++++ 4 files changed, 111 insertions(+) create mode 100644 packages/components/src/mobile/segmented-control/index.native.js create mode 100644 packages/components/src/mobile/segmented-control/style.native.scss diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 819aab3d083f8d..92343b637b2f69 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -32,6 +32,7 @@ import { BottomSheet, BottomSheetConsumer, ColorControl, + SegmentedControls, } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; @@ -311,6 +312,11 @@ class ButtonEdit extends Component { } ); } + // eslint-disable-next-line no-unused-vars + onSegmentHandler( index, item ) { + //TODO + } + changeBottomSheetContent( destination ) { LayoutAnimation.configureNext( LayoutAnimation.create( @@ -548,6 +554,10 @@ class ButtonEdit extends Component { { screen } + { + // TODO: Support dark mode + return ( + + + { isSelected && } + + { title } + + + + ); +}; + +const SegmentedControls = ( { segments, segmentHandler } ) => { + const [ activeSegment, setActiveSegment ] = useState( 0 ); + + function onHandlePress( index, item ) { + setActiveSegment( index ); + segmentHandler( index, item ); + } + + return ( + + { segments.map( ( segment, index ) => ( + onHandlePress( index, segment ) } + isSelected={ activeSegment === index } + key={ index } + /> + ) ) } + + ); +}; + +export default SegmentedControls; diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss new file mode 100644 index 00000000000000..9af3c052b16abb --- /dev/null +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -0,0 +1,43 @@ +.default { + border-radius: 15px; + padding: 7px 12px; + align-items: center; + justify-content: center; +} + +.selected { + background-color: #fff; +} + +.container { + height: 38px; + background-color: rgba(0, 0, 0, 0.04); + border-radius: 19px; + align-items: center; + flex-direction: row; + align-self: center; + padding: 4px; +} + +.outline { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-width: 1px; + border-radius: 15px; + border-color: rgba(0, 0, 0, 0.1); +} + +.buttonTextDefault { + font-size: 12px; + height: 16px; + font-weight: 500; + text-align: center; + color: rgba(0, 0, 0, 0.6); +} + +.buttonTextSelected { + color: rgba(0, 0, 0, 0.87); +} From e521c27158d9131b05a8f076c8e3894832993273 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 13 Mar 2020 12:24:26 +0100 Subject: [PATCH 07/68] Add ColorPalette --- .../src/components/gradients/index.js | 22 +- .../block-library/src/button/edit.native.js | 201 +++++++++++------- .../src/button/editor.native.scss | 6 + .../src/color-palette/index.native.js | 134 ++++++++++++ .../src/color-palette/style.native.scss | 35 +++ .../mobile/bottom-sheet/color-cell.native.js | 30 ++- .../segmented-control/style.native.scss | 9 +- 7 files changed, 342 insertions(+), 95 deletions(-) create mode 100644 packages/components/src/color-palette/index.native.js create mode 100644 packages/components/src/color-palette/style.native.scss diff --git a/packages/block-editor/src/components/gradients/index.js b/packages/block-editor/src/components/gradients/index.js index 988ca37da2cfe3..9b29eeccfe0b53 100644 --- a/packages/block-editor/src/components/gradients/index.js +++ b/packages/block-editor/src/components/gradients/index.js @@ -42,25 +42,29 @@ function getGradientSlugByValue( gradients, value ) { return gradient && gradient.slug; } -export function __experimentalUseGradient( { - gradientAttribute = 'gradient', - customGradientAttribute = 'customGradient', -} = {} ) { +export function __experimentalUseGradient( + { + gradientAttribute = 'gradient', + customGradientAttribute = 'customGradient', + } = {}, + customClientId +) { const { clientId } = useBlockEditContext(); + const id = clientId || customClientId; const { gradients, gradient, customGradient } = useSelect( ( select ) => { const { getBlockAttributes, getSettings } = select( 'core/block-editor' ); - const attributes = getBlockAttributes( clientId ); + const attributes = getBlockAttributes( id ); return { gradient: attributes[ gradientAttribute ], customGradient: attributes[ customGradientAttribute ], gradients: getSettings().gradients, }; }, - [ clientId, gradientAttribute, customGradientAttribute ] + [ id, gradientAttribute, customGradientAttribute ] ); const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); @@ -68,18 +72,18 @@ export function __experimentalUseGradient( { ( newGradientValue ) => { const slug = getGradientSlugByValue( gradients, newGradientValue ); if ( slug ) { - updateBlockAttributes( clientId, { + updateBlockAttributes( id, { [ gradientAttribute ]: slug, [ customGradientAttribute ]: undefined, } ); return; } - updateBlockAttributes( clientId, { + updateBlockAttributes( id, { [ gradientAttribute ]: undefined, [ customGradientAttribute ]: newGradientValue, } ); }, - [ gradients, clientId, updateBlockAttributes ] + [ gradients, id, updateBlockAttributes ] ); const gradientClass = __experimentalGetGradientClass( gradient ); diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 92343b637b2f69..17c855bf8267da 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -15,7 +15,7 @@ import HsvColorPicker from 'react-native-hsv-color-picker'; * WordPress dependencies */ import { withInstanceId, compose } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { RichText, withColors, @@ -33,6 +33,7 @@ import { BottomSheetConsumer, ColorControl, SegmentedControls, + ColorPalette, } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; @@ -62,6 +63,7 @@ class ButtonEdit extends Component { this.onChangeOpenInNewTab = this.onChangeOpenInNewTab.bind( this ); this.onChangeURL = this.onChangeURL.bind( this ); this.onClearSettings = this.onClearSettings.bind( this ); + this.onSegmentHandler = this.onSegmentHandler.bind( this ); this.onLayout = this.onLayout.bind( this ); this.getURLFromClipboard = this.getURLFromClipboard.bind( this ); this.onToggleLinkSettings = this.onToggleLinkSettings.bind( this ); @@ -89,7 +91,7 @@ class ButtonEdit extends Component { sat: 0.5, val: 0.5, screen: 'Settings', - segment: 'Presets', + segment: 'Solid', }; } @@ -110,6 +112,7 @@ class ButtonEdit extends Component { setAttributes( { url: prependHTTP( url ) } ); // Get initial value for `isEditingURL` when closing link settings sheet or button settings sheet this.isEditingURL = false; + this.setState( { segment: 'Solid', screen: 'Settings' } ); } // Blur `RichText` on Android when link settings sheet or button settings sheet is opened, @@ -171,8 +174,10 @@ class ButtonEdit extends Component { } getBackgroundColor() { - const { backgroundColor } = this.props; - if ( backgroundColor.color ) { + const { backgroundColor, attributes } = this.props; + if ( attributes.gradient ) { + return null; + } else if ( backgroundColor.color ) { // `backgroundColor` which should be set when we are able to resolve it return backgroundColor.color; } @@ -314,7 +319,7 @@ class ButtonEdit extends Component { // eslint-disable-next-line no-unused-vars onSegmentHandler( index, item ) { - //TODO + this.setState( { segment: item } ); } changeBottomSheetContent( destination ) { @@ -328,6 +333,22 @@ class ButtonEdit extends Component { this.setState( { screen: destination } ); } + getColorPalette() { + const { segment } = this.state; + const { setBackgroundColor, clientId } = this.props; + return ( + { + this.changeBottomSheetContent( 'Custom' ); + } } + /> + ); + } + render() { const { attributes, @@ -508,6 +529,7 @@ class ButtonEdit extends Component { label={ __( 'Background' ) } color={ backgroundColor } separatorType="fullWidth" + clientId={ clientId } /> { @@ -520,88 +542,113 @@ class ButtonEdit extends Component { textColor.color || '#fff' } separatorType="none" + clientId={ clientId } /> ); - } - return ( - - - { - this.changeBottomSheetContent( - 'Settings' - ); - } } - label={ __( 'Background' ) } + } else if ( + screen === 'Background' || + screen === 'Text' + ) { + return ( + + - { + this.changeBottomSheetContent( + 'Settings' + ); + } } + label={ __( 'Background' ) } + > + + + + + - - - - + + { this.getColorPalette() } + - { screen } - + /> - - - shouldEnableBottomSheetScroll( - false - ) - } - onSatValPickerDragEnd={ () => - shouldEnableBottomSheetScroll( - true - ) - } - onHuePickerDragStart={ () => - shouldEnableBottomSheetScroll( - false - ) - } - onHuePickerDragEnd={ () => - shouldEnableBottomSheetScroll( - true - ) - } - ref={ this.colorPicker } - containerStyle={ { marginBottom: 20 } } - /> - - ); + ); + } else if ( screen === 'Custom' ) { + return ( + <> + + shouldEnableBottomSheetScroll( + false + ) + } + onSatValPickerDragEnd={ () => + shouldEnableBottomSheetScroll( + true + ) + } + onHuePickerDragStart={ () => + shouldEnableBottomSheetScroll( + false + ) + } + onHuePickerDragEnd={ () => + shouldEnableBottomSheetScroll( + true + ) + } + ref={ this.colorPicker } + containerStyle={ { + marginBottom: 20, + } } + /> + + + ); + } } } diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index e217b0f2d711b1..196e86ee05765a 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -56,4 +56,10 @@ left: 0; right: 0; text-align: center; + font-weight: 500; +} + +.horizontalSeparator { + border-bottom-width: $border-width; + border-color: $light-gray-400; } diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js new file mode 100644 index 00000000000000..0aa535e534f59c --- /dev/null +++ b/packages/components/src/color-palette/index.native.js @@ -0,0 +1,134 @@ +/** + * External dependencies + */ +import { + ScrollView, + TouchableWithoutFeedback, + View, + Text, + Platform, +} from 'react-native'; +/** + * WordPress dependencies + */ +import { + SETTINGS_DEFAULTS, + __experimentalUseGradient, +} from '@wordpress/block-editor'; +import { Icon, check } from '@wordpress/icons'; +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { LinearGradient } from '@wordpress/components'; +/** + * Internal dependencies + */ +import styles from './style.scss'; + +function ColorPalette( { + setBackgroundColor, + backgroundColor, + clientId, + currentSegment, + onCustomPress, +} ) { + const isGradient = currentSegment === 'Gradient'; + const isIOS = Platform.OS === 'ios'; + + const { setGradient, gradientValue } = __experimentalUseGradient( + {}, + clientId + ); + + const [ activeColor, setActiveColor ] = useState( + gradientValue || backgroundColor + ); + + const defaultColors = SETTINGS_DEFAULTS.colors; + const defaultGradientColors = SETTINGS_DEFAULTS.gradients; + + function onColorPress( value ) { + setActiveColor( value ); + if ( isGradient ) { + setGradient( value ); + setBackgroundColor(); + } else { + setBackgroundColor( value ); + setGradient(); + } + } + + const GradientSwatch = () => { + return ( + <> + { defaultGradientColors.map( ( color ) => { + const isSelected = color.gradient === activeColor; + return ( + onColorPress( color.gradient ) } + key={ color.gradient } + > + + { isSelected && ( + + + + ) } + + + ); + } ) } + + ); + }; + + const ColorSwatch = () => { + return ( + + { defaultColors.map( ( color ) => { + const isSelected = color.color === activeColor; + return ( + onColorPress( color.color ) } + key={ color.color } + > + + { isSelected && ( + + + + ) } + + + ); + } ) } + + + + { isIOS ? __( 'Custom' ) : __( 'CUSTOM' ) } + + + + ); + }; + + return ( + + { isGradient ? : } + + ); +} + +export default ColorPalette; diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss new file mode 100644 index 00000000000000..ef29d8cc3470da --- /dev/null +++ b/packages/components/src/color-palette/style.native.scss @@ -0,0 +1,35 @@ +.selected { + height: 28px; + width: 28px; + border-radius: 14px; + background-color: #fff; + justify-content: center; + align-items: center; +} + +.circleOption { + height: 48px; + width: 48px; + border-radius: 24px; + margin-right: 8px; + justify-content: center; + align-items: center; +} + +.container { + flex-direction: row; + padding: 16px; +} + +.verticalSeparator { + border-width: $border-width / 2; + border-color: $light-gray-400; + height: 38px; + margin-right: 8px; + align-self: center; +} + +.customButton { + color: $blue-wordpress; + align-self: center; +} diff --git a/packages/components/src/mobile/bottom-sheet/color-cell.native.js b/packages/components/src/mobile/bottom-sheet/color-cell.native.js index 918e84fe4918c8..45eff4de8fe51d 100644 --- a/packages/components/src/mobile/bottom-sheet/color-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/color-cell.native.js @@ -7,7 +7,11 @@ import { View } from 'react-native'; */ import { __ } from '@wordpress/i18n'; import { Icon, chevronRight } from '@wordpress/icons'; - +/** + * Internal dependencies + */ +import LinearGradient from '../linear-gradient'; +import { __experimentalUseGradient } from '@wordpress/block-editor'; /** * Internal dependencies */ @@ -15,7 +19,25 @@ import Cell from './cell'; import styles from './styles.scss'; export default function BottomSheetColorCell( props ) { - const { onPress, color, ...cellProps } = props; + const { onPress, color, clientId, ...cellProps } = props; + + const { gradientValue } = __experimentalUseGradient( {}, clientId ); + + function getCircleSwatch() { + if ( gradientValue && ! color ) { + return ( + + ); + } + return ( + + ); + } return ( - + { getCircleSwatch() } ); diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss index 9af3c052b16abb..3584ecff67a71a 100644 --- a/packages/components/src/mobile/segmented-control/style.native.scss +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -17,14 +17,15 @@ flex-direction: row; align-self: center; padding: 4px; + margin: 8px; } .outline { position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + top: -1; + bottom: -1; + left: -1; + right: -1; border-width: 1px; border-radius: 15px; border-color: rgba(0, 0, 0, 0.1); From e3e9b138fe11baa08bdd53b749f77eb51815893c Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 13 Mar 2020 17:51:38 +0100 Subject: [PATCH 08/68] Create ColorIndicator --- .../block-library/src/button/edit.native.js | 5 +-- .../src/color-indicator/index.native.js | 40 +++++++++++++++++++ .../src/color-indicator/styles.native.scss | 17 ++++++++ .../src/color-palette/index.native.js | 36 ++++++----------- .../src/color-palette/style.native.scss | 18 --------- .../mobile/bottom-sheet/color-cell.native.js | 32 ++++----------- .../mobile/segmented-control/index.native.js | 16 ++++---- 7 files changed, 87 insertions(+), 77 deletions(-) create mode 100644 packages/components/src/color-indicator/index.native.js create mode 100644 packages/components/src/color-indicator/styles.native.scss diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 17c855bf8267da..84776a797b7d05 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -317,8 +317,7 @@ class ButtonEdit extends Component { } ); } - // eslint-disable-next-line no-unused-vars - onSegmentHandler( index, item ) { + onSegmentHandler( item ) { this.setState( { segment: item } ); } @@ -330,7 +329,7 @@ class ButtonEdit extends Component { LayoutAnimation.Properties.opacity ) ); - this.setState( { screen: destination } ); + this.setState( { screen: destination, segment: 'Solid' } ); } getColorPalette() { diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js new file mode 100644 index 00000000000000..9191d1c1cdaa89 --- /dev/null +++ b/packages/components/src/color-indicator/index.native.js @@ -0,0 +1,40 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; +/** + * WordPress dependencies + */ +import { Icon, check } from '@wordpress/icons'; +import { LinearGradient } from '@wordpress/components'; +/** + * Internal dependencies + */ +import styles from './style.scss'; + +function ColorIndicator( { color, isSelected, gradient, style } ) { + const SelectedIcon = () => ( + + + + ); + + if ( gradient ) { + return ( + + { isSelected && } + + ); + } + return ( + + { isSelected && } + + ); +} +export default ColorIndicator; diff --git a/packages/components/src/color-indicator/styles.native.scss b/packages/components/src/color-indicator/styles.native.scss new file mode 100644 index 00000000000000..c9a65b68fe6337 --- /dev/null +++ b/packages/components/src/color-indicator/styles.native.scss @@ -0,0 +1,17 @@ +.selected { + height: 28px; + width: 28px; + border-radius: 14px; + background-color: #fff; + justify-content: center; + align-items: center; +} + +.circleOption { + height: 48px; + width: 48px; + border-radius: 24px; + margin-right: 8px; + justify-content: center; + align-items: center; +} diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 0aa535e534f59c..c599224ebab40b 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -15,14 +15,13 @@ import { SETTINGS_DEFAULTS, __experimentalUseGradient, } from '@wordpress/block-editor'; -import { Icon, check } from '@wordpress/icons'; import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { LinearGradient } from '@wordpress/components'; /** * Internal dependencies */ import styles from './style.scss'; +import ColorIndicator from '../color-indicator'; function ColorPalette( { setBackgroundColor, @@ -67,16 +66,13 @@ function ColorPalette( { onPress={ () => onColorPress( color.gradient ) } key={ color.gradient } > - - { isSelected && ( - - - - ) } - + + + ); } ) } @@ -94,17 +90,11 @@ function ColorPalette( { onPress={ () => onColorPress( color.color ) } key={ color.color } > - - { isSelected && ( - - - - ) } + + ); diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss index ef29d8cc3470da..b9944110e8ec0f 100644 --- a/packages/components/src/color-palette/style.native.scss +++ b/packages/components/src/color-palette/style.native.scss @@ -1,21 +1,3 @@ -.selected { - height: 28px; - width: 28px; - border-radius: 14px; - background-color: #fff; - justify-content: center; - align-items: center; -} - -.circleOption { - height: 48px; - width: 48px; - border-radius: 24px; - margin-right: 8px; - justify-content: center; - align-items: center; -} - .container { flex-direction: row; padding: 16px; diff --git a/packages/components/src/mobile/bottom-sheet/color-cell.native.js b/packages/components/src/mobile/bottom-sheet/color-cell.native.js index 45eff4de8fe51d..7ddb69dbbf0e51 100644 --- a/packages/components/src/mobile/bottom-sheet/color-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/color-cell.native.js @@ -1,20 +1,13 @@ -/** - * External dependencies - */ -import { View } from 'react-native'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { Icon, chevronRight } from '@wordpress/icons'; +import { ColorIndicator } from '@wordpress/components'; /** * Internal dependencies */ -import LinearGradient from '../linear-gradient'; import { __experimentalUseGradient } from '@wordpress/block-editor'; -/** - * Internal dependencies - */ import Cell from './cell'; import styles from './styles.scss'; @@ -22,22 +15,7 @@ export default function BottomSheetColorCell( props ) { const { onPress, color, clientId, ...cellProps } = props; const { gradientValue } = __experimentalUseGradient( {}, clientId ); - - function getCircleSwatch() { - if ( gradientValue && ! color ) { - return ( - - ); - } - return ( - - ); - } + const isGradient = gradientValue && ! color; return ( - { getCircleSwatch() } + ); diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index 056a4d5b4f1155..7ddb7bb23da168 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -33,21 +33,21 @@ const Segment = ( { isSelected, title, onPress } ) => { }; const SegmentedControls = ( { segments, segmentHandler } ) => { - const [ activeSegment, setActiveSegment ] = useState( 0 ); + const [ activeSegment, setActiveSegment ] = useState( segments[ 0 ] ); - function onHandlePress( index, item ) { - setActiveSegment( index ); - segmentHandler( index, item ); + function onHandlePress( item ) { + setActiveSegment( item ); + segmentHandler( item ); } return ( - { segments.map( ( segment, index ) => ( + { segments.map( ( segment ) => ( onHandlePress( index, segment ) } - isSelected={ activeSegment === index } - key={ index } + onPress={ () => onHandlePress( segment ) } + isSelected={ activeSegment === segment } + key={ segment } /> ) ) } From a11712dcba655ee4ce33f3b9b725d27b2972a856 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 13 Mar 2020 23:49:22 +0100 Subject: [PATCH 09/68] Correct styles file --- .../src/color-indicator/{styles.native.scss => style.native.scss} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/components/src/color-indicator/{styles.native.scss => style.native.scss} (100%) diff --git a/packages/components/src/color-indicator/styles.native.scss b/packages/components/src/color-indicator/style.native.scss similarity index 100% rename from packages/components/src/color-indicator/styles.native.scss rename to packages/components/src/color-indicator/style.native.scss From f20ec024e0e1fdbd79669df769f80b67617d2394 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 16 Mar 2020 10:48:31 +0100 Subject: [PATCH 10/68] First main refactor --- .../src/button/color-background.native.js | 7 +- .../block-library/src/button/edit.native.js | 83 +++++++++---------- .../src/button/editor.native.scss | 19 ----- .../src/color-indicator/index.native.js | 6 +- .../src/color-palette/index.native.js | 48 ++++------- .../src/color-palette/style.native.scss | 8 +- packages/components/src/index.native.js | 1 + .../mobile/bottom-sheet/color-cell.native.js | 12 +-- .../src/mobile/bottom-sheet/index.native.js | 6 +- .../bottom-sheet/navigation-header.native.js | 49 +++++++++++ .../mobile/bottom-sheet/styles.native.scss | 40 ++++++++- .../mobile/segmented-control/index.native.js | 29 ++++--- .../segmented-control/style.native.scss | 7 +- 13 files changed, 185 insertions(+), 130 deletions(-) create mode 100644 packages/components/src/mobile/bottom-sheet/navigation-header.native.js diff --git a/packages/block-library/src/button/color-background.native.js b/packages/block-library/src/button/color-background.native.js index 13fe96b00ad1ab..8cd8fe2de0b9e0 100644 --- a/packages/block-library/src/button/color-background.native.js +++ b/packages/block-library/src/button/color-background.native.js @@ -6,7 +6,6 @@ import { View } from 'react-native'; * WordPress dependencies */ import { LinearGradient } from '@wordpress/components'; -import { __experimentalUseGradient } from '@wordpress/block-editor'; /** * Internal dependencies */ @@ -21,13 +20,13 @@ function ColorBackground( { children, borderRadiusValue, backgroundColor } ) { }, ]; - const { gradientValue } = __experimentalUseGradient(); + const isGradient = backgroundColor.includes( 'linear-gradient' ); return ( - { gradientValue && ( + { isGradient && ( defaultGradient.slug === gradient + ).gradient; + return gradientColor; + } else if ( customGradient ) { + return customGradient; } - return styles.fallbackButton.backgroundColor; + return backgroundColor.color || fallbackBackgroundColor; } onChangeText( value ) { @@ -528,7 +535,6 @@ class ButtonEdit extends Component { label={ __( 'Background' ) } color={ backgroundColor } separatorType="fullWidth" - clientId={ clientId } /> { @@ -541,7 +547,6 @@ class ButtonEdit extends Component { textColor.color || '#fff' } separatorType="none" - clientId={ clientId } /> @@ -552,46 +557,32 @@ class ButtonEdit extends Component { ) { return ( - + this.changeBottomSheetContent( + 'Settings' + ) } - > - { - this.changeBottomSheetContent( - 'Settings' - ); - } } - label={ __( 'Background' ) } - > - - - - - - { sprintf( - __( '%s' ), - screen - ) } - - + /> { this.getColorPalette() } + + } /> ); diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index 196e86ee05765a..47600529743353 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -40,25 +40,6 @@ color: rgba($color: $white, $alpha: 0.43); } -.bottomSheetColorsHeader { - flex-direction: row; - align-items: center; -} - -.bottomSheetBackButton { - flex-direction: row; - align-items: center; - z-index: 2; -} - -.bottomSheetHeaderTitle { - position: absolute; - left: 0; - right: 0; - text-align: center; - font-weight: 500; -} - .horizontalSeparator { border-bottom-width: $border-width; border-color: $light-gray-400; diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index 9191d1c1cdaa89..b040a315485034 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -12,14 +12,16 @@ import { LinearGradient } from '@wordpress/components'; */ import styles from './style.scss'; -function ColorIndicator( { color, isSelected, gradient, style } ) { +function ColorIndicator( { color, isSelected, style } ) { const SelectedIcon = () => ( ); - if ( gradient ) { + const isGradient = color.includes( 'linear-gradient' ); + + if ( isGradient ) { return ( { + function Swatch( { gradient } ) { + const palette = gradient ? defaultGradientColors : defaultColors; return ( <> - { defaultGradientColors.map( ( color ) => { - const isSelected = color.gradient === activeColor; + { palette.map( ( color ) => { + const paletteColor = gradient + ? color.gradient + : color.color; + const isSelected = paletteColor === activeColor; return ( onColorPress( color.gradient ) } - key={ color.gradient } + onPress={ () => onColorPress( paletteColor ) } + key={ paletteColor } > @@ -78,27 +77,12 @@ function ColorPalette( { } ) } ); - }; + } const ColorSwatch = () => { return ( - - { defaultColors.map( ( color ) => { - const isSelected = color.color === activeColor; - return ( - onColorPress( color.color ) } - key={ color.color } - > - - - - - ); - } ) } + + @@ -116,7 +100,7 @@ function ColorPalette( { showsHorizontalScrollIndicator={ false } keyboardShouldPersistTaps={ true } > - { isGradient ? : } + { isGradient ? : } ); } diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss index b9944110e8ec0f..d95d388fade454 100644 --- a/packages/components/src/color-palette/style.native.scss +++ b/packages/components/src/color-palette/style.native.scss @@ -1,13 +1,13 @@ .container { flex-direction: row; - padding: 16px; + padding: $panel-padding; } .verticalSeparator { border-width: $border-width / 2; border-color: $light-gray-400; height: 38px; - margin-right: 8px; + margin-right: $panel-padding / 2; align-self: center; } @@ -15,3 +15,7 @@ color: $blue-wordpress; align-self: center; } + +.row { + flex-direction: row; +} diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 31c22f6727da8d..3b66d395de071a 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -62,3 +62,4 @@ export { default as CycleSelectControl } from './mobile/cycle-select-control'; export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint'; export { default as LinearGradient } from './mobile/linear-gradient'; export { default as SegmentedControls } from './mobile/segmented-control'; +export { default as NavigationHeader } from './mobile/bottom-sheet/navigation-header'; diff --git a/packages/components/src/mobile/bottom-sheet/color-cell.native.js b/packages/components/src/mobile/bottom-sheet/color-cell.native.js index 7ddb69dbbf0e51..a5793c3a583b20 100644 --- a/packages/components/src/mobile/bottom-sheet/color-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/color-cell.native.js @@ -7,15 +7,11 @@ import { ColorIndicator } from '@wordpress/components'; /** * Internal dependencies */ -import { __experimentalUseGradient } from '@wordpress/block-editor'; import Cell from './cell'; import styles from './styles.scss'; export default function BottomSheetColorCell( props ) { - const { onPress, color, clientId, ...cellProps } = props; - - const { gradientValue } = __experimentalUseGradient( {}, clientId ); - const isGradient = gradientValue && ! color; + const { onPress, color, ...cellProps } = props; return ( - + ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 6687b85f33f2c0..7308030f27e36b 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -31,9 +31,12 @@ import CyclePickerCell from './cycle-picker-cell'; import PickerCell from './picker-cell'; import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; +import ColorCell from './color-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; -export const { Provider: BottomSheetProvider, Consumer } = createContext(); +export const { Provider: BottomSheetProvider, Consumer } = createContext( { + isBottomSheetScrolling: false, +} ); class BottomSheet extends Component { constructor() { @@ -333,6 +336,7 @@ ThemedBottomSheet.CyclePickerCell = CyclePickerCell; ThemedBottomSheet.PickerCell = PickerCell; ThemedBottomSheet.SwitchCell = SwitchCell; ThemedBottomSheet.RangeCell = RangeCell; +ThemedBottomSheet.ColorCell = ColorCell; export { Consumer as BottomSheetConsumer }; export default ThemedBottomSheet; diff --git a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js new file mode 100644 index 00000000000000..692732d1e93f8f --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js @@ -0,0 +1,49 @@ +/** + * External dependencies + */ +import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native'; +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { Icon, chevronLeft, arrowLeft } from '@wordpress/icons'; +/** + * Internal dependencies + */ +import styles from './styles.scss'; + +function BottomSheetNavigationHeader( { leftButtonOnPress, screen } ) { + const isIOS = Platform.OS === 'ios'; + + return ( + + + + { isIOS ? ( + <> + + + { __( 'Back' ) } + + + ) : ( + + ) } + + + + { sprintf( __( '%s' ), screen ) } + + + + ); +} + +export default BottomSheetNavigationHeader; diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index dade1afd1b5d0b..58db4b3722f107 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -173,9 +173,43 @@ // Color Cell .colorCircle { - width: 30px; - height: 30px; - border-radius: 15px; + width: 32px; + height: 32px; + border-radius: 16px; border-color: $gray; border-width: $border-width; } + +// Navigation Header + +.bottomSheetHeader { + flex-direction: row; + align-items: center; +} + +.bottomSheetBackButton { + flex-direction: row; + align-items: center; + flex: 1; +} + +.bottomSheetBackButtonIcon { + color: $blue-wordpress; + width: 36px; +} + +.bottomSheetHeaderTitle { + text-align: center; + font-weight: 500; + font-size: 16px; + flex: 2; +} + +.bottomSheetBackButtonText { + font-size: 16px; + color: $blue-wordpress; +} + +.bottomSheetRightSpace { + flex: 1; +} diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index 7ddb7bb23da168..cdd034f3feb306 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -32,7 +32,12 @@ const Segment = ( { isSelected, title, onPress } ) => { ); }; -const SegmentedControls = ( { segments, segmentHandler } ) => { +const SegmentedControls = ( { + segments, + segmentHandler, + addonLeft, + addonRight, +} ) => { const [ activeSegment, setActiveSegment ] = useState( segments[ 0 ] ); function onHandlePress( item ) { @@ -41,15 +46,19 @@ const SegmentedControls = ( { segments, segmentHandler } ) => { } return ( - - { segments.map( ( segment ) => ( - onHandlePress( segment ) } - isSelected={ activeSegment === segment } - key={ segment } - /> - ) ) } + + { addonLeft } + + { segments.map( ( segment ) => ( + onHandlePress( segment ) } + isSelected={ activeSegment === segment } + key={ segment } + /> + ) ) } + + { addonRight } ); }; diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss index 3584ecff67a71a..b40eba05f42fae 100644 --- a/packages/components/src/mobile/segmented-control/style.native.scss +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -17,7 +17,6 @@ flex-direction: row; align-self: center; padding: 4px; - margin: 8px; } .outline { @@ -42,3 +41,9 @@ .buttonTextSelected { color: rgba(0, 0, 0, 0.87); } + +.row { + flex-direction: row; + align-items: center; + padding: $panel-padding / 2 $panel-padding; +} From e4ce3a5951282c577d34e737f1d82825c212c329 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 16 Mar 2020 18:59:43 +0100 Subject: [PATCH 11/68] Make SegmentedControls platform specific --- .../block-library/src/button/edit.native.js | 300 ++++++++++-------- .../src/button/editor.native.scss | 5 + .../src/color-indicator/style.native.scss | 2 + .../bottom-sheet/navigation-header.native.js | 7 +- .../mobile/bottom-sheet/styles.native.scss | 5 +- .../mobile/segmented-control/index.native.js | 44 ++- .../segmented-control/style.native.scss | 59 +++- 7 files changed, 246 insertions(+), 176 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 2c3f35826b99a2..9134d09e4eeae1 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -7,6 +7,7 @@ import { Platform, Clipboard, LayoutAnimation, + UIManager, } from 'react-native'; import HsvColorPicker from 'react-native-hsv-color-picker'; /** @@ -55,6 +56,15 @@ const MAX_BORDER_RADIUS_VALUE = 50; const INITIAL_MAX_WIDTH = 108; const PREPEND_HTTP = 'http://'; +// It's needed set the following flags via UIManager +// to have `LayoutAnimation` working on Android +if ( + Platform.OS === 'android' && + UIManager.setLayoutAnimationEnabledExperimental +) { + UIManager.setLayoutAnimationEnabledExperimental( true ); +} + class ButtonEdit extends Component { constructor( props ) { super( props ); @@ -492,153 +502,165 @@ class ButtonEdit extends Component { isBottomSheetScrolling, shouldEnableBottomSheetScroll, } ) => { - if ( screen === 'Settings' ) { - return ( - - - + { screen === 'Settings' && ( + + + + + + { + this.changeBottomSheetContent( + 'Background' + ); + } } + label={ __( 'Background' ) } + color={ backgroundColor } + separatorType="fullWidth" + /> + { + this.changeBottomSheetContent( + 'Text' + ); + } } + label={ __( 'Text' ) } + color={ + textColor.color || + '#fff' + } + separatorType="none" + /> + + + { this.getLinkSettings( + url, + rel, + linkTarget, + true + ) } + + + ) } + { ( screen === 'Background' || + screen === 'Text' ) && ( + + + this.changeBottomSheetContent( + 'Settings' + ) } - maximumValue={ - MAX_BORDER_RADIUS_VALUE + /> + { this.getColorPalette() } + + } - separatorType="none" /> - - - { this.getLinkSettings( - url, - rel, - linkTarget, - true - ) } - - - { - this.changeBottomSheetContent( - 'Background' - ); + + ) } + { screen === 'Custom' && ( + <> + + shouldEnableBottomSheetScroll( + false + ) + } + onSatValPickerDragEnd={ () => + shouldEnableBottomSheetScroll( + true + ) + } + onHuePickerDragStart={ () => + shouldEnableBottomSheetScroll( + false + ) + } + onHuePickerDragEnd={ () => + shouldEnableBottomSheetScroll( + true + ) + } + ref={ this.colorPicker } + containerStyle={ { + marginBottom: 20, } } - label={ __( 'Background' ) } - color={ backgroundColor } - separatorType="fullWidth" /> - { - this.changeBottomSheetContent( - 'Text' - ); - } } - label={ __( 'Text' ) } - color={ - textColor.color || '#fff' + - - - ); - } else if ( - screen === 'Background' || - screen === 'Text' - ) { - return ( - - - this.changeBottomSheetContent( - 'Settings' - ) - } - /> - { this.getColorPalette() } - - - } - /> - - ); - } else if ( screen === 'Custom' ) { - return ( - <> - - shouldEnableBottomSheetScroll( - false - ) - } - onSatValPickerDragEnd={ () => - shouldEnableBottomSheetScroll( - true - ) - } - onHuePickerDragStart={ () => - shouldEnableBottomSheetScroll( - false - ) - } - onHuePickerDragEnd={ () => - shouldEnableBottomSheetScroll( - true - ) - } - ref={ this.colorPicker } - containerStyle={ { - marginBottom: 20, - } } - /> - - - ); - } + + ) } + + ); } } diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index 47600529743353..ab6390c751f178 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -44,3 +44,8 @@ border-bottom-width: $border-width; border-color: $light-gray-400; } + +.colorIndicator { + width: 24px; + height: 24px; +} diff --git a/packages/components/src/color-indicator/style.native.scss b/packages/components/src/color-indicator/style.native.scss index c9a65b68fe6337..f91c1ed0f31fa7 100644 --- a/packages/components/src/color-indicator/style.native.scss +++ b/packages/components/src/color-indicator/style.native.scss @@ -14,4 +14,6 @@ margin-right: 8px; justify-content: center; align-items: center; + border-color: $gray-10; + border-width: $border-width; } diff --git a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js index 692732d1e93f8f..74329b38ffbfcc 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js @@ -24,17 +24,14 @@ function BottomSheetNavigationHeader( { leftButtonOnPress, screen } ) { { __( 'Back' ) } ) : ( - + ) } diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 58db4b3722f107..cf9d7899917a63 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -176,8 +176,6 @@ width: 32px; height: 32px; border-radius: 16px; - border-color: $gray; - border-width: $border-width; } // Navigation Header @@ -185,6 +183,8 @@ .bottomSheetHeader { flex-direction: row; align-items: center; + padding-right: $panel-padding; + padding-left: $panel-padding; } .bottomSheetBackButton { @@ -195,7 +195,6 @@ .bottomSheetBackButtonIcon { color: $blue-wordpress; - width: 36px; } .bottomSheetHeaderTitle { diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index cdd034f3feb306..b84bf63ac858d9 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -1,11 +1,11 @@ /** * External dependencies */ -import { View, TouchableWithoutFeedback, Text } from 'react-native'; +import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native'; /** * WordPress dependencies */ -// import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; /** @@ -13,22 +13,31 @@ import { useState } from '@wordpress/element'; */ import styles from './style.scss'; +const isIOS = Platform.OS === 'ios'; + const Segment = ( { isSelected, title, onPress } ) => { + const isSelectedIOS = isIOS && isSelected; + + const segmentStyle = [ styles.segment, isIOS && styles.segmentIOS ]; + const outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ]; + // TODO: Support dark mode return ( - - - { isSelected && } - - { title } - - - + + + + { isSelected && } + + { title } + + + + ); }; @@ -39,6 +48,7 @@ const SegmentedControls = ( { addonRight, } ) => { const [ activeSegment, setActiveSegment ] = useState( segments[ 0 ] ); + const containerStyle = [ styles.container, isIOS && styles.containerIOS ]; function onHandlePress( item ) { setActiveSegment( item ); @@ -48,10 +58,10 @@ const SegmentedControls = ( { return ( { addonLeft } - + { segments.map( ( segment ) => ( onHandlePress( segment ) } isSelected={ activeSegment === segment } key={ segment } diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss index b40eba05f42fae..e482aee73591a5 100644 --- a/packages/components/src/mobile/segmented-control/style.native.scss +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -1,35 +1,70 @@ -.default { - border-radius: 15px; - padding: 7px 12px; +$container-height: 32px; +$segment-height: 28px; +$segment-spacing: 2px; +$border-width-ios: $border-width / 2; +$border-width-android: $border-width; +$border-radius-ios: 7px; + +.segment { + height: $segment-height - 2 * $border-width; + border-radius: $segment-height / 2; + padding: 6px $panel-padding; align-items: center; justify-content: center; } +.segmentIOS { + border-radius: $border-radius-ios; + height: $segment-height - 2 * $border-width-ios; +} + .selected { background-color: #fff; } +.shadowIOS { + box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); +} + .container { - height: 38px; + height: $container-height; background-color: rgba(0, 0, 0, 0.04); - border-radius: 19px; + border-radius: $container-height / 2; align-items: center; flex-direction: row; align-self: center; - padding: 4px; + padding-left: $segment-spacing + $border-width; + padding-right: $segment-spacing + $border-width; + +} + +.containerIOS { + border-radius: $border-radius-ios + 2 * $border-width-ios; + padding-left: $segment-spacing + $border-width-ios; + padding-right: $segment-spacing + $border-width-ios; } .outline { position: absolute; - top: -1; - bottom: -1; - left: -1; - right: -1; - border-width: 1px; - border-radius: 15px; + top: -$border-width; + bottom: -$border-width; + left: -$border-width; + right: -$border-width; + border-width: $border-width; + border-radius: $container-height / 2; border-color: rgba(0, 0, 0, 0.1); } +.outlineIOS { + border-radius: $border-radius-ios; + border-width: $border-width-ios; + top: -$border-width-ios; + bottom: -$border-width-ios; + left: -$border-width-ios; + right: -$border-width-ios; +} + + .buttonTextDefault { font-size: 12px; height: 16px; From 3f124b04f69011701dfcfb4f35a4f922830b74b4 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 17 Mar 2020 13:14:07 +0100 Subject: [PATCH 12/68] Extract ColorPicker to separate file, update NavigationHeader --- .../block-library/src/button/edit.native.js | 93 +++---------- .../src/color-picker/index.native.js | 125 ++++++++++++++++++ .../src/color-picker/style.native.scss | 32 +++++ packages/components/src/index.native.js | 1 + .../bottom-sheet/navigation-header.native.js | 4 +- .../mobile/bottom-sheet/styles.native.scss | 2 + 6 files changed, 182 insertions(+), 75 deletions(-) create mode 100644 packages/components/src/color-picker/index.native.js create mode 100644 packages/components/src/color-picker/style.native.scss diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 9134d09e4eeae1..0f1eb94463e172 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -9,7 +9,6 @@ import { LayoutAnimation, UIManager, } from 'react-native'; -import HsvColorPicker from 'react-native-hsv-color-picker'; /** * WordPress dependencies */ @@ -36,6 +35,7 @@ import { ColorPalette, ColorIndicator, NavigationHeader, + ColorPicker, } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; @@ -80,8 +80,6 @@ class ButtonEdit extends Component { this.onToggleLinkSettings = this.onToggleLinkSettings.bind( this ); this.onToggleButtonFocus = this.onToggleButtonFocus.bind( this ); this.setRef = this.setRef.bind( this ); - this.onSatValPickerChange = this.onSatValPickerChange.bind( this ); - this.onHuePickerChange = this.onHuePickerChange.bind( this ); this.changeBottomSheetContent = this.changeBottomSheetContent.bind( this ); @@ -98,9 +96,6 @@ class ButtonEdit extends Component { maxWidth: INITIAL_MAX_WIDTH, isLinkSheetVisible: false, isButtonFocused, - hue: 0, - sat: 0.5, - val: 0.5, screen: 'Settings', segment: 'Solid', }; @@ -321,19 +316,6 @@ class ButtonEdit extends Component { this.richTextRef = richText; } - onSatValPickerChange( { saturation, value } ) { - this.setState( { - sat: saturation, - val: value, - } ); - } - - onHuePickerChange( { hue } ) { - this.setState( { - hue, - } ); - } - onSegmentHandler( item ) { this.setState( { segment: item } ); } @@ -372,6 +354,7 @@ class ButtonEdit extends Component { isSelected, clientId, onReplace, + setBackgroundColor, } = this.props; const { placeholder, @@ -385,9 +368,6 @@ class ButtonEdit extends Component { maxWidth, isLinkSheetVisible, isButtonFocused, - hue, - sat, - val, screen, } = this.state; @@ -607,57 +587,24 @@ class ButtonEdit extends Component { ) } { screen === 'Custom' && ( - <> - - shouldEnableBottomSheetScroll( - false - ) - } - onSatValPickerDragEnd={ () => - shouldEnableBottomSheetScroll( - true - ) - } - onHuePickerDragStart={ () => - shouldEnableBottomSheetScroll( - false - ) - } - onHuePickerDragEnd={ () => - shouldEnableBottomSheetScroll( - true - ) - } - ref={ this.colorPicker } - containerStyle={ { - marginBottom: 20, - } } - /> - - + + this.changeBottomSheetContent( + 'Background' + ) + } + clientId={ clientId } + /> ) } ); diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js new file mode 100644 index 00000000000000..011a83040b8091 --- /dev/null +++ b/packages/components/src/color-picker/index.native.js @@ -0,0 +1,125 @@ +/** + * External dependencies + */ +import { View, Text, TouchableWithoutFeedback } from 'react-native'; +import HsvColorPicker from 'react-native-hsv-color-picker'; +import tinycolor from 'tinycolor2'; +/** + * WordPress dependencies + */ +import { useState, useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { ColorIndicator } from '@wordpress/components'; +import { __experimentalUseGradient } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import styles from './style.scss'; + +function ColorPicker( { + shouldEnableBottomSheetScroll, + isBottomSheetScrolling, + setBackgroundColor, + backgroundColor, + onNavigationBack, + clientId, +} ) { + const [ hue, setHue ] = useState( 0 ); + const [ sat, setSaturation ] = useState( 0.5 ); + const [ val, setValue ] = useState( 0.5 ); + const [ savedColor ] = useState( backgroundColor ); + + const currentColor = tinycolor( + `hsv ${ hue } ${ sat } ${ val }` + ).toHexString(); + const isGradient = backgroundColor.includes( 'linear-gradient' ); + const { setGradient } = __experimentalUseGradient( {}, clientId ); + + useEffect( () => { + setBackgroundColor( currentColor ); + }, [ currentColor ] ); + + useEffect( () => { + if ( ! isGradient ) { + const { h, s, v } = tinycolor( backgroundColor ).toHsv(); + + setHue( h ); + setSaturation( s ); + setValue( v ); + } + + setBackgroundColor( backgroundColor ); + setGradient(); + }, [] ); + + function onHuePickerChange( { hue: h } ) { + setHue( h ); + } + + function onSatValPickerChange( { saturation: s, value: v } ) { + setSaturation( s ); + setValue( v ); + } + + function onPressCancelButton() { + onNavigationBack(); + setBackgroundColor( savedColor ); + } + + function onPressApplyButton() { + onNavigationBack(); + setBackgroundColor( currentColor ); + } + + return ( + <> + { + shouldEnableBottomSheetScroll( false ); + } } + onSatValPickerDragEnd={ () => + shouldEnableBottomSheetScroll( true ) + } + onHuePickerDragStart={ () => + shouldEnableBottomSheetScroll( false ) + } + onHuePickerDragEnd={ () => + shouldEnableBottomSheetScroll( true ) + } + /> + + + + { __( 'Cancel' ) } + + + + + + { currentColor.toUpperCase() } + + + + { __( 'Apply' ) } + + + + ); +} + +export default ColorPicker; diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss new file mode 100644 index 00000000000000..42e42a28b95975 --- /dev/null +++ b/packages/components/src/color-picker/style.native.scss @@ -0,0 +1,32 @@ +.footer { + border-top-width: $border-width; + border-color: $light-gray-400; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: $panel-padding; + margin-top: $panel-padding; +} + +.cancelButton { + color: $alert-red; +} + +.applyButton { + color: $blue-wordpress; +} + +.colorWrapper { + flex-direction: row; + align-items: center; +} + +.colorText { + font-family: $default-monospace-font; + color: rgba(0, 0, 0, 0.6); +} + +.colorIndicator { + height: 16px; + width: 16px; +} diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 3b66d395de071a..79f0a0e81e25ba 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -36,6 +36,7 @@ export { default as SelectControl } from './select-control'; export { default as RangeControl } from './range-control'; export { default as UnsupportedFooterControl } from './unsupported-footer-control'; export { default as ColorControl } from './color-control'; +export { default as ColorPicker } from './color-picker'; // Higher-Order Components export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing'; diff --git a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js index 74329b38ffbfcc..a477a8ee3280c4 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js @@ -23,8 +23,8 @@ function BottomSheetNavigationHeader( { leftButtonOnPress, screen } ) { <> { __( 'Back' ) } diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index cf9d7899917a63..ffde47ec384064 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -195,6 +195,8 @@ .bottomSheetBackButtonIcon { color: $blue-wordpress; + margin-left: -14px; + margin-right: -14px; } .bottomSheetHeaderTitle { From b682139f1a4bc3f7474d8107c0d2fba8cf47a164 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 17 Mar 2020 15:56:28 +0100 Subject: [PATCH 13/68] Connect Text color settings --- .../block-library/src/button/edit.native.js | 73 +++++++++++++++++-- .../src/button/editor.native.scss | 20 +++++ .../src/color-palette/index.native.js | 23 ++++-- .../src/color-picker/index.native.js | 46 +++++++++--- 4 files changed, 136 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 0f1eb94463e172..c26ec1a3c346a3 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -8,6 +8,7 @@ import { Clipboard, LayoutAnimation, UIManager, + Text, } from 'react-native'; /** * WordPress dependencies @@ -47,7 +48,7 @@ import { link, external } from '@wordpress/icons'; */ import richTextStyle from './rich-text.scss'; import styles from './editor.scss'; -import ColorBackground from './color-background.native'; +import ColorBackground from './color-background'; import LinkRelIcon from './link-rel'; const NEW_TAB_REL = 'noreferrer noopener'; @@ -96,6 +97,7 @@ class ButtonEdit extends Component { maxWidth: INITIAL_MAX_WIDTH, isLinkSheetVisible: false, isButtonFocused, + previousScreen: '', screen: 'Settings', segment: 'Solid', }; @@ -321,6 +323,7 @@ class ButtonEdit extends Component { } changeBottomSheetContent( destination ) { + const { screen } = this.state; LayoutAnimation.configureNext( LayoutAnimation.create( 200, @@ -328,18 +331,30 @@ class ButtonEdit extends Component { LayoutAnimation.Properties.opacity ) ); - this.setState( { screen: destination, segment: 'Solid' } ); + this.setState( { + screen: destination, + segment: 'Solid', + previousScreen: screen, + } ); } getColorPalette() { - const { segment } = this.state; - const { setBackgroundColor, clientId } = this.props; + const { segment, screen } = this.state; + const { + setBackgroundColor, + clientId, + textColor, + setTextColor, + } = this.props; return ( { this.changeBottomSheetContent( 'Custom' ); } } @@ -355,6 +370,7 @@ class ButtonEdit extends Component { clientId, onReplace, setBackgroundColor, + setTextColor, } = this.props; const { placeholder, @@ -369,6 +385,7 @@ class ButtonEdit extends Component { isLinkSheetVisible, isButtonFocused, screen, + previousScreen, } = this.state; const borderRadiusValue = @@ -548,8 +565,7 @@ class ButtonEdit extends Component { ) } - { ( screen === 'Background' || - screen === 'Text' ) && ( + { screen === 'Background' && ( ) } + { screen === 'Text' && ( + + + this.changeBottomSheetContent( + 'Settings' + ) + } + /> + { this.getColorPalette() } + + + + + { __( 'Select a color' ) } + + + + ) } { screen === 'Custom' && ( this.changeBottomSheetContent( - 'Background' + previousScreen ) } clientId={ clientId } diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index ab6390c751f178..01f79d32ca6847 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -49,3 +49,23 @@ width: 24px; height: 24px; } + +.textFooter { + flex-direction: row; + justify-content: center; + padding: $panel-padding; +} + +.selectColorText { + text-align: center; + align-self: center; + color: $gray; +} + +.absoluteColorIndicator { + width: 24px; + height: 24px; + position: absolute; + left: $panel-padding; + top: 14px; +} diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index b86114f730b9b9..e3190243673ba1 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -25,24 +25,33 @@ import ColorIndicator from '../color-indicator'; function ColorPalette( { setBackgroundColor, + setTextColor, backgroundColor, + textColor, clientId, currentSegment, + currentScreen, onCustomPress, } ) { - const isGradient = currentSegment === 'Gradient'; + const isGradientSegment = currentSegment === 'Gradient'; + const isTextScreen = currentScreen === 'Text'; const isIOS = Platform.OS === 'ios'; const { setGradient } = __experimentalUseGradient( {}, clientId ); - const [ activeColor, setActiveColor ] = useState( backgroundColor ); + const [ activeBgColor, setActiveBgColor ] = useState( backgroundColor ); + const [ activeTextColor, setActiveTextColor ] = useState( textColor ); const defaultColors = SETTINGS_DEFAULTS.colors; const defaultGradientColors = SETTINGS_DEFAULTS.gradients; function onColorPress( value ) { - setActiveColor( value ); - if ( isGradient ) { + setActiveBgColor( value ); + setActiveTextColor( value ); + + if ( isTextScreen ) { + setTextColor( value ); + } else if ( ! isTextScreen && isGradientSegment ) { setGradient( value ); setBackgroundColor(); } else { @@ -59,7 +68,9 @@ function ColorPalette( { const paletteColor = gradient ? color.gradient : color.color; - const isSelected = paletteColor === activeColor; + const isSelected = + paletteColor === activeBgColor || + paletteColor === activeTextColor; return ( onColorPress( paletteColor ) } @@ -100,7 +111,7 @@ function ColorPalette( { showsHorizontalScrollIndicator={ false } keyboardShouldPersistTaps={ true } > - { isGradient ? : } + { isGradientSegment ? : } ); } diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 011a83040b8091..b95d943d1497b8 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -20,36 +20,54 @@ function ColorPicker( { shouldEnableBottomSheetScroll, isBottomSheetScrolling, setBackgroundColor, + setTextColor, backgroundColor, + textColor, onNavigationBack, clientId, + previousScreen, } ) { const [ hue, setHue ] = useState( 0 ); const [ sat, setSaturation ] = useState( 0.5 ); const [ val, setValue ] = useState( 0.5 ); - const [ savedColor ] = useState( backgroundColor ); + const [ savedBgColor ] = useState( backgroundColor ); + const [ savedTextColor ] = useState( textColor ); const currentColor = tinycolor( `hsv ${ hue } ${ sat } ${ val }` ).toHexString(); const isGradient = backgroundColor.includes( 'linear-gradient' ); + const isTextScreen = previousScreen === 'Text'; const { setGradient } = __experimentalUseGradient( {}, clientId ); + function setHSVFromHex( color ) { + const { h, s, v } = tinycolor( color ).toHsv(); + + setHue( h ); + setSaturation( s ); + setValue( v ); + } + useEffect( () => { - setBackgroundColor( currentColor ); + if ( isTextScreen ) { + setTextColor( currentColor ); + } else { + setBackgroundColor( currentColor ); + } }, [ currentColor ] ); useEffect( () => { - if ( ! isGradient ) { - const { h, s, v } = tinycolor( backgroundColor ).toHsv(); + if ( isTextScreen ) { + setHSVFromHex( textColor ); + setTextColor( textColor ); + } else { + if ( ! isGradient ) { + setHSVFromHex( backgroundColor ); + } - setHue( h ); - setSaturation( s ); - setValue( v ); + setBackgroundColor( backgroundColor ); + setGradient(); } - - setBackgroundColor( backgroundColor ); - setGradient(); }, [] ); function onHuePickerChange( { hue: h } ) { @@ -63,12 +81,16 @@ function ColorPicker( { function onPressCancelButton() { onNavigationBack(); - setBackgroundColor( savedColor ); + setBackgroundColor( savedBgColor ); + setTextColor( savedTextColor ); } function onPressApplyButton() { onNavigationBack(); - setBackgroundColor( currentColor ); + if ( isTextScreen ) { + return setTextColor( currentColor ); + } + return setBackgroundColor( currentColor ); } return ( From 298dc7163beb1e75db1af0a66dffa8f19a926f0a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 18 Mar 2020 12:19:45 +0100 Subject: [PATCH 14/68] Extract ColorSettings to separate file --- .../block-library/src/button/edit.native.js | 164 +++--------------- .../src/button/editor.native.scss | 30 ---- .../src/color-picker/index.native.js | 12 +- .../src/color-picker/style.native.scss | 6 + packages/components/src/index.native.js | 4 +- .../src/mobile/bottom-sheet/index.native.js | 13 +- .../src/mobile/color-settings/index.native.js | 122 +++++++++++++ .../mobile/color-settings/style.native.scss | 30 ++++ 8 files changed, 197 insertions(+), 184 deletions(-) create mode 100644 packages/components/src/mobile/color-settings/index.native.js create mode 100644 packages/components/src/mobile/color-settings/style.native.scss diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index c26ec1a3c346a3..177a8edc08bdb2 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -8,7 +8,6 @@ import { Clipboard, LayoutAnimation, UIManager, - Text, } from 'react-native'; /** * WordPress dependencies @@ -32,11 +31,7 @@ import { BottomSheet, BottomSheetConsumer, ColorControl, - SegmentedControls, - ColorPalette, - ColorIndicator, - NavigationHeader, - ColorPicker, + ColorSettings, } from '@wordpress/components'; import { Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; @@ -57,7 +52,7 @@ const MAX_BORDER_RADIUS_VALUE = 50; const INITIAL_MAX_WIDTH = 108; const PREPEND_HTTP = 'http://'; -// It's needed set the following flags via UIManager +// It's needed to set the following flags via UIManager // to have `LayoutAnimation` working on Android if ( Platform.OS === 'android' && @@ -75,7 +70,6 @@ class ButtonEdit extends Component { this.onChangeOpenInNewTab = this.onChangeOpenInNewTab.bind( this ); this.onChangeURL = this.onChangeURL.bind( this ); this.onClearSettings = this.onClearSettings.bind( this ); - this.onSegmentHandler = this.onSegmentHandler.bind( this ); this.onLayout = this.onLayout.bind( this ); this.getURLFromClipboard = this.getURLFromClipboard.bind( this ); this.onToggleLinkSettings = this.onToggleLinkSettings.bind( this ); @@ -99,7 +93,6 @@ class ButtonEdit extends Component { isButtonFocused, previousScreen: '', screen: 'Settings', - segment: 'Solid', }; } @@ -120,7 +113,7 @@ class ButtonEdit extends Component { setAttributes( { url: prependHTTP( url ) } ); // Get initial value for `isEditingURL` when closing link settings sheet or button settings sheet this.isEditingURL = false; - this.setState( { segment: 'Solid', screen: 'Settings' } ); + this.setState( { screen: 'Settings' } ); } // Blur `RichText` on Android when link settings sheet or button settings sheet is opened, @@ -318,10 +311,6 @@ class ButtonEdit extends Component { this.richTextRef = richText; } - onSegmentHandler( item ) { - this.setState( { segment: item } ); - } - changeBottomSheetContent( destination ) { const { screen } = this.state; LayoutAnimation.configureNext( @@ -333,35 +322,10 @@ class ButtonEdit extends Component { ); this.setState( { screen: destination, - segment: 'Solid', previousScreen: screen, } ); } - getColorPalette() { - const { segment, screen } = this.state; - const { - setBackgroundColor, - clientId, - textColor, - setTextColor, - } = this.props; - return ( - { - this.changeBottomSheetContent( 'Custom' ); - } } - /> - ); - } - render() { const { attributes, @@ -565,104 +529,30 @@ class ButtonEdit extends Component { ) } - { screen === 'Background' && ( - - - this.changeBottomSheetContent( - 'Settings' - ) - } - /> - { this.getColorPalette() } - - - } - /> - - ) } - { screen === 'Text' && ( - - - this.changeBottomSheetContent( - 'Settings' - ) - } - /> - { this.getColorPalette() } - - - - - { __( 'Select a color' ) } - - - - ) } - { screen === 'Custom' && ( - - this.changeBottomSheetContent( - previousScreen - ) - } - clientId={ clientId } - /> - ) } + + this.changeBottomSheetContent( + destination + ) + } + backgroundColor={ backgroundColor } + textColor={ textColor.color || '#fff' } + setTextColor={ setTextColor } + setBackgroundColor={ + setBackgroundColor + } + clientId={ clientId } + previousScreen={ previousScreen } + shouldEnableBottomSheetScroll={ + shouldEnableBottomSheetScroll + } + isBottomSheetScrolling={ + isBottomSheetScrolling + } + /> ); } } diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index 01f79d32ca6847..ef2e1a54b69519 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -39,33 +39,3 @@ .placeholderTextColor { color: rgba($color: $white, $alpha: 0.43); } - -.horizontalSeparator { - border-bottom-width: $border-width; - border-color: $light-gray-400; -} - -.colorIndicator { - width: 24px; - height: 24px; -} - -.textFooter { - flex-direction: row; - justify-content: center; - padding: $panel-padding; -} - -.selectColorText { - text-align: center; - align-self: center; - color: $gray; -} - -.absoluteColorIndicator { - width: 24px; - height: 24px; - position: absolute; - left: $panel-padding; - top: 14px; -} diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index b95d943d1497b8..2ad8ba72c4cf3e 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -9,7 +9,7 @@ import tinycolor from 'tinycolor2'; */ import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { ColorIndicator } from '@wordpress/components'; +import { ColorIndicator, BottomSheet } from '@wordpress/components'; import { __experimentalUseGradient } from '@wordpress/block-editor'; /** * Internal dependencies @@ -32,13 +32,17 @@ function ColorPicker( { const [ val, setValue ] = useState( 0.5 ); const [ savedBgColor ] = useState( backgroundColor ); const [ savedTextColor ] = useState( textColor ); + const { setGradient } = __experimentalUseGradient( {}, clientId ); + + const { paddingLeft, height, borderRadius } = styles.picker; + const pickerWidth = BottomSheet.getWidth() - 2 * paddingLeft; const currentColor = tinycolor( `hsv ${ hue } ${ sat } ${ val }` ).toHexString(); + const isGradient = backgroundColor.includes( 'linear-gradient' ); const isTextScreen = previousScreen === 'Text'; - const { setGradient } = __experimentalUseGradient( {}, clientId ); function setHSVFromHex( color ) { const { h, s, v } = tinycolor( color ).toHsv(); @@ -120,6 +124,10 @@ function ColorPicker( { onHuePickerDragEnd={ () => shouldEnableBottomSheetScroll( true ) } + huePickerBarWidth={ pickerWidth } + satValPickerSize={ { width: pickerWidth, height } } + satValPickerBorderRadius={ borderRadius } + huePickerBorderRadius={ borderRadius } /> diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss index 42e42a28b95975..76de9962b4e5e3 100644 --- a/packages/components/src/color-picker/style.native.scss +++ b/packages/components/src/color-picker/style.native.scss @@ -30,3 +30,9 @@ height: 16px; width: 16px; } + +.picker { + padding: $panel-padding; + border-radius: 10px; + height: 200px; +} diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 79f0a0e81e25ba..283569345170e0 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -36,7 +36,6 @@ export { default as SelectControl } from './select-control'; export { default as RangeControl } from './range-control'; export { default as UnsupportedFooterControl } from './unsupported-footer-control'; export { default as ColorControl } from './color-control'; -export { default as ColorPicker } from './color-picker'; // Higher-Order Components export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing'; @@ -62,5 +61,4 @@ export { default as StepperControl } from './mobile/stepper-control'; export { default as CycleSelectControl } from './mobile/cycle-select-control'; export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint'; export { default as LinearGradient } from './mobile/linear-gradient'; -export { default as SegmentedControls } from './mobile/segmented-control'; -export { default as NavigationHeader } from './mobile/bottom-sheet/navigation-header'; +export { default as ColorSettings } from './mobile/color-settings'; diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 7308030f27e36b..27978db0ebcc5f 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -10,7 +10,6 @@ import { ScrollView, Keyboard, StatusBar, - Animated, } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; @@ -56,7 +55,6 @@ class BottomSheet extends Component { keyboardHeight: 0, scrollEnabled: true, isScrolling: false, - opacity: new Animated.Value( 1 ), }; SafeArea.getSafeAreaInsetsForRootView().then( @@ -182,14 +180,6 @@ class BottomSheet extends Component { this.setState( { isScrolling: value } ); } - onHandleOpacityAnimation( value, callback ) { - const { opacity } = this.state; - Animated.timing( opacity, { - toValue: value, - duration: 400, - } ).start( callback ); - } - render() { const { title = '', @@ -211,7 +201,6 @@ class BottomSheet extends Component { safeAreaBottomInset, isScrolling, scrollEnabled, - opacity, } = this.state; const panResponder = PanResponder.create( { @@ -251,7 +240,7 @@ class BottomSheet extends Component { return ( { + setSegment( 'Solid' ); + }, [ screen ] ); + + function getColorPalette() { + return ( + changeBottomSheetContent( 'Custom' ) } + /> + ); + } + + return ( + + { screen === 'Background' && ( + + + changeBottomSheetContent( 'Settings' ) + } + /> + { getColorPalette() } + + setSegment( item ) } + addonLeft={ + + } + /> + + ) } + { screen === 'Text' && ( + + + changeBottomSheetContent( 'Settings' ) + } + /> + { getColorPalette() } + + + + + { __( 'Select a color' ) } + + + + ) } + { screen === 'Custom' && ( + + + changeBottomSheetContent( previousScreen ) + } + clientId={ clientId } + /> + + ) } + + ); +} + +export default ColorSettings; diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss new file mode 100644 index 00000000000000..d8003d6cf18b33 --- /dev/null +++ b/packages/components/src/mobile/color-settings/style.native.scss @@ -0,0 +1,30 @@ + +.horizontalSeparator { + border-bottom-width: $border-width; + border-color: $light-gray-400; +} + +.colorIndicator { + width: 24px; + height: 24px; +} + +.textFooter { + flex-direction: row; + justify-content: center; + padding: $panel-padding; +} + +.absoluteColorIndicator { + width: 24px; + height: 24px; + position: absolute; + left: $panel-padding; + top: 14px; +} + +.selectColorText { + text-align: center; + align-self: center; + color: $gray; +} From 3df753620c8cf95e6dab4c92d1cd62bc41be0315 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 18 Mar 2020 14:10:12 +0100 Subject: [PATCH 15/68] Support dark mode in SegmentedControls --- .../mobile/segmented-control/index.native.js | 43 ++++++++++++++----- .../segmented-control/style.native.scss | 19 +++++++- 2 files changed, 49 insertions(+), 13 deletions(-) diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index b84bf63ac858d9..48a3add76bbd41 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -7,6 +7,7 @@ import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native'; */ import { __, sprintf } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; +import { withPreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies @@ -15,23 +16,38 @@ import styles from './style.scss'; const isIOS = Platform.OS === 'ios'; -const Segment = ( { isSelected, title, onPress } ) => { +const Segment = ( { + isSelected, + title, + onPress, + getStylesFromColorScheme, +} ) => { const isSelectedIOS = isIOS && isSelected; const segmentStyle = [ styles.segment, isIOS && styles.segmentIOS ]; const outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ]; - // TODO: Support dark mode + const selectedStyle = getStylesFromColorScheme( + styles.selected, + styles.selectedDark + ); + const textStyle = getStylesFromColorScheme( + styles.buttonTextDefault, + styles.buttonTextDefaultDark + ); + const selectedTextStyle = getStylesFromColorScheme( + styles.buttonTextSelected, + styles.buttonTextSelectedDark + ); + const shadowStyle = getStylesFromColorScheme( styles.shadowIOS, {} ); + return ( - + - + { isSelected && } { title } @@ -46,9 +62,13 @@ const SegmentedControls = ( { segmentHandler, addonLeft, addonRight, + getStylesFromColorScheme, } ) => { const [ activeSegment, setActiveSegment ] = useState( segments[ 0 ] ); - const containerStyle = [ styles.container, isIOS && styles.containerIOS ]; + const containerStyle = getStylesFromColorScheme( + styles.container, + styles.containerDark + ); function onHandlePress( item ) { setActiveSegment( item ); @@ -58,13 +78,14 @@ const SegmentedControls = ( { return ( { addonLeft } - + { segments.map( ( segment ) => ( onHandlePress( segment ) } isSelected={ activeSegment === segment } key={ segment } + getStylesFromColorScheme={ getStylesFromColorScheme } /> ) ) } @@ -73,4 +94,4 @@ const SegmentedControls = ( { ); }; -export default SegmentedControls; +export default withPreferredColorScheme( SegmentedControls ); diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss index e482aee73591a5..ebed4b07c0394d 100644 --- a/packages/components/src/mobile/segmented-control/style.native.scss +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -22,6 +22,10 @@ $border-radius-ios: 7px; background-color: #fff; } +.selectedDark { + background-color: #545454; +} + .shadowIOS { box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); } @@ -35,7 +39,10 @@ $border-radius-ios: 7px; align-self: center; padding-left: $segment-spacing + $border-width; padding-right: $segment-spacing + $border-width; +} +.containerDark { + background-color: #a4a4a4; } .containerIOS { @@ -52,7 +59,7 @@ $border-radius-ios: 7px; right: -$border-width; border-width: $border-width; border-radius: $container-height / 2; - border-color: rgba(0, 0, 0, 0.1); + border-color: rgba(0, 0, 0, 0.04); } .outlineIOS { @@ -68,15 +75,23 @@ $border-radius-ios: 7px; .buttonTextDefault { font-size: 12px; height: 16px; - font-weight: 500; + font-weight: 600; text-align: center; color: rgba(0, 0, 0, 0.6); } +.buttonTextDefaultDark { + color: #f4f4f4; +} + .buttonTextSelected { color: rgba(0, 0, 0, 0.87); } +.buttonTextSelectedDark { + color: #e0e0e0; +} + .row { flex-direction: row; align-items: center; From d55cbef81c02c15d056f914ce1f3e73251368911 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 19 Mar 2020 10:41:58 +0100 Subject: [PATCH 16/68] Implement CustomSwatch --- .../src/color-indicator/index.native.js | 41 ++++++++++++--- .../src/color-indicator/style.native.scss | 12 ++++- .../src/color-palette/index.native.js | 51 ++++++++++--------- .../src/color-palette/style.native.scss | 5 -- 4 files changed, 71 insertions(+), 38 deletions(-) diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index b040a315485034..803142810df319 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -7,36 +7,63 @@ import { View } from 'react-native'; */ import { Icon, check } from '@wordpress/icons'; import { LinearGradient } from '@wordpress/components'; +import { withPreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies */ import styles from './style.scss'; -function ColorIndicator( { color, isSelected, style } ) { - const SelectedIcon = () => ( +function SelectedIcon() { + return ( ); +} +function ColorIndicator( { + color, + isSelected, + custom, + style, + getStylesFromColorScheme, +} ) { const isGradient = color.includes( 'linear-gradient' ); + const circleStyle = getStylesFromColorScheme( + styles.circleOption, + styles.circleOptionDark + ); + if ( isGradient ) { return ( { isSelected && } ); + } else if ( custom ) { + return ( + + { color.map( ( gradientValue ) => { + return ( + + ); + } ) } + { isSelected && } + + ); } return ( - + { isSelected && } ); } -export default ColorIndicator; +export default withPreferredColorScheme( ColorIndicator ); diff --git a/packages/components/src/color-indicator/style.native.scss b/packages/components/src/color-indicator/style.native.scss index f91c1ed0f31fa7..55bac5ead21157 100644 --- a/packages/components/src/color-indicator/style.native.scss +++ b/packages/components/src/color-indicator/style.native.scss @@ -14,6 +14,16 @@ margin-right: 8px; justify-content: center; align-items: center; - border-color: $gray-10; + border-color: rgba(0, 0, 0, 0.1); border-width: $border-width; } + +.circleOptionDark { + border-color: rgba(255, 255, 255, 0.1); +} + +.absolute { + position: absolute; + margin-right: 0; + border-width: 0; +} diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index e3190243673ba1..d8da1fba4bd951 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -1,13 +1,7 @@ /** * External dependencies */ -import { - ScrollView, - TouchableWithoutFeedback, - View, - Text, - Platform, -} from 'react-native'; +import { ScrollView, TouchableWithoutFeedback, View } from 'react-native'; /** * WordPress dependencies */ @@ -16,7 +10,6 @@ import { __experimentalUseGradient, } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ @@ -33,9 +26,14 @@ function ColorPalette( { currentScreen, onCustomPress, } ) { + const customSwatchGradients = [ + 'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,0,0,0) 70.71%)', + 'linear-gradient(240deg, rgba(0,255,0,.8), 0%, rgba(0,255,0,0) 70.71%)', + 'linear-gradient(360deg, rgba(0,0,255,.8), 0%, rgba(0,0,255,0) 70.71%)', + ]; + const isGradientSegment = currentSegment === 'Gradient'; const isTextScreen = currentScreen === 'Text'; - const isIOS = Platform.OS === 'ios'; const { setGradient } = __experimentalUseGradient( {}, clientId ); @@ -60,7 +58,7 @@ function ColorPalette( { } } - function Swatch( { gradient } ) { + function Swatch( { gradient, custom } ) { const palette = gradient ? defaultGradientColors : defaultColors; return ( <> @@ -86,24 +84,23 @@ function ColorPalette( { ); } ) } + { custom && ( + <> + + + + + + + + ) } ); } - const ColorSwatch = () => { - return ( - - - - - - { isIOS ? __( 'Custom' ) : __( 'CUSTOM' ) } - - - - ); - }; - return ( - { isGradientSegment ? : } + { isGradientSegment ? ( + + ) : ( + + ) } ); } diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss index d95d388fade454..f887ae442087e1 100644 --- a/packages/components/src/color-palette/style.native.scss +++ b/packages/components/src/color-palette/style.native.scss @@ -11,11 +11,6 @@ align-self: center; } -.customButton { - color: $blue-wordpress; - align-self: center; -} - .row { flex-direction: row; } From badf276343e1bd73dee38d61f944046a167c056a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 19 Mar 2020 15:25:38 +0100 Subject: [PATCH 17/68] Handle closing bottom sheet from picker --- .../block-library/src/button/edit.native.js | 4 +++ .../src/color-picker/index.native.js | 12 ++++++-- .../src/mobile/bottom-sheet/index.native.js | 30 +++++++++++++++---- .../src/mobile/color-settings/index.native.js | 2 ++ 4 files changed, 41 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 177a8edc08bdb2..2c9b14a640eb15 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -462,6 +462,7 @@ class ButtonEdit extends Component { { ( { isBottomSheetScrolling, shouldEnableBottomSheetScroll, + onCloseBottomSheet, } ) => { return ( <> @@ -552,6 +553,9 @@ class ButtonEdit extends Component { isBottomSheetScrolling={ isBottomSheetScrolling } + onCloseBottomSheet={ + onCloseBottomSheet + } /> ); diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 2ad8ba72c4cf3e..eaa0973ec7add8 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -26,6 +26,7 @@ function ColorPicker( { onNavigationBack, clientId, previousScreen, + onCloseBottomSheet, } ) { const [ hue, setHue ] = useState( 0 ); const [ sat, setSaturation ] = useState( 0.5 ); @@ -72,6 +73,7 @@ function ColorPicker( { setBackgroundColor( backgroundColor ); setGradient(); } + onCloseBottomSheet( resetColors ); }, [] ); function onHuePickerChange( { hue: h } ) { @@ -83,14 +85,20 @@ function ColorPicker( { setValue( v ); } - function onPressCancelButton() { - onNavigationBack(); + function resetColors() { setBackgroundColor( savedBgColor ); setTextColor( savedTextColor ); } + function onPressCancelButton() { + onNavigationBack(); + onCloseBottomSheet( null ); + resetColors(); + } + function onPressApplyButton() { onNavigationBack(); + onCloseBottomSheet( null ); if ( isTextScreen ) { return setTextColor( currentColor ); } diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 27978db0ebcc5f..274279114c910a 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -45,6 +45,10 @@ class BottomSheet extends Component { this.isScrolling = this.isScrolling.bind( this ); this.onShouldEnableScroll = this.onShouldEnableScroll.bind( this ); this.onDimensionsChange = this.onDimensionsChange.bind( this ); + this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this ); + this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind( + this + ); this.keyboardWillShow = this.keyboardWillShow.bind( this ); this.keyboardDidHide = this.keyboardDidHide.bind( this ); @@ -55,6 +59,7 @@ class BottomSheet extends Component { keyboardHeight: 0, scrollEnabled: true, isScrolling: false, + onCloseBottomSheet: null, }; SafeArea.getSafeAreaInsetsForRootView().then( @@ -180,6 +185,20 @@ class BottomSheet extends Component { this.setState( { isScrolling: value } ); } + onHandleClosingBottomSheet( action ) { + this.setState( { onCloseBottomSheet: action } ); + } + + onCloseBottomSheet() { + const { onClose } = this.props; + const { onCloseBottomSheet } = this.state; + if ( onCloseBottomSheet ) { + onCloseBottomSheet(); + } + onClose(); + return this.onHandleClosingBottomSheet( null ); + } + render() { const { title = '', @@ -190,7 +209,6 @@ class BottomSheet extends Component { style = {}, contentStyle = {}, getStylesFromColorScheme, - onClose, onDismiss, children, ...rest @@ -246,9 +264,9 @@ class BottomSheet extends Component { backdropTransitionInTiming={ 50 } backdropTransitionOutTiming={ 50 } backdropOpacity={ 0.2 } - onBackdropPress={ onClose } - onBackButtonPress={ onClose } - onSwipe={ onClose } + onBackdropPress={ this.onCloseBottomSheet } + onBackButtonPress={ this.onCloseBottomSheet } + onSwipe={ this.onCloseBottomSheet } onDismiss={ Platform.OS === 'ios' ? onDismiss : undefined } onModalHide={ Platform.OS === 'android' ? onDismiss : undefined @@ -262,7 +280,7 @@ class BottomSheet extends Component { scrollEnabled && panResponder.panHandlers.onMoveShouldSetResponderCapture } - onAccessibilityEscape={ onClose } + onAccessibilityEscape={ this.onCloseBottomSheet } { ...rest } > { children } diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 2e44508927a62a..f0071115dffa1c 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -29,6 +29,7 @@ function ColorSettings( { previousScreen, shouldEnableBottomSheetScroll, isBottomSheetScrolling, + onCloseBottomSheet, } ) { const [ segment, setSegment ] = useState( 'Solid' ); @@ -112,6 +113,7 @@ function ColorSettings( { changeBottomSheetContent( previousScreen ) } clientId={ clientId } + onCloseBottomSheet={ onCloseBottomSheet } /> ) } From 2436753b1b89d1def6bf159747e030265a19a990 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 19 Mar 2020 18:35:26 +0100 Subject: [PATCH 18/68] Theme tweaks --- .../src/color-palette/index.native.js | 12 +++- .../src/color-palette/style.native.scss | 4 ++ .../src/color-picker/index.native.js | 61 ++++++++++++++++--- .../src/color-picker/style.native.scss | 29 +++++++-- .../bottom-sheet/navigation-header.native.js | 38 ++++++++++-- .../mobile/bottom-sheet/styles.native.scss | 36 ++++++++--- .../src/mobile/color-settings/index.native.js | 13 +++- .../mobile/color-settings/style.native.scss | 4 ++ .../segmented-control/style.native.scss | 8 +-- 9 files changed, 170 insertions(+), 35 deletions(-) diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index d8da1fba4bd951..755f82ef43d946 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -10,6 +10,7 @@ import { __experimentalUseGradient, } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; +import { withPreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies */ @@ -25,9 +26,10 @@ function ColorPalette( { currentSegment, currentScreen, onCustomPress, + getStylesFromColorScheme, } ) { const customSwatchGradients = [ - 'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,0,0,0) 70.71%)', + '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%)', 'linear-gradient(360deg, rgba(0,0,255,.8), 0%, rgba(0,0,255,0) 70.71%)', ]; @@ -60,6 +62,10 @@ function ColorPalette( { function Swatch( { gradient, custom } ) { const palette = gradient ? defaultGradientColors : defaultColors; + const verticalSeparatorStyle = getStylesFromColorScheme( + styles.verticalSeparator, + styles.verticalSeparatorDark + ); return ( <> { palette.map( ( color ) => { @@ -86,7 +92,7 @@ function ColorPalette( { } ) } { custom && ( <> - + - + - - { __( 'Cancel' ) } - + + { isIOS ? ( + + { __( 'Cancel' ) } + + ) : ( + + ) } + - + { currentColor.toUpperCase() } - { __( 'Apply' ) } + + { isIOS ? ( + + { __( 'Apply' ) } + + ) : ( + + ) } + ); } -export default ColorPicker; +export default withPreferredColorScheme( ColorPicker ); diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss index 76de9962b4e5e3..25bb61e9a042ee 100644 --- a/packages/components/src/color-picker/style.native.scss +++ b/packages/components/src/color-picker/style.native.scss @@ -8,12 +8,27 @@ margin-top: $panel-padding; } +.footerDark { + border-color: $gray-70; +} + .cancelButton { - color: $alert-red; + color: #d63638; + font-size: 17px; +} + +.cancelButtonDark { + color: #f86368; } .applyButton { - color: $blue-wordpress; + color: $blue-50; + font-size: 17px; +} + +.applyButtonDark { + color: $blue-30; + font-size: 17px; } .colorWrapper { @@ -23,7 +38,13 @@ .colorText { font-family: $default-monospace-font; - color: rgba(0, 0, 0, 0.6); + color: rgba(0, 0, 0, 0.87); + font-size: 16px; + font-weight: 400; +} + +.colorTextDark { + color: rgba(255, 255, 255, 0.87); } .colorIndicator { @@ -33,6 +54,6 @@ .picker { padding: $panel-padding; - border-radius: 10px; + border-radius: $panel-padding / 2; height: 200px; } diff --git a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js index a477a8ee3280c4..ab4a9eb13cad54 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js @@ -7,14 +7,36 @@ import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native'; */ import { __, sprintf } from '@wordpress/i18n'; import { Icon, chevronLeft, arrowLeft } from '@wordpress/icons'; +import { withPreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies */ import styles from './styles.scss'; -function BottomSheetNavigationHeader( { leftButtonOnPress, screen } ) { +function BottomSheetNavigationHeader( { + leftButtonOnPress, + screen, + getStylesFromColorScheme, +} ) { const isIOS = Platform.OS === 'ios'; + const bottomSheetHeaderTitleStyle = getStylesFromColorScheme( + styles.bottomSheetHeaderTitle, + styles.bottomSheetHeaderTitleDark + ); + const bottomSheetButtonTextStyle = getStylesFromColorScheme( + styles.bottomSheetButtonText, + styles.bottomSheetButtonTextDark + ); + const chevronLeftStyle = getStylesFromColorScheme( + styles.chevronLeftIcon, + styles.chevronLeftIconDark + ); + const arrowLeftStyle = getStylesFromColorScheme( + styles.arrowLeftIcon, + styles.arrowLeftIconDark + ); + return ( @@ -24,18 +46,22 @@ function BottomSheetNavigationHeader( { leftButtonOnPress, screen } ) { - + { __( 'Back' ) } ) : ( - + ) } - + { sprintf( __( '%s' ), screen ) } @@ -43,4 +69,4 @@ function BottomSheetNavigationHeader( { leftButtonOnPress, screen } ) { ); } -export default BottomSheetNavigationHeader; +export default withPreferredColorScheme( BottomSheetNavigationHeader ); diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index ffde47ec384064..3f3285e2c17177 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -185,6 +185,7 @@ align-items: center; padding-right: $panel-padding; padding-left: $panel-padding; + height: 44px; } .bottomSheetBackButton { @@ -193,24 +194,45 @@ flex: 1; } -.bottomSheetBackButtonIcon { - color: $blue-wordpress; - margin-left: -14px; - margin-right: -14px; +.chevronLeftIcon { + color: $blue-50; + margin-left: -13px; + margin-right: -13px; +} + +.chevronLeftIconDark { + color: $blue-30; } .bottomSheetHeaderTitle { + color: rgba(0, 0, 0, 0.87); text-align: center; - font-weight: 500; + font-weight: 600; font-size: 16px; flex: 2; } -.bottomSheetBackButtonText { +.bottomSheetHeaderTitleDark { + color: rgba(255, 255, 255, 0.87); +} + +.bottomSheetButtonText { + color: $blue-50; font-size: 16px; - color: $blue-wordpress; +} + +.bottomSheetButtonTextDark { + color: $blue-30; } .bottomSheetRightSpace { flex: 1; } + +.arrowLeftIcon { + color: #50575e; +} + +.arrowLeftIconDark { + color: rgba(255, 255, 255, 0.6); +} diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index f0071115dffa1c..51f4d5441cfe6a 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -7,6 +7,7 @@ import { View, Text } from 'react-native'; */ import { __ } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; +import { withPreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies */ @@ -30,9 +31,15 @@ function ColorSettings( { shouldEnableBottomSheetScroll, isBottomSheetScrolling, onCloseBottomSheet, + getStylesFromColorScheme, } ) { const [ segment, setSegment ] = useState( 'Solid' ); + const horizontalSeparatorStyle = getStylesFromColorScheme( + styles.horizontalSeparator, + styles.horizontalSeparatorDark + ); + useEffect( () => { setSegment( 'Solid' ); }, [ screen ] ); @@ -63,7 +70,7 @@ function ColorSettings( { } /> { getColorPalette() } - + setSegment( item ) } @@ -85,7 +92,7 @@ function ColorSettings( { } /> { getColorPalette() } - + Date: Fri, 20 Mar 2020 12:36:36 +0100 Subject: [PATCH 19/68] Correct palette scroll, some styling fixes, correct isSelected conditions --- .../src/color-indicator/index.native.js | 6 ++- .../src/color-indicator/style.native.scss | 5 ++ .../src/color-palette/index.native.js | 47 ++++++++++++++----- .../src/color-palette/style.native.scss | 12 ++--- .../src/color-picker/index.native.js | 17 +++++-- .../src/color-picker/style.native.scss | 4 ++ .../src/mobile/color-settings/index.native.js | 13 +++-- .../mobile/color-settings/style.native.scss | 18 ++++--- .../mobile/segmented-control/index.native.js | 4 +- .../segmented-control/style.native.scss | 4 ++ 10 files changed, 92 insertions(+), 38 deletions(-) diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index 803142810df319..1b5fde35726292 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -16,7 +16,11 @@ import styles from './style.scss'; function SelectedIcon() { return ( - + ); } diff --git a/packages/components/src/color-indicator/style.native.scss b/packages/components/src/color-indicator/style.native.scss index 55bac5ead21157..9e2b60cb1218d6 100644 --- a/packages/components/src/color-indicator/style.native.scss +++ b/packages/components/src/color-indicator/style.native.scss @@ -27,3 +27,8 @@ margin-right: 0; border-width: 0; } + +.icon { + color: $gray-dark; + height: 16px; +} diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 755f82ef43d946..e6fe240654759c 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -2,6 +2,7 @@ * External dependencies */ import { ScrollView, TouchableWithoutFeedback, View } from 'react-native'; +import { map } from 'lodash'; /** * WordPress dependencies */ @@ -9,7 +10,7 @@ import { SETTINGS_DEFAULTS, __experimentalUseGradient, } from '@wordpress/block-editor'; -import { useState } from '@wordpress/element'; +import { useState, useEffect, createRef } from '@wordpress/element'; import { withPreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies @@ -34,6 +35,8 @@ function ColorPalette( { 'linear-gradient(360deg, rgba(0,0,255,.8), 0%, rgba(0,0,255,0) 70.71%)', ]; + const scrollViewRef = createRef(); + const isGradientSegment = currentSegment === 'Gradient'; const isTextScreen = currentScreen === 'Text'; @@ -42,8 +45,15 @@ function ColorPalette( { const [ activeBgColor, setActiveBgColor ] = useState( backgroundColor ); const [ activeTextColor, setActiveTextColor ] = useState( textColor ); - const defaultColors = SETTINGS_DEFAULTS.colors; - const defaultGradientColors = SETTINGS_DEFAULTS.gradients; + const defaultColors = map( SETTINGS_DEFAULTS.colors, 'color' ); + const defaultGradientColors = map( + SETTINGS_DEFAULTS.gradients, + 'gradient' + ); + + useEffect( () => { + scrollViewRef.current.scrollTo( { x: 0, y: 0 } ); + }, [ currentSegment ] ); function onColorPress( value ) { setActiveBgColor( value ); @@ -66,23 +76,31 @@ function ColorPalette( { styles.verticalSeparator, styles.verticalSeparatorDark ); + const isSelectedCustomBgColor = + ! defaultColors.includes( activeBgColor ) && + ! defaultGradientColors.includes( activeBgColor ); + const isSelectedCustomTextColor = ! defaultColors.includes( + activeTextColor + ); + const isSelectedCustom = isTextScreen + ? isSelectedCustomTextColor + : isSelectedCustomBgColor; return ( <> { palette.map( ( color ) => { - const paletteColor = gradient - ? color.gradient - : color.color; - const isSelected = - paletteColor === activeBgColor || - paletteColor === activeTextColor; + const isSelectedBgColor = color === activeBgColor; + const isSelectedTextColor = color === activeTextColor; + const isSelected = isTextScreen + ? isSelectedTextColor + : isSelectedBgColor; return ( onColorPress( paletteColor ) } - key={ paletteColor } + onPress={ () => onColorPress( color ) } + key={ color } > @@ -98,6 +116,7 @@ function ColorPalette( { @@ -109,10 +128,12 @@ function ColorPalette( { return ( { isGradientSegment ? ( diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss index 0c0930cad3bcd9..180c358a2aa4b6 100644 --- a/packages/components/src/color-palette/style.native.scss +++ b/packages/components/src/color-palette/style.native.scss @@ -1,6 +1,10 @@ -.container { +.contentContainer { flex-direction: row; - padding: $panel-padding; + padding: $panel-padding / 4 $panel-padding; +} + +.container { + padding-bottom: $panel-padding; } .verticalSeparator { @@ -14,7 +18,3 @@ .verticalSeparatorDark { border-color: $gray-70; } - -.row { - flex-direction: row; -} diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index bee3f46706bed5..1484e38857a1b1 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -40,8 +40,13 @@ function ColorPicker( { const [ savedTextColor ] = useState( textColor ); const { setGradient } = __experimentalUseGradient( {}, clientId ); - const { paddingLeft, height, borderRadius } = styles.picker; - const pickerWidth = BottomSheet.getWidth() - 2 * paddingLeft; + const { + paddingLeft: spacing, + height: pickerHeight, + borderRadius, + } = styles.picker; + const { height: pickerPointerSize } = styles.pickerPointer; + const pickerWidth = BottomSheet.getWidth() - 2 * spacing; const applyButtonStyle = getStylesFromColorScheme( styles.applyButton, @@ -155,8 +160,12 @@ function ColorPicker( { shouldEnableBottomSheetScroll( true ) } huePickerBarWidth={ pickerWidth } - huePickerBarHeight={ 8 } - satValPickerSize={ { width: pickerWidth, height } } + huePickerBarHeight={ pickerPointerSize / 2 } + satValPickerSize={ { + width: pickerWidth, + height: pickerHeight, + } } + satValPickerSliderSize={ pickerPointerSize } satValPickerBorderRadius={ borderRadius } huePickerBorderRadius={ borderRadius } /> diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss index 25bb61e9a042ee..e2f31cec481137 100644 --- a/packages/components/src/color-picker/style.native.scss +++ b/packages/components/src/color-picker/style.native.scss @@ -57,3 +57,7 @@ border-radius: $panel-padding / 2; height: 200px; } + +.pickerPointer { + height: 16px; +} diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 51f4d5441cfe6a..5c4b59cb447c7f 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -93,14 +93,17 @@ function ColorSettings( { /> { getColorPalette() } - - + + + + { __( 'Select a color' ) } + ) } diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss index c92ff7861b3f6e..3bc00bbdc1d88f 100644 --- a/packages/components/src/mobile/color-settings/style.native.scss +++ b/packages/components/src/mobile/color-settings/style.native.scss @@ -13,22 +13,26 @@ height: 24px; } -.textFooter { +.footer { flex-direction: row; justify-content: center; - padding: $panel-padding; + align-items: center; + align-content: center; + padding: 12px $panel-padding; } -.absoluteColorIndicator { +.colorIndicator { width: 24px; height: 24px; - position: absolute; - left: $panel-padding; - top: 14px; } .selectColorText { text-align: center; - align-self: center; color: $gray; + font-size: 16px; + flex: 2; +} + +.flex { + flex: 1; } diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index 48a3add76bbd41..7ce714e383f563 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -77,7 +77,7 @@ const SegmentedControls = ( { return ( - { addonLeft } + { addonLeft } { segments.map( ( segment ) => ( ) ) } - { addonRight } + { addonRight } ); }; diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss index 5c571f14ed395d..0cd19abed4ae5d 100644 --- a/packages/components/src/mobile/segmented-control/style.native.scss +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -97,3 +97,7 @@ $border-radius-ios: 7px; align-items: center; padding: $panel-padding / 2 $panel-padding; } + +.flex { + flex: 1; +} From c37ae2ff7c09fa5027d7ef80d341cf466620d636 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 24 Mar 2020 11:06:39 +0100 Subject: [PATCH 20/68] Design adjustments --- .../src/components/inserter/menu.native.js | 85 +++++++++---------- .../block-library/src/button/edit.native.js | 4 +- .../src/color-indicator/index.native.js | 6 +- .../src/color-indicator/style.native.scss | 3 +- .../src/color-palette/index.native.js | 25 ++++-- .../src/color-palette/style.native.scss | 2 +- .../src/color-picker/index.native.js | 14 ++- .../src/mobile/bottom-sheet/index.native.js | 8 +- .../mobile/segmented-control/index.native.js | 15 +++- 9 files changed, 97 insertions(+), 65 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 12c8d7d842bc29..c6d26ab7d0709d 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -132,57 +132,54 @@ export class InserterMenu extends Component { contentStyle={ [ styles.content, bottomPadding ] } hideHeader > - - ( - - ) } - keyExtractor={ ( item ) => item.name } - renderItem={ ( { item } ) => ( - onSelect( item ) } + ( + + ) } + keyExtractor={ ( item ) => item.name } + renderItem={ ( { item } ) => ( + onSelect( item ) } + > + - - - - + + - - { item.title } - - - ) } - /> - + + { item.title } + + + + ) } + /> ); } diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 2c9b14a640eb15..fe9a0acdfc6780 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -51,7 +51,7 @@ const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; const INITIAL_MAX_WIDTH = 108; const PREPEND_HTTP = 'http://'; - +const ANIMATION_DURATION = 350; // It's needed to set the following flags via UIManager // to have `LayoutAnimation` working on Android if ( @@ -315,7 +315,7 @@ class ButtonEdit extends Component { const { screen } = this.state; LayoutAnimation.configureNext( LayoutAnimation.create( - 200, + ANIMATION_DURATION, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity ) diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index 1b5fde35726292..a0f071ef2fef22 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -16,11 +16,7 @@ import styles from './style.scss'; function SelectedIcon() { return ( - + ); } diff --git a/packages/components/src/color-indicator/style.native.scss b/packages/components/src/color-indicator/style.native.scss index 9e2b60cb1218d6..d24b1020161bc6 100644 --- a/packages/components/src/color-indicator/style.native.scss +++ b/packages/components/src/color-indicator/style.native.scss @@ -5,6 +5,8 @@ background-color: #fff; justify-content: center; align-items: center; + border-color: rgba(0, 0, 0, 0.1); + border-width: $border-width; } .circleOption { @@ -30,5 +32,4 @@ .icon { color: $gray-dark; - height: 16px; } diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index e6fe240654759c..d884e2184b4af4 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -11,6 +11,7 @@ import { __experimentalUseGradient, } from '@wordpress/block-editor'; import { useState, useEffect, createRef } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; import { withPreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies @@ -35,6 +36,20 @@ function ColorPalette( { 'linear-gradient(360deg, rgba(0,0,255,.8), 0%, rgba(0,0,255,0) 70.71%)', ]; + const extendedDefaultColors = [ + { + name: __( 'White' ), + slug: 'white', + color: '#fff', + }, + { + name: __( 'Black' ), + slug: 'black', + color: '#000', + }, + ...SETTINGS_DEFAULTS.colors, + ]; + const scrollViewRef = createRef(); const isGradientSegment = currentSegment === 'Gradient'; @@ -45,7 +60,7 @@ function ColorPalette( { const [ activeBgColor, setActiveBgColor ] = useState( backgroundColor ); const [ activeTextColor, setActiveTextColor ] = useState( textColor ); - const defaultColors = map( SETTINGS_DEFAULTS.colors, 'color' ); + const defaultColors = map( extendedDefaultColors, 'color' ); const defaultGradientColors = map( SETTINGS_DEFAULTS.gradients, 'gradient' @@ -70,7 +85,7 @@ function ColorPalette( { } } - function Swatch( { gradient, custom } ) { + function Palette( { gradient, custom } ) { const palette = gradient ? defaultGradientColors : defaultColors; const verticalSeparatorStyle = getStylesFromColorScheme( styles.verticalSeparator, @@ -132,13 +147,13 @@ function ColorPalette( { style={ styles.container } horizontal showsHorizontalScrollIndicator={ false } - keyboardShouldPersistTaps={ true } + keyboardShouldPersistTaps="always" ref={ scrollViewRef } > { isGradientSegment ? ( - + ) : ( - + ) } ); diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss index 180c358a2aa4b6..94af706c8bcffe 100644 --- a/packages/components/src/color-palette/style.native.scss +++ b/packages/components/src/color-palette/style.native.scss @@ -1,6 +1,6 @@ .contentContainer { flex-direction: row; - padding: $panel-padding / 4 $panel-padding; + padding: 12px $panel-padding; } .container { diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 1484e38857a1b1..ae067262fa8abf 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -33,6 +33,8 @@ function ColorPicker( { } ) { const isIOS = Platform.OS === 'ios'; + const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; + const [ hue, setHue ] = useState( 0 ); const [ sat, setSaturation ] = useState( 0.5 ); const [ val, setValue ] = useState( 0.5 ); @@ -165,12 +167,15 @@ function ColorPicker( { width: pickerWidth, height: pickerHeight, } } - satValPickerSliderSize={ pickerPointerSize } + satValPickerSliderSize={ pickerPointerSize * 2 } satValPickerBorderRadius={ borderRadius } huePickerBorderRadius={ borderRadius } /> - + { isIOS ? ( @@ -194,7 +199,10 @@ function ColorPicker( { { currentColor.toUpperCase() } - + { isIOS ? ( diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 274279114c910a..e92284ca185e48 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -10,6 +10,7 @@ import { ScrollView, Keyboard, StatusBar, + TouchableHighlight, } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; @@ -171,8 +172,7 @@ class BottomSheet extends Component { onScroll( { nativeEvent } ) { if ( this.isCloseToTop( nativeEvent ) ) { this.setState( { bounces: false } ); - } - if ( this.isCloseToBottom( nativeEvent ) ) { + } else if ( this.isCloseToBottom( nativeEvent ) ) { this.setState( { bounces: true } ); } } @@ -319,7 +319,9 @@ class BottomSheet extends Component { .onHandleClosingBottomSheet, } } > - { children } + + { children } + diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index 7ce714e383f563..4ac87f0c896b11 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -1,7 +1,13 @@ /** * External dependencies */ -import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native'; +import { + View, + TouchableWithoutFeedback, + Text, + Platform, + LayoutAnimation, +} from 'react-native'; /** * WordPress dependencies */ @@ -71,6 +77,13 @@ const SegmentedControls = ( { ); function onHandlePress( item ) { + LayoutAnimation.configureNext( + LayoutAnimation.create( + 350, + LayoutAnimation.Types.easeInEaseOut, + LayoutAnimation.Properties.opacity + ) + ); setActiveSegment( item ); segmentHandler( item ); } From 4726ff3efa5ba35ebc150c7de03790cedbc879bd Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 24 Mar 2020 14:49:25 +0100 Subject: [PATCH 21/68] Animate swatch press --- .../src/color-indicator/index.native.js | 13 +-- .../src/color-palette/index.native.js | 89 +++++++++++++++---- 2 files changed, 77 insertions(+), 25 deletions(-) diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index a0f071ef2fef22..13520c85230c11 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { View } from 'react-native'; +import { View, Animated } from 'react-native'; /** * WordPress dependencies */ @@ -13,11 +13,11 @@ import { withPreferredColorScheme } from '@wordpress/compose'; */ import styles from './style.scss'; -function SelectedIcon() { +function SelectedIcon( { opacity } ) { return ( - + - + ); } @@ -27,6 +27,7 @@ function ColorIndicator( { custom, style, getStylesFromColorScheme, + opacity, } ) { const isGradient = color.includes( 'linear-gradient' ); @@ -41,7 +42,7 @@ function ColorIndicator( { style={ [ circleStyle, style ] } gradientValue={ color } > - { isSelected && } + { isSelected && } ); } else if ( custom ) { @@ -62,7 +63,7 @@ function ColorIndicator( { } return ( - { isSelected && } + { isSelected && } ); } diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index d884e2184b4af4..e09e7b39d8b791 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -1,7 +1,13 @@ /** * External dependencies */ -import { ScrollView, TouchableWithoutFeedback, View } from 'react-native'; +import { + ScrollView, + TouchableWithoutFeedback, + View, + Animated, + Easing, +} from 'react-native'; import { map } from 'lodash'; /** * WordPress dependencies @@ -19,6 +25,8 @@ import { withPreferredColorScheme } from '@wordpress/compose'; import styles from './style.scss'; import ColorIndicator from '../color-indicator'; +const ANIMATION_DURATION = 350; + function ColorPalette( { setBackgroundColor, setTextColor, @@ -59,6 +67,8 @@ function ColorPalette( { const [ activeBgColor, setActiveBgColor ] = useState( backgroundColor ); const [ activeTextColor, setActiveTextColor ] = useState( textColor ); + const [ scale ] = useState( new Animated.Value( 1 ) ); + const [ opacity ] = useState( new Animated.Value( 1 ) ); const defaultColors = map( extendedDefaultColors, 'color' ); const defaultGradientColors = map( @@ -70,7 +80,51 @@ function ColorPalette( { scrollViewRef.current.scrollTo( { x: 0, y: 0 } ); }, [ currentSegment ] ); + function isSelected( color ) { + const isSelectedBgColor = color === activeBgColor; + const isSelectedTextColor = color === activeTextColor; + return isTextScreen ? isSelectedTextColor : isSelectedBgColor; + } + + function isSelectedCustom() { + const isSelectedCustomBgColor = + ! defaultColors.includes( activeBgColor ) && + ! defaultGradientColors.includes( activeBgColor ); + const isSelectedCustomTextColor = ! defaultColors.includes( + activeTextColor + ); + + return isTextScreen + ? isSelectedCustomTextColor + : isSelectedCustomBgColor; + } + + function timingAnimation( property, toValue ) { + return Animated.timing( property, { + toValue, + duration: ANIMATION_DURATION, + easing: Easing.ease, + } ); + } + + function performAnimation( value ) { + opacity.setValue( isSelected( value ) ? 1 : 0 ); + scale.setValue( 1 ); + + Animated.parallel( [ + timingAnimation( scale, 2 ), + timingAnimation( opacity, 1 ), + ] ).start(); + } + + const bounce = scale.interpolate( { + inputRange: [ 1, 1.5, 2 ], + outputRange: [ 1, 1.3, 1 ], + } ); + function onColorPress( value ) { + performAnimation( value ); + setActiveBgColor( value ); setActiveTextColor( value ); @@ -91,35 +145,32 @@ function ColorPalette( { styles.verticalSeparator, styles.verticalSeparatorDark ); - const isSelectedCustomBgColor = - ! defaultColors.includes( activeBgColor ) && - ! defaultGradientColors.includes( activeBgColor ); - const isSelectedCustomTextColor = ! defaultColors.includes( - activeTextColor - ); - const isSelectedCustom = isTextScreen - ? isSelectedCustomTextColor - : isSelectedCustomBgColor; + return ( <> { palette.map( ( color ) => { - const isSelectedBgColor = color === activeBgColor; - const isSelectedTextColor = color === activeTextColor; - const isSelected = isTextScreen - ? isSelectedTextColor - : isSelectedBgColor; + const scaleValue = isSelected( color ) ? bounce : 1; return ( onColorPress( color ) } key={ color } > - + - + ); } ) } @@ -131,7 +182,7 @@ function ColorPalette( { From 29c8f8dd26656ff94d5a8d083cc54479b1eea264 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 24 Mar 2020 15:43:50 +0100 Subject: [PATCH 22/68] Add wrapper for bottom sheet children --- packages/components/src/mobile/bottom-sheet/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index e92284ca185e48..5477b03cb60fef 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -320,7 +320,7 @@ class BottomSheet extends Component { } } > - { children } + <>{ children } From 88478fdd89d1c3065b3b549948207b37813c1a84 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 25 Mar 2020 10:22:10 +0100 Subject: [PATCH 23/68] Correct animation, bottom sheet, make scrollable area taller --- packages/block-library/src/button/edit.native.js | 4 ++-- .../components/src/color-indicator/index.native.js | 5 +++-- .../src/color-indicator/style.native.scss | 13 +++++++++++-- .../components/src/color-palette/index.native.js | 6 ++++-- .../components/src/color-palette/style.native.scss | 7 ++++++- .../components/src/color-picker/index.native.js | 4 ++-- .../src/mobile/bottom-sheet/index.native.js | 2 +- .../src/mobile/segmented-control/index.native.js | 4 +++- 8 files changed, 32 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index fe9a0acdfc6780..824a3f33f733b5 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -51,7 +51,7 @@ const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; const INITIAL_MAX_WIDTH = 108; const PREPEND_HTTP = 'http://'; -const ANIMATION_DURATION = 350; +const ANIMATION_DURATION = 300; // It's needed to set the following flags via UIManager // to have `LayoutAnimation` working on Android if ( @@ -113,7 +113,6 @@ class ButtonEdit extends Component { setAttributes( { url: prependHTTP( url ) } ); // Get initial value for `isEditingURL` when closing link settings sheet or button settings sheet this.isEditingURL = false; - this.setState( { screen: 'Settings' } ); } // Blur `RichText` on Android when link settings sheet or button settings sheet is opened, @@ -122,6 +121,7 @@ class ButtonEdit extends Component { ( ! prevProps.editorSidebarOpened && editorSidebarOpened ) || ( ! prevState.isLinkSheetVisible && isLinkSheetVisible ) ) { + this.setState( { screen: 'Settings' } ); if ( Platform.OS === 'android' && this.richTextRef ) { this.richTextRef.blur(); this.onToggleButtonFocus( false ); diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index 13520c85230c11..27a3a9c53ceaa1 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -16,6 +16,7 @@ import styles from './style.scss'; function SelectedIcon( { opacity } ) { return ( + ); @@ -47,12 +48,12 @@ function ColorIndicator( { ); } else if ( custom ) { return ( - + { color.map( ( gradientValue ) => { return ( ); diff --git a/packages/components/src/color-indicator/style.native.scss b/packages/components/src/color-indicator/style.native.scss index d24b1020161bc6..916ccdff665a40 100644 --- a/packages/components/src/color-indicator/style.native.scss +++ b/packages/components/src/color-indicator/style.native.scss @@ -5,8 +5,6 @@ background-color: #fff; justify-content: center; align-items: center; - border-color: rgba(0, 0, 0, 0.1); - border-width: $border-width; } .circleOption { @@ -33,3 +31,14 @@ .icon { color: $gray-dark; } + +.outline { + border-color: rgba(0, 0, 0, 0.1); + top: -$border-width; + bottom: -$border-width; + left: -$border-width; + right: -$border-width; + border-radius: 14px; + border-width: $border-width; + position: absolute; +} diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index e09e7b39d8b791..02bd9e4f880137 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -25,7 +25,7 @@ import { withPreferredColorScheme } from '@wordpress/compose'; import styles from './style.scss'; import ColorIndicator from '../color-indicator'; -const ANIMATION_DURATION = 350; +const ANIMATION_DURATION = 200; function ColorPalette( { setBackgroundColor, @@ -119,7 +119,7 @@ function ColorPalette( { const bounce = scale.interpolate( { inputRange: [ 1, 1.5, 2 ], - outputRange: [ 1, 1.3, 1 ], + outputRange: [ 1, 0.7, 1 ], } ); function onColorPress( value ) { @@ -169,6 +169,7 @@ function ColorPalette( { gradient isSelected={ isSelected( color ) } opacity={ opacity } + style={ styles.colorIndicator } /> @@ -183,6 +184,7 @@ function ColorPalette( { custom color={ customSwatchGradients } isSelected={ isSelectedCustom() } + style={ styles.colorIndicator } /> diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss index 94af706c8bcffe..76363ef9acb04a 100644 --- a/packages/components/src/color-palette/style.native.scss +++ b/packages/components/src/color-palette/style.native.scss @@ -1,6 +1,6 @@ .contentContainer { flex-direction: row; - padding: 12px $panel-padding; + padding: 0 $panel-padding; } .container { @@ -18,3 +18,8 @@ .verticalSeparatorDark { border-color: $gray-70; } + +.colorIndicator { + margin-top: 12px; + margin-bottom: 12px; +} diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index ae067262fa8abf..5848444d63d45a 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -28,7 +28,7 @@ function ColorPicker( { onNavigationBack, clientId, previousScreen, - onCloseBottomSheet, + onCloseBottomSheet = () => {}, getStylesFromColorScheme, } ) { const isIOS = Platform.OS === 'ios'; @@ -195,7 +195,7 @@ function ColorPicker( { color={ currentColor } style={ styles.colorIndicator } /> - + { currentColor.toUpperCase() } diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 5477b03cb60fef..2368a8b3b046fd 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -260,7 +260,7 @@ class BottomSheet extends Component { isVisible={ isVisible } style={ styles.bottomModal } animationInTiming={ 600 } - animationOutTiming={ 250 } + animationOutTiming={ 300 } backdropTransitionInTiming={ 50 } backdropTransitionOutTiming={ 50 } backdropOpacity={ 0.2 } diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index 4ac87f0c896b11..df9381707ac6b5 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -20,6 +20,8 @@ import { withPreferredColorScheme } from '@wordpress/compose'; */ import styles from './style.scss'; +const ANIMATION_DURATION = 300; + const isIOS = Platform.OS === 'ios'; const Segment = ( { @@ -79,7 +81,7 @@ const SegmentedControls = ( { function onHandlePress( item ) { LayoutAnimation.configureNext( LayoutAnimation.create( - 350, + ANIMATION_DURATION, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.opacity ) From 6933353eed5170b034c4d1bce76826d801fd5d8e Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 25 Mar 2020 11:47:47 +0100 Subject: [PATCH 24/68] Color hex text next to swatch --- .../block-library/src/button/edit.native.js | 10 ++++--- .../src/color-palette/index.native.js | 4 +-- .../src/mobile/color-settings/index.native.js | 26 +++++++++++++++---- .../mobile/color-settings/style.native.scss | 18 +++++++++++++ 4 files changed, 47 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 824a3f33f733b5..374cf5bcb8a800 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -407,7 +407,7 @@ class ButtonEdit extends Component { onChange={ this.onChangeText } style={ { ...richTextStyle.richText, - color: textColor.color || '#fff', + color: textColor.color || '#ffffff', } } textAlign="center" placeholderTextColor={ @@ -424,7 +424,7 @@ class ButtonEdit extends Component { this.onToggleButtonFocus( true ) } __unstableMobileNoFocusOnMount={ ! isSelected } - selectionColor={ textColor.color || '#fff' } + selectionColor={ textColor.color || '#ffffff' } onReplace={ onReplace } onRemove={ () => onReplace( [] ) } /> @@ -513,7 +513,7 @@ class ButtonEdit extends Component { label={ __( 'Text' ) } color={ textColor.color || - '#fff' + '#ffffff' } separatorType="none" /> @@ -540,7 +540,9 @@ class ButtonEdit extends Component { ) } backgroundColor={ backgroundColor } - textColor={ textColor.color || '#fff' } + textColor={ + textColor.color || '#ffffff' + } setTextColor={ setTextColor } setBackgroundColor={ setBackgroundColor diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 02bd9e4f880137..50d2673bb503ab 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -48,12 +48,12 @@ function ColorPalette( { { name: __( 'White' ), slug: 'white', - color: '#fff', + color: '#ffffff', }, { name: __( 'Black' ), slug: 'black', - color: '#000', + color: '#000000', }, ...SETTINGS_DEFAULTS.colors, ]; diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 5c4b59cb447c7f..5ddc86acf772eb 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -34,12 +34,18 @@ function ColorSettings( { getStylesFromColorScheme, } ) { const [ segment, setSegment ] = useState( 'Solid' ); + const isGradient = backgroundColor.includes( 'linear-gradient' ); const horizontalSeparatorStyle = getStylesFromColorScheme( styles.horizontalSeparator, styles.horizontalSeparatorDark ); + const colorTextStyle = getStylesFromColorScheme( + styles.colorText, + styles.colorTextDark + ); + useEffect( () => { setSegment( 'Solid' ); }, [ screen ] ); @@ -75,10 +81,17 @@ function ColorSettings( { segments={ [ 'Solid', 'Gradient' ] } segmentHandler={ ( item ) => setSegment( item ) } addonLeft={ - + + + + { isGradient + ? __( 'Gradient' ) + : backgroundColor.toUpperCase() } + + } /> @@ -94,11 +107,14 @@ function ColorSettings( { { getColorPalette() } - + + + { textColor.toUpperCase() } + { __( 'Select a color' ) } diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss index 3bc00bbdc1d88f..39701c1dbb7a2a 100644 --- a/packages/components/src/mobile/color-settings/style.native.scss +++ b/packages/components/src/mobile/color-settings/style.native.scss @@ -36,3 +36,21 @@ .flex { flex: 1; } + +.colorText { + font-family: $default-monospace-font; + color: rgba(0, 0, 0, 0.87); + font-size: 12px; + font-weight: 400; + text-align: center; +} + +.colorTextDark { + color: rgba(255, 255, 255, 0.87); +} + +.row { + flex-direction: row; + align-items: center; + flex: 1; +} From 8ede0b5cc6018c546da3e28f47ee76623287f94a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 25 Mar 2020 16:37:59 +0100 Subject: [PATCH 25/68] Correct segmented controls --- .../mobile/segmented-control/index.native.js | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index df9381707ac6b5..4d9f349d63f1a1 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -72,13 +72,13 @@ const SegmentedControls = ( { addonRight, getStylesFromColorScheme, } ) => { - const [ activeSegment, setActiveSegment ] = useState( segments[ 0 ] ); + const [ activeSegmentIndex, setActiveSegmentIndex ] = useState( 0 ); const containerStyle = getStylesFromColorScheme( styles.container, styles.containerDark ); - function onHandlePress( item ) { + function onHandlePress( segment, index ) { LayoutAnimation.configureNext( LayoutAnimation.create( ANIMATION_DURATION, @@ -86,23 +86,27 @@ const SegmentedControls = ( { LayoutAnimation.Properties.opacity ) ); - setActiveSegment( item ); - segmentHandler( item ); + setActiveSegmentIndex( index ); + segmentHandler( segment ); } return ( { addonLeft } - { segments.map( ( segment ) => ( - onHandlePress( segment ) } - isSelected={ activeSegment === segment } - key={ segment } - getStylesFromColorScheme={ getStylesFromColorScheme } - /> - ) ) } + { segments.map( ( segment, index ) => { + return ( + onHandlePress( segment, index ) } + isSelected={ activeSegmentIndex === index } + key={ index } + getStylesFromColorScheme={ + getStylesFromColorScheme + } + /> + ); + } ) } { addonRight } From e4c87577d89d23e25150d82840e867eeebf48163 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 26 Mar 2020 12:27:32 +0100 Subject: [PATCH 26/68] Animate segemented controls --- .../mobile/segmented-control/index.native.js | 82 +++++++++++++++++-- .../segmented-control/style.native.scss | 21 ++--- 2 files changed, 82 insertions(+), 21 deletions(-) diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index 4d9f349d63f1a1..ac2545826b560d 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -7,12 +7,15 @@ import { Text, Platform, LayoutAnimation, + Animated, + Easing, } from 'react-native'; +import { take, values, map, reduce } from 'lodash'; /** * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { withPreferredColorScheme } from '@wordpress/compose'; /** @@ -29,16 +32,12 @@ const Segment = ( { title, onPress, getStylesFromColorScheme, + onLayout, } ) => { const isSelectedIOS = isIOS && isSelected; const segmentStyle = [ styles.segment, isIOS && styles.segmentIOS ]; - const outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ]; - const selectedStyle = getStylesFromColorScheme( - styles.selected, - styles.selectedDark - ); const textStyle = getStylesFromColorScheme( styles.buttonTextDefault, styles.buttonTextDefaultDark @@ -52,8 +51,7 @@ const Segment = ( { return ( - - { isSelected && } + @@ -73,11 +71,45 @@ const SegmentedControls = ( { getStylesFromColorScheme, } ) => { const [ activeSegmentIndex, setActiveSegmentIndex ] = useState( 0 ); + const [ segmentsDimensions, setSegmentsDimensions ] = useState( { + '0': { width: 0, height: 0 }, + } ); + const [ positionAnimationValue ] = useState( new Animated.Value( 0 ) ); + + useEffect( () => { + positionAnimationValue.setValue( + calculateEndValue( activeSegmentIndex ) + ); + }, [ segmentsDimensions ] ); + const containerStyle = getStylesFromColorScheme( styles.container, styles.containerDark ); + function pefrormAnimation( index ) { + Animated.timing( positionAnimationValue, { + toValue: calculateEndValue( index ), + duration: 200, + easing: Easing.ease, + } ).start(); + } + + function calculateEndValue( index ) { + const { paddingLeft: offset } = isIOS + ? styles.containerIOS + : styles.container; + const widths = map( values( segmentsDimensions ), 'width' ); + const widthsDistance = take( widths, index ); + const widthsDistanceSum = reduce( + widthsDistance, + ( sum, n ) => sum + n + ); + + const endValue = index === 0 ? 0 : widthsDistanceSum; + return endValue + offset; + } + function onHandlePress( segment, index ) { LayoutAnimation.configureNext( LayoutAnimation.create( @@ -88,8 +120,28 @@ const SegmentedControls = ( { ); setActiveSegmentIndex( index ); segmentHandler( segment ); + pefrormAnimation( index, segment ); + } + + function segmentOnLayout( event, index ) { + const { width, height } = event.nativeEvent.layout; + + setSegmentsDimensions( { + ...segmentsDimensions, + [ index ]: { width, height }, + } ); } + const selectedStyle = getStylesFromColorScheme( + styles.selected, + styles.selectedDark + ); + + const width = segmentsDimensions[ activeSegmentIndex ].width; + const height = segmentsDimensions[ activeSegmentIndex ].height; + + const outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ]; + return ( { addonLeft } @@ -104,9 +156,23 @@ const SegmentedControls = ( { getStylesFromColorScheme={ getStylesFromColorScheme } + onLayout={ ( event ) => + segmentOnLayout( event, index ) + } /> ); } ) } + { addonRight } diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss index 0cd19abed4ae5d..8bb4ffd76463e4 100644 --- a/packages/components/src/mobile/segmented-control/style.native.scss +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -6,19 +6,23 @@ $border-width-android: $border-width; $border-radius-ios: 7px; .segment { - height: $segment-height - 2 * $border-width; border-radius: $segment-height / 2; padding: 6px $panel-padding; align-items: center; justify-content: center; + margin-top: $segment-spacing + $border-width; + margin-bottom: $segment-spacing + $border-width; + z-index: 2; } .segmentIOS { border-radius: $border-radius-ios; - height: $segment-height - 2 * $border-width-ios; + margin-top: $segment-spacing + $border-width-ios; + margin-bottom: $segment-spacing + $border-width-ios; } .selected { + position: absolute; background-color: #fff; } @@ -31,7 +35,7 @@ $border-radius-ios: 7px; } .container { - height: $container-height; + min-height: $container-height; background-color: rgba(0, 0, 0, 0.04); border-radius: $container-height / 2; align-items: center; @@ -53,10 +57,7 @@ $border-radius-ios: 7px; .outline { position: absolute; - top: -$border-width; - bottom: -$border-width; - left: -$border-width; - right: -$border-width; + min-height: $segment-height - 2 * $border-width-ios; border-width: $border-width; border-radius: $container-height / 2; border-color: rgba(0, 0, 0, 0.04); @@ -65,16 +66,10 @@ $border-radius-ios: 7px; .outlineIOS { border-radius: $border-radius-ios; border-width: $border-width-ios; - top: -$border-width-ios; - bottom: -$border-width-ios; - left: -$border-width-ios; - right: -$border-width-ios; } - .buttonTextDefault { font-size: 12px; - height: 16px; font-weight: 600; text-align: center; color: rgba(0, 0, 0, 0.6); From f0f8dd52ec4c3cd513ad391f55df5c7b7bf3b1d0 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 26 Mar 2020 14:31:51 +0100 Subject: [PATCH 27/68] Remove hex next to swatch, small improvements --- .../src/color-picker/index.native.js | 2 +- .../src/color-picker/style.native.scss | 1 + .../bottom-sheet/navigation-header.native.js | 5 +++- .../mobile/bottom-sheet/styles.native.scss | 2 +- .../src/mobile/color-settings/index.native.js | 26 ++++--------------- .../mobile/color-settings/style.native.scss | 17 ------------ .../segmented-control/style.native.scss | 1 + 7 files changed, 13 insertions(+), 41 deletions(-) diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 5848444d63d45a..f78a6041ff3be8 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -19,7 +19,7 @@ import { Icon, check, close } from '@wordpress/icons'; import styles from './style.scss'; function ColorPicker( { - shouldEnableBottomSheetScroll, + shouldEnableBottomSheetScroll = false, isBottomSheetScrolling, setBackgroundColor, setTextColor, diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss index e2f31cec481137..514b141d427bc6 100644 --- a/packages/components/src/color-picker/style.native.scss +++ b/packages/components/src/color-picker/style.native.scss @@ -6,6 +6,7 @@ align-items: center; padding: $panel-padding; margin-top: $panel-padding; + flex-wrap: wrap; } .footerDark { diff --git a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js index ab4a9eb13cad54..2dde358e89b97c 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js @@ -48,7 +48,10 @@ function BottomSheetNavigationHeader( { size={ 40 } style={ chevronLeftStyle } /> - + { __( 'Back' ) } diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 3f3285e2c17177..e2833380c56adc 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -185,7 +185,7 @@ align-items: center; padding-right: $panel-padding; padding-left: $panel-padding; - height: 44px; + min-height: 44px; } .bottomSheetBackButton { diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 5ddc86acf772eb..5c4b59cb447c7f 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -34,18 +34,12 @@ function ColorSettings( { getStylesFromColorScheme, } ) { const [ segment, setSegment ] = useState( 'Solid' ); - const isGradient = backgroundColor.includes( 'linear-gradient' ); const horizontalSeparatorStyle = getStylesFromColorScheme( styles.horizontalSeparator, styles.horizontalSeparatorDark ); - const colorTextStyle = getStylesFromColorScheme( - styles.colorText, - styles.colorTextDark - ); - useEffect( () => { setSegment( 'Solid' ); }, [ screen ] ); @@ -81,17 +75,10 @@ function ColorSettings( { segments={ [ 'Solid', 'Gradient' ] } segmentHandler={ ( item ) => setSegment( item ) } addonLeft={ - - - - { isGradient - ? __( 'Gradient' ) - : backgroundColor.toUpperCase() } - - + } /> @@ -107,14 +94,11 @@ function ColorSettings( { { getColorPalette() } - + - - { textColor.toUpperCase() } - { __( 'Select a color' ) } diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss index 39701c1dbb7a2a..6f6fda93110825 100644 --- a/packages/components/src/mobile/color-settings/style.native.scss +++ b/packages/components/src/mobile/color-settings/style.native.scss @@ -37,20 +37,3 @@ flex: 1; } -.colorText { - font-family: $default-monospace-font; - color: rgba(0, 0, 0, 0.87); - font-size: 12px; - font-weight: 400; - text-align: center; -} - -.colorTextDark { - color: rgba(255, 255, 255, 0.87); -} - -.row { - flex-direction: row; - align-items: center; - flex: 1; -} diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss index 8bb4ffd76463e4..9ef18aff0aee2d 100644 --- a/packages/components/src/mobile/segmented-control/style.native.scss +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -32,6 +32,7 @@ $border-radius-ios: 7px; .shadowIOS { box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); + z-index: 2; } .container { From b571fd085633e23a20510dcbf674286e3bba2734 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 27 Mar 2020 14:13:07 +0100 Subject: [PATCH 28/68] Support hex color copying, change animation duration, fix scrollview --- .../src/color-palette/index.native.js | 12 ++++---- .../src/mobile/color-settings/index.native.js | 29 ++++++++++++++++--- .../mobile/color-settings/style.native.scss | 6 ++++ .../mobile/segmented-control/index.native.js | 4 +-- 4 files changed, 40 insertions(+), 11 deletions(-) diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 50d2673bb503ab..b8534165d6e719 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -203,11 +203,13 @@ function ColorPalette( { keyboardShouldPersistTaps="always" ref={ scrollViewRef } > - { isGradientSegment ? ( - - ) : ( - - ) } + + { isGradientSegment ? ( + + ) : ( + + ) } + ); } diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 5c4b59cb447c7f..42c83dce62aa22 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -75,10 +75,21 @@ function ColorSettings( { segments={ [ 'Solid', 'Gradient' ] } segmentHandler={ ( item ) => setSegment( item ) } addonLeft={ - + + + { backgroundColor } + + + } /> @@ -95,6 +106,16 @@ function ColorSettings( { + + { textColor } + + Date: Mon, 30 Mar 2020 12:31:13 +0200 Subject: [PATCH 29/68] Adjustments for the largest font sizes --- .../components/src/color-picker/index.native.js | 14 ++++---------- .../components/src/color-picker/style.native.scss | 10 ---------- .../bottom-sheet/navigation-header.native.js | 5 ++++- .../src/mobile/color-settings/index.native.js | 7 ++++--- .../src/mobile/segmented-control/index.native.js | 1 + 5 files changed, 13 insertions(+), 24 deletions(-) diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index f78a6041ff3be8..208ecf8da58b6f 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -9,7 +9,7 @@ import tinycolor from 'tinycolor2'; */ import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { ColorIndicator, BottomSheet } from '@wordpress/components'; +import { BottomSheet } from '@wordpress/components'; import { __experimentalUseGradient } from '@wordpress/block-editor'; import { withPreferredColorScheme } from '@wordpress/compose'; import { Icon, check, close } from '@wordpress/icons'; @@ -190,15 +190,9 @@ function ColorPicker( { ) } - - - - { currentColor.toUpperCase() } - - + + { currentColor.toUpperCase() } + - + { sprintf( __( '%s' ), screen ) } diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 42c83dce62aa22..08d3a6cbe69009 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -107,7 +107,6 @@ function ColorSettings( { { textColor } - - + { __( 'Select a color' ) } diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index c04897fd45398c..cdca124f2c8a18 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -54,6 +54,7 @@ const Segment = ( { { title } From fbb287437734c0d7fa94d62b4a533efcbcc6e5f1 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 30 Mar 2020 14:43:14 +0200 Subject: [PATCH 30/68] Unblock maxHeight for bottom sheet with color picker --- .../block-library/src/button/edit.native.js | 4 ++++ .../src/color-picker/index.native.js | 7 ++++++- .../src/mobile/bottom-sheet/index.native.js | 12 +++++++++-- .../src/mobile/color-settings/index.native.js | 20 +++++++++++++------ .../mobile/segmented-control/index.native.js | 5 +++++ 5 files changed, 39 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 374cf5bcb8a800..d9c88e158da374 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -462,6 +462,7 @@ class ButtonEdit extends Component { { ( { isBottomSheetScrolling, shouldEnableBottomSheetScroll, + shouldSetBottomSheetMaxHeight, onCloseBottomSheet, } ) => { return ( @@ -555,6 +556,9 @@ class ButtonEdit extends Component { isBottomSheetScrolling={ isBottomSheetScrolling } + shouldSetBottomSheetMaxHeight={ + shouldSetBottomSheetMaxHeight + } onCloseBottomSheet={ onCloseBottomSheet } diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 208ecf8da58b6f..f18087951a3e45 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -19,7 +19,8 @@ import { Icon, check, close } from '@wordpress/icons'; import styles from './style.scss'; function ColorPicker( { - shouldEnableBottomSheetScroll = false, + shouldEnableBottomSheetScroll = () => {}, + shouldSetBottomSheetMaxHeight = () => {}, isBottomSheetScrolling, setBackgroundColor, setTextColor, @@ -102,6 +103,7 @@ function ColorPicker( { setBackgroundColor( backgroundColor ); setGradient(); } + shouldSetBottomSheetMaxHeight( false ); onCloseBottomSheet( resetColors ); }, [] ); @@ -122,12 +124,15 @@ function ColorPicker( { function onPressCancelButton() { onNavigationBack(); onCloseBottomSheet( null ); + shouldSetBottomSheetMaxHeight( true ); resetColors(); } function onPressApplyButton() { onNavigationBack(); onCloseBottomSheet( null ); + shouldSetBottomSheetMaxHeight( true ); + if ( isTextScreen ) { return setTextColor( currentColor ); } diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 2368a8b3b046fd..f7d2b0e770a834 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -45,6 +45,7 @@ class BottomSheet extends Component { this.onScroll = this.onScroll.bind( this ); this.isScrolling = this.isScrolling.bind( this ); this.onShouldEnableScroll = this.onShouldEnableScroll.bind( this ); + this.onShouldSetMaxHeight = this.onShouldSetMaxHeight.bind( this ); this.onDimensionsChange = this.onDimensionsChange.bind( this ); this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this ); this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind( @@ -61,6 +62,7 @@ class BottomSheet extends Component { scrollEnabled: true, isScrolling: false, onCloseBottomSheet: null, + setMaxHeight: true, }; SafeArea.getSafeAreaInsetsForRootView().then( @@ -189,6 +191,10 @@ class BottomSheet extends Component { this.setState( { onCloseBottomSheet: action } ); } + onShouldSetMaxHeight( value ) { + this.setState( { setMaxHeight: value } ); + } + onCloseBottomSheet() { const { onClose } = this.props; const { onCloseBottomSheet } = this.state; @@ -196,7 +202,6 @@ class BottomSheet extends Component { onCloseBottomSheet(); } onClose(); - return this.onHandleClosingBottomSheet( null ); } render() { @@ -219,6 +224,7 @@ class BottomSheet extends Component { safeAreaBottomInset, isScrolling, scrollEnabled, + setMaxHeight, } = this.state; const panResponder = PanResponder.create( { @@ -301,7 +307,7 @@ class BottomSheet extends Component { onScrollBeginDrag={ () => this.isScrolling( true ) } onScrollEndDrag={ () => this.isScrolling( false ) } scrollEventThrottle={ 16 } - style={ { maxHeight } } + style={ setMaxHeight ? { maxHeight } : {} } contentContainerStyle={ [ styles.content, hideHeader && styles.emptyHeader, @@ -314,6 +320,8 @@ class BottomSheet extends Component { value={ { shouldEnableBottomSheetScroll: this .onShouldEnableScroll, + shouldSetBottomSheetMaxHeight: this + .onShouldSetMaxHeight, isBottomSheetScrolling: isScrolling, onCloseBottomSheet: this .onHandleClosingBottomSheet, diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 08d3a6cbe69009..9757fca75d53ed 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -29,21 +29,25 @@ function ColorSettings( { setTextColor, previousScreen, shouldEnableBottomSheetScroll, + shouldSetBottomSheetMaxHeight, isBottomSheetScrolling, onCloseBottomSheet, getStylesFromColorScheme, } ) { - const [ segment, setSegment ] = useState( 'Solid' ); + const segments = [ 'Solid', 'Gradient' ]; + const [ segment, setSegment ] = useState( segments[ 0 ] ); + + useEffect( () => { + changeBottomSheetContent( 'Settings' ); + shouldSetBottomSheetMaxHeight( true ); + onCloseBottomSheet( null ); + }, [] ); const horizontalSeparatorStyle = getStylesFromColorScheme( styles.horizontalSeparator, styles.horizontalSeparatorDark ); - useEffect( () => { - setSegment( 'Solid' ); - }, [ screen ] ); - function getColorPalette() { return ( setSegment( item ) } addonLeft={ @@ -136,6 +140,9 @@ function ColorSettings( { shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } + shouldSetBottomSheetMaxHeight={ + shouldSetBottomSheetMaxHeight + } isBottomSheetScrolling={ isBottomSheetScrolling } setTextColor={ setTextColor } setBackgroundColor={ setBackgroundColor } @@ -146,6 +153,7 @@ function ColorSettings( { } clientId={ clientId } onCloseBottomSheet={ onCloseBottomSheet } + changeBottomSheetContent={ changeBottomSheetContent } /> ) } diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index cdca124f2c8a18..cf8b7fe2a6a689 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -77,6 +77,11 @@ const SegmentedControls = ( { } ); const [ positionAnimationValue ] = useState( new Animated.Value( 0 ) ); + useEffect( () => { + setActiveSegmentIndex( 0 ); + segmentHandler( segments[ 0 ] ); + }, [] ); + useEffect( () => { positionAnimationValue.setValue( calculateEndValue( activeSegmentIndex ) From ad5d6a7c3e2fd3b6947541ba4a45e7147e6addf2 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 31 Mar 2020 11:12:55 +0200 Subject: [PATCH 31/68] Correct impementation to correct transition --- .../block-library/src/button/edit.native.js | 64 ++++++++++--------- .../src/mobile/color-settings/index.native.js | 1 - 2 files changed, 33 insertions(+), 32 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index d9c88e158da374..ba7e7a0146ffff 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -531,38 +531,40 @@ class ButtonEdit extends Component { ) } - - this.changeBottomSheetContent( + { screen !== 'Settings' && ( + + ) => + this.changeBottomSheetContent( + destination + ) + } + backgroundColor={ backgroundColor } + textColor={ + textColor.color || '#ffffff' + } + setTextColor={ setTextColor } + setBackgroundColor={ + setBackgroundColor + } + clientId={ clientId } + previousScreen={ previousScreen } + shouldEnableBottomSheetScroll={ + shouldEnableBottomSheetScroll + } + isBottomSheetScrolling={ + isBottomSheetScrolling + } + shouldSetBottomSheetMaxHeight={ + shouldSetBottomSheetMaxHeight + } + onCloseBottomSheet={ + onCloseBottomSheet + } + /> + ) } ); } } diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 9757fca75d53ed..9aa927d2e65df1 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -38,7 +38,6 @@ function ColorSettings( { const [ segment, setSegment ] = useState( segments[ 0 ] ); useEffect( () => { - changeBottomSheetContent( 'Settings' ); shouldSetBottomSheetMaxHeight( true ); onCloseBottomSheet( null ); }, [] ); From 5c7692e866e66939a64c51cdf7d68e795a7d0d6d Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 1 Apr 2020 10:17:07 +0200 Subject: [PATCH 32/68] Support android hardware back button in subsheet navigation --- .../block-library/src/button/edit.native.js | 21 ++++++++++++---- .../src/mobile/bottom-sheet/index.native.js | 25 ++++++++++++++++--- .../src/mobile/color-settings/index.native.js | 22 ++++++++++++++-- 3 files changed, 58 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index ba7e7a0146ffff..04df38b029a646 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -311,7 +311,7 @@ class ButtonEdit extends Component { this.richTextRef = richText; } - changeBottomSheetContent( destination ) { + changeBottomSheetContent( destination, callback ) { const { screen } = this.state; LayoutAnimation.configureNext( LayoutAnimation.create( @@ -320,10 +320,17 @@ class ButtonEdit extends Component { LayoutAnimation.Properties.opacity ) ); - this.setState( { - screen: destination, - previousScreen: screen, - } ); + this.setState( + { + screen: destination, + previousScreen: screen, + }, + () => { + if ( callback ) { + callback(); + } + } + ); } render() { @@ -464,6 +471,7 @@ class ButtonEdit extends Component { shouldEnableBottomSheetScroll, shouldSetBottomSheetMaxHeight, onCloseBottomSheet, + onBackButtonPress, } ) => { return ( <> @@ -563,6 +571,9 @@ class ButtonEdit extends Component { onCloseBottomSheet={ onCloseBottomSheet } + onBackButtonPress={ + onBackButtonPress + } /> ) } diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index f7d2b0e770a834..ce0f29bf878900 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -51,6 +51,10 @@ class BottomSheet extends Component { this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind( this ); + this.onBackButtonPress = this.onBackButtonPress.bind( this ); + this.onHandleBackButtonPress = this.onHandleBackButtonPress.bind( + this + ); this.keyboardWillShow = this.keyboardWillShow.bind( this ); this.keyboardDidHide = this.keyboardDidHide.bind( this ); @@ -62,6 +66,7 @@ class BottomSheet extends Component { scrollEnabled: true, isScrolling: false, onCloseBottomSheet: null, + onBackButtonPress: null, setMaxHeight: true, }; @@ -183,6 +188,10 @@ class BottomSheet extends Component { this.setState( { scrollEnabled: value } ); } + onShouldSetMaxHeight( value ) { + this.setState( { setMaxHeight: value } ); + } + isScrolling( value ) { this.setState( { isScrolling: value } ); } @@ -191,8 +200,8 @@ class BottomSheet extends Component { this.setState( { onCloseBottomSheet: action } ); } - onShouldSetMaxHeight( value ) { - this.setState( { setMaxHeight: value } ); + onHandleBackButtonPress( action ) { + this.setState( { onBackButtonPress: action } ); } onCloseBottomSheet() { @@ -204,6 +213,15 @@ class BottomSheet extends Component { onClose(); } + onBackButtonPress() { + const { onClose } = this.props; + const { onBackButtonPress } = this.state; + if ( onBackButtonPress ) { + return onBackButtonPress(); + } + return onClose(); + } + render() { const { title = '', @@ -271,7 +289,7 @@ class BottomSheet extends Component { backdropTransitionOutTiming={ 50 } backdropOpacity={ 0.2 } onBackdropPress={ this.onCloseBottomSheet } - onBackButtonPress={ this.onCloseBottomSheet } + onBackButtonPress={ this.onBackButtonPress } onSwipe={ this.onCloseBottomSheet } onDismiss={ Platform.OS === 'ios' ? onDismiss : undefined } onModalHide={ @@ -325,6 +343,7 @@ class BottomSheet extends Component { isBottomSheetScrolling: isScrolling, onCloseBottomSheet: this .onHandleClosingBottomSheet, + onBackButtonPress: this.onHandleBackButtonPress, } } > diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 9aa927d2e65df1..8b070ad2b25e46 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { View, Text } from 'react-native'; +import { View, Text, Platform } from 'react-native'; /** * WordPress dependencies */ @@ -32,11 +32,28 @@ function ColorSettings( { shouldSetBottomSheetMaxHeight, isBottomSheetScrolling, onCloseBottomSheet, + onBackButtonPress, getStylesFromColorScheme, } ) { + const isIOS = Platform.OS === 'ios'; const segments = [ 'Solid', 'Gradient' ]; const [ segment, setSegment ] = useState( segments[ 0 ] ); + useEffect( () => { + if ( screen === 'Background' || screen === 'Text' ) { + onBackButtonPress( () => + changeBottomSheetContent( + 'Settings', + onBackButtonPress( null ) + ) + ); + } else { + onBackButtonPress( () => + changeBottomSheetContent( previousScreen ) + ); + } + }, [ screen ] ); + useEffect( () => { shouldSetBottomSheetMaxHeight( true ); onCloseBottomSheet( null ); @@ -80,7 +97,7 @@ function ColorSettings( { addonLeft={ Date: Wed, 1 Apr 2020 10:39:08 +0200 Subject: [PATCH 33/68] Remove selecting swatch --- .../src/mobile/color-settings/index.native.js | 31 +++---------------- .../mobile/color-settings/style.native.scss | 6 ---- 2 files changed, 5 insertions(+), 32 deletions(-) diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 8b070ad2b25e46..abc1e20f4e4f1a 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { View, Text, Platform } from 'react-native'; +import { View, Text } from 'react-native'; /** * WordPress dependencies */ @@ -35,7 +35,6 @@ function ColorSettings( { onBackButtonPress, getStylesFromColorScheme, } ) { - const isIOS = Platform.OS === 'ios'; const segments = [ 'Solid', 'Gradient' ]; const [ segment, setSegment ] = useState( segments[ 0 ] ); @@ -95,21 +94,10 @@ function ColorSettings( { segments={ segments } segmentHandler={ ( item ) => setSegment( item ) } addonLeft={ - - - { backgroundColor } - - - + } /> @@ -126,15 +114,6 @@ function ColorSettings( { - - { textColor } - Date: Thu, 2 Apr 2020 12:01:27 +0200 Subject: [PATCH 34/68] Correct scrolling, border width issue --- packages/block-library/src/button/edit.native.js | 8 +++++++- packages/components/src/color-palette/index.native.js | 4 ++++ .../components/src/mobile/color-settings/index.native.js | 1 + 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index a7d01ed01b5640..4cd30c5d60e270 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -411,7 +411,13 @@ class ButtonEdit extends Component { styles.outline, { borderRadius: outlineBorderRadius, - borderWidth: styles.button.borderWidth, + // Border Width has to be spread since width is thicker + // on Android when border radius is decreased to 0 + borderLeftWidth: styles.button.borderWidth, + borderTopWidth: styles.button.borderWidth, + borderBottomWidth: + styles.button.borderWidth, + borderRightWidth: styles.button.borderWidth, borderColor: backgroundColor, }, ] } diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index b8534165d6e719..b470ef68addc6f 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -37,6 +37,7 @@ function ColorPalette( { currentScreen, onCustomPress, getStylesFromColorScheme, + shouldEnableBottomSheetScroll, } ) { const customSwatchGradients = [ 'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)', @@ -201,6 +202,9 @@ function ColorPalette( { horizontal showsHorizontalScrollIndicator={ false } keyboardShouldPersistTaps="always" + disableScrollViewPanResponder + onScrollBeginDrag={ () => shouldEnableBottomSheetScroll( false ) } + onScrollEndDrag={ () => shouldEnableBottomSheetScroll( true ) } ref={ scrollViewRef } > diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index abc1e20f4e4f1a..f5781ac3fb61ba 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -74,6 +74,7 @@ function ColorSettings( { currentScreen={ screen } clientId={ clientId } onCustomPress={ () => changeBottomSheetContent( 'Custom' ) } + shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } /> ); } From 3ded3911030289fadadfafc60e36e628d2bd5485 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 2 Apr 2020 14:03:43 +0200 Subject: [PATCH 35/68] Fix lint issues --- .../src/mobile/bottom-sheet/navigation-header.native.js | 4 ++-- .../components/src/mobile/color-settings/index.native.js | 6 +++--- .../components/src/mobile/segmented-control/index.native.js | 3 +-- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js index 8ed774a8f4f77e..176d7a915f0e9b 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js @@ -5,7 +5,7 @@ import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native'; /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { Icon, chevronLeft, arrowLeft } from '@wordpress/icons'; import { withPreferredColorScheme } from '@wordpress/compose'; /** @@ -68,7 +68,7 @@ function BottomSheetNavigationHeader( { style={ bottomSheetHeaderTitleStyle } maxFontSizeMultiplier={ 3 } > - { sprintf( __( '%s' ), screen ) } + { screen } diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index f5781ac3fb61ba..54cb96e326fa8b 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -35,7 +35,7 @@ function ColorSettings( { onBackButtonPress, getStylesFromColorScheme, } ) { - const segments = [ 'Solid', 'Gradient' ]; + const segments = [ __( 'Solid' ), __( 'Gradient' ) ]; const [ segment, setSegment ] = useState( segments[ 0 ] ); useEffect( () => { @@ -84,7 +84,7 @@ function ColorSettings( { { screen === 'Background' && ( changeBottomSheetContent( 'Settings' ) } @@ -106,7 +106,7 @@ function ColorSettings( { { screen === 'Text' && ( changeBottomSheetContent( 'Settings' ) } diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index cf8b7fe2a6a689..83e95b01e3c94a 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -14,7 +14,6 @@ import { take, values, map, reduce } from 'lodash'; /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; import { withPreferredColorScheme } from '@wordpress/compose'; @@ -155,7 +154,7 @@ const SegmentedControls = ( { { segments.map( ( segment, index ) => { return ( onHandlePress( segment, index ) } isSelected={ activeSegmentIndex === index } key={ index } From c4757a57fc62b74f9e00d5e748c25dabf49a50e7 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 2 Apr 2020 16:55:15 +0200 Subject: [PATCH 36/68] Add new lib to test setup --- test/native/setup.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/test/native/setup.js b/test/native/setup.js index fe55851be4827a..b9d78b70875280 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -84,6 +84,10 @@ jest.mock( 'react-native-linear-gradient', () => () => 'LinearGradient', { virtual: true, } ); +jest.mock( 'react-native-hsv-color-picker', () => () => 'HsvColorPicker', { + virtual: true, +} ); + // Overwrite some native module mocks from `react-native` jest preset: // https://github.com/facebook/react-native/blob/master/jest/setup.js // to fix issue "TypeError: Cannot read property 'Commands' of undefined" From 0f019e6f6d0e995de700cdd57c490f36d597657c Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 3 Apr 2020 12:26:11 +0200 Subject: [PATCH 37/68] Colors and outline refactor, creating gradient hoc --- .../src/components/gradients/index.js | 30 +++++++++++-------- .../block-library/src/button/edit.native.js | 7 +++++ .../src/color-indicator/index.native.js | 5 +++- .../src/color-indicator/style.native.scss | 20 ++++++++----- .../src/color-palette/index.native.js | 16 +++------- .../src/color-picker/index.native.js | 4 +-- .../src/color-picker/style.native.scss | 4 +-- packages/components/src/index.native.js | 1 - .../mobile/bottom-sheet/styles.native.scss | 22 +++++++------- .../src/mobile/color-settings/index.native.js | 12 ++++---- .../segmented-control/style.native.scss | 16 +++++----- .../index.native.js | 27 ----------------- 12 files changed, 74 insertions(+), 90 deletions(-) delete mode 100644 packages/components/src/unsupported-footer-control/index.native.js diff --git a/packages/block-editor/src/components/gradients/index.js b/packages/block-editor/src/components/gradients/index.js index 9b29eeccfe0b53..66d237e110fa38 100644 --- a/packages/block-editor/src/components/gradients/index.js +++ b/packages/block-editor/src/components/gradients/index.js @@ -42,29 +42,25 @@ function getGradientSlugByValue( gradients, value ) { return gradient && gradient.slug; } -export function __experimentalUseGradient( - { - gradientAttribute = 'gradient', - customGradientAttribute = 'customGradient', - } = {}, - customClientId -) { +export function __experimentalUseGradient( { + gradientAttribute = 'gradient', + customGradientAttribute = 'customGradient', +} = {} ) { const { clientId } = useBlockEditContext(); - const id = clientId || customClientId; const { gradients, gradient, customGradient } = useSelect( ( select ) => { const { getBlockAttributes, getSettings } = select( 'core/block-editor' ); - const attributes = getBlockAttributes( id ); + const attributes = getBlockAttributes( clientId ); return { gradient: attributes[ gradientAttribute ], customGradient: attributes[ customGradientAttribute ], gradients: getSettings().gradients, }; }, - [ id, gradientAttribute, customGradientAttribute ] + [ clientId, gradientAttribute, customGradientAttribute ] ); const { updateBlockAttributes } = useDispatch( 'core/block-editor' ); @@ -72,18 +68,18 @@ export function __experimentalUseGradient( ( newGradientValue ) => { const slug = getGradientSlugByValue( gradients, newGradientValue ); if ( slug ) { - updateBlockAttributes( id, { + updateBlockAttributes( clientId, { [ gradientAttribute ]: slug, [ customGradientAttribute ]: undefined, } ); return; } - updateBlockAttributes( id, { + updateBlockAttributes( clientId, { [ gradientAttribute ]: undefined, [ customGradientAttribute ]: newGradientValue, } ); }, - [ gradients, id, updateBlockAttributes ] + [ gradients, clientId, updateBlockAttributes ] ); const gradientClass = __experimentalGetGradientClass( gradient ); @@ -95,3 +91,11 @@ export function __experimentalUseGradient( } return { gradientClass, gradientValue, setGradient }; } + +export function __experimentalWithSetGradient( WrappedComponent ) { + return ( props ) => { + const { setGradient } = __experimentalUseGradient(); + + return ; + }; +} diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 4cd30c5d60e270..95b9a8e448dd8d 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -20,6 +20,7 @@ import { InspectorControls, BlockControls, SETTINGS_DEFAULTS, + __experimentalWithSetGradient, } from '@wordpress/block-editor'; import { TextControl, @@ -352,6 +353,7 @@ class ButtonEdit extends Component { onReplace, setBackgroundColor, setTextColor, + setGradient, } = this.props; const { placeholder, @@ -573,6 +575,7 @@ class ButtonEdit extends Component { setBackgroundColor={ setBackgroundColor } + setGradient={ setGradient } clientId={ clientId } previousScreen={ previousScreen } shouldEnableBottomSheetScroll={ @@ -590,6 +593,9 @@ class ButtonEdit extends Component { onBackButtonPress={ onBackButtonPress } + defaultSettings={ + SETTINGS_DEFAULTS + } /> ) } @@ -604,6 +610,7 @@ class ButtonEdit extends Component { export default compose( [ withInstanceId, + __experimentalWithSetGradient, withColors( 'backgroundColor', { textColor: 'color' } ), withSelect( ( select ) => { const { isEditorSidebarOpened } = select( 'core/edit-post' ); diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index 27a3a9c53ceaa1..799af87f5eed1a 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -16,7 +16,7 @@ import styles from './style.scss'; function SelectedIcon( { opacity } ) { return ( - + ); @@ -43,12 +43,14 @@ function ColorIndicator( { style={ [ circleStyle, style ] } gradientValue={ color } > + { isSelected && } ); } else if ( custom ) { return ( + { color.map( ( gradientValue ) => { return ( + { isSelected && } ); diff --git a/packages/components/src/color-indicator/style.native.scss b/packages/components/src/color-indicator/style.native.scss index 916ccdff665a40..6704861f05b27c 100644 --- a/packages/components/src/color-indicator/style.native.scss +++ b/packages/components/src/color-indicator/style.native.scss @@ -2,7 +2,7 @@ height: 28px; width: 28px; border-radius: 14px; - background-color: #fff; + background-color: $white; justify-content: center; align-items: center; } @@ -14,12 +14,10 @@ margin-right: 8px; justify-content: center; align-items: center; - border-color: rgba(0, 0, 0, 0.1); - border-width: $border-width; } .circleOptionDark { - border-color: rgba(255, 255, 255, 0.1); + border-color: $dark-ultra-dim; } .absolute { @@ -33,12 +31,20 @@ } .outline { - border-color: rgba(0, 0, 0, 0.1); + border-color: $light-dim; + top: 0; + bottom: 0; + left: 0; + right: 0; + border-radius: 24px; + border-width: $border-width; + position: absolute; +} + +.selectedOutline { top: -$border-width; bottom: -$border-width; left: -$border-width; right: -$border-width; border-radius: 14px; - border-width: $border-width; - position: absolute; } diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index b470ef68addc6f..647dcf8c52c3fe 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -12,10 +12,6 @@ import { map } from 'lodash'; /** * WordPress dependencies */ -import { - SETTINGS_DEFAULTS, - __experimentalUseGradient, -} from '@wordpress/block-editor'; import { useState, useEffect, createRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { withPreferredColorScheme } from '@wordpress/compose'; @@ -30,9 +26,10 @@ const ANIMATION_DURATION = 200; function ColorPalette( { setBackgroundColor, setTextColor, + setGradient, backgroundColor, textColor, - clientId, + defaultSettings, currentSegment, currentScreen, onCustomPress, @@ -56,7 +53,7 @@ function ColorPalette( { slug: 'black', color: '#000000', }, - ...SETTINGS_DEFAULTS.colors, + ...defaultSettings.colors, ]; const scrollViewRef = createRef(); @@ -64,18 +61,13 @@ function ColorPalette( { const isGradientSegment = currentSegment === 'Gradient'; const isTextScreen = currentScreen === 'Text'; - const { setGradient } = __experimentalUseGradient( {}, clientId ); - const [ activeBgColor, setActiveBgColor ] = useState( backgroundColor ); const [ activeTextColor, setActiveTextColor ] = useState( textColor ); const [ scale ] = useState( new Animated.Value( 1 ) ); const [ opacity ] = useState( new Animated.Value( 1 ) ); const defaultColors = map( extendedDefaultColors, 'color' ); - const defaultGradientColors = map( - SETTINGS_DEFAULTS.gradients, - 'gradient' - ); + const defaultGradientColors = map( defaultSettings.gradients, 'gradient' ); useEffect( () => { scrollViewRef.current.scrollTo( { x: 0, y: 0 } ); diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index f18087951a3e45..20ce01e2738372 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -10,7 +10,6 @@ import tinycolor from 'tinycolor2'; import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { BottomSheet } from '@wordpress/components'; -import { __experimentalUseGradient } from '@wordpress/block-editor'; import { withPreferredColorScheme } from '@wordpress/compose'; import { Icon, check, close } from '@wordpress/icons'; /** @@ -24,10 +23,10 @@ function ColorPicker( { isBottomSheetScrolling, setBackgroundColor, setTextColor, + setGradient, backgroundColor, textColor, onNavigationBack, - clientId, previousScreen, onCloseBottomSheet = () => {}, getStylesFromColorScheme, @@ -41,7 +40,6 @@ function ColorPicker( { const [ val, setValue ] = useState( 0.5 ); const [ savedBgColor ] = useState( backgroundColor ); const [ savedTextColor ] = useState( textColor ); - const { setGradient } = __experimentalUseGradient( {}, clientId ); const { paddingLeft: spacing, diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss index ce4f7bcbc32573..8d0101f8d12674 100644 --- a/packages/components/src/color-picker/style.native.scss +++ b/packages/components/src/color-picker/style.native.scss @@ -34,13 +34,13 @@ .colorText { font-family: $default-monospace-font; - color: rgba(0, 0, 0, 0.87); + color: $light-primary; font-size: 16px; font-weight: 400; } .colorTextDark { - color: rgba(255, 255, 255, 0.87); + color: $dark-primary; } .picker { diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index c076ad4749d17b..ba4d342281b581 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -36,7 +36,6 @@ export { default as ToggleControl } from './toggle-control'; export { default as SelectControl } from './select-control'; export { default as RangeControl } from './range-control'; export { default as ResizableBox } from './resizable-box'; -export { default as UnsupportedFooterControl } from './unsupported-footer-control'; export { default as ColorControl } from './color-control'; export { default as QueryControls } from './query-controls'; diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index f1b6535ce5120e..9320388f065101 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -122,28 +122,28 @@ .cellLabel { font-size: 17px; - color: #2e4453; + color: $gray-dark; margin-right: 12px; flex-shrink: 1; } .cellLabelCentered { font-size: 17px; - color: #2e4453; + color: $gray-dark; flex: 1; text-align: center; } .cellLabelLeftAlignNoIcon { font-size: 17px; - color: #2e4453; + color: $gray-dark; flex: 1; margin-left: 0; } .cellValue { font-size: 17px; - color: #2e4453; + color: $gray-dark; text-align: right; flex: 1; } @@ -174,9 +174,9 @@ // Color Cell .colorCircle { - width: 32px; - height: 32px; - border-radius: 16px; + width: 2 * $panel-padding; + height: 2 * $panel-padding; + border-radius: $panel-padding; } // Navigation Header @@ -206,7 +206,7 @@ } .bottomSheetHeaderTitle { - color: rgba(0, 0, 0, 0.87); + color: $light-primary; text-align: center; font-weight: 600; font-size: 16px; @@ -214,7 +214,7 @@ } .bottomSheetHeaderTitleDark { - color: rgba(255, 255, 255, 0.87); + color: $dark-primary; } .bottomSheetButtonText { @@ -231,9 +231,9 @@ } .arrowLeftIcon { - color: #50575e; + color: $gray-60; } .arrowLeftIconDark { - color: rgba(255, 255, 255, 0.6); + color: $dark-secondary; } diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 54cb96e326fa8b..6f9a0dc885c653 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -24,7 +24,7 @@ function ColorSettings( { changeBottomSheetContent, backgroundColor, setBackgroundColor, - clientId, + setGradient, textColor, setTextColor, previousScreen, @@ -34,6 +34,7 @@ function ColorSettings( { onCloseBottomSheet, onBackButtonPress, getStylesFromColorScheme, + defaultSettings, } ) { const segments = [ __( 'Solid' ), __( 'Gradient' ) ]; const [ segment, setSegment ] = useState( segments[ 0 ] ); @@ -68,13 +69,14 @@ function ColorSettings( { changeBottomSheetContent( 'Custom' ) } shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } + defaultSettings={ defaultSettings } /> ); } @@ -133,24 +135,24 @@ function ColorSettings( { { screen === 'Custom' && ( changeBottomSheetContent( previousScreen ) } - clientId={ clientId } onCloseBottomSheet={ onCloseBottomSheet } changeBottomSheetContent={ changeBottomSheetContent } + isBottomSheetScrolling={ isBottomSheetScrolling } + previousScreen={ previousScreen } /> ) } diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss index 9ef18aff0aee2d..abacc818804b14 100644 --- a/packages/components/src/mobile/segmented-control/style.native.scss +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -23,21 +23,21 @@ $border-radius-ios: 7px; .selected { position: absolute; - background-color: #fff; + background-color: $white; } .selectedDark { - background-color: rgba(255, 255, 255, 0.25); + background-color: $dark-quaternary; } .shadowIOS { - box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); + box-shadow: 0 0 8px $light-dim; z-index: 2; } .container { min-height: $container-height; - background-color: rgba(0, 0, 0, 0.04); + background-color: $light-ultra-dim; border-radius: $container-height / 2; align-items: center; flex-direction: row; @@ -47,7 +47,7 @@ $border-radius-ios: 7px; } .containerDark { - background-color: rgba(255, 255, 255, 0.08); + background-color: $dark-ultra-dim; } .containerIOS { @@ -61,7 +61,7 @@ $border-radius-ios: 7px; min-height: $segment-height - 2 * $border-width-ios; border-width: $border-width; border-radius: $container-height / 2; - border-color: rgba(0, 0, 0, 0.04); + border-color: $light-ultra-dim; } .outlineIOS { @@ -73,7 +73,7 @@ $border-radius-ios: 7px; font-size: 12px; font-weight: 600; text-align: center; - color: rgba(0, 0, 0, 0.6); + color: $light-secondary; } .buttonTextDefaultDark { @@ -81,7 +81,7 @@ $border-radius-ios: 7px; } .buttonTextSelected { - color: rgba(0, 0, 0, 0.87); + color: $light-primary; } .buttonTextSelectedDark { diff --git a/packages/components/src/unsupported-footer-control/index.native.js b/packages/components/src/unsupported-footer-control/index.native.js deleted file mode 100644 index 26985dd58a6816..00000000000000 --- a/packages/components/src/unsupported-footer-control/index.native.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Internal dependencies - */ -import UnsupportedFooterCell from '../mobile/bottom-sheet/unsupported-footer-cell'; - -function UnsupportedFooterControl( { - label, - help, - instanceId, - className, - ...props -} ) { - const id = `inspector-unsupported-footer-control-${ instanceId }`; - - return ( - - ); -} - -export default UnsupportedFooterControl; From 7040712a13f86604711b8c432667ecac6ce8dabb Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 6 Apr 2020 11:44:54 +0200 Subject: [PATCH 38/68] Navigation refactor, segemented controls refactor --- .../block-library/src/button/edit.native.js | 50 ++++++----- .../src/color-palette/index.native.js | 6 +- .../src/color-picker/index.native.js | 6 +- .../src/mobile/bottom-sheet/index.native.js | 27 +++--- .../src/mobile/color-settings/index.native.js | 83 ++++++++++--------- .../mobile/segmented-control/index.native.js | 12 ++- 6 files changed, 98 insertions(+), 86 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 95b9a8e448dd8d..dcdaa78f21e559 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -77,9 +77,7 @@ class ButtonEdit extends Component { this.onToggleLinkSettings = this.onToggleLinkSettings.bind( this ); this.onToggleButtonFocus = this.onToggleButtonFocus.bind( this ); this.setRef = this.setRef.bind( this ); - this.changeBottomSheetContent = this.changeBottomSheetContent.bind( - this - ); + this.onReplaceSubsheet = this.onReplaceSubsheet.bind( this ); // `isEditingURL` property is used to prevent from automatically pasting // URL from clipboard while trying to clear `Button URL` field and then @@ -93,8 +91,7 @@ class ButtonEdit extends Component { maxWidth: INITIAL_MAX_WIDTH, isLinkSheetVisible: false, isButtonFocused, - previousScreen: '', - screen: 'Settings', + stack: [ 'Settings' ], }; } @@ -123,7 +120,7 @@ class ButtonEdit extends Component { ( ! prevProps.editorSidebarOpened && editorSidebarOpened ) || ( ! prevState.isLinkSheetVisible && isLinkSheetVisible ) ) { - this.setState( { screen: 'Settings' } ); + this.setState( { stack: [ 'Settings' ] } ); if ( Platform.OS === 'android' && this.richTextRef ) { this.richTextRef.blur(); this.onToggleButtonFocus( false ); @@ -322,8 +319,9 @@ class ButtonEdit extends Component { this.richTextRef = richText; } - changeBottomSheetContent( destination, callback ) { - const { screen } = this.state; + onReplaceSubsheet( destination, callback ) { + const { stack } = this.state; + LayoutAnimation.configureNext( LayoutAnimation.create( ANIMATION_DURATION, @@ -331,11 +329,13 @@ class ButtonEdit extends Component { LayoutAnimation.Properties.opacity ) ); + + const containedInStack = stack.includes( destination ); + const nextStack = [ ...stack, destination ]; + const previousStack = stack.slice( 0, -1 ); + this.setState( - { - screen: destination, - previousScreen: screen, - }, + { stack: containedInStack ? previousStack : nextStack }, () => { if ( callback ) { callback(); @@ -367,8 +367,7 @@ class ButtonEdit extends Component { maxWidth, isLinkSheetVisible, isButtonFocused, - screen, - previousScreen, + stack, } = this.state; const borderRadiusValue = @@ -381,6 +380,7 @@ class ButtonEdit extends Component { styles.button.paddingTop + styles.button.borderWidth : 0; + const currentScreen = stack[ stack.length - 1 ]; // To achieve proper expanding and shrinking `RichText` on iOS, there is a need to set a `minWidth` // value at least on 1 when `RichText` is focused or when is not focused, but `RichText` value is @@ -489,11 +489,11 @@ class ButtonEdit extends Component { shouldEnableBottomSheetScroll, shouldSetBottomSheetMaxHeight, onCloseBottomSheet, - onBackButtonPress, + onHardwareButtonPress, } ) => { return ( <> - { screen === 'Settings' && ( + { currentScreen === 'Settings' && ( { - this.changeBottomSheetContent( + this.onReplaceSubsheet( 'Background' ); } } @@ -533,7 +533,7 @@ class ButtonEdit extends Component { /> { - this.changeBottomSheetContent( + this.onReplaceSubsheet( 'Text' ); } } @@ -557,13 +557,13 @@ class ButtonEdit extends Component { ) } - { screen !== 'Settings' && ( + { currentScreen !== 'Settings' && ( - this.changeBottomSheetContent( + this.onReplaceSubsheet( destination ) } @@ -576,8 +576,6 @@ class ButtonEdit extends Component { setBackgroundColor } setGradient={ setGradient } - clientId={ clientId } - previousScreen={ previousScreen } shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } @@ -590,8 +588,8 @@ class ButtonEdit extends Component { onCloseBottomSheet={ onCloseBottomSheet } - onBackButtonPress={ - onBackButtonPress + onHardwareButtonPress={ + onHardwareButtonPress } defaultSettings={ SETTINGS_DEFAULTS diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 647dcf8c52c3fe..5bed18d7f35f60 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -110,7 +110,7 @@ function ColorPalette( { ] ).start(); } - const bounce = scale.interpolate( { + const scaleInterpolation = scale.interpolate( { inputRange: [ 1, 1.5, 2 ], outputRange: [ 1, 0.7, 1 ], } ); @@ -142,7 +142,9 @@ function ColorPalette( { return ( <> { palette.map( ( color ) => { - const scaleValue = isSelected( color ) ? bounce : 1; + const scaleValue = isSelected( color ) + ? scaleInterpolation + : 1; return ( onColorPress( color ) } diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 20ce01e2738372..db323b81e57ca2 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -18,8 +18,8 @@ import { Icon, check, close } from '@wordpress/icons'; import styles from './style.scss'; function ColorPicker( { - shouldEnableBottomSheetScroll = () => {}, - shouldSetBottomSheetMaxHeight = () => {}, + shouldEnableBottomSheetScroll, + shouldSetBottomSheetMaxHeight, isBottomSheetScrolling, setBackgroundColor, setTextColor, @@ -28,7 +28,7 @@ function ColorPicker( { textColor, onNavigationBack, previousScreen, - onCloseBottomSheet = () => {}, + onCloseBottomSheet, getStylesFromColorScheme, } ) { const isIOS = Platform.OS === 'ios'; diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 7e66ac0f0497c8..ab4fab0618f2c2 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -37,6 +37,10 @@ import KeyboardAvoidingView from './keyboard-avoiding-view'; export const { Provider: BottomSheetProvider, Consumer } = createContext( { isBottomSheetScrolling: false, + shouldEnableBottomSheetScroll: () => {}, + shouldSetBottomSheetMaxHeight: () => {}, + onCloseBottomSheet: () => {}, + onHardwareButtonPress: () => {}, } ); class BottomSheet extends Component { @@ -52,8 +56,8 @@ class BottomSheet extends Component { this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind( this ); - this.onBackButtonPress = this.onBackButtonPress.bind( this ); - this.onHandleBackButtonPress = this.onHandleBackButtonPress.bind( + this.onHardwareButtonPress = this.onHardwareButtonPress.bind( this ); + this.onHandleHardwareButtonPress = this.onHandleHardwareButtonPress.bind( this ); this.keyboardWillShow = this.keyboardWillShow.bind( this ); @@ -67,7 +71,7 @@ class BottomSheet extends Component { scrollEnabled: true, isScrolling: false, onCloseBottomSheet: null, - onBackButtonPress: null, + onHardwareButtonPress: null, setMaxHeight: true, }; @@ -212,8 +216,8 @@ class BottomSheet extends Component { this.setState( { onCloseBottomSheet: action } ); } - onHandleBackButtonPress( action ) { - this.setState( { onBackButtonPress: action } ); + onHandleHardwareButtonPress( action ) { + this.setState( { onHardwareButtonPress: action } ); } onCloseBottomSheet() { @@ -225,11 +229,11 @@ class BottomSheet extends Component { onClose(); } - onBackButtonPress() { + onHardwareButtonPress() { const { onClose } = this.props; - const { onBackButtonPress } = this.state; - if ( onBackButtonPress ) { - return onBackButtonPress(); + const { onHardwareButtonPress } = this.state; + if ( onHardwareButtonPress ) { + return onHardwareButtonPress(); } return onClose(); } @@ -301,7 +305,7 @@ class BottomSheet extends Component { backdropTransitionOutTiming={ 50 } backdropOpacity={ 0.2 } onBackdropPress={ this.onCloseBottomSheet } - onBackButtonPress={ this.onBackButtonPress } + onHardwareButtonPress={ this.onHardwareButtonPress } onSwipe={ this.onCloseBottomSheet } onDismiss={ Platform.OS === 'ios' ? onDismiss : undefined } onModalHide={ @@ -355,7 +359,8 @@ class BottomSheet extends Component { isBottomSheetScrolling: isScrolling, onCloseBottomSheet: this .onHandleClosingBottomSheet, - onBackButtonPress: this.onHandleBackButtonPress, + onHardwareButtonPress: this + .onHandleHardwareButtonPress, } } > diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 6f9a0dc885c653..fd67bea02b4225 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -20,41 +20,39 @@ import SegmentedControls from '../segmented-control'; import styles from './style.scss'; function ColorSettings( { - screen, - changeBottomSheetContent, + stack, + onReplaceSubsheet, backgroundColor, setBackgroundColor, setGradient, textColor, setTextColor, - previousScreen, shouldEnableBottomSheetScroll, shouldSetBottomSheetMaxHeight, isBottomSheetScrolling, onCloseBottomSheet, - onBackButtonPress, + onHardwareButtonPress, getStylesFromColorScheme, defaultSettings, } ) { - const segments = [ __( 'Solid' ), __( 'Gradient' ) ]; - const [ segment, setSegment ] = useState( segments[ 0 ] ); + const segments = [ 'Solid', 'Gradient' ]; + const isGradient = backgroundColor.includes( 'linear-gradient' ); + const selectedSegmentIndex = isGradient ? 1 : 0; + const currentScreen = stack[ stack.length - 1 ]; + const previousScreen = stack[ stack.length - 2 ]; + + const [ activeSegment, setActiveSegment ] = useState( + segments[ selectedSegmentIndex ] + ); useEffect( () => { - if ( screen === 'Background' || screen === 'Text' ) { - onBackButtonPress( () => - changeBottomSheetContent( - 'Settings', - onBackButtonPress( null ) - ) - ); - } else { - onBackButtonPress( () => - changeBottomSheetContent( previousScreen ) - ); - } - }, [ screen ] ); + onHardwareButtonPress( () => + onReplaceSubsheet( previousScreen, afterHardwareButtonPress() ) + ); + }, [ currentScreen ] ); useEffect( () => { + setActiveSegment( segments[ selectedSegmentIndex ] ); shouldSetBottomSheetMaxHeight( true ); onCloseBottomSheet( null ); }, [] ); @@ -64,6 +62,11 @@ function ColorSettings( { styles.horizontalSeparatorDark ); + function afterHardwareButtonPress() { + onHardwareButtonPress( null ); + shouldSetBottomSheetMaxHeight( true ); + } + function getColorPalette() { return ( changeBottomSheetContent( 'Custom' ) } + currentSegment={ activeSegment } + currentScreen={ currentScreen } + onCustomPress={ () => onReplaceSubsheet( 'Custom' ) } shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } defaultSettings={ defaultSettings } /> ); } + function getNavigationHeader( screen ) { + return ( + onReplaceSubsheet( previousScreen ) } + /> + ); + } + return ( - { screen === 'Background' && ( + { currentScreen === 'Background' && ( - - changeBottomSheetContent( 'Settings' ) - } - /> + { getNavigationHeader( __( 'Background' ) ) } { getColorPalette() } setSegment( item ) } + segmentHandler={ ( item ) => setActiveSegment( item ) } + selectedIndex={ selectedSegmentIndex } addonLeft={ ) } - { screen === 'Text' && ( + { currentScreen === 'Text' && ( - - changeBottomSheetContent( 'Settings' ) - } - /> + { getNavigationHeader( __( 'Text' ) ) } { getColorPalette() } @@ -132,7 +135,7 @@ function ColorSettings( { ) } - { screen === 'Custom' && ( + { currentScreen === 'Custom' && ( - changeBottomSheetContent( previousScreen ) + onReplaceSubsheet( previousScreen ) } onCloseBottomSheet={ onCloseBottomSheet } - changeBottomSheetContent={ changeBottomSheetContent } + onReplaceSubsheet={ onReplaceSubsheet } isBottomSheetScrolling={ isBottomSheetScrolling } previousScreen={ previousScreen } /> diff --git a/packages/components/src/mobile/segmented-control/index.native.js b/packages/components/src/mobile/segmented-control/index.native.js index 83e95b01e3c94a..d0dccf19d14766 100644 --- a/packages/components/src/mobile/segmented-control/index.native.js +++ b/packages/components/src/mobile/segmented-control/index.native.js @@ -66,19 +66,23 @@ const Segment = ( { const SegmentedControls = ( { segments, segmentHandler, + selectedIndex, addonLeft, addonRight, getStylesFromColorScheme, } ) => { - const [ activeSegmentIndex, setActiveSegmentIndex ] = useState( 0 ); + const selectedSegmentIndex = selectedIndex || 0; + const [ activeSegmentIndex, setActiveSegmentIndex ] = useState( + selectedSegmentIndex + ); const [ segmentsDimensions, setSegmentsDimensions ] = useState( { - '0': { width: 0, height: 0 }, + [ activeSegmentIndex ]: { width: 0, height: 0 }, } ); const [ positionAnimationValue ] = useState( new Animated.Value( 0 ) ); useEffect( () => { - setActiveSegmentIndex( 0 ); - segmentHandler( segments[ 0 ] ); + setActiveSegmentIndex( selectedSegmentIndex ); + segmentHandler( segments[ selectedSegmentIndex ] ); }, [] ); useEffect( () => { From 8eaf90ae8047c16d8514cd68516249b47b5f4467 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 8 Apr 2020 10:51:48 +0200 Subject: [PATCH 39/68] ColorPalette fix, correct swatches border color --- .../src/color-indicator/index.native.js | 22 ++++++++++--------- .../src/color-indicator/style.native.scss | 9 ++++---- .../src/color-palette/index.native.js | 2 +- 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index 799af87f5eed1a..ca166b6c6e257a 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -32,30 +32,30 @@ function ColorIndicator( { } ) { const isGradient = color.includes( 'linear-gradient' ); - const circleStyle = getStylesFromColorScheme( - styles.circleOption, - styles.circleOptionDark + const outlineStyle = getStylesFromColorScheme( + styles.outline, + styles.outlineDark ); if ( isGradient ) { return ( - + { isSelected && } ); } else if ( custom ) { return ( - - + + { color.map( ( gradientValue ) => { return ( ); @@ -65,8 +65,10 @@ function ColorIndicator( { ); } return ( - - + + { isSelected && } ); diff --git a/packages/components/src/color-indicator/style.native.scss b/packages/components/src/color-indicator/style.native.scss index 6704861f05b27c..b4ac79720967f4 100644 --- a/packages/components/src/color-indicator/style.native.scss +++ b/packages/components/src/color-indicator/style.native.scss @@ -16,10 +16,6 @@ align-items: center; } -.circleOptionDark { - border-color: $dark-ultra-dim; -} - .absolute { position: absolute; margin-right: 0; @@ -39,6 +35,11 @@ border-radius: 24px; border-width: $border-width; position: absolute; + z-index: 2; +} + +.outlineDark { + border-color: $dark-ultra-dim; } .selectedOutline { diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 5bed18d7f35f60..08b4324ab43b10 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -202,7 +202,7 @@ function ColorPalette( { ref={ scrollViewRef } > - { isGradientSegment ? ( + { ! isTextScreen && isGradientSegment ? ( ) : ( From c127ea15c73942a3247b3692a57869b9e056a922 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 14 Apr 2020 18:31:10 +0200 Subject: [PATCH 40/68] Move onReplaceSubsheet function to BottomSheet --- .../block-library/src/button/edit.native.js | 67 +++---------------- .../src/mobile/bottom-sheet/index.native.js | 53 ++++++++++++++- 2 files changed, 62 insertions(+), 58 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index dcdaa78f21e559..9c592309d47a0e 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -1,14 +1,7 @@ /** * External dependencies */ -import { - View, - AccessibilityInfo, - Platform, - Clipboard, - LayoutAnimation, - UIManager, -} from 'react-native'; +import { View, AccessibilityInfo, Platform, Clipboard } from 'react-native'; /** * WordPress dependencies */ @@ -52,15 +45,6 @@ const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; const INITIAL_MAX_WIDTH = 108; const PREPEND_HTTP = 'http://'; -const ANIMATION_DURATION = 300; -// It's needed to set the following flags via UIManager -// to have `LayoutAnimation` working on Android -if ( - Platform.OS === 'android' && - UIManager.setLayoutAnimationEnabledExperimental -) { - UIManager.setLayoutAnimationEnabledExperimental( true ); -} class ButtonEdit extends Component { constructor( props ) { @@ -77,7 +61,7 @@ class ButtonEdit extends Component { this.onToggleLinkSettings = this.onToggleLinkSettings.bind( this ); this.onToggleButtonFocus = this.onToggleButtonFocus.bind( this ); this.setRef = this.setRef.bind( this ); - this.onReplaceSubsheet = this.onReplaceSubsheet.bind( this ); + // this.onReplaceSubsheet = this.onReplaceSubsheet.bind( this ); // `isEditingURL` property is used to prevent from automatically pasting // URL from clipboard while trying to clear `Button URL` field and then @@ -91,7 +75,6 @@ class ButtonEdit extends Component { maxWidth: INITIAL_MAX_WIDTH, isLinkSheetVisible: false, isButtonFocused, - stack: [ 'Settings' ], }; } @@ -120,7 +103,6 @@ class ButtonEdit extends Component { ( ! prevProps.editorSidebarOpened && editorSidebarOpened ) || ( ! prevState.isLinkSheetVisible && isLinkSheetVisible ) ) { - this.setState( { stack: [ 'Settings' ] } ); if ( Platform.OS === 'android' && this.richTextRef ) { this.richTextRef.blur(); this.onToggleButtonFocus( false ); @@ -319,31 +301,6 @@ class ButtonEdit extends Component { this.richTextRef = richText; } - onReplaceSubsheet( destination, callback ) { - const { stack } = this.state; - - LayoutAnimation.configureNext( - LayoutAnimation.create( - ANIMATION_DURATION, - LayoutAnimation.Types.easeInEaseOut, - LayoutAnimation.Properties.opacity - ) - ); - - const containedInStack = stack.includes( destination ); - const nextStack = [ ...stack, destination ]; - const previousStack = stack.slice( 0, -1 ); - - this.setState( - { stack: containedInStack ? previousStack : nextStack }, - () => { - if ( callback ) { - callback(); - } - } - ); - } - render() { const { attributes, @@ -363,12 +320,7 @@ class ButtonEdit extends Component { linkTarget, rel, } = attributes; - const { - maxWidth, - isLinkSheetVisible, - isButtonFocused, - stack, - } = this.state; + const { maxWidth, isLinkSheetVisible, isButtonFocused } = this.state; const borderRadiusValue = borderRadius !== undefined @@ -380,7 +332,6 @@ class ButtonEdit extends Component { styles.button.paddingTop + styles.button.borderWidth : 0; - const currentScreen = stack[ stack.length - 1 ]; // To achieve proper expanding and shrinking `RichText` on iOS, there is a need to set a `minWidth` // value at least on 1 when `RichText` is focused or when is not focused, but `RichText` value is @@ -490,7 +441,11 @@ class ButtonEdit extends Component { shouldSetBottomSheetMaxHeight, onCloseBottomSheet, onHardwareButtonPress, + onReplaceSubsheet, + stack, } ) => { + const currentScreen = stack[ stack.length - 1 ]; + return ( <> { currentScreen === 'Settings' && ( @@ -523,7 +478,7 @@ class ButtonEdit extends Component { > { - this.onReplaceSubsheet( + onReplaceSubsheet( 'Background' ); } } @@ -533,7 +488,7 @@ class ButtonEdit extends Component { /> { - this.onReplaceSubsheet( + onReplaceSubsheet( 'Text' ); } } @@ -563,9 +518,7 @@ class ButtonEdit extends Component { onReplaceSubsheet={ ( destination ) => - this.onReplaceSubsheet( - destination - ) + onReplaceSubsheet( destination ) } backgroundColor={ backgroundColor } textColor={ diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index ab4fab0618f2c2..8e6fac08aab74f 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -11,6 +11,8 @@ import { Keyboard, StatusBar, TouchableHighlight, + LayoutAnimation, + UIManager, } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; @@ -35,14 +37,26 @@ import RangeCell from './range-cell'; import ColorCell from './color-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; +const ANIMATION_DURATION = 300; + export const { Provider: BottomSheetProvider, Consumer } = createContext( { isBottomSheetScrolling: false, shouldEnableBottomSheetScroll: () => {}, shouldSetBottomSheetMaxHeight: () => {}, onCloseBottomSheet: () => {}, onHardwareButtonPress: () => {}, + onReplaceSubsheet: () => {}, + stack: [], } ); +// It's needed to set the following flags via UIManager +// to have `LayoutAnimation` working on Android +if ( + Platform.OS === 'android' && + UIManager.setLayoutAnimationEnabledExperimental +) { + UIManager.setLayoutAnimationEnabledExperimental( true ); +} class BottomSheet extends Component { constructor() { super( ...arguments ); @@ -60,6 +74,7 @@ class BottomSheet extends Component { this.onHandleHardwareButtonPress = this.onHandleHardwareButtonPress.bind( this ); + this.onReplaceSubsheet = this.onReplaceSubsheet.bind( this ); this.keyboardWillShow = this.keyboardWillShow.bind( this ); this.keyboardDidHide = this.keyboardDidHide.bind( this ); @@ -73,6 +88,7 @@ class BottomSheet extends Component { onCloseBottomSheet: null, onHardwareButtonPress: null, setMaxHeight: true, + stack: [ 'Settings' ], }; SafeArea.getSafeAreaInsetsForRootView().then( @@ -136,6 +152,14 @@ class BottomSheet extends Component { this.keyboardDidHideListener.remove(); } + componentDidUpdate( prevProps ) { + const { isVisible } = this.props; + + if ( ! prevProps.isVisible && isVisible ) { + this.setState( { stack: [ 'Settings' ] } ); + } + } + onSafeAreaInsetsUpdate( result ) { const { safeAreaBottomInset } = this.state; if ( this.safeAreaEventSubscription === null ) { @@ -153,7 +177,7 @@ class BottomSheet extends Component { const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 0; - // `maxHeight` when modal is opened alon with a keyboard + // `maxHeight` when modal is opened along with a keyboard const maxHeightWithOpenKeyboard = 0.95 * ( Dimensions.get( 'window' ).height - @@ -238,6 +262,31 @@ class BottomSheet extends Component { return onClose(); } + onReplaceSubsheet( destination, callback ) { + const { stack } = this.state; + + LayoutAnimation.configureNext( + LayoutAnimation.create( + ANIMATION_DURATION, + LayoutAnimation.Types.easeInEaseOut, + LayoutAnimation.Properties.opacity + ) + ); + + const containedInStack = stack.includes( destination ); + const nextStack = [ ...stack, destination ]; + const previousStack = stack.slice( 0, -1 ); + + this.setState( + { stack: containedInStack ? previousStack : nextStack }, + () => { + if ( callback ) { + callback(); + } + } + ); + } + render() { const { title = '', @@ -361,6 +410,8 @@ class BottomSheet extends Component { .onHandleClosingBottomSheet, onHardwareButtonPress: this .onHandleHardwareButtonPress, + onReplaceSubsheet: this.onReplaceSubsheet, + stack: this.state.stack, } } > From 28fdfacfbe9de74666dafeaad744f97eccac413a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 14 Apr 2020 18:54:43 +0200 Subject: [PATCH 41/68] Revert UnsupportedFooterControl --- packages/components/src/index.native.js | 1 + .../index.native.js | 27 +++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 packages/components/src/unsupported-footer-control/index.native.js diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index ba4d342281b581..c076ad4749d17b 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -36,6 +36,7 @@ export { default as ToggleControl } from './toggle-control'; export { default as SelectControl } from './select-control'; export { default as RangeControl } from './range-control'; export { default as ResizableBox } from './resizable-box'; +export { default as UnsupportedFooterControl } from './unsupported-footer-control'; export { default as ColorControl } from './color-control'; export { default as QueryControls } from './query-controls'; diff --git a/packages/components/src/unsupported-footer-control/index.native.js b/packages/components/src/unsupported-footer-control/index.native.js new file mode 100644 index 00000000000000..26985dd58a6816 --- /dev/null +++ b/packages/components/src/unsupported-footer-control/index.native.js @@ -0,0 +1,27 @@ +/** + * Internal dependencies + */ +import UnsupportedFooterCell from '../mobile/bottom-sheet/unsupported-footer-cell'; + +function UnsupportedFooterControl( { + label, + help, + instanceId, + className, + ...props +} ) { + const id = `inspector-unsupported-footer-control-${ instanceId }`; + + return ( + + ); +} + +export default UnsupportedFooterControl; From 4e682f2ac0ebb1cd917b20ca3e325eb5829fa34b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 16 Apr 2020 11:04:28 +0200 Subject: [PATCH 42/68] First refactor part --- .../src/color-indicator/index.native.js | 4 +- .../src/color-palette/index.native.js | 77 +++++++------------ .../src/color-picker/index.native.js | 44 +++-------- .../src/mobile/color-settings/index.native.js | 43 +++++++---- 4 files changed, 68 insertions(+), 100 deletions(-) diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index ca166b6c6e257a..7363a189166d56 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -25,7 +25,7 @@ function SelectedIcon( { opacity } ) { function ColorIndicator( { color, isSelected, - custom, + withCustomPicker, style, getStylesFromColorScheme, opacity, @@ -47,7 +47,7 @@ function ColorIndicator( { { isSelected && } ); - } else if ( custom ) { + } else if ( withCustomPicker ) { return ( diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 08b4324ab43b10..bd2b6a5b3f7f4c 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -24,14 +24,10 @@ import ColorIndicator from '../color-indicator'; const ANIMATION_DURATION = 200; function ColorPalette( { - setBackgroundColor, - setTextColor, - setGradient, - backgroundColor, - textColor, + setColor, + activeColor, defaultSettings, currentSegment, - currentScreen, onCustomPress, getStylesFromColorScheme, shouldEnableBottomSheetScroll, @@ -59,10 +55,8 @@ function ColorPalette( { const scrollViewRef = createRef(); const isGradientSegment = currentSegment === 'Gradient'; - const isTextScreen = currentScreen === 'Text'; + const isGradient = activeColor.includes( 'linear-gradient' ); - const [ activeBgColor, setActiveBgColor ] = useState( backgroundColor ); - const [ activeTextColor, setActiveTextColor ] = useState( textColor ); const [ scale ] = useState( new Animated.Value( 1 ) ); const [ opacity ] = useState( new Animated.Value( 1 ) ); @@ -73,23 +67,15 @@ function ColorPalette( { scrollViewRef.current.scrollTo( { x: 0, y: 0 } ); }, [ currentSegment ] ); - function isSelected( color ) { - const isSelectedBgColor = color === activeBgColor; - const isSelectedTextColor = color === activeTextColor; - return isTextScreen ? isSelectedTextColor : isSelectedBgColor; - } - function isSelectedCustom() { - const isSelectedCustomBgColor = - ! defaultColors.includes( activeBgColor ) && - ! defaultGradientColors.includes( activeBgColor ); - const isSelectedCustomTextColor = ! defaultColors.includes( - activeTextColor - ); + const colors = isGradientSegment + ? defaultGradientColors + : defaultColors; + return ! isGradient && ! colors.includes( activeColor ); + } - return isTextScreen - ? isSelectedCustomTextColor - : isSelectedCustomBgColor; + function isSelected( color ) { + return ! isSelectedCustom() && activeColor === color; } function timingAnimation( property, toValue ) { @@ -100,8 +86,8 @@ function ColorPalette( { } ); } - function performAnimation( value ) { - opacity.setValue( isSelected( value ) ? 1 : 0 ); + function performAnimation( color ) { + opacity.setValue( isSelected( color ) ? 1 : 0 ); scale.setValue( 1 ); Animated.parallel( [ @@ -115,25 +101,15 @@ function ColorPalette( { outputRange: [ 1, 0.7, 1 ], } ); - function onColorPress( value ) { - performAnimation( value ); - - setActiveBgColor( value ); - setActiveTextColor( value ); - - if ( isTextScreen ) { - setTextColor( value ); - } else if ( ! isTextScreen && isGradientSegment ) { - setGradient( value ); - setBackgroundColor(); - } else { - setBackgroundColor( value ); - setGradient(); - } + function onColorPress( color ) { + performAnimation( color ); + setColor( color ); } - function Palette( { gradient, custom } ) { - const palette = gradient ? defaultGradientColors : defaultColors; + function Palette( { isGradientPalette, withCustomPicker } ) { + const palette = isGradientPalette + ? defaultGradientColors + : defaultColors; const verticalSeparatorStyle = getStylesFromColorScheme( styles.verticalSeparator, styles.verticalSeparatorDark @@ -161,7 +137,6 @@ function ColorPalette( { > ); } ) } - { custom && ( + { withCustomPicker && ( <> - { ! isTextScreen && isGradientSegment ? ( - - ) : ( - - ) } + ); diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index db323b81e57ca2..129354f9ed8266 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -21,25 +21,20 @@ function ColorPicker( { shouldEnableBottomSheetScroll, shouldSetBottomSheetMaxHeight, isBottomSheetScrolling, - setBackgroundColor, - setTextColor, - setGradient, - backgroundColor, - textColor, + setColor, + activeColor, onNavigationBack, - previousScreen, onCloseBottomSheet, getStylesFromColorScheme, } ) { const isIOS = Platform.OS === 'ios'; - + const isGradient = activeColor.includes( 'linear-gradient' ); const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; const [ hue, setHue ] = useState( 0 ); const [ sat, setSaturation ] = useState( 0.5 ); const [ val, setValue ] = useState( 0.5 ); - const [ savedBgColor ] = useState( backgroundColor ); - const [ savedTextColor ] = useState( textColor ); + const [ savedColor ] = useState( activeColor ); const { paddingLeft: spacing, @@ -70,9 +65,6 @@ function ColorPicker( { `hsv ${ hue } ${ sat } ${ val }` ).toHexString(); - const isGradient = backgroundColor.includes( 'linear-gradient' ); - const isTextScreen = previousScreen === 'Text'; - function setHSVFromHex( color ) { const { h, s, v } = tinycolor( color ).toHsv(); @@ -82,25 +74,14 @@ function ColorPicker( { } useEffect( () => { - if ( isTextScreen ) { - setTextColor( currentColor ); - } else { - setBackgroundColor( currentColor ); - } + setColor( currentColor ); }, [ currentColor ] ); useEffect( () => { - if ( isTextScreen ) { - setHSVFromHex( textColor ); - setTextColor( textColor ); - } else { - if ( ! isGradient ) { - setHSVFromHex( backgroundColor ); - } - - setBackgroundColor( backgroundColor ); - setGradient(); + if ( ! isGradient ) { + setHSVFromHex( activeColor ); } + setColor( activeColor ); shouldSetBottomSheetMaxHeight( false ); onCloseBottomSheet( resetColors ); }, [] ); @@ -115,8 +96,7 @@ function ColorPicker( { } function resetColors() { - setBackgroundColor( savedBgColor ); - setTextColor( savedTextColor ); + setColor( savedColor ); } function onPressCancelButton() { @@ -130,11 +110,7 @@ function ColorPicker( { onNavigationBack(); onCloseBottomSheet( null ); shouldSetBottomSheetMaxHeight( true ); - - if ( isTextScreen ) { - return setTextColor( currentColor ); - } - return setBackgroundColor( currentColor ); + setColor( currentColor ); } return ( diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index fd67bea02b4225..eaef833fc96e8d 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -41,10 +41,21 @@ function ColorSettings( { const currentScreen = stack[ stack.length - 1 ]; const previousScreen = stack[ stack.length - 2 ]; + const isBackgroundScreen = currentScreen === 'Background'; + const isBackgroundPrevScreen = previousScreen === 'Background'; + const isCustomScreen = currentScreen === 'Custom'; + const [ activeSegment, setActiveSegment ] = useState( segments[ selectedSegmentIndex ] ); + const activeColor = + isBackgroundScreen || isBackgroundPrevScreen + ? backgroundColor + : textColor; + const currentSegment = isBackgroundScreen ? activeSegment : segments[ 0 ]; + const isSolidSegment = activeSegment === 'Solid'; + useEffect( () => { onHardwareButtonPress( () => onReplaceSubsheet( previousScreen, afterHardwareButtonPress() ) @@ -67,15 +78,24 @@ function ColorSettings( { shouldSetBottomSheetMaxHeight( true ); } + function setColor( color ) { + if ( isBackgroundScreen ) { + setBackgroundColor( isSolidSegment ? color : '' ); + setGradient( isSolidSegment ? '' : color ); + } else if ( isCustomScreen ) { + if ( isBackgroundPrevScreen ) { + setBackgroundColor( color ); + setGradient( '' ); + } else setTextColor( color ); + } else setTextColor( color ); + } + function getColorPalette() { return ( onReplaceSubsheet( 'Custom' ) } shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } @@ -95,7 +115,7 @@ function ColorSettings( { return ( - { currentScreen === 'Background' && ( + { isBackgroundScreen && ( { getNavigationHeader( __( 'Background' ) ) } { getColorPalette() } @@ -135,7 +155,7 @@ function ColorSettings( { ) } - { currentScreen === 'Custom' && ( + { isCustomScreen && ( onReplaceSubsheet( previousScreen ) } From 15082b98d97a17541165376d911134f7342e362d Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 16 Apr 2020 15:20:40 +0200 Subject: [PATCH 43/68] Small cleanup after merging --- packages/block-library/src/button/edit.native.js | 5 ++--- packages/block-library/src/button/editor.native.scss | 1 - 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 0280420b1fcca3..f50025a72e0b2c 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -62,7 +62,6 @@ class ButtonEdit extends Component { this.onHideLinkSettings = this.onHideLinkSettings.bind( this ); this.onToggleButtonFocus = this.onToggleButtonFocus.bind( this ); this.setRef = this.setRef.bind( this ); - // this.onReplaceSubsheet = this.onReplaceSubsheet.bind( this ); // `isEditingURL` property is used to prevent from automatically pasting // URL from clipboard while trying to clear `Button URL` field and then @@ -180,11 +179,11 @@ class ButtonEdit extends Component { getTextColor() { const { textColor, attributes } = this.props; const { style } = attributes; - + const fallbackTextColor = '#ffffff'; return ( ( style && style.color && style.color.text ) || textColor.color || - styles.fallbackButton.color + fallbackTextColor ); } diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index 16dff6478dc350..ef2e1a54b69519 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -30,7 +30,6 @@ .fallbackButton { background-color: $button-fallback-bg; - color: $white; } .clearLinkButton { From ffd5b0733b340962428dc9890b96920a680b3424 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 16 Apr 2020 19:16:42 +0200 Subject: [PATCH 44/68] Set colors workaround --- .../block-library/src/button/edit.native.js | 31 ++++++++++++++++--- .../src/mobile/color-settings/index.native.js | 9 +++--- 2 files changed, 32 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index f50025a72e0b2c..ebe26d2cebcda5 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -62,6 +62,9 @@ class ButtonEdit extends Component { this.onHideLinkSettings = this.onHideLinkSettings.bind( this ); this.onToggleButtonFocus = this.onToggleButtonFocus.bind( this ); this.setRef = this.setRef.bind( this ); + this.setBackgroundColor = this.setBackgroundColor.bind( this ); + this.setTextColor = this.setTextColor.bind( this ); + this.setColor = this.setColor.bind( this ); // `isEditingURL` property is used to prevent from automatically pasting // URL from clipboard while trying to clear `Button URL` field and then @@ -319,14 +322,34 @@ class ButtonEdit extends Component { this.richTextRef = richText; } + setBackgroundColor( color ) { + const { setGradient } = this.props; + setGradient( '' ); + this.setColor( 'background', color ); + } + + setTextColor( color ) { + this.setColor( 'text', color ); + } + + setColor( attributeName, color ) { + const { setAttributes, attributes } = this.props; + const { style } = attributes; + + setAttributes( { + style: { + ...style, + color: { ...style?.color, [ attributeName ]: color }, + }, + } ); + } + render() { const { attributes, isSelected, clientId, onReplace, - setBackgroundColor, - setTextColor, setGradient, } = this.props; const { @@ -537,9 +560,9 @@ class ButtonEdit extends Component { } backgroundColor={ backgroundColor } textColor={ textColor } - setTextColor={ setTextColor } + setTextColor={ this.setTextColor } setBackgroundColor={ - setBackgroundColor + this.setBackgroundColor } setGradient={ setGradient } shouldEnableBottomSheetScroll={ diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index eaef833fc96e8d..15650726188a37 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -80,13 +80,14 @@ function ColorSettings( { function setColor( color ) { if ( isBackgroundScreen ) { - setBackgroundColor( isSolidSegment ? color : '' ); - setGradient( isSolidSegment ? '' : color ); + if ( isSolidSegment ) { + setBackgroundColor( color ); + } else setGradient( color ); } else if ( isCustomScreen ) { if ( isBackgroundPrevScreen ) { setBackgroundColor( color ); - setGradient( '' ); - } else setTextColor( color ); + } + setTextColor( color ); } else setTextColor( color ); } From de340b368a05b622a087daa19115b74ca7a757eb Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 16 Apr 2020 19:26:33 +0200 Subject: [PATCH 45/68] Correct if-else in setColor --- packages/components/src/mobile/color-settings/index.native.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 15650726188a37..ff4d0efbce1270 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -86,8 +86,7 @@ function ColorSettings( { } else if ( isCustomScreen ) { if ( isBackgroundPrevScreen ) { setBackgroundColor( color ); - } - setTextColor( color ); + } else setTextColor( color ); } else setTextColor( color ); } From 56b07bc3038a9ea7065ca67ceb3a657250f1cf71 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 17 Apr 2020 10:43:23 +0200 Subject: [PATCH 46/68] Refactor footer buttons --- .../src/color-picker/index.native.js | 21 +++++-------------- .../src/mobile/color-settings/index.native.js | 13 ++++++------ 2 files changed, 12 insertions(+), 22 deletions(-) diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 129354f9ed8266..b3fa8dc761f440 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -83,7 +83,7 @@ function ColorPicker( { } setColor( activeColor ); shouldSetBottomSheetMaxHeight( false ); - onCloseBottomSheet( resetColors ); + onCloseBottomSheet( () => setColor( savedColor ) ); }, [] ); function onHuePickerChange( { hue: h } ) { @@ -95,22 +95,11 @@ function ColorPicker( { setValue( v ); } - function resetColors() { - setColor( savedColor ); - } - - function onPressCancelButton() { - onNavigationBack(); - onCloseBottomSheet( null ); - shouldSetBottomSheetMaxHeight( true ); - resetColors(); - } - - function onPressApplyButton() { + function onButtonPress( action ) { onNavigationBack(); onCloseBottomSheet( null ); shouldSetBottomSheetMaxHeight( true ); - setColor( currentColor ); + setColor( action === 'apply' ? currentColor : savedColor ); } return ( @@ -152,7 +141,7 @@ function ColorPicker( { /> onButtonPress( 'cancel' ) } hitSlop={ hitSlop } > @@ -173,7 +162,7 @@ function ColorPicker( { { currentColor.toUpperCase() } onButtonPress( 'apply' ) } hitSlop={ hitSlop } > diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index ff4d0efbce1270..2b1ba85a477cc6 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -38,23 +38,24 @@ function ColorSettings( { const segments = [ 'Solid', 'Gradient' ]; const isGradient = backgroundColor.includes( 'linear-gradient' ); const selectedSegmentIndex = isGradient ? 1 : 0; + + const [ activeSegment, setActiveSegment ] = useState( + segments[ selectedSegmentIndex ] + ); + const currentScreen = stack[ stack.length - 1 ]; const previousScreen = stack[ stack.length - 2 ]; - const isBackgroundScreen = currentScreen === 'Background'; const isBackgroundPrevScreen = previousScreen === 'Background'; const isCustomScreen = currentScreen === 'Custom'; - const [ activeSegment, setActiveSegment ] = useState( - segments[ selectedSegmentIndex ] - ); + const currentSegment = isBackgroundScreen ? activeSegment : segments[ 0 ]; + const isSolidSegment = activeSegment === 'Solid'; const activeColor = isBackgroundScreen || isBackgroundPrevScreen ? backgroundColor : textColor; - const currentSegment = isBackgroundScreen ? activeSegment : segments[ 0 ]; - const isSolidSegment = activeSegment === 'Solid'; useEffect( () => { onHardwareButtonPress( () => From 29225559f1ad2e22cb3390a4584526f7d004950e Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 17 Apr 2020 14:32:17 +0200 Subject: [PATCH 47/68] move color settings to color hook --- .../block-mobile-toolbar/index.native.js | 5 +- .../block-settings/container.native.js | 23 +- .../panel-color-gradient-settings.native.js | 46 +++- .../src/hooks/color-panel.native.js | 3 - packages/block-editor/src/hooks/color.js | 7 +- .../block-library/src/button/edit.native.js | 167 ++------------ .../src/mobile/bottom-sheet/index.native.js | 21 +- .../src/mobile/color-settings/index.native.js | 212 ++++++++---------- 8 files changed, 194 insertions(+), 290 deletions(-) delete mode 100644 packages/block-editor/src/hooks/color-panel.native.js diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js index b4a56abc4df1b0..21d517a13d59c5 100644 --- a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js +++ b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js @@ -33,7 +33,10 @@ const BlockMobileToolbar = ( { - + + { /* Render only one settings icon even if we have more than one fill - need for hooks with controls */ } + { ( fills = [ null ] ) => fills[ 0 ] } + - + + { ( { currentScreen, extraProps, ...bottomSheetProps } ) => { + switch ( currentScreen ) { + case 'Color': + return ( + + ); + case 'Settings': + default: + return ; + } + } } + ); } diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js index f4ade7b5487d70..10a4ad4e7626a4 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js @@ -1,17 +1,43 @@ /** * WordPress dependencies */ -import { PanelBody, UnsupportedFooterControl } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { + ColorControl, + BottomSheetConsumer, + PanelBody, +} from '@wordpress/components'; -const PanelColorGradientSettings = () => { +export default function PanelColorGradientSettings( { settings, title } ) { return ( - - + + + { ( { onReplaceSubsheet } ) => + settings.map( + ( { + onColorChange, + colorValue = '#ffffff', + onGradientChange, + gradientValue, + label, + } ) => ( + { + onReplaceSubsheet( 'Color', { + onColorChange, + colorValue: gradientValue || colorValue, + gradientValue, + onGradientChange, + label, + } ); + } } + key={ `color-setting-${ label }` } + label={ label } + color={ gradientValue || colorValue } + /> + ) + ) + } + ); -}; -export default PanelColorGradientSettings; +} diff --git a/packages/block-editor/src/hooks/color-panel.native.js b/packages/block-editor/src/hooks/color-panel.native.js deleted file mode 100644 index 3c505bfd0f15f4..00000000000000 --- a/packages/block-editor/src/hooks/color-panel.native.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function ColorPanel() { - return null; -} diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index c196a521b39061..b8f447b67e788a 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -11,7 +11,7 @@ import { addFilter } from '@wordpress/hooks'; import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import { useRef, useEffect } from '@wordpress/element'; +import { useRef, useEffect, Platform } from '@wordpress/element'; /** * Internal dependencies @@ -243,7 +243,10 @@ export function ColorEdit( props ) { return ( onReplace( [] ) } /> @@ -475,120 +441,19 @@ class ButtonEdit extends Component { - - { ( { - isBottomSheetScrolling, - shouldEnableBottomSheetScroll, - shouldSetBottomSheetMaxHeight, - onCloseBottomSheet, - onHardwareButtonPress, - onReplaceSubsheet, - stack, - } ) => { - const currentScreen = stack[ stack.length - 1 ]; - - return ( - <> - { currentScreen === 'Settings' && ( - - - - - - { - onReplaceSubsheet( - 'Background' - ); - } } - label={ __( 'Background' ) } - color={ backgroundColor } - separatorType="fullWidth" - /> - { - onReplaceSubsheet( - 'Text' - ); - } } - label={ __( 'Text' ) } - color={ textColor } - separatorType="none" - /> - - - { this.getLinkSettings( - url, - rel, - linkTarget, - true - ) } - - - ) } - { currentScreen !== 'Settings' && ( - - onReplaceSubsheet( destination ) - } - backgroundColor={ backgroundColor } - textColor={ textColor } - setTextColor={ this.setTextColor } - setBackgroundColor={ - this.setBackgroundColor - } - setGradient={ setGradient } - shouldEnableBottomSheetScroll={ - shouldEnableBottomSheetScroll - } - isBottomSheetScrolling={ - isBottomSheetScrolling - } - shouldSetBottomSheetMaxHeight={ - shouldSetBottomSheetMaxHeight - } - onCloseBottomSheet={ - onCloseBottomSheet - } - onHardwareButtonPress={ - onHardwareButtonPress - } - defaultSettings={ - SETTINGS_DEFAULTS - } - /> - ) } - - ); - } } - + + + + + { this.getLinkSettings( url, rel, linkTarget, true ) } + ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 8e6fac08aab74f..ff1dcdb101bbd3 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -46,7 +46,8 @@ export const { Provider: BottomSheetProvider, Consumer } = createContext( { onCloseBottomSheet: () => {}, onHardwareButtonPress: () => {}, onReplaceSubsheet: () => {}, - stack: [], + extraProps: {}, + currentScreen: undefined, } ); // It's needed to set the following flags via UIManager @@ -88,7 +89,8 @@ class BottomSheet extends Component { onCloseBottomSheet: null, onHardwareButtonPress: null, setMaxHeight: true, - stack: [ 'Settings' ], + stack: [], + extraProps: {}, }; SafeArea.getSafeAreaInsetsForRootView().then( @@ -156,7 +158,7 @@ class BottomSheet extends Component { const { isVisible } = this.props; if ( ! prevProps.isVisible && isVisible ) { - this.setState( { stack: [ 'Settings' ] } ); + this.setState( { stack: [] } ); } } @@ -262,7 +264,7 @@ class BottomSheet extends Component { return onClose(); } - onReplaceSubsheet( destination, callback ) { + onReplaceSubsheet( destination, extraProps, callback ) { const { stack } = this.state; LayoutAnimation.configureNext( @@ -276,9 +278,11 @@ class BottomSheet extends Component { const containedInStack = stack.includes( destination ); const nextStack = [ ...stack, destination ]; const previousStack = stack.slice( 0, -1 ); - this.setState( - { stack: containedInStack ? previousStack : nextStack }, + { + stack: containedInStack ? previousStack : nextStack, + extraProps: extraProps || {}, + }, () => { if ( callback ) { callback(); @@ -411,7 +415,10 @@ class BottomSheet extends Component { onHardwareButtonPress: this .onHandleHardwareButtonPress, onReplaceSubsheet: this.onReplaceSubsheet, - stack: this.state.stack, + extraProps: this.state.extraProps, + currentScreen: this.state.stack[ + Math.max( this.state.stack.length - 1, 0 ) + ], } } > diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 2b1ba85a477cc6..4781036a7b1843 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -1,13 +1,14 @@ /** * External dependencies */ -import { View, Text } from 'react-native'; +import { View, Text, LayoutAnimation } from 'react-native'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; import { withPreferredColorScheme } from '@wordpress/compose'; +import { SETTINGS_DEFAULTS as defaultSettings } from '@wordpress/block-editor'; /** * Internal dependencies */ @@ -20,48 +21,40 @@ import SegmentedControls from '../segmented-control'; import styles from './style.scss'; function ColorSettings( { - stack, + label, + onColorChange, + onGradientChange, + colorValue, onReplaceSubsheet, - backgroundColor, - setBackgroundColor, - setGradient, - textColor, - setTextColor, shouldEnableBottomSheetScroll, shouldSetBottomSheetMaxHeight, isBottomSheetScrolling, onCloseBottomSheet, onHardwareButtonPress, getStylesFromColorScheme, - defaultSettings, } ) { const segments = [ 'Solid', 'Gradient' ]; - const isGradient = backgroundColor.includes( 'linear-gradient' ); + const isGradient = colorValue.includes( 'linear-gradient' ); const selectedSegmentIndex = isGradient ? 1 : 0; + const [ currentValue, setCurrentValue ] = useState( colorValue ); + const [ isCustomScreen, setIsCustomScreen ] = useState( false ); const [ activeSegment, setActiveSegment ] = useState( segments[ selectedSegmentIndex ] ); - const currentScreen = stack[ stack.length - 1 ]; - const previousScreen = stack[ stack.length - 2 ]; - const isBackgroundScreen = currentScreen === 'Background'; - const isBackgroundPrevScreen = previousScreen === 'Background'; - const isCustomScreen = currentScreen === 'Custom'; - - const currentSegment = isBackgroundScreen ? activeSegment : segments[ 0 ]; + const currentSegment = onGradientChange ? activeSegment : segments[ 0 ]; const isSolidSegment = activeSegment === 'Solid'; - const activeColor = - isBackgroundScreen || isBackgroundPrevScreen - ? backgroundColor - : textColor; - useEffect( () => { - onHardwareButtonPress( () => - onReplaceSubsheet( previousScreen, afterHardwareButtonPress() ) - ); - }, [ currentScreen ] ); + onHardwareButtonPress( () => { + if ( isCustomScreen ) { + setIsCustomScreen( false ); + } else { + onReplaceSubsheet( 'Settings', {}, afterHardwareButtonPress() ); + } + } ); + }, [ isCustomScreen ] ); useEffect( () => { setActiveSegment( segments[ selectedSegmentIndex ] ); @@ -69,112 +62,103 @@ function ColorSettings( { onCloseBottomSheet( null ); }, [] ); - const horizontalSeparatorStyle = getStylesFromColorScheme( - styles.horizontalSeparator, - styles.horizontalSeparatorDark - ); - function afterHardwareButtonPress() { onHardwareButtonPress( null ); shouldSetBottomSheetMaxHeight( true ); } + function onCustomScreenToggle( shouldShow ) { + LayoutAnimation.configureNext( + LayoutAnimation.create( + 300, + LayoutAnimation.Types.easeInEaseOut, + LayoutAnimation.Properties.opacity + ) + ); + setIsCustomScreen( shouldShow ); + } + function setColor( color ) { - if ( isBackgroundScreen ) { - if ( isSolidSegment ) { - setBackgroundColor( color ); - } else setGradient( color ); - } else if ( isCustomScreen ) { - if ( isBackgroundPrevScreen ) { - setBackgroundColor( color ); - } else setTextColor( color ); - } else setTextColor( color ); + setCurrentValue( color ); + if ( isSolidSegment && onColorChange ) { + onColorChange( color ); + } else if ( ! isSolidSegment && onGradientChange ) { + onGradientChange( color ); + } } - function getColorPalette() { + if ( isCustomScreen ) { return ( + + { + onCustomScreenToggle( false ); + } } + onCloseBottomSheet={ onCloseBottomSheet } + isBottomSheetScrolling={ isBottomSheetScrolling } + /> + + ); + } + + return ( + + onReplaceSubsheet( 'Settings' ) } + /> onReplaceSubsheet( 'Custom' ) } + isCustomScreen={ isCustomScreen } + onCustomPress={ () => { + onCustomScreenToggle( true ); + } } shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } defaultSettings={ defaultSettings } /> - ); - } - - function getNavigationHeader( screen ) { - return ( - onReplaceSubsheet( previousScreen ) } + - ); - } - - return ( - - { isBackgroundScreen && ( - - { getNavigationHeader( __( 'Background' ) ) } - { getColorPalette() } - - setActiveSegment( item ) } - selectedIndex={ selectedSegmentIndex } - addonLeft={ - - } - /> - - ) } - { currentScreen === 'Text' && ( - - { getNavigationHeader( __( 'Text' ) ) } - { getColorPalette() } - - - - - - - { __( 'Select a color' ) } - - + { onGradientChange ? ( + setActiveSegment( item ) } + selectedIndex={ selectedSegmentIndex } + addonLeft={ + + } + /> + ) : ( + + + - - ) } - { isCustomScreen && ( - - - onReplaceSubsheet( previousScreen ) - } - onCloseBottomSheet={ onCloseBottomSheet } - onReplaceSubsheet={ onReplaceSubsheet } - isBottomSheetScrolling={ isBottomSheetScrolling } - previousScreen={ previousScreen } - /> + + { __( 'Select a color' ) } + + ) } From 0ca7159bd9d162038097b095cf8a3cc0fca04d3b Mon Sep 17 00:00:00 2001 From: Dratwas Date: Fri, 17 Apr 2020 15:04:49 +0200 Subject: [PATCH 48/68] remove separator from last control --- .../panel-color-gradient-settings.native.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js index 10a4ad4e7626a4..4f53318e51aa54 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js @@ -13,13 +13,16 @@ export default function PanelColorGradientSettings( { settings, title } ) { { ( { onReplaceSubsheet } ) => settings.map( - ( { - onColorChange, - colorValue = '#ffffff', - onGradientChange, - gradientValue, - label, - } ) => ( + ( + { + onColorChange, + colorValue = '#ffffff', + onGradientChange, + gradientValue, + label, + }, + index + ) => ( { onReplaceSubsheet( 'Color', { @@ -33,6 +36,11 @@ export default function PanelColorGradientSettings( { settings, title } ) { key={ `color-setting-${ label }` } label={ label } color={ gradientValue || colorValue } + separatorType={ + index !== settings.length - 1 + ? 'fullWidth' + : 'none' + } /> ) ) From 031193222933b702f7c921695adbc768b707907f Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 20 Apr 2020 12:07:20 +0200 Subject: [PATCH 49/68] Correct animation on Android, remove default color, render text when no color --- .../block-settings/container.native.js | 6 +- .../panel-color-gradient-settings.native.js | 2 +- .../inspector-controls/index.native.js | 12 +- packages/block-editor/src/hooks/color.js | 10 +- .../src/color-indicator/index.native.js | 2 +- .../src/color-palette/index.native.js | 6 +- .../src/color-picker/index.native.js | 4 +- .../mobile/bottom-sheet/color-cell.native.js | 6 +- .../src/mobile/bottom-sheet/index.native.js | 11 +- .../src/mobile/color-settings/index.native.js | 151 ++++++++++-------- .../src/range-control/index.native.js | 1 + 11 files changed, 123 insertions(+), 88 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index b80a81e129e239..2a7949174f699a 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -8,7 +8,10 @@ import { } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { InspectorControls } from '@wordpress/block-editor'; +import { + InspectorControls, + SETTINGS_DEFAULTS as defaultSettings, +} from '@wordpress/block-editor'; /** * Internal dependencies @@ -34,6 +37,7 @@ function BottomSheetSettings( { case 'Color': return ( diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js index 4f53318e51aa54..76c2c35ea7f567 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js @@ -16,7 +16,7 @@ export default function PanelColorGradientSettings( { settings, title } ) { ( { onColorChange, - colorValue = '#ffffff', + colorValue, onGradientChange, gradientValue, label, diff --git a/packages/block-editor/src/components/inspector-controls/index.native.js b/packages/block-editor/src/components/inspector-controls/index.native.js index 730dfaba5b37d3..0c8748676cad22 100644 --- a/packages/block-editor/src/components/inspector-controls/index.native.js +++ b/packages/block-editor/src/components/inspector-controls/index.native.js @@ -6,8 +6,8 @@ import React from 'react'; /** * WordPress dependencies */ -import { createSlotFill } from '@wordpress/components'; - +import { createSlotFill, BottomSheetConsumer } from '@wordpress/components'; +import { View } from 'react-native'; /** * Internal dependencies */ @@ -19,7 +19,13 @@ const { Fill, Slot } = createSlotFill( 'InspectorControls' ); const FillWithSettingsButton = ( { children, ...props } ) => { return ( <> - { children } + + { + + { () => { children } } + + } + { React.Children.count( children ) > 0 && } ); diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index b8f447b67e788a..3322abca712c1f 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -250,7 +250,10 @@ export function ColorEdit( props ) { clientId={ props.clientId } settings={ [ { - label: __( 'Text Color' ), + label: + Platform.OS === 'web' + ? __( 'Text Color' ) + : __( 'Text' ), onColorChange: onChangeColor( 'text' ), colorValue: getColorObjectByAttributeValues( colors, @@ -259,7 +262,10 @@ export function ColorEdit( props ) { ).color, }, { - label: __( 'Background Color' ), + label: + Platform.OS === 'web' + ? __( 'Background Color' ) + : __( 'Background' ), onColorChange: onChangeColor( 'background' ), colorValue: getColorObjectByAttributeValues( colors, diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index 7363a189166d56..11508cee173a14 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -30,7 +30,7 @@ function ColorIndicator( { getStylesFromColorScheme, opacity, } ) { - const isGradient = color.includes( 'linear-gradient' ); + const isGradient = color?.includes( 'linear-gradient' ); const outlineStyle = getStylesFromColorScheme( styles.outline, diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index bd2b6a5b3f7f4c..de973b6316543f 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -55,7 +55,7 @@ function ColorPalette( { const scrollViewRef = createRef(); const isGradientSegment = currentSegment === 'Gradient'; - const isGradient = activeColor.includes( 'linear-gradient' ); + const isGradient = activeColor?.includes( 'linear-gradient' ); const [ scale ] = useState( new Animated.Value( 1 ) ); const [ opacity ] = useState( new Animated.Value( 1 ) ); @@ -71,11 +71,11 @@ function ColorPalette( { const colors = isGradientSegment ? defaultGradientColors : defaultColors; - return ! isGradient && ! colors.includes( activeColor ); + return ! isGradient && activeColor && ! colors.includes( activeColor ); } function isSelected( color ) { - return ! isSelectedCustom() && activeColor === color; + return ! isSelectedCustom() && activeColor && activeColor === color; } function timingAnimation( property, toValue ) { diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index b3fa8dc761f440..43e4e104ade7cb 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -28,7 +28,7 @@ function ColorPicker( { getStylesFromColorScheme, } ) { const isIOS = Platform.OS === 'ios'; - const isGradient = activeColor.includes( 'linear-gradient' ); + const isGradient = activeColor?.includes( 'linear-gradient' ); const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; const [ hue, setHue ] = useState( 0 ); @@ -78,7 +78,7 @@ function ColorPicker( { }, [ currentColor ] ); useEffect( () => { - if ( ! isGradient ) { + if ( ! isGradient && activeColor ) { setHSVFromHex( activeColor ); } setColor( activeColor ); diff --git a/packages/components/src/mobile/bottom-sheet/color-cell.native.js b/packages/components/src/mobile/bottom-sheet/color-cell.native.js index a5793c3a583b20..f13db84d60c78e 100644 --- a/packages/components/src/mobile/bottom-sheet/color-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/color-cell.native.js @@ -23,9 +23,11 @@ export default function BottomSheetColorCell( props ) { } onPress={ onPress } editable={ false } - value={ '' } + value={ ! color && 'Default' } > - + { color && ( + + ) } ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index ff1dcdb101bbd3..f0954affd9835c 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -312,6 +312,8 @@ class BottomSheet extends Component { isScrolling, scrollEnabled, setMaxHeight, + extraProps, + stack, } = this.state; const panResponder = PanResponder.create( { @@ -358,7 +360,7 @@ class BottomSheet extends Component { backdropTransitionOutTiming={ 50 } backdropOpacity={ 0.2 } onBackdropPress={ this.onCloseBottomSheet } - onHardwareButtonPress={ this.onHardwareButtonPress } + onBackButtonPress={ this.onHardwareButtonPress } onSwipe={ this.onCloseBottomSheet } onDismiss={ Platform.OS === 'ios' ? onDismiss : undefined } onModalHide={ @@ -415,10 +417,9 @@ class BottomSheet extends Component { onHardwareButtonPress: this .onHandleHardwareButtonPress, onReplaceSubsheet: this.onReplaceSubsheet, - extraProps: this.state.extraProps, - currentScreen: this.state.stack[ - Math.max( this.state.stack.length - 1, 0 ) - ], + extraProps, + currentScreen: + stack[ Math.max( stack.length - 1, 0 ) ], } } > diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 4781036a7b1843..649e8034e87970 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -8,7 +8,6 @@ import { View, Text, LayoutAnimation } from 'react-native'; import { __ } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; import { withPreferredColorScheme } from '@wordpress/compose'; -import { SETTINGS_DEFAULTS as defaultSettings } from '@wordpress/block-editor'; /** * Internal dependencies */ @@ -32,13 +31,14 @@ function ColorSettings( { onCloseBottomSheet, onHardwareButtonPress, getStylesFromColorScheme, + defaultSettings, } ) { const segments = [ 'Solid', 'Gradient' ]; - const isGradient = colorValue.includes( 'linear-gradient' ); - const selectedSegmentIndex = isGradient ? 1 : 0; - const [ currentValue, setCurrentValue ] = useState( colorValue ); const [ isCustomScreen, setIsCustomScreen ] = useState( false ); + const isGradient = colorValue?.includes( 'linear-gradient' ); + const selectedSegmentIndex = isGradient ? 1 : 0; + const [ activeSegment, setActiveSegment ] = useState( segments[ selectedSegmentIndex ] ); @@ -46,10 +46,15 @@ function ColorSettings( { const currentSegment = onGradientChange ? activeSegment : segments[ 0 ]; const isSolidSegment = activeSegment === 'Solid'; + const horizontalSeparatorStyle = getStylesFromColorScheme( + styles.horizontalSeparator, + styles.horizontalSeparatorDark + ); + useEffect( () => { onHardwareButtonPress( () => { if ( isCustomScreen ) { - setIsCustomScreen( false ); + onCustomScreenToggle( false ); } else { onReplaceSubsheet( 'Settings', {}, afterHardwareButtonPress() ); } @@ -80,85 +85,95 @@ function ColorSettings( { function setColor( color ) { setCurrentValue( color ); - if ( isSolidSegment && onColorChange ) { + if ( isSolidSegment && onColorChange && onGradientChange ) { + onColorChange( color ); + onGradientChange( '' ); + } else if ( isSolidSegment && onColorChange ) { onColorChange( color ); } else if ( ! isSolidSegment && onGradientChange ) { onGradientChange( color ); } } - if ( isCustomScreen ) { - return ( - - { - onCustomScreenToggle( false ); - } } - onCloseBottomSheet={ onCloseBottomSheet } - isBottomSheetScrolling={ isBottomSheetScrolling } - /> - - ); - } - - return ( - - onReplaceSubsheet( 'Settings' ) } - /> - { - onCustomScreenToggle( true ); - } } - shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } - defaultSettings={ defaultSettings } - /> - - { onGradientChange ? ( + function getFooter() { + if ( onGradientChange ) { + return ( setActiveSegment( item ) } selectedIndex={ selectedSegmentIndex } addonLeft={ } /> - ) : ( - - - - - - { __( 'Select a color' ) } - - + ); + } + return ( + + + + + + { __( 'Select a color' ) } + + + + ); + } + + return ( + + { isCustomScreen && ( + + { + onCustomScreenToggle( false ); + } } + onCloseBottomSheet={ onCloseBottomSheet } + isBottomSheetScrolling={ isBottomSheetScrolling } + /> + + ) } + { ! isCustomScreen && ( + + + onReplaceSubsheet( 'Settings' ) + } + /> + { + onCustomScreenToggle( true ); + } } + shouldEnableBottomSheetScroll={ + shouldEnableBottomSheetScroll + } + defaultSettings={ defaultSettings } + /> + + { getFooter() } ) } diff --git a/packages/components/src/range-control/index.native.js b/packages/components/src/range-control/index.native.js index 88ec3f870b1b0d..9488fdad160879 100644 --- a/packages/components/src/range-control/index.native.js +++ b/packages/components/src/range-control/index.native.js @@ -55,6 +55,7 @@ function RangeControl( { afterIcon={ afterIcon } allowReset={ allowReset } defaultValue={ initialSliderValue } + separatorType={ separatorType } { ...props } /> ); From ec164225f7b0adb327a19d0b70fbb44088d2892c Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 20 Apr 2020 13:01:11 +0200 Subject: [PATCH 50/68] Disable flag __experimentalColor in native block which are not supporting colors yet --- packages/block-library/src/columns/index.native.js | 14 ++++++++++++++ packages/block-library/src/group/index.native.js | 14 ++++++++++++++ packages/block-library/src/heading/index.native.js | 14 ++++++++++++++ .../block-library/src/media-text/index.native.js | 14 ++++++++++++++ .../block-library/src/paragraph/index.native.js | 14 ++++++++++++++ .../components/src/color-palette/index.native.js | 2 +- 6 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 packages/block-library/src/columns/index.native.js create mode 100644 packages/block-library/src/group/index.native.js create mode 100644 packages/block-library/src/heading/index.native.js create mode 100644 packages/block-library/src/media-text/index.native.js create mode 100644 packages/block-library/src/paragraph/index.native.js diff --git a/packages/block-library/src/columns/index.native.js b/packages/block-library/src/columns/index.native.js new file mode 100644 index 00000000000000..d39fc3b15f2620 --- /dev/null +++ b/packages/block-library/src/columns/index.native.js @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import { settings as webSettings } from './index.js'; + +export { metadata, name } from './index.js'; + +export const settings = { + ...webSettings, + supports: { + ...webSettings.supports, + __experimentalColor: false, + }, +}; diff --git a/packages/block-library/src/group/index.native.js b/packages/block-library/src/group/index.native.js new file mode 100644 index 00000000000000..d39fc3b15f2620 --- /dev/null +++ b/packages/block-library/src/group/index.native.js @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import { settings as webSettings } from './index.js'; + +export { metadata, name } from './index.js'; + +export const settings = { + ...webSettings, + supports: { + ...webSettings.supports, + __experimentalColor: false, + }, +}; diff --git a/packages/block-library/src/heading/index.native.js b/packages/block-library/src/heading/index.native.js new file mode 100644 index 00000000000000..d39fc3b15f2620 --- /dev/null +++ b/packages/block-library/src/heading/index.native.js @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import { settings as webSettings } from './index.js'; + +export { metadata, name } from './index.js'; + +export const settings = { + ...webSettings, + supports: { + ...webSettings.supports, + __experimentalColor: false, + }, +}; diff --git a/packages/block-library/src/media-text/index.native.js b/packages/block-library/src/media-text/index.native.js new file mode 100644 index 00000000000000..d39fc3b15f2620 --- /dev/null +++ b/packages/block-library/src/media-text/index.native.js @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import { settings as webSettings } from './index.js'; + +export { metadata, name } from './index.js'; + +export const settings = { + ...webSettings, + supports: { + ...webSettings.supports, + __experimentalColor: false, + }, +}; diff --git a/packages/block-library/src/paragraph/index.native.js b/packages/block-library/src/paragraph/index.native.js new file mode 100644 index 00000000000000..d39fc3b15f2620 --- /dev/null +++ b/packages/block-library/src/paragraph/index.native.js @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import { settings as webSettings } from './index.js'; + +export { metadata, name } from './index.js'; + +export const settings = { + ...webSettings, + supports: { + ...webSettings.supports, + __experimentalColor: false, + }, +}; diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index de973b6316543f..2afebb0cc03249 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -75,7 +75,7 @@ function ColorPalette( { } function isSelected( color ) { - return ! isSelectedCustom() && activeColor && activeColor === color; + return ! isSelectedCustom() && activeColor === color; } function timingAnimation( property, toValue ) { From f33310df66149bff2959133468f960f67167266c Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 20 Apr 2020 18:44:33 +0200 Subject: [PATCH 51/68] Remove hoc related to setting gradient --- packages/block-editor/src/components/gradients/index.js | 8 -------- packages/block-library/src/button/edit.native.js | 2 -- 2 files changed, 10 deletions(-) diff --git a/packages/block-editor/src/components/gradients/index.js b/packages/block-editor/src/components/gradients/index.js index 04df9964e25da6..8e5efdb3b0704e 100644 --- a/packages/block-editor/src/components/gradients/index.js +++ b/packages/block-editor/src/components/gradients/index.js @@ -106,11 +106,3 @@ export function __experimentalUseGradient( { } return { gradientClass, gradientValue, setGradient }; } - -export function __experimentalWithSetGradient( WrappedComponent ) { - return ( props ) => { - const { setGradient } = __experimentalUseGradient(); - - return ; - }; -} diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index c75b09c40ecc32..c6ceb3ea51e61a 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -19,7 +19,6 @@ import { InspectorControls, BlockControls, SETTINGS_DEFAULTS, - __experimentalWithSetGradient, } from '@wordpress/block-editor'; import { TextControl, @@ -547,7 +546,6 @@ class ButtonEdit extends Component { export default compose( [ withInstanceId, - __experimentalWithSetGradient, withColors( 'backgroundColor', { textColor: 'color' } ), withSelect( ( select, { clientId } ) => { const { isEditorSidebarOpened } = select( 'core/edit-post' ); From a80f03ac2c00d0f6c18f81e8a6c0aa21eafe4a48 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 21 Apr 2020 10:50:40 +0200 Subject: [PATCH 52/68] Code clean up --- .../src/components/inserter/menu.native.js | 85 ++++++++++--------- .../inspector-controls/index.native.js | 3 +- .../block-library/src/button/edit.native.js | 2 +- .../src/button/editor.native.scss | 1 + .../src/mobile/color-settings/index.native.js | 10 ++- 5 files changed, 53 insertions(+), 48 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 9c8a9bbfed7ccf..0ecfba8e84e709 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -132,54 +132,57 @@ export class InserterMenu extends Component { contentStyle={ [ styles.content, bottomPadding ] } hideHeader > - ( - - ) } - keyExtractor={ ( item ) => item.name } - renderItem={ ( { item } ) => ( - onSelect( item ) } - > - + ( + + ) } + keyExtractor={ ( item ) => item.name } + renderItem={ ( { item } ) => ( + onSelect( item ) } > - - + + + + + + { item.title } + - - { item.title } - - - - ) } - /> + + ) } + /> + ); } diff --git a/packages/block-editor/src/components/inspector-controls/index.native.js b/packages/block-editor/src/components/inspector-controls/index.native.js index 0c8748676cad22..49bc55dd5ae6b6 100644 --- a/packages/block-editor/src/components/inspector-controls/index.native.js +++ b/packages/block-editor/src/components/inspector-controls/index.native.js @@ -2,12 +2,11 @@ * External dependencies */ import React from 'react'; - +import { View } from 'react-native'; /** * WordPress dependencies */ import { createSlotFill, BottomSheetConsumer } from '@wordpress/components'; -import { View } from 'react-native'; /** * Internal dependencies */ diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index c6ceb3ea51e61a..6e850224f0ac23 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -195,7 +195,7 @@ class ButtonEdit extends Component { getTextColor() { const { textColor, attributes } = this.props; const { style } = attributes; - const fallbackTextColor = '#ffffff'; + const fallbackTextColor = styles.fallbackButton.color; return ( ( style && style.color && style.color.text ) || textColor.color || diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index 144fefdb022e4f..47194070090401 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -36,6 +36,7 @@ .fallbackButton { background-color: $button-fallback-bg; + color: $white; } .clearLinkButton { diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 649e8034e87970..1aafc329a61123 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -103,10 +103,12 @@ function ColorSettings( { segmentHandler={ ( item ) => setActiveSegment( item ) } selectedIndex={ selectedSegmentIndex } addonLeft={ - + currentValue && ( + + ) } /> ); From 623163cab26286299c21f352e8c285dce15d2f4e Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 21 Apr 2020 15:10:17 +0200 Subject: [PATCH 53/68] Make supporting colors dependent on platform --- packages/block-library/src/button/index.js | 3 ++- packages/block-library/src/columns/index.js | 4 ++-- packages/block-library/src/columns/index.native.js | 14 -------------- packages/block-library/src/group/index.js | 3 ++- packages/block-library/src/group/index.native.js | 14 -------------- packages/block-library/src/heading/index.js | 3 ++- packages/block-library/src/heading/index.native.js | 14 -------------- packages/block-library/src/media-text/index.js | 3 ++- .../block-library/src/media-text/index.native.js | 14 -------------- packages/block-library/src/paragraph/index.js | 3 ++- .../block-library/src/paragraph/index.native.js | 14 -------------- .../src/mobile/color-settings/index.native.js | 10 ++++++---- .../src/mobile/color-settings/style.native.scss | 1 + 13 files changed, 19 insertions(+), 81 deletions(-) delete mode 100644 packages/block-library/src/columns/index.native.js delete mode 100644 packages/block-library/src/group/index.native.js delete mode 100644 packages/block-library/src/heading/index.native.js delete mode 100644 packages/block-library/src/media-text/index.native.js delete mode 100644 packages/block-library/src/paragraph/index.native.js diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index fab563649938fb..7fc1510b6033d8 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -3,6 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { button as icon } from '@wordpress/icons'; +import { Platform } from '@wordpress/element'; /** * Internal dependencies @@ -35,7 +36,7 @@ export const settings = { alignWide: false, reusable: false, lightBlockWrapper: true, - __experimentalColor: { gradients: true }, + __experimentalColor: Platform.OS === 'web' && { gradients: true }, }, parent: [ 'core/buttons' ], styles: [ diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index dec1d8672e6974..92f5f68f154e43 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -3,7 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { columns as icon } from '@wordpress/icons'; - +import { Platform } from '@wordpress/element'; /** * Internal dependencies */ @@ -27,7 +27,7 @@ export const settings = { align: [ 'wide', 'full' ], html: false, lightBlockWrapper: true, - __experimentalColor: { gradients: true }, + __experimentalColor: Platform.OS === 'web' && { gradients: true }, }, variations, example: { diff --git a/packages/block-library/src/columns/index.native.js b/packages/block-library/src/columns/index.native.js deleted file mode 100644 index d39fc3b15f2620..00000000000000 --- a/packages/block-library/src/columns/index.native.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Internal dependencies - */ -import { settings as webSettings } from './index.js'; - -export { metadata, name } from './index.js'; - -export const settings = { - ...webSettings, - supports: { - ...webSettings.supports, - __experimentalColor: false, - }, -}; diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js index d07cf54f7256d8..28fa5ca74b4844 100644 --- a/packages/block-library/src/group/index.js +++ b/packages/block-library/src/group/index.js @@ -4,6 +4,7 @@ import { __ } from '@wordpress/i18n'; import { createBlock } from '@wordpress/blocks'; import { group as icon } from '@wordpress/icons'; +import { Platform } from '@wordpress/element'; /** * Internal dependencies @@ -92,7 +93,7 @@ export const settings = { anchor: true, html: false, lightBlockWrapper: true, - __experimentalColor: { gradients: true }, + __experimentalColor: Platform.OS === 'web' && { gradients: true }, }, transforms: { from: [ diff --git a/packages/block-library/src/group/index.native.js b/packages/block-library/src/group/index.native.js deleted file mode 100644 index d39fc3b15f2620..00000000000000 --- a/packages/block-library/src/group/index.native.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Internal dependencies - */ -import { settings as webSettings } from './index.js'; - -export { metadata, name } from './index.js'; - -export const settings = { - ...webSettings, - supports: { - ...webSettings.supports, - __experimentalColor: false, - }, -}; diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js index 2b9eac45e956d7..524a0bd7fb7909 100644 --- a/packages/block-library/src/heading/index.js +++ b/packages/block-library/src/heading/index.js @@ -8,6 +8,7 @@ import { isEmpty } from 'lodash'; */ import { heading as icon } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; +import { Platform } from '@wordpress/element'; /** * Internal dependencies @@ -34,7 +35,7 @@ export const settings = { anchor: true, __unstablePasteTextInline: true, lightBlockWrapper: true, - __experimentalColor: true, + __experimentalColor: Platform.OS === 'web', __experimentalLineHeight: true, __experimentalFontSize: true, }, diff --git a/packages/block-library/src/heading/index.native.js b/packages/block-library/src/heading/index.native.js deleted file mode 100644 index d39fc3b15f2620..00000000000000 --- a/packages/block-library/src/heading/index.native.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Internal dependencies - */ -import { settings as webSettings } from './index.js'; - -export { metadata, name } from './index.js'; - -export const settings = { - ...webSettings, - supports: { - ...webSettings.supports, - __experimentalColor: false, - }, -}; diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js index db22f30b70abf0..b50e85eaca7a57 100644 --- a/packages/block-library/src/media-text/index.js +++ b/packages/block-library/src/media-text/index.js @@ -3,6 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { mediaAndText as icon } from '@wordpress/icons'; +import { Platform } from '@wordpress/element'; /** * Internal dependencies @@ -25,7 +26,7 @@ export const settings = { supports: { align: [ 'wide', 'full' ], html: false, - __experimentalColor: { gradients: true }, + __experimentalColor: Platform.OS === 'web' && { gradients: true }, }, example: { attributes: { diff --git a/packages/block-library/src/media-text/index.native.js b/packages/block-library/src/media-text/index.native.js deleted file mode 100644 index d39fc3b15f2620..00000000000000 --- a/packages/block-library/src/media-text/index.native.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Internal dependencies - */ -import { settings as webSettings } from './index.js'; - -export { metadata, name } from './index.js'; - -export const settings = { - ...webSettings, - supports: { - ...webSettings.supports, - __experimentalColor: false, - }, -}; diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index 0e76e74adc338f..e1711a67de97d2 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -8,6 +8,7 @@ import { isEmpty } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { paragraph as icon } from '@wordpress/icons'; +import { Platform } from '@wordpress/element'; /** * Internal dependencies @@ -44,7 +45,7 @@ export const settings = { className: false, __unstablePasteTextInline: true, lightBlockWrapper: true, - __experimentalColor: true, + __experimentalColor: Platform.OS === 'web', __experimentalLineHeight: true, __experimentalFontSize: true, }, diff --git a/packages/block-library/src/paragraph/index.native.js b/packages/block-library/src/paragraph/index.native.js deleted file mode 100644 index d39fc3b15f2620..00000000000000 --- a/packages/block-library/src/paragraph/index.native.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Internal dependencies - */ -import { settings as webSettings } from './index.js'; - -export { metadata, name } from './index.js'; - -export const settings = { - ...webSettings, - supports: { - ...webSettings.supports, - __experimentalColor: false, - }, -}; diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 1aafc329a61123..73bd0df4d33841 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -116,10 +116,12 @@ function ColorSettings( { return ( - + { currentValue && ( + + ) } Date: Tue, 21 Apr 2020 15:15:15 +0200 Subject: [PATCH 54/68] Revert changes from button index --- packages/block-library/src/button/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index 7fc1510b6033d8..fab563649938fb 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -3,7 +3,6 @@ */ import { __ } from '@wordpress/i18n'; import { button as icon } from '@wordpress/icons'; -import { Platform } from '@wordpress/element'; /** * Internal dependencies @@ -36,7 +35,7 @@ export const settings = { alignWide: false, reusable: false, lightBlockWrapper: true, - __experimentalColor: Platform.OS === 'web' && { gradients: true }, + __experimentalColor: { gradients: true }, }, parent: [ 'core/buttons' ], styles: [ From 836ca75926fbd9e562b191259849e8dd8bed306c Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 21 Apr 2020 16:31:10 +0200 Subject: [PATCH 55/68] Use styles button destructuring --- packages/block-library/src/button/edit.native.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 6e850224f0ac23..1a5c2c7042857a 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -408,20 +408,21 @@ class ButtonEdit extends Component { isButtonFocused, placeholderTextWidth, } = this.state; + const { + borderRadius: fallbackBorderRadius, + paddingTop: spacing, + borderWidth, + } = styles.button; if ( parentWidth === 0 ) { return null; } const borderRadiusValue = - borderRadius !== undefined - ? borderRadius - : styles.button.borderRadius; + borderRadius !== undefined ? borderRadius : fallbackBorderRadius; const outlineBorderRadius = borderRadiusValue > 0 - ? borderRadiusValue + - styles.button.paddingTop + - styles.button.borderWidth + ? borderRadiusValue + spacing + borderWidth : 0; // To achieve proper expanding and shrinking `RichText` on iOS, there is a need to set a `minWidth` From 0c8c886116c1bba674bb0a2c1bd5638bf7f71421 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 22 Apr 2020 11:44:56 +0200 Subject: [PATCH 56/68] Another code clean up --- .../src/color-palette/index.native.js | 21 ++++++------------- .../src/color-picker/style.native.scss | 1 - .../mobile/bottom-sheet/color-cell.native.js | 5 ++--- .../src/mobile/bottom-sheet/index.native.js | 2 ++ 4 files changed, 10 insertions(+), 19 deletions(-) diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 2afebb0cc03249..818a57159aef62 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -62,15 +62,13 @@ function ColorPalette( { const defaultColors = map( extendedDefaultColors, 'color' ); const defaultGradientColors = map( defaultSettings.gradients, 'gradient' ); + const colors = isGradientSegment ? defaultGradientColors : defaultColors; useEffect( () => { scrollViewRef.current.scrollTo( { x: 0, y: 0 } ); }, [ currentSegment ] ); function isSelectedCustom() { - const colors = isGradientSegment - ? defaultGradientColors - : defaultColors; return ! isGradient && activeColor && ! colors.includes( activeColor ); } @@ -106,10 +104,7 @@ function ColorPalette( { setColor( color ); } - function Palette( { isGradientPalette, withCustomPicker } ) { - const palette = isGradientPalette - ? defaultGradientColors - : defaultColors; + function Palette() { const verticalSeparatorStyle = getStylesFromColorScheme( styles.verticalSeparator, styles.verticalSeparatorDark @@ -117,7 +112,7 @@ function ColorPalette( { return ( <> - { palette.map( ( color ) => { + { colors.map( ( color ) => { const scaleValue = isSelected( color ) ? scaleInterpolation : 1; @@ -145,13 +140,13 @@ function ColorPalette( { ); } ) } - { withCustomPicker && ( + { ! isGradientSegment && ( <> - + ); diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss index 8d0101f8d12674..336e34a17e1d34 100644 --- a/packages/components/src/color-picker/style.native.scss +++ b/packages/components/src/color-picker/style.native.scss @@ -29,7 +29,6 @@ .applyButtonDark { color: $blue-30; - font-size: 17px; } .colorText { diff --git a/packages/components/src/mobile/bottom-sheet/color-cell.native.js b/packages/components/src/mobile/bottom-sheet/color-cell.native.js index f13db84d60c78e..04f8ada26bacd3 100644 --- a/packages/components/src/mobile/bottom-sheet/color-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/color-cell.native.js @@ -11,17 +11,16 @@ import Cell from './cell'; import styles from './styles.scss'; export default function BottomSheetColorCell( props ) { - const { onPress, color, ...cellProps } = props; + const { color, ...cellProps } = props; return ( diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index f0954affd9835c..48fd4d097e08c8 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -39,6 +39,8 @@ import KeyboardAvoidingView from './keyboard-avoiding-view'; const ANIMATION_DURATION = 300; +// Context in BottomSheet is necessary for controlling the +// transition flow between subsheets and replacing a content inside them export const { Provider: BottomSheetProvider, Consumer } = createContext( { isBottomSheetScrolling: false, shouldEnableBottomSheetScroll: () => {}, From 6ab1081dafa2515b71b9b4ca45d44275af1913f6 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 22 Apr 2020 12:36:53 +0200 Subject: [PATCH 57/68] Refactor button styles --- packages/block-library/src/button/edit.native.js | 8 ++++---- packages/block-library/src/button/editor.native.scss | 9 ++------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 1a5c2c7042857a..b634db68958f28 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -174,7 +174,7 @@ class ButtonEdit extends Component { getBackgroundColor() { const { backgroundColor, attributes } = this.props; const { style, gradient, customGradient } = attributes; - const fallbackBackgroundColor = styles.fallbackButton.backgroundColor; + const fallbackBackgroundColor = styles.defaultButton.backgroundColor; const defaultGradients = SETTINGS_DEFAULTS.gradients; if ( customGradient || gradient ) { @@ -195,7 +195,7 @@ class ButtonEdit extends Component { getTextColor() { const { textColor, attributes } = this.props; const { style } = attributes; - const fallbackTextColor = styles.fallbackButton.color; + const fallbackTextColor = styles.defaultButton.color; return ( ( style && style.color && style.color.text ) || textColor.color || @@ -277,7 +277,7 @@ class ButtonEdit extends Component { onSetMaxWidth( width ) { const { maxWidth } = this.state; const { parentWidth } = this.props; - const { marginRight: spacing } = styles.button; + const { marginRight: spacing } = styles.defaultButton; const isParentWidthChanged = maxWidth !== parentWidth; const isWidthChanged = maxWidth !== width; @@ -412,7 +412,7 @@ class ButtonEdit extends Component { borderRadius: fallbackBorderRadius, paddingTop: spacing, borderWidth, - } = styles.button; + } = styles.defaultButton; if ( parentWidth === 0 ) { return null; diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index 47194070090401..54d25c34eb66a1 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -25,16 +25,11 @@ bottom: 0; } -.button { - border-width: $border-width; +.defaultButton { border-radius: $border-width * 4; padding: $block-spacing; - max-width: 580px; - min-width: 108px; + border-width: $border-width; margin: 2 * $panel-padding; -} - -.fallbackButton { background-color: $button-fallback-bg; color: $white; } From b4f3ccad1f79697a18c1218e65fcba5f38b8862a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 22 Apr 2020 14:02:19 +0200 Subject: [PATCH 58/68] Documented bottom sheet context content --- .../src/color-picker/index.native.js | 12 +++---- .../src/mobile/bottom-sheet/index.native.js | 34 +++++++++++++------ .../src/mobile/color-settings/index.native.js | 16 +++++---- 3 files changed, 38 insertions(+), 24 deletions(-) diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index 43e4e104ade7cb..c2df27da1caa69 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -19,8 +19,8 @@ import styles from './style.scss'; function ColorPicker( { shouldEnableBottomSheetScroll, - shouldSetBottomSheetMaxHeight, - isBottomSheetScrolling, + shouldDisableBottomSheetMaxHeight, + isBottomSheetContentScrolling, setColor, activeColor, onNavigationBack, @@ -82,7 +82,7 @@ function ColorPicker( { setHSVFromHex( activeColor ); } setColor( activeColor ); - shouldSetBottomSheetMaxHeight( false ); + shouldDisableBottomSheetMaxHeight( false ); onCloseBottomSheet( () => setColor( savedColor ) ); }, [] ); @@ -98,7 +98,7 @@ function ColorPicker( { function onButtonPress( action ) { onNavigationBack(); onCloseBottomSheet( null ); - shouldSetBottomSheetMaxHeight( true ); + shouldDisableBottomSheetMaxHeight( true ); setColor( action === 'apply' ? currentColor : savedColor ); } @@ -108,14 +108,14 @@ function ColorPicker( { huePickerHue={ hue } onHuePickerDragMove={ onHuePickerChange } onHuePickerPress={ - ! isBottomSheetScrolling && onHuePickerChange + ! isBottomSheetContentScrolling && onHuePickerChange } satValPickerHue={ hue } satValPickerSaturation={ sat } satValPickerValue={ val } onSatValPickerDragMove={ onSatValPickerChange } onSatValPickerPress={ - ! isBottomSheetScrolling && onSatValPickerChange + ! isBottomSheetContentScrolling && onSatValPickerChange } onSatValPickerDragStart={ () => { shouldEnableBottomSheetScroll( false ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 48fd4d097e08c8..b481688e0541d0 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -42,13 +42,23 @@ const ANIMATION_DURATION = 300; // Context in BottomSheet is necessary for controlling the // transition flow between subsheets and replacing a content inside them export const { Provider: BottomSheetProvider, Consumer } = createContext( { - isBottomSheetScrolling: false, + // Specifies whether content is currently scrolling + isBottomSheetContentScrolling: false, + // Function called to enable scroll within bottom sheet shouldEnableBottomSheetScroll: () => {}, - shouldSetBottomSheetMaxHeight: () => {}, + // Function called to disable bottom sheet max height. + // E.g. used to extend bottom sheet on full screen in ColorPicker, + // which is helpful on small devices with set the largest font/display size. + shouldDisableBottomSheetMaxHeight: () => {}, + // Callback that is called on closing bottom sheet onCloseBottomSheet: () => {}, + // Android only: Function called to control android hardware back button functionality onHardwareButtonPress: () => {}, + // Function called to navigate to another subsheet onReplaceSubsheet: () => {}, + // Object contains extra data passed to the current subsheet extraProps: {}, + // Specifies the currently active subsheet name currentScreen: undefined, } ); @@ -67,7 +77,9 @@ class BottomSheet extends Component { this.onScroll = this.onScroll.bind( this ); this.isScrolling = this.isScrolling.bind( this ); this.onShouldEnableScroll = this.onShouldEnableScroll.bind( this ); - this.onShouldSetMaxHeight = this.onShouldSetMaxHeight.bind( this ); + this.onShouldDisableBottomSheetMaxHeight = this.onShouldDisableBottomSheetMaxHeight.bind( + this + ); this.onDimensionsChange = this.onDimensionsChange.bind( this ); this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this ); this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind( @@ -90,7 +102,7 @@ class BottomSheet extends Component { isScrolling: false, onCloseBottomSheet: null, onHardwareButtonPress: null, - setMaxHeight: true, + isMaxHeightDisabled: true, stack: [], extraProps: {}, }; @@ -232,8 +244,8 @@ class BottomSheet extends Component { this.setState( { scrollEnabled: value } ); } - onShouldSetMaxHeight( value ) { - this.setState( { setMaxHeight: value } ); + onShouldDisableBottomSheetMaxHeight( value ) { + this.setState( { isMaxHeightDisabled: value } ); } isScrolling( value ) { @@ -313,7 +325,7 @@ class BottomSheet extends Component { safeAreaBottomInset, isScrolling, scrollEnabled, - setMaxHeight, + isMaxHeightDisabled, extraProps, stack, } = this.state; @@ -398,7 +410,7 @@ class BottomSheet extends Component { onScrollBeginDrag={ () => this.isScrolling( true ) } onScrollEndDrag={ () => this.isScrolling( false ) } scrollEventThrottle={ 16 } - style={ setMaxHeight ? { maxHeight } : {} } + style={ isMaxHeightDisabled ? { maxHeight } : {} } contentContainerStyle={ [ styles.content, hideHeader && styles.emptyHeader, @@ -411,9 +423,9 @@ class BottomSheet extends Component { value={ { shouldEnableBottomSheetScroll: this .onShouldEnableScroll, - shouldSetBottomSheetMaxHeight: this - .onShouldSetMaxHeight, - isBottomSheetScrolling: isScrolling, + shouldDisableBottomSheetMaxHeight: this + .onShouldDisableBottomSheetMaxHeight, + isBottomSheetContentScrolling: isScrolling, onCloseBottomSheet: this .onHandleClosingBottomSheet, onHardwareButtonPress: this diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 73bd0df4d33841..9d0b51f5afa278 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -26,8 +26,8 @@ function ColorSettings( { colorValue, onReplaceSubsheet, shouldEnableBottomSheetScroll, - shouldSetBottomSheetMaxHeight, - isBottomSheetScrolling, + shouldDisableBottomSheetMaxHeight, + isBottomSheetContentScrolling, onCloseBottomSheet, onHardwareButtonPress, getStylesFromColorScheme, @@ -63,13 +63,13 @@ function ColorSettings( { useEffect( () => { setActiveSegment( segments[ selectedSegmentIndex ] ); - shouldSetBottomSheetMaxHeight( true ); + shouldDisableBottomSheetMaxHeight( true ); onCloseBottomSheet( null ); }, [] ); function afterHardwareButtonPress() { onHardwareButtonPress( null ); - shouldSetBottomSheetMaxHeight( true ); + shouldDisableBottomSheetMaxHeight( true ); } function onCustomScreenToggle( shouldShow ) { @@ -142,8 +142,8 @@ function ColorSettings( { shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll } - shouldSetBottomSheetMaxHeight={ - shouldSetBottomSheetMaxHeight + shouldDisableBottomSheetMaxHeight={ + shouldDisableBottomSheetMaxHeight } setColor={ setColor } activeColor={ currentValue } @@ -151,7 +151,9 @@ function ColorSettings( { onCustomScreenToggle( false ); } } onCloseBottomSheet={ onCloseBottomSheet } - isBottomSheetScrolling={ isBottomSheetScrolling } + isBottomSheetContentScrolling={ + isBottomSheetContentScrolling + } /> ) } From d04348ffea3cb4757fd265cf4ad8b1836728507e Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 22 Apr 2020 15:39:37 +0200 Subject: [PATCH 59/68] Another code clean up --- .../src/color-palette/index.native.js | 6 +++-- .../src/color-picker/index.native.js | 4 ++-- .../src/mobile/bottom-sheet/index.native.js | 22 +++++-------------- .../src/mobile/color-settings/index.native.js | 17 +++++++------- 4 files changed, 21 insertions(+), 28 deletions(-) diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 818a57159aef62..b156968a8f7faa 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -26,6 +26,7 @@ const ANIMATION_DURATION = 200; function ColorPalette( { setColor, activeColor, + isGradientColor, defaultSettings, currentSegment, onCustomPress, @@ -55,7 +56,6 @@ function ColorPalette( { const scrollViewRef = createRef(); const isGradientSegment = currentSegment === 'Gradient'; - const isGradient = activeColor?.includes( 'linear-gradient' ); const [ scale ] = useState( new Animated.Value( 1 ) ); const [ opacity ] = useState( new Animated.Value( 1 ) ); @@ -69,7 +69,9 @@ function ColorPalette( { }, [ currentSegment ] ); function isSelectedCustom() { - return ! isGradient && activeColor && ! colors.includes( activeColor ); + return ( + ! isGradientColor && activeColor && ! colors.includes( activeColor ) + ); } function isSelected( color ) { diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index c2df27da1caa69..f1169b80fbb099 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -23,12 +23,12 @@ function ColorPicker( { isBottomSheetContentScrolling, setColor, activeColor, + isGradientColor, onNavigationBack, onCloseBottomSheet, getStylesFromColorScheme, } ) { const isIOS = Platform.OS === 'ios'; - const isGradient = activeColor?.includes( 'linear-gradient' ); const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; const [ hue, setHue ] = useState( 0 ); @@ -78,7 +78,7 @@ function ColorPicker( { }, [ currentColor ] ); useEffect( () => { - if ( ! isGradient && activeColor ) { + if ( ! isGradientColor && activeColor ) { setHSVFromHex( activeColor ); } setColor( activeColor ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index b481688e0541d0..8980831f87fd90 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -103,7 +103,7 @@ class BottomSheet extends Component { onCloseBottomSheet: null, onHardwareButtonPress: null, isMaxHeightDisabled: true, - stack: [], + currentScreen: '', extraProps: {}, }; @@ -172,7 +172,7 @@ class BottomSheet extends Component { const { isVisible } = this.props; if ( ! prevProps.isVisible && isVisible ) { - this.setState( { stack: [] } ); + this.setState( { currentScreen: '' } ); } } @@ -279,8 +279,6 @@ class BottomSheet extends Component { } onReplaceSubsheet( destination, extraProps, callback ) { - const { stack } = this.state; - LayoutAnimation.configureNext( LayoutAnimation.create( ANIMATION_DURATION, @@ -289,19 +287,12 @@ class BottomSheet extends Component { ) ); - const containedInStack = stack.includes( destination ); - const nextStack = [ ...stack, destination ]; - const previousStack = stack.slice( 0, -1 ); this.setState( { - stack: containedInStack ? previousStack : nextStack, + currentScreen: destination, extraProps: extraProps || {}, }, - () => { - if ( callback ) { - callback(); - } - } + callback ); } @@ -327,7 +318,7 @@ class BottomSheet extends Component { scrollEnabled, isMaxHeightDisabled, extraProps, - stack, + currentScreen, } = this.state; const panResponder = PanResponder.create( { @@ -432,8 +423,7 @@ class BottomSheet extends Component { .onHandleHardwareButtonPress, onReplaceSubsheet: this.onReplaceSubsheet, extraProps, - currentScreen: - stack[ Math.max( stack.length - 1, 0 ) ], + currentScreen, } } > diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index 9d0b51f5afa278..fc6551d02026b0 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -34,17 +34,16 @@ function ColorSettings( { defaultSettings, } ) { const segments = [ 'Solid', 'Gradient' ]; + const isGradientColor = colorValue?.includes( 'linear-gradient' ); + const selectedSegmentIndex = isGradientColor ? 1 : 0; + const [ currentValue, setCurrentValue ] = useState( colorValue ); const [ isCustomScreen, setIsCustomScreen ] = useState( false ); - const isGradient = colorValue?.includes( 'linear-gradient' ); - const selectedSegmentIndex = isGradient ? 1 : 0; - - const [ activeSegment, setActiveSegment ] = useState( + const [ currentSegment, setCurrentSegment ] = useState( segments[ selectedSegmentIndex ] ); - const currentSegment = onGradientChange ? activeSegment : segments[ 0 ]; - const isSolidSegment = activeSegment === 'Solid'; + const isSolidSegment = currentSegment === 'Solid'; const horizontalSeparatorStyle = getStylesFromColorScheme( styles.horizontalSeparator, @@ -62,7 +61,7 @@ function ColorSettings( { }, [ isCustomScreen ] ); useEffect( () => { - setActiveSegment( segments[ selectedSegmentIndex ] ); + setCurrentSegment( segments[ selectedSegmentIndex ] ); shouldDisableBottomSheetMaxHeight( true ); onCloseBottomSheet( null ); }, [] ); @@ -100,7 +99,7 @@ function ColorSettings( { return ( setActiveSegment( item ) } + segmentHandler={ ( item ) => setCurrentSegment( item ) } selectedIndex={ selectedSegmentIndex } addonLeft={ currentValue && ( @@ -147,6 +146,7 @@ function ColorSettings( { } setColor={ setColor } activeColor={ currentValue } + isGradientColor={ isGradientColor } onNavigationBack={ () => { onCustomScreenToggle( false ); } } @@ -168,6 +168,7 @@ function ColorSettings( { { From 67b0134fe853274d930996459cb9a8ea216686bd Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 23 Apr 2020 11:47:43 +0200 Subject: [PATCH 60/68] Remove redundant provider export --- .../block-library/src/button/edit.native.js | 17 ++++++---------- .../src/mobile/bottom-sheet/index.native.js | 20 ++++++++++--------- 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index b634db68958f28..8b98d4b742bf71 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -174,7 +174,6 @@ class ButtonEdit extends Component { getBackgroundColor() { const { backgroundColor, attributes } = this.props; const { style, gradient, customGradient } = attributes; - const fallbackBackgroundColor = styles.defaultButton.backgroundColor; const defaultGradients = SETTINGS_DEFAULTS.gradients; if ( customGradient || gradient ) { @@ -188,18 +187,17 @@ class ButtonEdit extends Component { return ( ( style && style.color && style.color.background ) || backgroundColor.color || - fallbackBackgroundColor + styles.defaultButton.backgroundColor ); } getTextColor() { const { textColor, attributes } = this.props; const { style } = attributes; - const fallbackTextColor = styles.defaultButton.color; return ( ( style && style.color && style.color.text ) || textColor.color || - fallbackTextColor + styles.defaultButton.color ); } @@ -408,18 +406,15 @@ class ButtonEdit extends Component { isButtonFocused, placeholderTextWidth, } = this.state; - const { - borderRadius: fallbackBorderRadius, - paddingTop: spacing, - borderWidth, - } = styles.defaultButton; + const { paddingTop: spacing, borderWidth } = styles.defaultButton; if ( parentWidth === 0 ) { return null; } - const borderRadiusValue = - borderRadius !== undefined ? borderRadius : fallbackBorderRadius; + const borderRadiusValue = Number.isInteger( borderRadius ) + ? borderRadius + : styles.defaultButton.borderRadius; const outlineBorderRadius = borderRadiusValue > 0 ? borderRadiusValue + spacing + borderWidth diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 8980831f87fd90..0722b340a8e0a7 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -41,7 +41,10 @@ const ANIMATION_DURATION = 300; // Context in BottomSheet is necessary for controlling the // transition flow between subsheets and replacing a content inside them -export const { Provider: BottomSheetProvider, Consumer } = createContext( { +export const { + Provider: BottomSheetProvider, + Consumer: BottomSheetConsumer, +} = createContext( { // Specifies whether content is currently scrolling isBottomSheetContentScrolling: false, // Function called to enable scroll within bottom sheet @@ -77,7 +80,7 @@ class BottomSheet extends Component { this.onScroll = this.onScroll.bind( this ); this.isScrolling = this.isScrolling.bind( this ); this.onShouldEnableScroll = this.onShouldEnableScroll.bind( this ); - this.onShouldDisableBottomSheetMaxHeight = this.onShouldDisableBottomSheetMaxHeight.bind( + this.onShouldSetBottomSheetMaxHeight = this.onShouldSetBottomSheetMaxHeight.bind( this ); this.onDimensionsChange = this.onDimensionsChange.bind( this ); @@ -102,7 +105,7 @@ class BottomSheet extends Component { isScrolling: false, onCloseBottomSheet: null, onHardwareButtonPress: null, - isMaxHeightDisabled: true, + isMaxHeightSet: true, currentScreen: '', extraProps: {}, }; @@ -244,8 +247,8 @@ class BottomSheet extends Component { this.setState( { scrollEnabled: value } ); } - onShouldDisableBottomSheetMaxHeight( value ) { - this.setState( { isMaxHeightDisabled: value } ); + onShouldSetBottomSheetMaxHeight( value ) { + this.setState( { isMaxHeightSet: value } ); } isScrolling( value ) { @@ -316,7 +319,7 @@ class BottomSheet extends Component { safeAreaBottomInset, isScrolling, scrollEnabled, - isMaxHeightDisabled, + isMaxHeightSet, extraProps, currentScreen, } = this.state; @@ -401,7 +404,7 @@ class BottomSheet extends Component { onScrollBeginDrag={ () => this.isScrolling( true ) } onScrollEndDrag={ () => this.isScrolling( false ) } scrollEventThrottle={ 16 } - style={ isMaxHeightDisabled ? { maxHeight } : {} } + style={ isMaxHeightSet ? { maxHeight } : {} } contentContainerStyle={ [ styles.content, hideHeader && styles.emptyHeader, @@ -415,7 +418,7 @@ class BottomSheet extends Component { shouldEnableBottomSheetScroll: this .onShouldEnableScroll, shouldDisableBottomSheetMaxHeight: this - .onShouldDisableBottomSheetMaxHeight, + .onShouldSetBottomSheetMaxHeight, isBottomSheetContentScrolling: isScrolling, onCloseBottomSheet: this .onHandleClosingBottomSheet, @@ -456,5 +459,4 @@ ThemedBottomSheet.SwitchCell = SwitchCell; ThemedBottomSheet.RangeCell = RangeCell; ThemedBottomSheet.ColorCell = ColorCell; -export { Consumer as BottomSheetConsumer }; export default ThemedBottomSheet; From 84e0331d49ca70b45eeb756e40884e58bd996e4d Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 23 Apr 2020 17:47:35 +0200 Subject: [PATCH 61/68] Refactor color palette --- .../src/color-palette/index.native.js | 102 ++++++++---------- 1 file changed, 45 insertions(+), 57 deletions(-) diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index b156968a8f7faa..bf3234ee9e23dc 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -106,60 +106,10 @@ function ColorPalette( { setColor( color ); } - function Palette() { - const verticalSeparatorStyle = getStylesFromColorScheme( - styles.verticalSeparator, - styles.verticalSeparatorDark - ); - - return ( - <> - { colors.map( ( color ) => { - const scaleValue = isSelected( color ) - ? scaleInterpolation - : 1; - return ( - onColorPress( color ) } - key={ color } - > - - - - - ); - } ) } - { ! isGradientSegment && ( - <> - - - - - - - - ) } - - ); - } + const verticalSeparatorStyle = getStylesFromColorScheme( + styles.verticalSeparator, + styles.verticalSeparatorDark + ); return ( shouldEnableBottomSheetScroll( true ) } ref={ scrollViewRef } > - - - + { colors.map( ( color ) => { + const scaleValue = isSelected( color ) ? scaleInterpolation : 1; + return ( + onColorPress( color ) } + key={ `${ color }-${ isSelected( color ) }` } + > + + + + + ); + } ) } + { ! isGradientSegment && ( + <> + + + + + + + + ) } ); } From 7cd18756e723e4ec1f76390c7783cc4e71b7d33c Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 27 Apr 2020 13:12:34 +0200 Subject: [PATCH 62/68] Refactor: use usePreferredColorSchemeStyle, move subsheets and segments names to utils --- .../block-settings/container.native.js | 5 ++-- .../src/color-indicator/index.native.js | 7 ++--- .../src/color-palette/index.native.js | 10 +++---- .../src/color-picker/index.native.js | 13 ++++---- packages/components/src/index.native.js | 3 ++ .../bottom-sheet/navigation-header.native.js | 18 +++++------ .../src/mobile/color-settings/index.native.js | 20 ++++++++----- .../src/mobile/color-settings/utils.native.js | 4 +++ .../mobile/segmented-control/index.native.js | 30 +++++++------------ 9 files changed, 53 insertions(+), 57 deletions(-) create mode 100644 packages/components/src/mobile/color-settings/utils.native.js diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 2a7949174f699a..4c5fe7c6ef70ad 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -5,6 +5,7 @@ import { BottomSheet, BottomSheetConsumer, ColorSettings, + colorsUtils, } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; @@ -34,7 +35,7 @@ function BottomSheetSettings( { { ( { currentScreen, extraProps, ...bottomSheetProps } ) => { switch ( currentScreen ) { - case 'Color': + case colorsUtils.subsheets[ 1 ]: return ( ); - case 'Settings': + case colorsUtils.subsheets[ 0 ]: default: return ; } diff --git a/packages/components/src/color-indicator/index.native.js b/packages/components/src/color-indicator/index.native.js index 11508cee173a14..fc8a4ec17980ec 100644 --- a/packages/components/src/color-indicator/index.native.js +++ b/packages/components/src/color-indicator/index.native.js @@ -7,7 +7,7 @@ import { View, Animated } from 'react-native'; */ import { Icon, check } from '@wordpress/icons'; import { LinearGradient } from '@wordpress/components'; -import { withPreferredColorScheme } from '@wordpress/compose'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies */ @@ -27,12 +27,11 @@ function ColorIndicator( { isSelected, withCustomPicker, style, - getStylesFromColorScheme, opacity, } ) { const isGradient = color?.includes( 'linear-gradient' ); - const outlineStyle = getStylesFromColorScheme( + const outlineStyle = usePreferredColorSchemeStyle( styles.outline, styles.outlineDark ); @@ -73,4 +72,4 @@ function ColorIndicator( { ); } -export default withPreferredColorScheme( ColorIndicator ); +export default ColorIndicator; diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index bf3234ee9e23dc..4f9f85870604ab 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -14,12 +14,13 @@ import { map } from 'lodash'; */ import { useState, useEffect, createRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { withPreferredColorScheme } from '@wordpress/compose'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies */ import styles from './style.scss'; import ColorIndicator from '../color-indicator'; +import { colorsUtils } from '../mobile/color-settings/utils'; const ANIMATION_DURATION = 200; @@ -30,7 +31,6 @@ function ColorPalette( { defaultSettings, currentSegment, onCustomPress, - getStylesFromColorScheme, shouldEnableBottomSheetScroll, } ) { const customSwatchGradients = [ @@ -55,7 +55,7 @@ function ColorPalette( { const scrollViewRef = createRef(); - const isGradientSegment = currentSegment === 'Gradient'; + const isGradientSegment = currentSegment === colorsUtils.segments[ 1 ]; const [ scale ] = useState( new Animated.Value( 1 ) ); const [ opacity ] = useState( new Animated.Value( 1 ) ); @@ -106,7 +106,7 @@ function ColorPalette( { setColor( color ); } - const verticalSeparatorStyle = getStylesFromColorScheme( + const verticalSeparatorStyle = usePreferredColorSchemeStyle( styles.verticalSeparator, styles.verticalSeparatorDark ); @@ -168,4 +168,4 @@ function ColorPalette( { ); } -export default withPreferredColorScheme( ColorPalette ); +export default ColorPalette; diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js index f1169b80fbb099..e95d2b4d770f61 100644 --- a/packages/components/src/color-picker/index.native.js +++ b/packages/components/src/color-picker/index.native.js @@ -10,7 +10,7 @@ import tinycolor from 'tinycolor2'; import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { BottomSheet } from '@wordpress/components'; -import { withPreferredColorScheme } from '@wordpress/compose'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { Icon, check, close } from '@wordpress/icons'; /** * Internal dependencies @@ -26,7 +26,6 @@ function ColorPicker( { isGradientColor, onNavigationBack, onCloseBottomSheet, - getStylesFromColorScheme, } ) { const isIOS = Platform.OS === 'ios'; const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; @@ -44,19 +43,19 @@ function ColorPicker( { const { height: pickerPointerSize } = styles.pickerPointer; const pickerWidth = BottomSheet.getWidth() - 2 * spacing; - const applyButtonStyle = getStylesFromColorScheme( + const applyButtonStyle = usePreferredColorSchemeStyle( styles.applyButton, styles.applyButtonDark ); - const cancelButtonStyle = getStylesFromColorScheme( + const cancelButtonStyle = usePreferredColorSchemeStyle( styles.cancelButton, styles.cancelButtonDark ); - const colorTextStyle = getStylesFromColorScheme( + const colorTextStyle = usePreferredColorSchemeStyle( styles.colorText, styles.colorTextDark ); - const footerStyle = getStylesFromColorScheme( + const footerStyle = usePreferredColorSchemeStyle( styles.footer, styles.footerDark ); @@ -184,4 +183,4 @@ function ColorPicker( { ); } -export default withPreferredColorScheme( ColorPicker ); +export default ColorPicker; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 5d046adb47fcde..7f9630336759e2 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -65,3 +65,6 @@ export { default as CycleSelectControl } from './mobile/cycle-select-control'; export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint'; export { default as LinearGradient } from './mobile/linear-gradient'; export { default as ColorSettings } from './mobile/color-settings'; + +// Utils +export { colorsUtils } from './mobile/color-settings/utils'; diff --git a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js index 176d7a915f0e9b..dc3974a9140362 100644 --- a/packages/components/src/mobile/bottom-sheet/navigation-header.native.js +++ b/packages/components/src/mobile/bottom-sheet/navigation-header.native.js @@ -7,32 +7,28 @@ import { View, TouchableWithoutFeedback, Text, Platform } from 'react-native'; */ import { __ } from '@wordpress/i18n'; import { Icon, chevronLeft, arrowLeft } from '@wordpress/icons'; -import { withPreferredColorScheme } from '@wordpress/compose'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies */ import styles from './styles.scss'; -function BottomSheetNavigationHeader( { - leftButtonOnPress, - screen, - getStylesFromColorScheme, -} ) { +function BottomSheetNavigationHeader( { leftButtonOnPress, screen } ) { const isIOS = Platform.OS === 'ios'; - const bottomSheetHeaderTitleStyle = getStylesFromColorScheme( + const bottomSheetHeaderTitleStyle = usePreferredColorSchemeStyle( styles.bottomSheetHeaderTitle, styles.bottomSheetHeaderTitleDark ); - const bottomSheetButtonTextStyle = getStylesFromColorScheme( + const bottomSheetButtonTextStyle = usePreferredColorSchemeStyle( styles.bottomSheetButtonText, styles.bottomSheetButtonTextDark ); - const chevronLeftStyle = getStylesFromColorScheme( + const chevronLeftStyle = usePreferredColorSchemeStyle( styles.chevronLeftIcon, styles.chevronLeftIconDark ); - const arrowLeftStyle = getStylesFromColorScheme( + const arrowLeftStyle = usePreferredColorSchemeStyle( styles.arrowLeftIcon, styles.arrowLeftIconDark ); @@ -75,4 +71,4 @@ function BottomSheetNavigationHeader( { ); } -export default withPreferredColorScheme( BottomSheetNavigationHeader ); +export default BottomSheetNavigationHeader; diff --git a/packages/components/src/mobile/color-settings/index.native.js b/packages/components/src/mobile/color-settings/index.native.js index fc6551d02026b0..a9e7941b0f2e47 100644 --- a/packages/components/src/mobile/color-settings/index.native.js +++ b/packages/components/src/mobile/color-settings/index.native.js @@ -7,7 +7,7 @@ import { View, Text, LayoutAnimation } from 'react-native'; */ import { __ } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; -import { withPreferredColorScheme } from '@wordpress/compose'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies */ @@ -16,6 +16,7 @@ import ColorPalette from '../../color-palette'; import ColorIndicator from '../../color-indicator'; import NavigationHeader from '../bottom-sheet/navigation-header'; import SegmentedControls from '../segmented-control'; +import { colorsUtils } from './utils'; import styles from './style.scss'; @@ -30,10 +31,9 @@ function ColorSettings( { isBottomSheetContentScrolling, onCloseBottomSheet, onHardwareButtonPress, - getStylesFromColorScheme, defaultSettings, } ) { - const segments = [ 'Solid', 'Gradient' ]; + const { segments, subsheets } = colorsUtils; const isGradientColor = colorValue?.includes( 'linear-gradient' ); const selectedSegmentIndex = isGradientColor ? 1 : 0; @@ -43,9 +43,9 @@ function ColorSettings( { segments[ selectedSegmentIndex ] ); - const isSolidSegment = currentSegment === 'Solid'; + const isSolidSegment = currentSegment === segments[ 0 ]; - const horizontalSeparatorStyle = getStylesFromColorScheme( + const horizontalSeparatorStyle = usePreferredColorSchemeStyle( styles.horizontalSeparator, styles.horizontalSeparatorDark ); @@ -55,7 +55,11 @@ function ColorSettings( { if ( isCustomScreen ) { onCustomScreenToggle( false ); } else { - onReplaceSubsheet( 'Settings', {}, afterHardwareButtonPress() ); + onReplaceSubsheet( + subsheets[ 0 ], + {}, + afterHardwareButtonPress() + ); } } ); }, [ isCustomScreen ] ); @@ -162,7 +166,7 @@ function ColorSettings( { - onReplaceSubsheet( 'Settings' ) + onReplaceSubsheet( subsheets[ 0 ] ) } /> { +const Segment = ( { isSelected, title, onPress, onLayout } ) => { const isSelectedIOS = isIOS && isSelected; const segmentStyle = [ styles.segment, isIOS && styles.segmentIOS ]; - const textStyle = getStylesFromColorScheme( + const textStyle = usePreferredColorSchemeStyle( styles.buttonTextDefault, styles.buttonTextDefaultDark ); - const selectedTextStyle = getStylesFromColorScheme( + const selectedTextStyle = usePreferredColorSchemeStyle( styles.buttonTextSelected, styles.buttonTextSelectedDark ); - const shadowStyle = getStylesFromColorScheme( styles.shadowIOS, {} ); + const shadowStyle = usePreferredColorSchemeStyle( styles.shadowIOS, {} ); return ( @@ -69,7 +63,6 @@ const SegmentedControls = ( { selectedIndex, addonLeft, addonRight, - getStylesFromColorScheme, } ) => { const selectedSegmentIndex = selectedIndex || 0; const [ activeSegmentIndex, setActiveSegmentIndex ] = useState( @@ -91,12 +84,12 @@ const SegmentedControls = ( { ); }, [ segmentsDimensions ] ); - const containerStyle = getStylesFromColorScheme( + const containerStyle = usePreferredColorSchemeStyle( styles.container, styles.containerDark ); - function pefrormAnimation( index ) { + function performAnimation( index ) { Animated.timing( positionAnimationValue, { toValue: calculateEndValue( index ), duration: ANIMATION_DURATION, @@ -129,7 +122,7 @@ const SegmentedControls = ( { ); setActiveSegmentIndex( index ); segmentHandler( segment ); - pefrormAnimation( index, segment ); + performAnimation( index, segment ); } function segmentOnLayout( event, index ) { @@ -141,7 +134,7 @@ const SegmentedControls = ( { } ); } - const selectedStyle = getStylesFromColorScheme( + const selectedStyle = usePreferredColorSchemeStyle( styles.selected, styles.selectedDark ); @@ -162,9 +155,6 @@ const SegmentedControls = ( { onPress={ () => onHandlePress( segment, index ) } isSelected={ activeSegmentIndex === index } key={ index } - getStylesFromColorScheme={ - getStylesFromColorScheme - } onLayout={ ( event ) => segmentOnLayout( event, index ) } @@ -188,4 +178,4 @@ const SegmentedControls = ( { ); }; -export default withPreferredColorScheme( SegmentedControls ); +export default SegmentedControls; From e56bb6057d590aa18c4fe50708c5d9892c8a8e0b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 27 Apr 2020 15:30:23 +0200 Subject: [PATCH 63/68] Move default BottomSheet context to separate file --- packages/components/src/index.native.js | 6 +-- .../bottom-sheet-context.native.js | 43 +++++++++++++++++++ .../src/mobile/bottom-sheet/index.native.js | 38 +--------------- 3 files changed, 47 insertions(+), 40 deletions(-) create mode 100644 packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 7f9630336759e2..4b4d528559eda6 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -51,10 +51,8 @@ export { default as withSpokenMessages } from './higher-order/with-spoken-messag export * from './text'; // Mobile Components -export { - default as BottomSheet, - BottomSheetConsumer, -} from './mobile/bottom-sheet'; +export { default as BottomSheet } from './mobile/bottom-sheet'; +export { BottomSheetConsumer } from './mobile/bottom-sheet/bottom-sheet-context'; export { default as HTMLTextInput } from './mobile/html-text-input'; export { default as KeyboardAvoidingView } from './mobile/keyboard-avoiding-view'; export { default as KeyboardAwareFlatList } from './mobile/keyboard-aware-flat-list'; diff --git a/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js b/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js new file mode 100644 index 00000000000000..9252e5daf3ac4e --- /dev/null +++ b/packages/components/src/mobile/bottom-sheet/bottom-sheet-context.native.js @@ -0,0 +1,43 @@ +/** + * External dependencies + */ +import { Platform, UIManager } from 'react-native'; +/** + * WordPress dependencies + */ +import { createContext } from '@wordpress/element'; + +// It's needed to set the following flags via UIManager +// to have `LayoutAnimation` working on Android +if ( + Platform.OS === 'android' && + UIManager.setLayoutAnimationEnabledExperimental +) { + UIManager.setLayoutAnimationEnabledExperimental( true ); +} + +// Context in BottomSheet is necessary for controlling the +// transition flow between subsheets and replacing a content inside them +export const { + Provider: BottomSheetProvider, + Consumer: BottomSheetConsumer, +} = createContext( { + // Specifies whether content is currently scrolling + isBottomSheetContentScrolling: false, + // Function called to enable scroll within bottom sheet + shouldEnableBottomSheetScroll: () => {}, + // Function called to disable bottom sheet max height. + // E.g. used to extend bottom sheet on full screen in ColorPicker, + // which is helpful on small devices with set the largest font/display size. + shouldDisableBottomSheetMaxHeight: () => {}, + // Callback that is called on closing bottom sheet + onCloseBottomSheet: () => {}, + // Android only: Function called to control android hardware back button functionality + onHardwareButtonPress: () => {}, + // Function called to navigate to another subsheet + onReplaceSubsheet: () => {}, + // Object contains extra data passed to the current subsheet + extraProps: {}, + // Specifies the currently active subsheet name + currentScreen: undefined, +} ); diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 0722b340a8e0a7..c1e25671e0c612 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -12,7 +12,6 @@ import { StatusBar, TouchableHighlight, LayoutAnimation, - UIManager, } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; @@ -21,7 +20,7 @@ import { subscribeAndroidModalClosed } from 'react-native-gutenberg-bridge'; /** * WordPress dependencies */ -import { Component, createContext } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { withPreferredColorScheme } from '@wordpress/compose'; /** @@ -36,43 +35,10 @@ import SwitchCell from './switch-cell'; import RangeCell from './range-cell'; import ColorCell from './color-cell'; import KeyboardAvoidingView from './keyboard-avoiding-view'; +import { BottomSheetProvider } from './bottom-sheet-context'; const ANIMATION_DURATION = 300; -// Context in BottomSheet is necessary for controlling the -// transition flow between subsheets and replacing a content inside them -export const { - Provider: BottomSheetProvider, - Consumer: BottomSheetConsumer, -} = createContext( { - // Specifies whether content is currently scrolling - isBottomSheetContentScrolling: false, - // Function called to enable scroll within bottom sheet - shouldEnableBottomSheetScroll: () => {}, - // Function called to disable bottom sheet max height. - // E.g. used to extend bottom sheet on full screen in ColorPicker, - // which is helpful on small devices with set the largest font/display size. - shouldDisableBottomSheetMaxHeight: () => {}, - // Callback that is called on closing bottom sheet - onCloseBottomSheet: () => {}, - // Android only: Function called to control android hardware back button functionality - onHardwareButtonPress: () => {}, - // Function called to navigate to another subsheet - onReplaceSubsheet: () => {}, - // Object contains extra data passed to the current subsheet - extraProps: {}, - // Specifies the currently active subsheet name - currentScreen: undefined, -} ); - -// It's needed to set the following flags via UIManager -// to have `LayoutAnimation` working on Android -if ( - Platform.OS === 'android' && - UIManager.setLayoutAnimationEnabledExperimental -) { - UIManager.setLayoutAnimationEnabledExperimental( true ); -} class BottomSheet extends Component { constructor() { super( ...arguments ); From 9e8ba7f08b60d7b0bb565a4e1bf58443ca19d707 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 27 Apr 2020 16:30:58 +0200 Subject: [PATCH 64/68] Move function isGradient to utils --- .../block-library/src/button/color-background.native.js | 7 +++---- packages/components/src/color-indicator/index.native.js | 5 +++-- .../components/src/mobile/color-settings/index.native.js | 9 ++++----- .../components/src/mobile/color-settings/utils.native.js | 1 + 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/button/color-background.native.js b/packages/block-library/src/button/color-background.native.js index 8cd8fe2de0b9e0..f61eccb389b12a 100644 --- a/packages/block-library/src/button/color-background.native.js +++ b/packages/block-library/src/button/color-background.native.js @@ -5,13 +5,14 @@ import { View } from 'react-native'; /** * WordPress dependencies */ -import { LinearGradient } from '@wordpress/components'; +import { LinearGradient, colorsUtils } from '@wordpress/components'; /** * Internal dependencies */ import styles from './editor.scss'; function ColorBackground( { children, borderRadiusValue, backgroundColor } ) { + const { isGradient } = colorsUtils; const wrapperStyles = [ styles.richTextWrapper, { @@ -20,11 +21,9 @@ function ColorBackground( { children, borderRadiusValue, backgroundColor } ) { }, ]; - const isGradient = backgroundColor.includes( 'linear-gradient' ); - return ( - { isGradient && ( + { isGradient( backgroundColor ) && ( { onCustomScreenToggle( false ); } } @@ -172,7 +171,7 @@ function ColorSettings( { { diff --git a/packages/components/src/mobile/color-settings/utils.native.js b/packages/components/src/mobile/color-settings/utils.native.js index ad8ea87df7d87f..73fac22506f4cf 100644 --- a/packages/components/src/mobile/color-settings/utils.native.js +++ b/packages/components/src/mobile/color-settings/utils.native.js @@ -1,4 +1,5 @@ export const colorsUtils = { subsheets: [ 'Settings', 'Color' ], segments: [ 'Solid', 'Gradient' ], + isGradient: ( color ) => color?.includes( 'linear-gradient' ), }; From 03b69f935350575c5742d9d93bd716dccd23dda8 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 4 May 2020 12:51:52 +0200 Subject: [PATCH 65/68] Refactor colorsUtils, unify colors label --- .../src/components/block-settings/container.native.js | 4 ++-- packages/block-editor/src/hooks/color.js | 10 ++-------- .../src/mobile/color-settings/utils.native.js | 5 ++++- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index 4c5fe7c6ef70ad..9ba339b86eb551 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -35,7 +35,7 @@ function BottomSheetSettings( { { ( { currentScreen, extraProps, ...bottomSheetProps } ) => { switch ( currentScreen ) { - case colorsUtils.subsheets[ 1 ]: + case colorsUtils.subsheets.color: return ( ); - case colorsUtils.subsheets[ 0 ]: + case colorsUtils.subsheets.settings: default: return ; } diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index 3322abca712c1f..b8f447b67e788a 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -250,10 +250,7 @@ export function ColorEdit( props ) { clientId={ props.clientId } settings={ [ { - label: - Platform.OS === 'web' - ? __( 'Text Color' ) - : __( 'Text' ), + label: __( 'Text Color' ), onColorChange: onChangeColor( 'text' ), colorValue: getColorObjectByAttributeValues( colors, @@ -262,10 +259,7 @@ export function ColorEdit( props ) { ).color, }, { - label: - Platform.OS === 'web' - ? __( 'Background Color' ) - : __( 'Background' ), + label: __( 'Background Color' ), onColorChange: onChangeColor( 'background' ), colorValue: getColorObjectByAttributeValues( colors, diff --git a/packages/components/src/mobile/color-settings/utils.native.js b/packages/components/src/mobile/color-settings/utils.native.js index 73fac22506f4cf..1ff4e20cbbb462 100644 --- a/packages/components/src/mobile/color-settings/utils.native.js +++ b/packages/components/src/mobile/color-settings/utils.native.js @@ -1,5 +1,8 @@ export const colorsUtils = { - subsheets: [ 'Settings', 'Color' ], + subsheets: { + settings: 'Settings', + color: 'Color', + }, segments: [ 'Solid', 'Gradient' ], isGradient: ( color ) => color?.includes( 'linear-gradient' ), }; From fa36fc35e817037f94caa8fe6e550ceca1baf9db Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 4 May 2020 15:19:04 +0200 Subject: [PATCH 66/68] Correct using colors in reverted Button block --- packages/block-editor/src/components/index.native.js | 1 + packages/block-library/src/button/color-edit.js | 8 +++++--- packages/block-library/src/button/edit.native.js | 11 ++++++++--- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index f2e9e2ed82c688..00ab1437903245 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -33,6 +33,7 @@ export { default as BlockInvalidWarning } from './block-list/block-invalid-warni export { default as BlockCaption } from './block-caption'; export { default as Caption } from './caption'; export { default as PanelColorSettings } from './panel-color-settings'; +export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings'; export { BottomSheetSettings, BlockSettingsButton } from './block-settings'; export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player'; diff --git a/packages/block-library/src/button/color-edit.js b/packages/block-library/src/button/color-edit.js index 72d8b356acdc0e..40b7e4140b9b1f 100644 --- a/packages/block-library/src/button/color-edit.js +++ b/packages/block-library/src/button/color-edit.js @@ -7,7 +7,7 @@ import { pickBy, isEqual, isObject, identity, mapValues } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useState, useEffect, useRef } from '@wordpress/element'; +import { useState, useEffect, useRef, Platform } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; /** @@ -23,6 +23,8 @@ import { InspectorControls, } from '@wordpress/block-editor'; +const isWebPlatform = Platform.OS === 'web'; + // The code in this file is copied entirely from the "color" and "style" support flags // The flag can't be used at the moment because of the extra wrapper around // the button block markup. @@ -50,7 +52,7 @@ const cleanEmptyObject = ( object ) => { : cleanedNestedObjects; }; -function ColorPanel( { settings, clientId, enableContrastChecking = true } ) { +function ColorPanel( { settings, clientId, enableContrastChecking = isWebPlatform } ) { const { getComputedStyle, Node } = window; const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState(); @@ -191,7 +193,7 @@ function ColorEdit( props ) { return ( + Date: Mon, 4 May 2020 17:32:11 +0200 Subject: [PATCH 67/68] Correct button colors --- packages/block-library/src/button/color-edit.js | 10 ++++++---- packages/block-library/src/button/edit.native.js | 13 +++++-------- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/button/color-edit.js b/packages/block-library/src/button/color-edit.js index 40b7e4140b9b1f..c489c781f9e61f 100644 --- a/packages/block-library/src/button/color-edit.js +++ b/packages/block-library/src/button/color-edit.js @@ -52,14 +52,14 @@ const cleanEmptyObject = ( object ) => { : cleanedNestedObjects; }; -function ColorPanel( { settings, clientId, enableContrastChecking = isWebPlatform } ) { +function ColorPanel( { settings, clientId, enableContrastChecking = true } ) { const { getComputedStyle, Node } = window; const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState(); const [ detectedColor, setDetectedColor ] = useState(); useEffect( () => { - if ( ! enableContrastChecking ) { + if ( isWebPlatform && ! enableContrastChecking ) { return; } @@ -92,7 +92,7 @@ function ColorPanel( { settings, clientId, enableContrastChecking = isWebPlatfor initialOpen={ false } settings={ settings } > - { enableContrastChecking && ( + { isWebPlatform && enableContrastChecking && ( - + Date: Tue, 5 May 2020 14:00:38 +0200 Subject: [PATCH 68/68] Remove redundant check --- packages/block-library/src/button/color-edit.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-library/src/button/color-edit.js b/packages/block-library/src/button/color-edit.js index c489c781f9e61f..a9b9f6c9378963 100644 --- a/packages/block-library/src/button/color-edit.js +++ b/packages/block-library/src/button/color-edit.js @@ -193,9 +193,7 @@ function ColorEdit( props ) { return (