Merge pull request #40 from wordpress-mobile/feature/better-toolbar-s…

…tyling

Update toolbar, block and html view styling

index.js

@@ -1,5 +1,5 @@
 /** @format */
 
 import { AppRegistry } from 'react-native';
-import App from './app/App';
+import App from './src/app/App';
 AppRegistry.registerComponent( 'gutenberg', () => App );

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "config": {
-    "jsfiles": "index.js app/*.js app/**/*.js block-management/*.js block-management/**/*.js store/*.js store/**/*.js",
-    "scssfiles": "app/*.scss app/**/*.scss block-management/*.scss block-management/**/*.scss store/*.scss store/**/*.scss"
+    "jsfiles": "index.js src/*.js src/**/*.js",
+    "scssfiles": "src/*.scss src/**/*.scss"
   },
   "devDependencies": {
     "@wordpress/babel-preset-default": "^1.1.2",

sass-transformer.js

@@ -120,7 +120,7 @@ function transform( src, filename, options ) {
 				const importerOptions = this.options;
 				const incPaths = importerOptions.includePaths.slice( 0 ).split( ':' );
 				if ( urlPath.dir.length > 0 ) {
-					incPaths.unshift( urlPath.dir ); // add the file's dir to the search array
+					incPaths.unshift( path.resolve( path.dirname( filename ), urlPath.dir ) ); // add the file's dir to the search array
 				}
 				const f = findVariant( urlPath.name, exts, incPaths );
 

block-management/block-holder.scss → src/block-management/block-holder.scss

@@ -8,18 +8,15 @@
 
 .blockContainer {
 	background-color: white;
-}
-
-.blockContent {
-	padding-left: 10;
-	padding-right: 10;
-	padding-top: 10;
-	padding-bottom: 10;
+	padding-left: 8;
+	padding-right: 8;
+	padding-top: 8;
+	padding-bottom: 8;
 }
 
 .blockTitle {
 	background-color: grey;
-	padding-left: 10;
+	padding-left: 8;
 	padding-top: 4;
 	padding-bottom: 4;
 }

block-management/block-manager.js → src/block-management/block-manager.js

@@ -149,7 +149,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 						onValueChange={ value => this.setState( { showHtml: value } ) }
 					/>
 				</View>
-				{ this.state.showHtml && <Text style={ styles.list }>{ this.serializeToHtml() }</Text> }
+				{ this.state.showHtml && <Text style={ styles.htmlView }>{ this.serializeToHtml() }</Text> }
 				{ ! this.state.showHtml && list }
 			</View>
 		);

block-management/block-manager.scss → src/block-management/block-manager.scss

@@ -1,5 +1,7 @@
 /** @format */
 
+@import '../variables.scss';
+
 .container {
 	flex: 1;
 	justify-content: flex-start;
@@ -12,8 +14,13 @@
 }
 
 .htmlView {
+	font-family: $default-monospace-font;
 	flex: 1;
-	background-color: #fff;
+	background-color: #eee;
+	padding-left: 8;
+	padding-right: 8;
+	padding-top: 8;
+	padding-bottom: 8;
 }
 
 .switch {

src/block-management/block-styles.scss

@@ -0,0 +1,7 @@
+/** @format */
+
+@import '../variables.scss';
+
+.block_code {
+	font-family: $default-monospace-font;
+}

block-management/constants.js → src/block-management/constants.js

@@ -8,6 +8,7 @@ const ToolbarButton = {
 	DOWN: 2,
 	SETTINGS: 3,
 	DELETE: 4,
+	PLUS: 5,
 };
 
 export { ToolbarButton };

src/block-management/toolbar.js

@@ -0,0 +1,66 @@
+/** @flow
+ * @format */
+
+import React from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
+import { ToolbarButton } from './constants';
+
+import styles from './toolbar.scss';
+
+type PropsType = {
+	uid: string,
+	onButtonPressed: ( button: number, uid: string ) => void,
+};
+
+export default class Toolbar extends React.Component<PropsType> {
+	render() {
+		return (
+			<View style={ styles.toolbar }>
+				<TouchableOpacity
+					onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.PLUS, this.props.uid ) }
+				>
+					<View style={ styles.toolbarButton }>
+						<Text>+</Text>
+					</View>
+				</TouchableOpacity>
+				<View style={ styles.buttonSeparator } />
+				<TouchableOpacity
+					onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.UP, this.props.uid ) }
+				>
+					<View style={ styles.toolbarButton }>
+						<Text>▲</Text>
+					</View>
+				</TouchableOpacity>
+				<View style={ styles.buttonSeparator } />
+				<TouchableOpacity
+					onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DOWN, this.props.uid ) }
+				>
+					<View style={ styles.toolbarButton }>
+						<Text>▼</Text>
+					</View>
+				</TouchableOpacity>
+				<View style={ styles.buttonSeparator } />
+				<TouchableOpacity
+					onPress={ this.props.onButtonPressed.bind(
+						this,
+						ToolbarButton.SETTINGS,
+						this.props.uid
+					) }
+				>
+					<View style={ styles.toolbarButton }>
+						{ /* eslint-disable-next-line jsx-a11y/accessible-emoji */ }
+						<Text>⚙️</Text>
+					</View>
+				</TouchableOpacity>
+				<View style={ styles.buttonSeparator } />
+				<TouchableOpacity
+					onPress={ this.props.onButtonPressed.bind( this, ToolbarButton.DELETE, this.props.uid ) }
+				>
+					<View style={ styles.toolbarButton }>
+						<Text>🗑</Text>
+					</View>
+				</TouchableOpacity>
+			</View>
+		);
+	}
+}

src/block-management/toolbar.scss

@@ -0,0 +1,19 @@
+/** @format */
+
+.toolbar {
+	height: 34;
+	background-color: white;
+	flex-direction: row;
+	padding-left: 8;
+	padding-right: 8;
+}
+
+.toolbarButton {
+	width: 50;
+	justify-content: center;
+	align-items: center;
+}
+
+.buttonSeparator {
+	width: 8;
+}

src/variables.android.scss

@@ -0,0 +1,4 @@
+/** @format */
+
+// Fonts
+$default-monospace-font: monospace;

src/variables.ios.scss

@@ -0,0 +1,4 @@
+/** @format */
+
+// Fonts
+$default-monospace-font: courier;