Add border on Title when focused (#622)

* Add focus style borders to title as well * Fix isFullyBordered calculated wrong on Android * Fix flow issue * Update gutenberg repo * Enable title borders when title is focused programmatically Also border styling mechanism changes, we start just to play with border colors in order to provide smoother animation This also solves Android's re-render title issue on the first tap * Fix unittests and update props * Delete unnecessary newline * Remove unnecessary prop * Update style name * Update onRef as ref * Update gutenberg ref * Update gutenberg ref * Update gutenberg repo ref * Update ref as innerRef * Update gutenberg ref
wordpress-mobile · Feb 21, 2019 · 224a4a1 · 224a4a1
1 parent 8ee7064
commit 224a4a1
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 56 deletions.
diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
@@ -25,4 +25,7 @@ module.exports = {
 	'editor-plain-text': {
 		fontFamily: 'serif',
 	},
+	blockHolderFocused: {
+		borderColor: 'gray',
+	},
 };
diff --git a/gutenberg b/gutenberg
diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js
@@ -8,8 +8,6 @@ import {
 	View,
 	Text,
 	TouchableWithoutFeedback,
-	Dimensions,
-	LayoutChangeEvent,
 	NativeSyntheticEvent,
 	NativeTouchEvent,
 } from 'react-native';
@@ -34,6 +32,8 @@ type PropsType = BlockType & {
 	isFirstBlock: boolean,
 	isLastBlock: boolean,
 	showTitle: boolean,
+	borderStyle: Object,
+	focusedBorderColor: string,
 	getBlockIndex: ( clientId: string, rootClientId: string ) => number,
 	getPreviousBlockClientId: ( clientId: string ) => string,
 	getNextBlockClientId: ( clientId: string ) => string,
@@ -125,19 +125,6 @@ export class BlockHolder extends React.Component<PropsType, StateType> {
 		}
 	};
 
-	onBlockHolderLayout = ( event: LayoutChangeEvent ) => {
-		const { width: fullWidth } = Dimensions.get( 'window' );
-		const { width } = event.nativeEvent.layout;
-		const isFullyBordered = fullWidth > width;
-		if ( isFullyBordered !== this.state.isFullyBordered ) {
-			this.setState( { ...this.state, isFullyBordered } );
-		}
-	}
-
-	blockHolderFocusedStyle() {
-		return this.state.isFullyBordered ? styles.blockHolderFocusedFullBordered : styles.blockHolderFocusedSemiBordered;
-	}
-
 	renderToolbar() {
 		if ( ! this.props.isSelected ) {
 			return null;
@@ -178,11 +165,13 @@ export class BlockHolder extends React.Component<PropsType, StateType> {
 	}
 
 	render() {
-		const { isSelected } = this.props;
+		const { isSelected, borderStyle, focusedBorderColor } = this.props;
+
+		const borderColor = isSelected ? focusedBorderColor : 'transparent';
 
 		return (
-			<TouchableWithoutFeedback onPress={ this.onFocus } onLayout={ this.onBlockHolderLayout } >
-				<View style={ [ styles.blockHolder, isSelected && this.blockHolderFocusedStyle() ] }>
+			<TouchableWithoutFeedback onPress={ this.onFocus } >
+				<View style={ [ styles.blockHolder, borderStyle, { borderColor } ] }>
 					{ this.props.showTitle && this.renderBlockTitle() }
 					<View style={ [ ! isSelected && styles.blockContainer, isSelected && styles.blockContainerFocused ] }>{ this.getBlockForType() }</View>
 					{ this.renderToolbar() }

diff --git a/src/block-management/block-holder.scss b/src/block-management/block-holder.scss
@@ -7,22 +7,6 @@
 	flex: 1 1 auto;
 }
 
-.blockHolderFocusedSemiBordered {
-	border-color: $gray-lighten-30;
-	border-top-width: 1px;
-	border-bottom-width: 1px;
-	border-left-width: 0;
-	border-right-width: 0;
-}
-
-.blockHolderFocusedFullBordered {
-	border-color: $gray-lighten-30;
-	border-top-width: 1px;
-	border-bottom-width: 1px;
-	border-left-width: 1px;
-	border-right-width: 1px;
-}
-
 .blockContainer {
 	background-color: white;
 	padding-left: 16;

diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import React from 'react';
 import { identity } from 'lodash';
 
-import { Text, View, Keyboard, LayoutChangeEvent, SafeAreaView } from 'react-native';
+import { Text, View, Keyboard, LayoutChangeEvent, SafeAreaView, Dimensions } from 'react-native';
 import BlockHolder from './block-holder';
 import type { BlockType } from '../store/types';
 import styles from './block-manager.scss';
@@ -52,11 +52,12 @@ type StateType = {
 	isKeyboardVisible: boolean,
 	rootViewHeight: number;
 	safeAreaBottomInset: number;
+	isFullyBordered: boolean;
 };
 
 export class BlockManager extends React.Component<PropsType, StateType> {
 	scrollViewRef: Object;
-	titleViewRef: Object;
+	postTitleRef: ?Object;
 	subscriptionParentSetFocusOnTitle: ?Object;
 
 	constructor( props: PropsType ) {
@@ -73,12 +74,14 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 		( this: any ).keyboardDidHide = this.keyboardDidHide.bind( this );
 		( this: any ).onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind( this );
 		( this: any ).scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
+		( this: any ).onContentViewLayout = this.onContentViewLayout.bind( this );
 
 		this.state = {
 			blockTypePickerVisible: false,
 			isKeyboardVisible: false,
 			rootViewHeight: 0,
 			safeAreaBottomInset: 0,
+			isFullyBordered: false,
 		};
 		SafeArea.getSafeAreaInsetsForRootView().then( this.onSafeAreaInsetsUpdate );
 	}
@@ -124,13 +127,26 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 		} );
 	}
 
+	onContentViewLayout = ( event: LayoutChangeEvent ) => {
+		const { width: fullWidth } = Dimensions.get( 'window' );
+		const { width } = event.nativeEvent.layout;
+		const isFullyBordered = fullWidth > width + 1; //+1 is for not letting fraction differences effect the result on Android
+		if ( isFullyBordered !== this.state.isFullyBordered ) {
+			this.setState( { ...this.state, isFullyBordered } );
+		}
+	}
+
+	blockHolderBorderStyle() {
+		return this.state.isFullyBordered ? styles.blockHolderFullBordered : styles.blockHolderSemiBordered;
+	}
+
 	componentDidMount() {
 		Keyboard.addListener( 'keyboardDidShow', this.keyboardDidShow );
 		Keyboard.addListener( 'keyboardDidHide', this.keyboardDidHide );
 		SafeArea.addEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate );
 		this.subscriptionParentSetFocusOnTitle = subscribeSetFocusOnTitle( ( ) => {
-			if ( this.titleViewRef ) {
-				this.titleViewRef.focus();
+			if ( this.postTitleRef ) {
+				this.postTitleRef.focus();
 			}
 		} );
 	}
@@ -172,21 +188,21 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 
 	renderHeader() {
 		return (
-			<View style={ styles.titleContainer }>
-				<PostTitle
-					setRef={ ( ref ) => {
-						this.titleViewRef = ref;
-					} }
-					title={ this.props.title }
-					onUpdate={ this.props.setTitleAction }
-					placeholder={ __( 'Add title' ) } />
-			</View>
+			<PostTitle
+				innerRef={ ( ref ) => {
+					this.postTitleRef = ref;
+				} }
+				title={ this.props.title }
+				onUpdate={ this.props.setTitleAction }
+				placeholder={ __( 'Add title' ) }
+				borderStyle={ this.blockHolderBorderStyle() }
+				focusedBorderColor={ styles.blockHolderFocused.borderColor } />
 		);
 	}
 
 	renderList() {
 		return (
-			<View style={ { flex: 1 } } >
+			<View style={ { flex: 1 } } onLayout={ this.onContentViewLayout }>
 				<KeyboardAwareFlatList
 					innerRef={ this.scrollViewInnerRef }
 					blockToolbarHeight={ toolbarStyles.container.height }
@@ -196,6 +212,7 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 					keyboardShouldPersistTaps="always"
 					style={ styles.list }
 					data={ this.props.blockClientIds }
+					extraData={ [ this.state.isFullyBordered ] }
 					keyExtractor={ identity }
 					renderItem={ this.renderItem }
 					shouldPreventAutomaticScroll={ this.shouldFlatListPreventAutomaticScroll }
@@ -259,6 +276,8 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 					clientId={ clientId }
 					rootClientId={ this.props.rootClientId }
 					onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
+					borderStyle={ this.blockHolderBorderStyle() }
+					focusedBorderColor={ styles.blockHolderFocused.borderColor }
 				/>
 				{ this.state.blockTypePickerVisible && this.props.isBlockSelected( clientId ) && (
 					<View style={ styles.containerStyleAddHere } >

diff --git a/src/block-management/block-manager.scss b/src/block-management/block-manager.scss
@@ -1,20 +1,14 @@
 /** @format */
 
 @import '../variables.scss';
+@import 'colors.scss';
 
 .container {
 	flex: 1;
 	justify-content: flex-start;
 	background-color: #fff;
 }
 
-.titleContainer {
-	padding-left: 16;
-	padding-right: 16;
-	padding-top: 32;
-	padding-bottom: 16;	
-}
-
 .list {
 	flex: 1;
 }
@@ -56,4 +50,22 @@
 	bottom: 0;
 	right: 0;
 	left: 0;
+}
+
+.blockHolderSemiBordered {
+	border-top-width: 1px;
+	border-bottom-width: 1px;
+	border-left-width: 0;
+	border-right-width: 0;
+}
+
+.blockHolderFullBordered {
+	border-top-width: 1px;
+	border-bottom-width: 1px;
+	border-left-width: 1px;
+	border-right-width: 1px;
+}
+
+.blockHolderFocused {
+	border-color: $gray-lighten-30;
 }
+55 −23		packages/editor/src/components/post-title/index.native.js
+6 −0		packages/editor/src/components/post-title/style.native.scss