From fd7c7eb7d53ffde3d8994c8f4658f35e7faca0a5 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 15:19:34 +0100 Subject: [PATCH 01/16] rnmobile: Implement image settings button using InspectorControls.Slot pattern. --- packages/block-library/src/image/edit.native.js | 17 ++++++++++++++++- packages/editor/src/components/index.native.js | 1 + 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 6c5fad9b7b05ec..703e456f115f19 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -14,7 +14,7 @@ import { /** * Internal dependencies */ -import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor'; +import { MediaPlaceholder, RichText, BlockControls, InspectorControls } from '@wordpress/editor'; import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; @@ -143,6 +143,10 @@ export default class ImageEdit extends React.Component { ); } + const onImageSettingsButtonPressed = () => { + + } + const toolbarEditButton = ( ); + const inlineToolbarButtons = ( + + ); + const showSpinner = this.state.isUploadInProgress; const opacity = this.state.isUploadInProgress ? 0.3 : 1; const progress = this.state.progress * 100; @@ -163,6 +175,9 @@ export default class ImageEdit extends React.Component { { toolbarEditButton } + + { inlineToolbarButtons } + { ( sizes ) => { const { diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js index d226b4fe46480c..07bd4c9993e6d2 100644 --- a/packages/editor/src/components/index.native.js +++ b/packages/editor/src/components/index.native.js @@ -10,3 +10,4 @@ export { default as DefaultBlockAppender } from './default-block-appender'; export { default as PostTitle } from './post-title'; export { default as EditorHistoryRedo } from './editor-history/redo'; export { default as EditorHistoryUndo } from './editor-history/undo'; +export { default as InspectorControls } from './inspector-controls'; From abdfd03e0e7036e5c76d219910c2cdb0ff8d0900 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 15:30:43 +0100 Subject: [PATCH 02/16] rnmobile: Add missing semicolon --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 703e456f115f19..7413978f2e0123 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -145,7 +145,7 @@ export default class ImageEdit extends React.Component { const onImageSettingsButtonPressed = () => { - } + }; const toolbarEditButton = ( From 1a4e35a38f3ab7a80cce8946c2c2c9b8bd19310a Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 17:47:51 +0100 Subject: [PATCH 03/16] rnmobile: Adding bottom-sheet component to mobile --- .../block-library/src/image/edit.native.js | 26 +++- .../src/image/inspector-styles.native.scss | 20 +++ .../editor/src/components/index.native.js | 1 + .../mobile/bottom-sheet/button.native.js | 24 ++++ .../mobile/bottom-sheet/index.native.js | 130 +++++++++++++++++ .../mobile/bottom-sheet/styles.android.scss | 131 ++++++++++++++++++ .../mobile/bottom-sheet/styles.ios.scss | 128 +++++++++++++++++ 7 files changed, 457 insertions(+), 3 deletions(-) create mode 100644 packages/block-library/src/image/inspector-styles.native.scss create mode 100644 packages/editor/src/components/mobile/bottom-sheet/button.native.js create mode 100644 packages/editor/src/components/mobile/bottom-sheet/index.native.js create mode 100644 packages/editor/src/components/mobile/bottom-sheet/styles.android.scss create mode 100644 packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 7413978f2e0123..e999156bff3402 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput } from 'react-native'; +import { View, Image, TextInput, Text, TouchableOpacity } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -14,11 +14,12 @@ import { /** * Internal dependencies */ -import { MediaPlaceholder, RichText, BlockControls, InspectorControls } from '@wordpress/editor'; +import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor'; import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; +import inspectorStyles from './inspector-styles.scss' const MEDIA_ULOAD_STATE_UPLOADING = 1; const MEDIA_ULOAD_STATE_SUCCEEDED = 2; @@ -31,6 +32,7 @@ export default class ImageEdit extends React.Component { this.state = { progress: 0, isUploadInProgress: false, + showSettings: false, }; this.mediaUpload = this.mediaUpload.bind( this ); @@ -144,9 +146,13 @@ export default class ImageEdit extends React.Component { } const onImageSettingsButtonPressed = () => { - + this.setState( { showSettings: true } ) }; + const onImageSettingsClose = () => { + this.setState( { showSettings: false } ) + } + const toolbarEditButton = ( ); + const getInspectorControls = () => ( + + { } }> + { __( "Alt Text" ) } + { __( "None" ) } + + + ) + const showSpinner = this.state.isUploadInProgress; const opacity = this.state.isUploadInProgress ? 0.3 : 1; const progress = this.state.progress * 100; @@ -197,6 +216,7 @@ export default class ImageEdit extends React.Component { return ( + { getInspectorControls() } + + { children } + + + ); + } \ No newline at end of file diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js new file mode 100644 index 00000000000000..679b9f00e3bc9c --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -0,0 +1,130 @@ +/** + * External dependencies + */ +import React from 'react'; +import { Switch, Text, TextInput, View } from 'react-native'; +import Modal from 'react-native-modal'; +import SafeArea from 'react-native-safe-area'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Component } from '@wordpress/element'; +import { URLInput } from '@wordpress/editor'; +import { prependHTTP } from '@wordpress/url'; + +import { + create, + insert, + isCollapsed, + applyFormat, + getTextContent, + slice, +} from '@wordpress/rich-text'; + +/** + * Internal dependencies + */ +import styles from './styles.scss'; +import Button from './button' + +class BottomSheet extends Component { + constructor( props ) { + super( ...arguments ); + this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind( this ); + this.state = { + safeAreaBottomInset: 0, + }; + + SafeArea.getSafeAreaInsetsForRootView().then( this.onSafeAreaInsetsUpdate ); + } + + componentDidMount() { + SafeArea.addEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); + } + + componentWillUnmount() { + SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); + } + + onLeftButtonPressed() { + + } + + onRightButtonPressed() { + + } + + headerButton(text, color, handler) { + return( + + ) + } + + onSafeAreaInsetsUpdate( result ) { + const { safeAreaInsets } = result; + if ( this.state.safeAreaBottomInset !== safeAreaInsets.bottom ) { + this.setState( { safeAreaBottomInset: safeAreaInsets.bottom } ); + } + } + + render() { + const { isVisible } = this.props; + const { hideLeftButton, hideRightButton } = this.props; + + return ( + + + + + { hideLeftButton || this.headerButton(__( "Remove" ), "red", this.onLeftButtonPressed) } + + { this.props.title } + + { hideRightButton || this.headerButton(__("Done"), "#0087be", this.onRightButtonPressed) } + + + { this.props.children } + + + + + ); + } +} + +export default BottomSheet; + +export function TitleValueCell(props) { + const { + title, + value, + onPress, + } = props; + + return ( + + ) +} diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss new file mode 100644 index 00000000000000..e43092631ac841 --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss @@ -0,0 +1,131 @@ +//Bottom Sheet + +.bottomModal { + justify-content: flex-end; + margin: 0; +} + +.dragIndicator { + background-color: $light-gray-400; + height: 4px; + width: 10%; + top: -12px; + margin: auto; + border-radius: 2px; +} + +.separator { + background-color: $light-gray-400; + height: 1px; + width: 95%; + margin: auto; +} + +.content { + background-color: $white; + padding: 18px 10px 5px 10px; + justify-content: center; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + min-height: 200px; +} + +.head { + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; +} + +.title { + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + flex: 1; + text-align: center; +} + +// Modal + +.modal { + margin: 0; +} + +.modalHead { + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; +} + +.modalContent { + background-color: $white; + padding: 18px 10px 5px 10px; + justify-content: center; + margin: 0px 20px 0px 20px +} + +.modalTitle { + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + flex: 1; + margin-bottom: 10px; +} + +.modalActionButton { + color: #0087be; + font-size: 17px; +} + +// Button + +.buttonText { + font-size: 18px; + padding: 5px; +} + +// Inline + +.inlineInput { + width: 100%; + margin: 0 0; +} + +.inlineInputLabel { + color: $dark-gray-600; + font-size: 14px; + font-weight: bold; +} + +.inlineInputValue { + font-size: 18px; + align-items: stretch; + padding: 4px; +} + +.inlineInputValueSwitch { + padding: 5px; +} + +// Cells + +.cellLabel { + padding: 10px 10px; + color: $dark-gray-600; + font-size: 16px; + font-weight: bold; +} + +.cellValue { + flex-grow: 1; + font-size: 16px; + text-align: right; + align-items: stretch; + align-self: flex-end; + padding: 10px; +} \ No newline at end of file diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss new file mode 100644 index 00000000000000..96f85e349da7d6 --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss @@ -0,0 +1,128 @@ +//Bottom Sheet + +.bottomModal { + justify-content: flex-end; + margin: 0; +} + +.dragIndicator { + background-color: $light-gray-400; + height: 4px; + width: 10%; + top: -12px; + margin: auto; + border-radius: 2px; +} + +.separator { + background-color: $light-gray-400; + height: 1px; + width: 95%; + margin: auto; +} + +.content { + background-color: $white; + padding: 18px 10px 5px 10px; + justify-content: center; + border-top-right-radius: 8px; + border-top-left-radius: 8px; +} + +.head { + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; +} + +.title { + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + flex: 1; + text-align: center; +} + +// Modal + +.modal { + margin: 0; +} + +.modalHead { + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; +} + +.modalContent { + flex: 1; + background-color: $white; +} + +.modalTitle { + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + flex: 1; + margin-bottom: 10px; +} + +.modalActionButton { + color: #0087be; + font-size: 17px; +} + +// Button + +.buttonText { + font-size: 18px; + padding: 5px; +} + +// Inline + +.inlineInput { + width: 100%; + margin: 0 0; +} + +.inlineInputLabel { + color: $dark-gray-600; + font-size: 14px; + font-weight: bold; +} + +.inlineInputValue { + font-size: 18px; + align-items: stretch; + padding: 4px; +} + +.inlineInputValueSwitch { + padding: 5px; +} + +// Cells + +.cellLabel { + padding: 10px 10px; + color: $dark-gray-600; + font-size: 16px; + font-weight: bold; +} + +.cellValue { + flex-grow: 1; + font-size: 16px; + text-align: right; + align-items: stretch; + align-self: flex-end; + padding: 10px; +} \ No newline at end of file From 4352c7ad4f59dbb0018d31ebc37ce59778d227a3 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 18:08:37 +0100 Subject: [PATCH 04/16] rnmobile: Styling bottom-sheet header --- .../mobile/bottom-sheet/button.native.js | 2 +- .../mobile/bottom-sheet/index.native.js | 19 ++- .../mobile/bottom-sheet/styles.android.scss | 131 ------------------ .../{styles.ios.scss => styles.scss} | 1 - 4 files changed, 14 insertions(+), 139 deletions(-) delete mode 100644 packages/editor/src/components/mobile/bottom-sheet/styles.android.scss rename packages/editor/src/components/mobile/bottom-sheet/{styles.ios.scss => styles.scss} (99%) diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index acf24309eb6b52..1d9190d788f977 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -16,7 +16,7 @@ onPress={ onPress } disabled={ disabled } > - + { children } diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 679b9f00e3bc9c..2751b9246f72cc 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -92,18 +92,25 @@ class BottomSheet extends Component { - { hideLeftButton || this.headerButton(__( "Remove" ), "red", this.onLeftButtonPressed) } - - { this.props.title } - - { hideRightButton || this.headerButton(__("Done"), "#0087be", this.onRightButtonPressed) } + + { hideLeftButton || this.headerButton(__( "Remove" ), "red", this.onLeftButtonPressed) } + + + + { this.props.title } + + + + { hideRightButton || this.headerButton(__("Done"), "#0087be", this.onRightButtonPressed) } + + { this.props.children } - + ); } } diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss deleted file mode 100644 index e43092631ac841..00000000000000 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss +++ /dev/null @@ -1,131 +0,0 @@ -//Bottom Sheet - -.bottomModal { - justify-content: flex-end; - margin: 0; -} - -.dragIndicator { - background-color: $light-gray-400; - height: 4px; - width: 10%; - top: -12px; - margin: auto; - border-radius: 2px; -} - -.separator { - background-color: $light-gray-400; - height: 1px; - width: 95%; - margin: auto; -} - -.content { - background-color: $white; - padding: 18px 10px 5px 10px; - justify-content: center; - border-top-right-radius: 8px; - border-top-left-radius: 8px; - min-height: 200px; -} - -.head { - flex-direction: row; - width: 100%; - margin-bottom: 5px; - justify-content: space-between; - align-items: center; - align-content: center; -} - -.title { - color: $dark-gray-600; - font-size: 18px; - font-weight: 600; - flex: 1; - text-align: center; -} - -// Modal - -.modal { - margin: 0; -} - -.modalHead { - flex-direction: row; - width: 100%; - margin-bottom: 5px; - justify-content: space-between; - align-items: center; - align-content: center; -} - -.modalContent { - background-color: $white; - padding: 18px 10px 5px 10px; - justify-content: center; - margin: 0px 20px 0px 20px -} - -.modalTitle { - color: $dark-gray-600; - font-size: 18px; - font-weight: 600; - flex: 1; - margin-bottom: 10px; -} - -.modalActionButton { - color: #0087be; - font-size: 17px; -} - -// Button - -.buttonText { - font-size: 18px; - padding: 5px; -} - -// Inline - -.inlineInput { - width: 100%; - margin: 0 0; -} - -.inlineInputLabel { - color: $dark-gray-600; - font-size: 14px; - font-weight: bold; -} - -.inlineInputValue { - font-size: 18px; - align-items: stretch; - padding: 4px; -} - -.inlineInputValueSwitch { - padding: 5px; -} - -// Cells - -.cellLabel { - padding: 10px 10px; - color: $dark-gray-600; - font-size: 16px; - font-weight: bold; -} - -.cellValue { - flex-grow: 1; - font-size: 16px; - text-align: right; - align-items: stretch; - align-self: flex-end; - padding: 10px; -} \ No newline at end of file diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss similarity index 99% rename from packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss rename to packages/editor/src/components/mobile/bottom-sheet/styles.scss index 96f85e349da7d6..252148a832ae5a 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -42,7 +42,6 @@ color: $dark-gray-600; font-size: 18px; font-weight: 600; - flex: 1; text-align: center; } From f132158769a2339389a6327b83297bdc68633396 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 18:25:25 +0100 Subject: [PATCH 05/16] rnmobile: Bottom-sheet clean up --- .../block-library/src/image/edit.native.js | 1 + .../mobile/bottom-sheet/index.native.js | 65 +++------------- .../mobile/bottom-sheet/styles.scss | 76 +------------------ 3 files changed, 17 insertions(+), 125 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index e999156bff3402..df558b17f7363c 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -176,6 +176,7 @@ export default class ImageEdit extends React.Component { isVisible={ this.state.showSettings } title={ __("Image Settings") } onClose={ onImageSettingsClose } + rightButtonConfig={ { text: __("Done"), color: "#0087be", onPress: onImageSettingsClose } } > { } }> { __( "Alt Text" ) } diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 2751b9246f72cc..0edcf15877ccf1 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -1,27 +1,14 @@ /** * External dependencies */ -import React from 'react'; -import { Switch, Text, TextInput, View } from 'react-native'; +import { Text, View } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { URLInput } from '@wordpress/editor'; -import { prependHTTP } from '@wordpress/url'; - -import { - create, - insert, - isCollapsed, - applyFormat, - getTextContent, - slice, -} from '@wordpress/rich-text'; /** * Internal dependencies @@ -48,19 +35,11 @@ class BottomSheet extends Component { SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); } - onLeftButtonPressed() { - - } - - onRightButtonPressed() { - - } - - headerButton(text, color, handler) { - return( - ) @@ -74,8 +53,7 @@ class BottomSheet extends Component { } render() { - const { isVisible } = this.props; - const { hideLeftButton, hideRightButton } = this.props; + const { isVisible, leftButtonConfig, rightButtonConfig } = this.props; return ( - { hideLeftButton || this.headerButton(__( "Remove" ), "red", this.onLeftButtonPressed) } + { leftButtonConfig && this.headerButton(leftButtonConfig) } - + { this.props.title } - - { hideRightButton || this.headerButton(__("Done"), "#0087be", this.onRightButtonPressed) } + + { rightButtonConfig && this.headerButton(rightButtonConfig) } @@ -110,28 +88,9 @@ class BottomSheet extends Component { - + ); } } export default BottomSheet; - -export function TitleValueCell(props) { - const { - title, - value, - onPress, - } = props; - - return ( - - ) -} diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index 252148a832ae5a..b4acb9275d40da 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -17,7 +17,7 @@ .separator { background-color: $light-gray-400; height: 1px; - width: 95%; + width: 100%; margin: auto; } @@ -45,83 +45,15 @@ text-align: center; } -// Modal - -.modal { - margin: 0; -} - -.modalHead { - flex-direction: row; - width: 100%; - margin-bottom: 5px; - justify-content: space-between; - align-items: center; +.titleContainer { + justify-content: center; + flex: 2; align-content: center; } -.modalContent { - flex: 1; - background-color: $white; -} - -.modalTitle { - color: $dark-gray-600; - font-size: 18px; - font-weight: 600; - flex: 1; - margin-bottom: 10px; -} - -.modalActionButton { - color: #0087be; - font-size: 17px; -} - // Button .buttonText { font-size: 18px; padding: 5px; } - -// Inline - -.inlineInput { - width: 100%; - margin: 0 0; -} - -.inlineInputLabel { - color: $dark-gray-600; - font-size: 14px; - font-weight: bold; -} - -.inlineInputValue { - font-size: 18px; - align-items: stretch; - padding: 4px; -} - -.inlineInputValueSwitch { - padding: 5px; -} - -// Cells - -.cellLabel { - padding: 10px 10px; - color: $dark-gray-600; - font-size: 16px; - font-weight: bold; -} - -.cellValue { - flex-grow: 1; - font-size: 16px; - text-align: right; - align-items: stretch; - align-self: flex-end; - padding: 10px; -} \ No newline at end of file From 7bd8a4f9d44954f1fd6c8a00b118b0f1a616a47d Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 18:35:25 +0100 Subject: [PATCH 06/16] rnmobile: Fix lint issues on bottom-sheet related code. --- package-lock.json | 46 ++++--------- .../block-library/src/image/edit.native.js | 20 +++--- .../src/image/inspector-styles.native.scss | 6 +- packages/components/src/button/style.scss | 9 +-- .../editor/src/components/index.native.js | 2 +- .../mobile/bottom-sheet/button.native.js | 42 ++++++------ .../mobile/bottom-sheet/index.native.js | 38 +++++------ .../mobile/bottom-sheet/styles.scss | 64 +++++++++---------- 8 files changed, 100 insertions(+), 127 deletions(-) diff --git a/package-lock.json b/package-lock.json index 30246ca516f389..6f5a5fe1c963b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2975,7 +2975,6 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, - "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -2987,7 +2986,6 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -8050,8 +8048,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -8072,14 +8069,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8094,20 +8089,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -8224,8 +8216,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -8237,7 +8228,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8252,7 +8242,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8260,14 +8249,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -8286,7 +8273,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8367,8 +8353,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -8380,7 +8365,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -8466,8 +8450,7 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -8503,7 +8486,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8523,7 +8505,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8567,14 +8548,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -12678,8 +12657,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true, - "optional": true + "dev": true }, "longest-streak": { "version": "2.0.2", diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index df558b17f7363c..dec6eaa80e56f8 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -19,7 +19,7 @@ import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; -import inspectorStyles from './inspector-styles.scss' +import inspectorStyles from './inspector-styles.scss'; const MEDIA_ULOAD_STATE_UPLOADING = 1; const MEDIA_ULOAD_STATE_SUCCEEDED = 2; @@ -146,12 +146,12 @@ export default class ImageEdit extends React.Component { } const onImageSettingsButtonPressed = () => { - this.setState( { showSettings: true } ) + this.setState( { showSettings: true } ); }; const onImageSettingsClose = () => { - this.setState( { showSettings: false } ) - } + this.setState( { showSettings: false } ); + }; const toolbarEditButton = ( @@ -172,18 +172,18 @@ export default class ImageEdit extends React.Component { ); const getInspectorControls = () => ( - { } }> - { __( "Alt Text" ) } - { __( "None" ) } + { __( 'Alt Text' ) } + { __( 'None' ) } - ) + ); const showSpinner = this.state.isUploadInProgress; const opacity = this.state.isUploadInProgress ? 0.3 : 1; diff --git a/packages/block-library/src/image/inspector-styles.native.scss b/packages/block-library/src/image/inspector-styles.native.scss index 4dbad2b1bb804b..56a56028e84a16 100644 --- a/packages/block-library/src/image/inspector-styles.native.scss +++ b/packages/block-library/src/image/inspector-styles.native.scss @@ -1,7 +1,7 @@ //Bottom Sheet .bottomSheetCell { - flex-direction: row; + flex-direction: row; min-height: 60; justify-content: space-between; padding-left: 12; @@ -11,10 +11,10 @@ .bottomSheetCellLabel { font-size: 18px; - color: black; + color: #000; } .bottomSheetCellValue { font-size: 18px; - color: gray; + color: $dark-gray-400; } diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 0f49a9625519be..edd6a8bc7514fe 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -114,13 +114,8 @@ background-size: 100px 100%; // Disable reason: This function call looks nicer when each argument is on its own line. /* stylelint-disable */ - background-image: linear-gradient( - -45deg, - theme(primary) 28%, - color(theme(primary) shade(30%)) 28%, - color(theme(primary) shade(30%)) 72%, - theme(primary) 72% - ); + background-image: + linear-gradient(-45deg, theme(primary) 28%, color(theme(primary) shade(30%)) 28%, color(theme(primary) shade(30%)) 72%, theme(primary) 72%); /* stylelint-enable */ border-color: color(theme(primary) shade(50%)); } diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js index 2726eba6add570..ebb3fb5b3e94ec 100644 --- a/packages/editor/src/components/index.native.js +++ b/packages/editor/src/components/index.native.js @@ -11,4 +11,4 @@ export { default as PostTitle } from './post-title'; export { default as EditorHistoryRedo } from './editor-history/redo'; export { default as EditorHistoryUndo } from './editor-history/undo'; export { default as InspectorControls } from './inspector-controls'; -export { default as BottomSheet } from './mobile/bottom-sheet' +export { default as BottomSheet } from './mobile/bottom-sheet'; diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index 1d9190d788f977..73794597465295 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -1,24 +1,24 @@ /** * External dependencies */ - import { TouchableOpacity, View } from 'react-native'; - - export default function Button( props ) { - const { - children, - onPress, - disabled, - } = props; - - return ( - - - { children } - - - ); - } \ No newline at end of file +import { TouchableOpacity, View } from 'react-native'; + +export default function Button( props ) { + const { + children, + onPress, + disabled, + } = props; + + return ( + + + { children } + + + ); +} diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 0edcf15877ccf1..548473e048d159 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -14,10 +14,10 @@ import { Component } from '@wordpress/element'; * Internal dependencies */ import styles from './styles.scss'; -import Button from './button' +import Button from './button'; class BottomSheet extends Component { - constructor( props ) { + constructor() { super( ...arguments ); this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind( this ); this.state = { @@ -42,7 +42,7 @@ class BottomSheet extends Component { { config.text } - ) + ); } onSafeAreaInsetsUpdate( result ) { @@ -69,24 +69,24 @@ class BottomSheet extends Component { > - - - { leftButtonConfig && this.headerButton(leftButtonConfig) } - - - - { this.props.title } - - - - { rightButtonConfig && this.headerButton(rightButtonConfig) } - + + + { leftButtonConfig && this.headerButton( leftButtonConfig ) } + + + + { this.props.title } + + + + { rightButtonConfig && this.headerButton( rightButtonConfig ) } + - - { this.props.children } - - + + { this.props.children } + + ); diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index b4acb9275d40da..74c303a91e33fb 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -1,59 +1,59 @@ //Bottom Sheet .bottomModal { - justify-content: flex-end; - margin: 0; + justify-content: flex-end; + margin: 0; } .dragIndicator { - background-color: $light-gray-400; - height: 4px; - width: 10%; - top: -12px; - margin: auto; - border-radius: 2px; + background-color: $light-gray-400; + height: 4px; + width: 10%; + top: -12px; + margin: auto; + border-radius: 2px; } .separator { - background-color: $light-gray-400; - height: 1px; - width: 100%; - margin: auto; + background-color: $light-gray-400; + height: 1px; + width: 100%; + margin: auto; } .content { - background-color: $white; - padding: 18px 10px 5px 10px; - justify-content: center; - border-top-right-radius: 8px; - border-top-left-radius: 8px; + background-color: $white; + padding: 18px 10px 5px 10px; + justify-content: center; + border-top-right-radius: 8px; + border-top-left-radius: 8px; } .head { - flex-direction: row; - width: 100%; - margin-bottom: 5px; - justify-content: space-between; - align-items: center; - align-content: center; + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; } .title { - color: $dark-gray-600; - font-size: 18px; - font-weight: 600; - text-align: center; + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + text-align: center; } .titleContainer { - justify-content: center; - flex: 2; - align-content: center; + justify-content: center; + flex: 2; + align-content: center; } // Button .buttonText { - font-size: 18px; - padding: 5px; + font-size: 18px; + padding: 5px; } From 541db3bf8e0149dee35dfb771da71fee9587e54f Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 08:35:33 +0100 Subject: [PATCH 07/16] rnmobile: Fix small lint issues --- packages/components/src/button/style.scss | 9 +++++++-- .../src/components/mobile/bottom-sheet/button.native.js | 4 ++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index edd6a8bc7514fe..fe8875cba23d5a 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -114,8 +114,13 @@ background-size: 100px 100%; // Disable reason: This function call looks nicer when each argument is on its own line. /* stylelint-disable */ - background-image: - linear-gradient(-45deg, theme(primary) 28%, color(theme(primary) shade(30%)) 28%, color(theme(primary) shade(30%)) 72%, theme(primary) 72%); + background-image: linear-gradient( + -45deg, + theme(primary) 28%, + color(theme(primary) shade(30%)) 28%, + color(theme(primary) shade(30%)) 72%, + theme(primary) 72% + ); /* stylelint-enable */ border-color: color(theme(primary) shade(50%)); } diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index 73794597465295..8629963836448e 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -1,6 +1,6 @@ /** - * External dependencies - */ +* External dependencies +*/ import { TouchableOpacity, View } from 'react-native'; export default function Button( props ) { From b8e5dcfd3777e770d3e979c35a068205b623d277 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 08:37:09 +0100 Subject: [PATCH 08/16] rnmobile: Move inline toolbar button definition out of constant. --- packages/block-library/src/image/edit.native.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index dec6eaa80e56f8..1d903aeae80a6f 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -163,14 +163,6 @@ export default class ImageEdit extends React.Component { ); - const inlineToolbarButtons = ( - - ); - const getInspectorControls = () => ( - { inlineToolbarButtons } + { ( sizes ) => { From 92e5357a5d34133f34749b2b0ef67aae322b862d Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 08:49:54 +0100 Subject: [PATCH 09/16] rnmobile: Remove extra white-spaces --- packages/components/src/button/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index fe8875cba23d5a..0f49a9625519be 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -115,10 +115,10 @@ // Disable reason: This function call looks nicer when each argument is on its own line. /* stylelint-disable */ background-image: linear-gradient( - -45deg, - theme(primary) 28%, - color(theme(primary) shade(30%)) 28%, - color(theme(primary) shade(30%)) 72%, + -45deg, + theme(primary) 28%, + color(theme(primary) shade(30%)) 28%, + color(theme(primary) shade(30%)) 72%, theme(primary) 72% ); /* stylelint-enable */ From b7236e0eda865cfd0c7376e74b388f069fc53438 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 08:54:35 +0100 Subject: [PATCH 10/16] revert package-lock.json changes --- package-lock.json | 46 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6f5a5fe1c963b0..30246ca516f389 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2975,6 +2975,7 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -2986,6 +2987,7 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, + "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -8048,7 +8050,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -8069,12 +8072,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8089,17 +8094,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -8216,7 +8224,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -8228,6 +8237,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8242,6 +8252,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8249,12 +8260,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -8273,6 +8286,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -8353,7 +8367,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -8365,6 +8380,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -8450,7 +8466,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -8486,6 +8503,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8505,6 +8523,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8548,12 +8567,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -12657,7 +12678,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true + "dev": true, + "optional": true }, "longest-streak": { "version": "2.0.2", From 09582b7e8177e3cc7674a3be3644ff059563b8da Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 09:31:56 +0100 Subject: [PATCH 11/16] rnmobile: Fix merge issue --- .../block-library/src/image/edit.native.js | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index cc69cecc3eb7ef..1d903aeae80a6f 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -14,11 +14,7 @@ import { /** * Internal dependencies */ -<<<<<<< HEAD import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor'; -======= -import { MediaPlaceholder, RichText, BlockControls, InspectorControls } from '@wordpress/editor'; ->>>>>>> master import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; @@ -150,15 +146,11 @@ export default class ImageEdit extends React.Component { } const onImageSettingsButtonPressed = () => { -<<<<<<< HEAD this.setState( { showSettings: true } ); }; const onImageSettingsClose = () => { this.setState( { showSettings: false } ); -======= - ->>>>>>> master }; const toolbarEditButton = ( @@ -171,7 +163,6 @@ export default class ImageEdit extends React.Component { ); -<<<<<<< HEAD const getInspectorControls = () => ( { __( 'None' ) } -======= - const inlineToolbarButtons = ( - ->>>>>>> master ); const showSpinner = this.state.isUploadInProgress; @@ -205,15 +188,11 @@ export default class ImageEdit extends React.Component { { toolbarEditButton } -<<<<<<< HEAD -======= - { inlineToolbarButtons } ->>>>>>> master { ( sizes ) => { From d335a84f58a530034e0568842affb543c15fcac2 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 19:53:48 +0100 Subject: [PATCH 12/16] rnmobile: exporting component BottomSheet.Button to be used as bottom-sheet header buttons --- packages/block-library/src/image/edit.native.js | 10 ++++++++-- .../mobile/bottom-sheet/button.native.js | 14 +++++++++++--- .../mobile/bottom-sheet/index.native.js | 17 ++++------------- 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1d903aeae80a6f..4268d074952322 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput, Text, TouchableOpacity } from 'react-native'; +import { View, Image, TextInput, Text, TouchableOpacity, Switch } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -168,7 +168,13 @@ export default class ImageEdit extends React.Component { isVisible={ this.state.showSettings } title={ __( 'Image Settings' ) } onClose={ onImageSettingsClose } - rightButtonConfig={ { text: __( 'Done' ), color: '#0087be', onPress: onImageSettingsClose } } + rightButton={ + + } > { } }> { __( 'Alt Text' ) } diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index 8629963836448e..94f24b747ae777 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -1,13 +1,19 @@ /** * External dependencies */ -import { TouchableOpacity, View } from 'react-native'; +import { TouchableOpacity, View, Text } from 'react-native'; + +/** + * Internal dependencies + */ +import styles from './styles.scss' export default function Button( props ) { const { - children, onPress, disabled, + text, + color, } = props; return ( @@ -17,7 +23,9 @@ export default function Button( props ) { disabled={ disabled } > - { children } + + { text } + ); diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 548473e048d159..c4bc2223327541 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -35,16 +35,6 @@ class BottomSheet extends Component { SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); } - headerButton( config ) { - return ( - - ); - } - onSafeAreaInsetsUpdate( result ) { const { safeAreaInsets } = result; if ( this.state.safeAreaBottomInset !== safeAreaInsets.bottom ) { @@ -53,7 +43,7 @@ class BottomSheet extends Component { } render() { - const { isVisible, leftButtonConfig, rightButtonConfig } = this.props; + const { isVisible, leftButton, rightButton } = this.props; return ( - { leftButtonConfig && this.headerButton( leftButtonConfig ) } + { leftButton } @@ -79,7 +69,7 @@ class BottomSheet extends Component { - { rightButtonConfig && this.headerButton( rightButtonConfig ) } + { rightButton } @@ -93,4 +83,5 @@ class BottomSheet extends Component { } } +BottomSheet.Button = Button; export default BottomSheet; From 67c2ffc665e06677a926f3cc2f179583bc363952 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 20:32:46 +0100 Subject: [PATCH 13/16] rnmobile: Adding BottomSheet.Cell component as an extraction for BottomSheet users. --- .../block-library/src/image/edit.native.js | 9 +++---- .../src/image/inspector-styles.native.scss | 20 ---------------- .../mobile/bottom-sheet/cell.native.js | 24 +++++++++++++++++++ .../mobile/bottom-sheet/index.native.js | 3 +++ .../mobile/bottom-sheet/styles.scss | 23 ++++++++++++++++++ 5 files changed, 53 insertions(+), 26 deletions(-) delete mode 100644 packages/block-library/src/image/inspector-styles.native.scss create mode 100644 packages/editor/src/components/mobile/bottom-sheet/cell.native.js diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 4268d074952322..969e29f8c200f1 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput, Text, TouchableOpacity, Switch } from 'react-native'; +import { View, Image, TextInput, Text, TouchableOpacity, Switch, Picker } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -19,7 +19,6 @@ import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; -import inspectorStyles from './inspector-styles.scss'; const MEDIA_ULOAD_STATE_UPLOADING = 1; const MEDIA_ULOAD_STATE_SUCCEEDED = 2; @@ -176,10 +175,8 @@ export default class ImageEdit extends React.Component { /> } > - { } }> - { __( 'Alt Text' ) } - { __( 'None' ) } - + {} } /> + {} } /> ); diff --git a/packages/block-library/src/image/inspector-styles.native.scss b/packages/block-library/src/image/inspector-styles.native.scss deleted file mode 100644 index 56a56028e84a16..00000000000000 --- a/packages/block-library/src/image/inspector-styles.native.scss +++ /dev/null @@ -1,20 +0,0 @@ -//Bottom Sheet - -.bottomSheetCell { - flex-direction: row; - min-height: 60; - justify-content: space-between; - padding-left: 12; - padding-right: 12; - align-items: center; -} - -.bottomSheetCellLabel { - font-size: 18px; - color: #000; -} - -.bottomSheetCellValue { - font-size: 18px; - color: $dark-gray-400; -} diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js new file mode 100644 index 00000000000000..6ace4fe60c03de --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -0,0 +1,24 @@ +/** +* External dependencies +*/ +import { TouchableOpacity, Text } from 'react-native'; + +/** + * Internal dependencies + */ +import styles from './styles.scss' + +export default function Cell( props ) { + const { + onPress, + label, + value, + } = props; + + return ( + + { label } + { value } + + ) +} \ No newline at end of file diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index c4bc2223327541..781eb01337e4c2 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -15,6 +15,7 @@ import { Component } from '@wordpress/element'; */ import styles from './styles.scss'; import Button from './button'; +import Cell from './cell'; class BottomSheet extends Component { constructor() { @@ -84,4 +85,6 @@ class BottomSheet extends Component { } BottomSheet.Button = Button; +BottomSheet.Cell = Cell; + export default BottomSheet; diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index 74c303a91e33fb..1062ebceaa8e32 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -57,3 +57,26 @@ font-size: 18px; padding: 5px; } + +// Cell + +//Bottom Sheet + +.cellContainer { + flex-direction: row; + min-height: 50; + justify-content: space-between; + padding-left: 12; + padding-right: 12; + align-items: center; +} + +.cellLabel { + font-size: 18px; + color: #000; +} + +.cellValue { + font-size: 18px; + color: $dark-gray-400; +} From edcd79b87f1b31eafc581ffba47ebf555bdcbc8a Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 20:44:34 +0100 Subject: [PATCH 14/16] Fix lint issues --- package-lock.json | 46 +++++-------------- .../block-library/src/image/edit.native.js | 10 ++-- .../mobile/bottom-sheet/button.native.js | 4 +- .../mobile/bottom-sheet/cell.native.js | 6 +-- 4 files changed, 22 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index 83491b6775a238..4af334996808c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2975,7 +2975,6 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, - "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -2987,7 +2986,6 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -8105,8 +8103,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -8127,14 +8124,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8149,20 +8144,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -8279,8 +8271,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -8292,7 +8283,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8307,7 +8297,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8315,14 +8304,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -8341,7 +8328,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8422,8 +8408,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -8435,7 +8420,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -8521,8 +8505,7 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -8558,7 +8541,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8578,7 +8560,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8622,14 +8603,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -12727,8 +12706,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true, - "optional": true + "dev": true }, "longest-streak": { "version": "2.0.2", diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 969e29f8c200f1..61602fbc58f3cd 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput, Text, TouchableOpacity, Switch, Picker } from 'react-native'; +import { View, Image, TextInput } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -167,16 +167,16 @@ export default class ImageEdit extends React.Component { isVisible={ this.state.showSettings } title={ __( 'Image Settings' ) } onClose={ onImageSettingsClose } - rightButton={ + rightButton={ + /> } > - {} } /> - {} } /> + {} } /> + {} } /> ); diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index 94f24b747ae777..439e056b931871 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -6,7 +6,7 @@ import { TouchableOpacity, View, Text } from 'react-native'; /** * Internal dependencies */ -import styles from './styles.scss' +import styles from './styles.scss'; export default function Button( props ) { const { @@ -23,7 +23,7 @@ export default function Button( props ) { disabled={ disabled } > - + { text } diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js index 6ace4fe60c03de..7ad3a2db4b6933 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -6,7 +6,7 @@ import { TouchableOpacity, Text } from 'react-native'; /** * Internal dependencies */ -import styles from './styles.scss' +import styles from './styles.scss'; export default function Cell( props ) { const { @@ -20,5 +20,5 @@ export default function Cell( props ) { { label } { value } - ) -} \ No newline at end of file + ); +} From fc1043aceaced0acb853769251e716ff546df8d3 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 20:46:42 +0100 Subject: [PATCH 15/16] Reverting changes to package-lock.json --- package-lock.json | 46 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4af334996808c9..83491b6775a238 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2975,6 +2975,7 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -2986,6 +2987,7 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, + "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -8103,7 +8105,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -8124,12 +8127,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8144,17 +8149,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -8271,7 +8279,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -8283,6 +8292,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8297,6 +8307,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8304,12 +8315,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -8328,6 +8341,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -8408,7 +8422,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -8420,6 +8435,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -8505,7 +8521,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -8541,6 +8558,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8560,6 +8578,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8603,12 +8622,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -12706,7 +12727,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true + "dev": true, + "optional": true }, "longest-streak": { "version": "2.0.2", From 4d7a80c72a86bc1e4e870e81207574537587e072 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 20:57:05 +0100 Subject: [PATCH 16/16] Fix merge issues --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 0d2f6791adf2e1..8ab944d274fe53 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -200,7 +200,6 @@ export default class ImageEdit extends React.Component { } > {} } /> - {} } /> ); @@ -241,6 +240,7 @@ export default class ImageEdit extends React.Component { return ( + { getInspectorControls() }