From a8af1a97598587305d758df3c40359f019fc080c Mon Sep 17 00:00:00 2001 From: etoledom Date: Tue, 5 Feb 2019 19:28:56 +0100 Subject: [PATCH 1/3] Mobile: Link image setting (#13654) * rnmobile: Implement image settings button using InspectorControls.Slot pattern. * rnmobile: Add missing semicolon * rnmobile: Adding bottom-sheet component to mobile * rnmobile: Styling bottom-sheet header * rnmobile: Bottom-sheet clean up * rnmobile: Fix lint issues on bottom-sheet related code. * rnmobile: Fix small lint issues * rnmobile: Move inline toolbar button definition out of constant. * rnmobile: Remove extra white-spaces * revert package-lock.json changes * rnmobile: Fix merge issue * rnmobile: Imported BaseControl and TextinputControl to be used on Alt Image Settings * rnmobile: exporting component BottomSheet.Button to be used as bottom-sheet header buttons * rnmobile: Adding BottomSheet.Cell component as an extraction for BottomSheet users. * Fix lint issues * Reverting changes to package-lock.json * Fix merge issues * Remove Done button from Image settings bottom sheet * Make bottom-sheet avoid being behind keyboard * Fix lint issues * Making BottomSheet.Cell value editable as textinput. * Remove unnecesary onPress prop from Alt cell. * Image Settings: Added Link To setting to bottom-sheet * BottomSheet desing details * Fix bottom-sheet cell value growing larger than container * Bottom-sheet: Fix bottom safe-area inset with keyboard showing * Fix lint issues * Adding textinput props to bottom-sheet cell value. * Removing autocorrect from link-setting text input. * Fix lint issues * Fixing label texts on Image Settings bottom-sheet * Mobile ImageEdit color using global definition. --- .../block-library/src/image/edit.native.js | 25 ++++++++++++-- .../src/image/styles.native.scss | 4 +++ .../mobile/bottom-sheet/cell.native.js | 12 ++++--- .../mobile/bottom-sheet/index.native.js | 1 + .../mobile/bottom-sheet/styles.scss | 34 ++++++++++--------- 5 files changed, 53 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 776a033bc441aa..914332a76279ab 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -28,6 +28,8 @@ const MEDIA_UPLOAD_STATE_SUCCEEDED = 2; const MEDIA_UPLOAD_STATE_FAILED = 3; const MEDIA_UPLOAD_STATE_RESET = 4; +const LINK_DESTINATION_CUSTOM = 'custom'; + export default class ImageEdit extends React.Component { constructor( props ) { super( props ); @@ -45,6 +47,7 @@ export default class ImageEdit extends React.Component { this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this ); this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this ); this.updateAlt = this.updateAlt.bind( this ); + this.onSetLinkDestination = this.onSetLinkDestination.bind( this ); this.onImagePressed = this.onImagePressed.bind( this ); } @@ -133,9 +136,16 @@ export default class ImageEdit extends React.Component { this.props.setAttributes( { alt: newAlt } ); } + onSetLinkDestination( href ) { + this.props.setAttributes( { + linkDestination: LINK_DESTINATION_CUSTOM, + href, + } ); + } + render() { const { attributes, isSelected, setAttributes } = this.props; - const { url, caption, height, width, alt } = attributes; + const { url, caption, height, width, alt, href } = attributes; const onMediaLibraryButtonPressed = () => { requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => { @@ -197,6 +207,15 @@ export default class ImageEdit extends React.Component { onClose={ onImageSettingsClose } hideHeader > + {} } /> diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 833b8126bfc1ad..95dacc3cd4c50b 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -15,3 +15,7 @@ flex-direction: column; align-items: center; } + +.resetSettingsButton { + color: $alert-red; +} 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 6dc8ff4b26ef29..1a24d12952256f 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -24,28 +24,30 @@ export default function Cell( props ) { labelStyle = {}, valueStyle = {}, onChangeValue, + ...valueProps } = props; const showValue = value !== undefined; const isValueEditable = onChangeValue !== undefined; const defaultLabelStyle = showValue ? styles.cellLabel : styles.cellLabelCentered; + const separatorStyle = showValue ? styles.cellSeparator : styles.separator; let valueTextInput; const onCellPress = () => { if ( isValueEditable ) { valueTextInput.focus(); - } else { + } else if ( onPress !== undefined ) { onPress(); } }; return ( - + { icon && ( - + ) } @@ -60,13 +62,15 @@ export default function Cell( props ) { style={ { ...styles.cellValue, ...valueStyle } } value={ value } placeholder={ valuePlaceholder } + placeholderTextColor={ '#87a6bc' } onChangeText={ onChangeValue } editable={ isValueEditable } + { ...valueProps } /> ) } { drawSeparator && ( - + ) } ); 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 e89bc50d44e281..d4754a3909dfa8 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -61,6 +61,7 @@ class BottomSheet extends Component { { hideHeader || ( diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index f02aa77fe44980..139c79d88de56b 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -9,7 +9,6 @@ background-color: $light-gray-400; height: 4px; width: 10%; - top: -12px; margin: auto; border-radius: 2px; } @@ -18,12 +17,12 @@ background-color: $light-gray-400; height: 1px; width: 100%; + margin-bottom: 14px; } .content { + padding: 6px 16px 0 16px; background-color: $white; - padding: 18px 10px 5px 10px; - justify-content: center; border-top-right-radius: 8px; border-top-left-radius: 8px; } @@ -59,41 +58,44 @@ // Cell -//Bottom Sheet - .cellContainer { flex-direction: row; - min-height: 50; - justify-content: space-between; - margin-left: 12; - margin-right: 12; + min-height: 48; align-items: center; } +.cellSeparator { + background-color: $light-gray-400; + height: 1px; + width: 100%; + margin-left: 36px; +} + .cellRowContainer { flex-direction: row; align-items: center; } .cellIcon { - padding-right: 30; + padding-right: 0; } .cellLabel { - font-size: 18px; - color: #000; + font-size: 17px; + color: #2e4453; margin-right: 12px; } .cellLabelCentered { - font-size: 18px; - color: #000; + font-size: 17px; + color: #2e4453; flex: 1; text-align: center; } .cellValue { - font-size: 18px; - color: $dark-gray-400; + font-size: 17px; + color: #2e4453; text-align: right; + flex: 1; } From 2c305e5d9e5461f6f168a14b7fb106793cd0c63a Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 5 Feb 2019 13:32:25 -0500 Subject: [PATCH 2/3] Project: Avoid additional native-file code owner notification (#13675) * Project: Assign native code ownership to GitHub empty (ghost) user * Project: Add *.native.scss code ownership exception --- .github/CODEOWNERS | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index c9a533d91a81b0..e57180a7fe2c5b 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -75,5 +75,6 @@ # Documentation /docs @youknowriad @gziolo @chrisvanpatten @mkaz @ajitbohra @nosolosw -# Native -*.native.js @daniloercoli @diegoreymendez @etoledom @hypest @koke @marecar3 @mzorz @pinarol @SergioEstevao @tug +# Native (Unowned) +*.native.js @ghost +*.native.scss @ghost From 0a5b11fc0aafa65085fdd568a41d3488e49cdd1e Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Tue, 5 Feb 2019 12:46:07 -0700 Subject: [PATCH 3/3] Update CODEOWNERS --- .github/CODEOWNERS | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e57180a7fe2c5b..e29e3266964f20 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -62,8 +62,8 @@ /packages/wordcount @youknowriad @gziolo @aduth # Extensibility -/packages/hooks @youknowriad @gziolo @aduth -/packages/plugins @youknowriad @gziolo @aduth +/packages/hooks @youknowriad @gziolo @aduth @adamsilverstein +/packages/plugins @youknowriad @gziolo @aduth @adamsilverstein # Rich Text /packages/format-library @youknowriad @gziolo @aduth @iseulde @jorgefilipecosta