Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add border on Title when focused #622

Merged
merged 18 commits into from
Feb 21, 2019
Merged

Add border on Title when focused #622

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
da74ef1
Add focus style borders to title as well
pinarol Feb 20, 2019
3142ee9
Fix isFullyBordered calculated wrong on Android
pinarol Feb 20, 2019
210ec63
Fix flow issue
pinarol Feb 20, 2019
b4be102
Update gutenberg repo
pinarol Feb 20, 2019
d85f7b3
Merge branch 'develop' into issue/540-title-borders
pinarol Feb 21, 2019
87b3ba5
Merge branch 'issue/540-title-borders' of github.com:wordpress-mobile…
pinarol Feb 21, 2019
6b23698
Enable title borders when title is focused programmatically
pinarol Feb 21, 2019
eaca711
Fix unittests and update props
pinarol Feb 21, 2019
f59c155
Delete unnecessary newline
pinarol Feb 21, 2019
4b67937
Remove unnecessary prop
pinarol Feb 21, 2019
61d2b86
Update style name
pinarol Feb 21, 2019
67b509a
Update onRef as ref
pinarol Feb 21, 2019
494adb6
Merge branch 'develop' into issue/540-title-borders
pinarol Feb 21, 2019
dc3cc0f
Update gutenberg ref
pinarol Feb 21, 2019
eb33a79
Update gutenberg ref
pinarol Feb 21, 2019
8856e7f
Update gutenberg repo ref
pinarol Feb 21, 2019
cdd7e9f
Update ref as innerRef
pinarol Feb 21, 2019
85b1a1f
Update gutenberg ref
pinarol Feb 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion gutenberg
Open in desktop
Submodule gutenberg updated 11 files
+0 −16 packages/block-library/src/paragraph/edit.native.js
+1 −2 packages/blocks/src/api/index.native.js
+165 −2 packages/blocks/src/api/raw-handling/index.js
+0 −1 packages/blocks/src/api/raw-handling/index.native.js
+0 −240 packages/blocks/src/api/raw-handling/paste-handler.js
+2 −6 packages/blocks/src/api/raw-handling/phrasing-content-reducer.js
+1 −3 packages/blocks/src/api/raw-handling/utils.js
+0 −1 packages/dom/package.json
+2 −0 packages/editor/src/components/post-title/index.native.js
+17 −135 packages/editor/src/components/rich-text/index.native.js
+0 −1 packages/shortcode/package.json
22 changes: 4 additions & 18 deletions src/block-management/block-holder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ import {
View,
Text,
TouchableWithoutFeedback,
Dimensions,
LayoutChangeEvent,
NativeSyntheticEvent,
NativeTouchEvent,
} from 'react-native';
Expand All @@ -34,6 +32,7 @@ type PropsType = BlockType & {
isFirstBlock: boolean,
isLastBlock: boolean,
showTitle: boolean,
focusedStyle: mixed,
getBlockIndex: ( clientId: string, rootClientId: string ) => number,
getPreviousBlockClientId: ( clientId: string ) => string,
getNextBlockClientId: ( clientId: string ) => string,
Expand Down Expand Up @@ -125,19 +124,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;
Expand Down Expand Up @@ -178,11 +164,11 @@ export class BlockHolder extends React.Component<PropsType, StateType> {
}

render() {
const { isSelected } = this.props;
const { isSelected, focusedStyle } = this.props;

return (
<TouchableWithoutFeedback onPress={ this.onFocus } onLayout={ this.onBlockHolderLayout } >
<View style={ [ styles.blockHolder, isSelected && this.blockHolderFocusedStyle() ] }>
<TouchableWithoutFeedback onPress={ this.onFocus } >
<View style={ [ styles.blockHolder, isSelected && focusedStyle ] }>
{ this.props.showTitle && this.renderBlockTitle() }
<View style={ [ ! isSelected && styles.blockContainer, isSelected && styles.blockContainerFocused ] }>{ this.getBlockForType() }</View>
{ this.renderToolbar() }
Expand Down
16 changes: 0 additions & 16 deletions src/block-management/block-holder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
33 changes: 30 additions & 3 deletions src/block-management/block-manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -52,6 +52,8 @@ type StateType = {
isKeyboardVisible: boolean,
rootViewHeight: number;
safeAreaBottomInset: number;
isFullyBordered: boolean;
isTitleFocused: boolean;
};

export class BlockManager extends React.Component<PropsType, StateType> {
Expand All @@ -73,12 +75,16 @@ 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 ).onTitleFocusStatusChange = this.onTitleFocusStatusChange.bind( this );
( this: any ).onContentViewLayout = this.onContentViewLayout.bind( this );

this.state = {
blockTypePickerVisible: false,
isKeyboardVisible: false,
rootViewHeight: 0,
safeAreaBottomInset: 0,
isFullyBordered: false,
isTitleFocused: false,
};
SafeArea.getSafeAreaInsetsForRootView().then( this.onSafeAreaInsetsUpdate );
}
Expand Down Expand Up @@ -124,6 +130,19 @@ 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 } );
}
}

blockHolderFocusedStyle() {
return this.state.isFullyBordered ? styles.blockHolderFocusedFullBordered : styles.blockHolderFocusedSemiBordered;
}

componentDidMount() {
Keyboard.addListener( 'keyboardDidShow', this.keyboardDidShow );
Keyboard.addListener( 'keyboardDidHide', this.keyboardDidHide );
Expand Down Expand Up @@ -170,18 +189,24 @@ export class BlockManager extends React.Component<PropsType, StateType> {
);
}

onTitleFocusStatusChange( isFocused: boolean ) {
this.setState( { isTitleFocused: isFocused } );
}

renderHeader() {
const focusTitle = this.props.title === '' && this.props.blockCount === 0;
const { isTitleFocused } = this.state;

return (
<View style={ styles.titleContainer }>
<View style={ [ styles.titleContainer, isTitleFocused && this.blockHolderFocusedStyle() ] }>
<PostTitle
setRef={ ( ref ) => {
if ( focusTitle && ref ) {
ref.focus();
this.titleViewRef = ref;
}
} }
onFocusStatusChange={ this.onTitleFocusStatusChange }
title={ this.props.title }
onUpdate={ this.props.setTitleAction }
placeholder={ 'Add a Title' } />
Expand All @@ -191,7 +216,7 @@ export class BlockManager extends React.Component<PropsType, StateType> {

renderList() {
return (
<View style={ { flex: 1 } } >
<View style={ { flex: 1 } } onLayout={ this.onContentViewLayout }>
<KeyboardAwareFlatList
innerRef={ this.scrollViewInnerRef }
blockToolbarHeight={ toolbarStyles.container.height }
Expand All @@ -201,6 +226,7 @@ export class BlockManager extends React.Component<PropsType, StateType> {
keyboardShouldPersistTaps="always"
style={ styles.list }
data={ this.props.blockClientIds }
extraData={ [ this.state.isTitleFocused, this.state.isFullyBordered ] }
etoledom marked this conversation as resolved.
Show resolved Hide resolved
keyExtractor={ identity }
renderItem={ this.renderItem }
shouldPreventAutomaticScroll={ this.shouldFlatListPreventAutomaticScroll }
Expand Down Expand Up @@ -264,6 +290,7 @@ export class BlockManager extends React.Component<PropsType, StateType> {
clientId={ clientId }
rootClientId={ this.props.rootClientId }
onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
focusedStyle={ this.blockHolderFocusedStyle() }
/>
{ this.state.blockTypePickerVisible && this.props.isBlockSelected( clientId ) && (
<View style={ styles.containerStyleAddHere } >
Expand Down
17 changes: 17 additions & 0 deletions src/block-management/block-manager.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/** @format */

@import '../variables.scss';
@import 'colors.scss';

.container {
flex: 1;
Expand Down Expand Up @@ -56,4 +57,20 @@
bottom: 0;
right: 0;
left: 0;
}

.blockHolderFocusedSemiBordered {
border-color: $gray-lighten-30;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make sense to use css box-shadow to apply these focus states? In theory that should prevent any shifting, just applying a shadow on the outside edge of the element.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately box-shadow property is not available in React Native and as I investigated it is not a very straight forward change to replace borders with shadows in RN. Because Android and iOS have very different methods for doing it and both methods have different side effects that needs to be addressed.

iOS has these props:
https://facebook.github.io/react-native/docs/shadow-props#shadowcolor

Android has the elevation option but there are no other options to fine-tune the shadow effect. So I am not even sure it'll give the results we want.
https://facebook.github.io/react-native/docs/view-style-props#elevation

I tried to apply these quickly but it messed up the child views' styles in different ways, so it didn't look like an ideal last minute change, but, if you want we can open a separate issue for this and try later?

In this PR, I fixed the shifting of Android blocks. I don't expect any shifting will happen in cases where the block width is equal to window width, because in that case we don't have left&right borders at all.

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