Merge pull request #131 from wordpress-mobile/nicer-ui

Nicer UI from the demo
WordPress · Aug 24, 2018 · 76ac80d · 76ac80d
2 parents 7803228 + f979c92
commit 76ac80d
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 24 deletions.
diff --git a/src/app/App.test.js b/src/app/App.test.js
@@ -39,7 +39,7 @@ describe( 'App', () => {
 				if ( 'core/code' === blockHolder.props.name ) {
 					// TODO: hardcoded indices are ugly and error prone. Can we do better here?
 					const blockHolderContainer = blockHolder.children[ 0 ].children[ 0 ].children[ 0 ];
-					const contentComponent = blockHolderContainer.children[ 1 ];
+					const contentComponent = blockHolderContainer.children[ 0 ];
 					const inputComponent =
 						contentComponent.children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ].children[ 0 ]
 							.children[ 0 ].children[ 0 ];

diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js
@@ -1,7 +1,7 @@
 /**
- * @format
- * @flow
- */
+* @format
+* @flow
+*/
 
 import React from 'react';
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
@@ -15,6 +15,7 @@ import styles from './block-holder.scss';
 import { getBlockType, getUnknownTypeHandlerName } from '@wordpress/blocks';
 
 type PropsType = BlockType & {
+	showTitle: boolean,
 	onChange: ( clientId: string, attributes: mixed ) => void,
 	onToolbarButtonPressed: ( button: number, clientId: string ) => void,
 	onBlockHolderPressed: ( clientId: string ) => void,
@@ -56,9 +57,9 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 
 		let style;
 		if ( blockType.name === 'core/code' ) {
-			style = styles.block_code;
+			style = styles.blockCode;
 		} else if ( blockType.name === 'core/paragraph' ) {
-			style = styles[ 'aztec_editor' ];
+			style = styles.blockText;
 		}
 
 		// TODO: setAttributes needs to change the state/attributes
@@ -86,15 +87,21 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 		return blockType;
 	}
 
+	renderBlockTitle() {
+		return (
+			<View style={ styles.blockTitle }>
+				<Text>BlockType: { this.props.name }</Text>
+			</View>
+		);
+	}
+
 	render() {
 		return (
 			<TouchableWithoutFeedback
 				onPress={ this.props.onBlockHolderPressed.bind( this, this.props.clientId ) }
 			>
 				<View style={ styles.blockHolder }>
-					<View style={ styles.blockTitle }>
-						<Text>BlockType: { this.props.name }</Text>
-					</View>
+					{ this.props.showTitle && this.renderBlockTitle() }
 					<View style={ styles.blockContainer }>{ this.getBlockForType.bind( this )() }</View>
 					{ this.renderToolbarIfBlockFocused.bind( this )() }
 				</View>

diff --git a/src/block-management/block-holder.scss b/src/block-management/block-holder.scss
@@ -8,10 +8,7 @@
 
 .blockContainer {
 	background-color: white;
-	padding-left: 8;
-	padding-right: 8;
-	padding-top: 8;
-	padding-bottom: 8;
+	padding: 8px;
 }
 
 .blockTitle {
@@ -49,8 +46,4 @@
 
 .aztec_container {
 	flex: 1;
-}
-
-.aztec_editor {
-	min-height: 50;
-}
+}
diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js
@@ -35,6 +35,7 @@ type PropsType = BlockListType;
 type StateType = {
 	dataSource: DataSource,
 	showHtml: boolean,
+	inspectBlocks: boolean,
 	blockTypePickerVisible: boolean,
 	selectedBlockType: string,
 	html: string,
@@ -46,6 +47,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		this.state = {
 			dataSource: new DataSource( this.props.blocks, ( item: BlockType ) => item.clientId ),
 			showHtml: false,
+			inspectBlocks: false,
 			blockTypePickerVisible: false,
 			selectedBlockType: 'core/paragraph', // just any valid type to start from
 			html: '',
@@ -194,7 +196,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 				<FlatList
 					style={ styles.list }
 					data={ this.props.blocks }
-					extraData={ this.props.refresh }
+					extraData={ this.props.refresh, this.state.inspectBlocks }
 					keyExtractor={ ( item ) => item.clientId }
 					renderItem={ this.renderItem.bind( this ) }
 				/>
@@ -222,15 +224,21 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 
 		return (
 			<View style={ styles.container }>
-				<View style={ { height: 30 } } />
 				<View style={ styles.switch }>
-					<Text>View html output</Text>
 					<Switch
 						activeText={ 'On' }
 						inActiveText={ 'Off' }
 						value={ this.state.showHtml }
 						onValueChange={ this.handleSwitchEditor }
 					/>
+					<Text style={ styles.switchLabel }>View html output</Text>
+					<Switch
+						activeText={ 'On' }
+						inActiveText={ 'Off' }
+						value={ this.state.inspectBlocks }
+						onValueChange={ this.handleInspectBlocksChanged }
+					/>
+					<Text style={ styles.switchLabel }>Inspect blocks</Text>
 				</View>
 				{ this.state.showHtml && this.renderHTML() }
 				{ ! this.state.showHtml && list }
@@ -250,6 +258,10 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		this.setState( { showHtml } );
 	}
 
+	handleInspectBlocksChanged = ( inspectBlocks: boolean ) => {
+		this.setState( { inspectBlocks } );
+	}
+
 	handleHTMLUpdate = ( html: string ) => {
 		this.setState( { html } );
 	}
@@ -270,6 +282,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 					onToolbarButtonPressed={ this.onToolbarButtonPressed.bind( this ) }
 					onBlockHolderPressed={ this.onBlockHolderPressed.bind( this ) }
 					onChange={ this.onChange.bind( this ) }
+					showTitle={ this.state.inspectBlocks }
 					focused={ value.item.focused }
 					clientId={ value.clientId }
 					{ ...value.item }

diff --git a/src/block-management/block-manager.scss b/src/block-management/block-manager.scss
@@ -5,12 +5,12 @@
 .container {
 	flex: 1;
 	justify-content: flex-start;
-	background-color: #caa;
+	background-color: #fff;
+	padding-top: 30;
 }
 
 .list {
 	flex: 1;
-	background-color: #ccc;
 }
 
 .htmlView {
@@ -26,8 +26,15 @@
 .switch {
 	flex-direction: row;
 	justify-content: flex-start;
+	align-items: center;
+	margin: 10px;
 }
 
+.switchLabel {
+	margin-left: 10px;
+}
+
+
 .lineStyleAddHere {
 	flex: 1;
 	background-color: #0087be; // blue_wordpress

diff --git a/src/block-management/block-styles.scss b/src/block-management/block-styles.scss
@@ -2,6 +2,10 @@
 
 @import '../variables.scss';
 
-.block_code {
+.blockCode {
 	font-family: $default-monospace-font;
 }
+
+.blockText {
+	min-height: 50;
+}