diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index daad9b0df5dde..dcb94957af70c 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 833b8126bfc1a..95dacc3cd4c50 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 6dc8ff4b26ef2..1a24d12952256 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 e89bc50d44e28..d4754a3909dfa 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 f02aa77fe4498..139c79d88de56 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; }