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.
WordPress · Mar 6, 2019 · 31f240e · 31f240e
1 parent ce68f9d
commit 31f240e
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 23 deletions.
diff --git 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
 			>
+				<BottomSheet.Cell
+					icon={ 'admin-links' }
+					label={ __( 'Link To' ) }
+					value={ href || '' }
+					valuePlaceholder={ __( 'Add URL' ) }
+					onChangeValue={ this.onSetLinkDestination }
+					autoCapitalize="none"
+					autoCorrect={ false }
+				/>
 				<BottomSheet.Cell
 					icon={ 'editor-textcolor' }
 					label={ __( 'Alt Text' ) }
@@ -205,8 +224,8 @@ export default class ImageEdit extends React.Component {
 					onChangeValue={ this.updateAlt }
 				/>
 				<BottomSheet.Cell
-					label={ __( 'Reset to original' ) }
-					labelStyle={ { color: 'red' } }
+					label={ __( 'Reset to Original' ) }
+					labelStyle={ styles.resetSettingsButton }
 					drawSeparator={ false }
 					onPress={ () => {} }
 				/>

diff --git 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
@@ -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 (
-		<TouchableOpacity onPress={ onCellPress }>
+		<TouchableOpacity onPress={ onCellPress } >
 			<View style={ styles.cellContainer }>
 				<View style={ styles.cellRowContainer }>
 					{ icon && (
 						<View style={ styles.cellRowContainer }>
-							<Dashicon icon={ icon } size={ 30 } />
+							<Dashicon icon={ icon } size={ 24 } />
 							<View style={ { width: 12 } } />
 						</View>
 					) }
@@ -60,13 +62,15 @@ export default function Cell( props ) {
 						style={ { ...styles.cellValue, ...valueStyle } }
 						value={ value }
 						placeholder={ valuePlaceholder }
+						placeholderTextColor={ '#87a6bc' }
 						onChangeText={ onChangeValue }
 						editable={ isValueEditable }
+						{ ...valueProps }
 					/>
 				) }
 			</View>
 			{ drawSeparator && (
-				<View style={ styles.separator } />
+				<View style={ separatorStyle } />
 			) }
 		</TouchableOpacity>
 	);

diff --git 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 {
 				<KeyboardAvoidingView
 					behavior={ Platform.OS === 'ios' && 'padding' }
 					style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }
+					keyboardVerticalOffset={ -this.state.safeAreaBottomInset }
 				>
 					<View style={ styles.dragIndicator } />
 					{ hideHeader || (

diff --git 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;
 }