Mobile: BottomSheet design tweaks (#13633)

* 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: 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 * Add prop to Hide header on Bottom-Sheet * BottomSheet cell label is centered when value prop is not set * Adding icons option to BottomSheet.Cell * Added option to override Label and Value text styles on BottomSheet.Cell * Clean up BottomSheet.Cell styles * Image native: Separate BottomSheet.Cell props in multiple lines * Fix lint issues * Added WordPress dependencies to BottomSheet.Cell
WordPress · Feb 1, 2019 · c336500 · c336500
1 parent 532ed5f
commit c336500
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 21 deletions.
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -189,8 +189,8 @@ export default class ImageEdit extends React.Component {
 		const getInspectorControls = () => (
 			<BottomSheet
 				isVisible={ this.state.showSettings }
-				title={ __( 'Image Settings' ) }
 				onClose={ onImageSettingsClose }
+				hideHeader
 				rightButton={
 					<BottomSheet.Button
 						text={ __( 'Done' ) }
@@ -199,7 +199,18 @@ export default class ImageEdit extends React.Component {
 					/>
 				}
 			>
-				<BottomSheet.Cell label={ __( 'Alt Text' ) } value={ __( 'None' ) } onPress={ () => {} } />
+				<BottomSheet.Cell
+					icon={ 'editor-textcolor' }
+					label={ __( 'Alt Text' ) }
+					value={ __( 'None' ) }
+					onPress={ () => {} }
+				/>
+				<BottomSheet.Cell
+					label={ __( 'Reset to original' ) }
+					labelStyle={ { color: 'red' } }
+					drawSeparator={ false }
+					onPress={ () => {} }
+				/>
 			</BottomSheet>
 		);
 

diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js
@@ -1,7 +1,12 @@
 /**
 * External dependencies
 */
-import { TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity, Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Dashicon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -13,12 +18,33 @@ export default function Cell( props ) {
 		onPress,
 		label,
 		value,
+		drawSeparator = true,
+		icon,
+		labelStyle = {},
+		valueStyle = {},
 	} = props;
 
+	const defaultLabelStyle = value ? styles.cellLabel : styles.cellLabelCentered;
+
 	return (
-		<TouchableOpacity style={ styles.cellContainer } onPress={ onPress }>
-			<Text style={ styles.cellLabel }>{ label }</Text>
-			<Text style={ styles.cellValue }>{ value }</Text>
+		<TouchableOpacity onPress={ onPress }>
+			<View style={ styles.cellContainer }>
+				<View style={ styles.cellRowContainer }>
+					{ icon && (
+						<View style={ styles.cellRowContainer }>
+							<Dashicon icon={ icon } size={ 30 } />
+							<View style={ { width: 12 } } />
+						</View>
+					) }
+					<Text style={ { ...defaultLabelStyle, ...labelStyle } }>{ label }</Text>
+				</View>
+				{ value && (
+					<Text style={ { ...styles.cellValue, ...valueStyle } }>{ value }</Text>
+				) }
+			</View>
+			{ drawSeparator && (
+				<View style={ styles.separator } />
+			) }
 		</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
@@ -44,7 +44,7 @@ class BottomSheet extends Component {
 	}
 
 	render() {
-		const { isVisible, leftButton, rightButton } = this.props;
+		const { title = '', isVisible, leftButton, rightButton, hideHeader } = this.props;
 
 		return (
 			<Modal
@@ -60,21 +60,25 @@ class BottomSheet extends Component {
 			>
 				<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
 					<View style={ styles.dragIndicator } />
-					<View style={ styles.head }>
-						<View style={ { flex: 1 } }>
-							{ leftButton }
+					{ hideHeader || (
+						<View>
+							<View style={ styles.head }>
+								<View style={ { flex: 1 } }>
+									{ leftButton }
+								</View>
+								<View style={ styles.titleContainer }>
+									<Text style={ styles.title }>
+										{ title }
+									</Text>
+								</View>
+								<View style={ { flex: 1 } }>
+									{ rightButton }
+								</View>
+							</View>
+							<View style={ styles.separator } />
 						</View>
-						<View style={ styles.titleContainer }>
-							<Text style={ styles.title }>
-								{ this.props.title }
-							</Text>
-						</View>
-						<View style={ { flex: 1 } }>
-							{ rightButton }
-						</View>
-					</View>
+					) }
 
-					<View style={ styles.separator } />
 					{ this.props.children }
 					<View style={ { flexGrow: 1 } }></View>
 					<View style={ { height: this.state.safeAreaBottomInset } } />

diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss
@@ -18,7 +18,6 @@
 	background-color: $light-gray-400;
 	height: 1px;
 	width: 100%;
-	margin: auto;
 }
 
 .content {
@@ -71,11 +70,27 @@
 	align-items: center;
 }
 
+.cellRowContainer {
+	flex-direction: row;
+	align-items: center;
+}
+
+.cellIcon {
+	padding-right: 30;
+}
+
 .cellLabel {
 	font-size: 18px;
 	color: #000;
 }
 
+.cellLabelCentered {
+	font-size: 18px;
+	color: #000;
+	flex: 1;
+	text-align: center;
+}
+
 .cellValue {
 	font-size: 18px;
 	color: $dark-gray-400;