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

Jump to bottom

[RNMobile] Styling fixes after navigation merge #19164

Merged
merged 9 commits into from
Jan 7, 2020
Merged

[RNMobile] Styling fixes after navigation merge #19164

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fb51163
Styling fixes to navigation feature
lukewalczak Dec 16, 2019
9e17396
Add netural styles for toolbar
lukewalczak Dec 16, 2019
fa70500
Fix condition for not registered component
lukewalczak Dec 16, 2019
a55d4f9
Merge branch 'master' into rnmobile/fixes-after-navigation
lukewalczak Dec 17, 2019
e2bd237
Merge branch 'master' into rnmobile/fixes-after-navigation
lukewalczak Dec 17, 2019
6dd9b99
Display 'Unsupported' in breadcrumbs for missing components
lukewalczak Dec 17, 2019
c88bfc1
Merge branch 'master' into rnmobile/fixes-after-navigation
lukewalczak Dec 18, 2019
b5a801d
Refactor after CR
lukewalczak Dec 20, 2019
ade20e1
Remove leftovers
lukewalczak Dec 20, 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 packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ $block-selected-child-border-width: 1px;
$block-selected-child-padding: 0;
$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
$block-selected-child-to-content: $block-selected-to-content - $block-selected-child-margin - $block-selected-child-border-width;
$block-custom-appender-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-child-margin + $block-selected-border-width;
$block-custom-appender-to-content: $block-selected-margin - $block-selected-border-width;
$block-media-container-to-content: $block-selected-child-margin + $block-selected-border-width;

// Buttons & UI Widgets
Expand Down
26 changes: 23 additions & 3 deletions packages/block-editor/src/components/block-list/block.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Component } from '@wordpress/element';
import { ToolbarButton, Toolbar } from '@wordpress/components';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import { getBlockType } from '@wordpress/blocks';
import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
import { __, sprintf } from '@wordpress/i18n';

/**
Expand Down Expand Up @@ -108,14 +108,15 @@ class BlockListBlock extends Component {
getStylesFromColorScheme,
isSmallScreen,
isRootListInnerBlockHolder,
isUnregisteredBlock,
} = this.props;

const fullSolidBorderStyle = { // define style for full border
...styles.fullSolidBordered,
...getStylesFromColorScheme( styles.solidBorderColor, styles.solidBorderColorDark ),
};

if ( hasChildren ) { // if block has children apply style for selected parent
if ( hasChildren && ! isUnregisteredBlock ) { // if block has children apply style for selected parent
return { ...styles.selectedParent, ...fullSolidBorderStyle };
}

Expand Down Expand Up @@ -143,8 +144,13 @@ class BlockListBlock extends Component {
isAncestorSelected,
hasParent,
getStylesFromColorScheme,
isUnregisteredBlock,
} = this.props;

if ( isUnregisteredBlock ) {
return styles.full;
}

// if block does not have parent apply neutral or full
// margins depending if block has children or not
if ( ! hasParent ) {
Expand Down Expand Up @@ -188,6 +194,17 @@ class BlockListBlock extends Component {
];
}

applyToolbarStyle() {
const {
hasChildren,
isUnregisteredBlock,
} = this.props;

if ( ! hasChildren || isUnregisteredBlock ) {
lukewalczak marked this conversation as resolved.
Show resolved Hide resolved
return styles.neutralToolbar;
}
}

render() {
const {
clientId,
Expand Down Expand Up @@ -228,7 +245,7 @@ class BlockListBlock extends Component {
style={ this.applyBlockStyle() }
>
{ isValid ? this.getBlockForType() : <BlockInvalidWarning blockTitle={ title } icon={ icon } /> }
{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }
<View style={ this.applyToolbarStyle() } >{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }</View>
Copy link
Contributor

Choose a reason for hiding this comment

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

I think I'd rather avoid using negative margins here. It seems that we should instead wrap the block content in another view and add the padding to that instead.

Copy link
Member Author

Choose a reason for hiding this comment

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

Actually I was afraid of negative margins as well, but decided to go with them because touching other styles were more dangerous for me.

</View>
</TouchableWithoutFeedback>
</>
Expand Down Expand Up @@ -261,6 +278,8 @@ export default compose( [
const isLastBlock = order === getBlocks().length - 1;
const block = __unstableGetBlockWithoutInnerBlocks( clientId );
const { name, attributes, isValid } = block || {};

const isUnregisteredBlock = name === getUnregisteredTypeHandlerName();
const blockType = getBlockType( name || 'core/missing' );
const title = blockType.title;
const icon = blockType.icon;
Expand Down Expand Up @@ -317,6 +336,7 @@ export default compose( [
isTouchable,
isDimmed,
isRootListInnerBlockHolder,
isUnregisteredBlock,
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
Expand Down
13 changes: 11 additions & 2 deletions packages/block-editor/src/components/block-list/block.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,16 @@

.selectedLeaf {
margin: $block-selected-margin;
padding: $block-selected-to-content;
padding-left: $block-selected-to-content;
padding-right: $block-selected-to-content;
padding-top: $block-selected-to-content;
}

.selectedRootLeaf {
margin: 0;
padding: $block-edge-to-content;
padding-left: $block-edge-to-content;
padding-right: $block-edge-to-content;
padding-top: $block-edge-to-content;
}

.selectedParent {
Expand Down Expand Up @@ -130,3 +134,8 @@
background-color: #e9eff3;
opacity: 0.4;
}

.neutralToolbar {
margin-left: -$block-edge-to-content;
margin-right: -$block-edge-to-content;
}
18 changes: 13 additions & 5 deletions packages/block-editor/src/components/block-list/breadcrumb.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
import { Icon } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { getBlockType } from '@wordpress/blocks';
import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

/**
* External dependencies
Expand All @@ -16,20 +17,23 @@ import { View, Text, TouchableOpacity } from 'react-native';
*/
import BlockTitle from '../block-title';
import SubdirectorSVG from './subdirectory-icon';

import styles from './breadcrumb.scss';

const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } ) => {
const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon, isUnregisteredBlock } ) => {
return (
<View style={ styles.breadcrumbContainer }>
<TouchableOpacity style={ styles.button } onPress={ () => {/* Open BottomSheet with markup */} }>
<TouchableOpacity
style={ styles.button }
onPress={ () => {/* Open BottomSheet with markup */} }
disabled={ true } /* Disable temporarily since onPress function is empty */
>
{ rootClientId && rootBlockIcon && (
[ <Icon key="parent-icon" size={ 20 } icon={ rootBlockIcon.src } fill={ styles.icon.color } />,
<View key="subdirectory-icon" style={ styles.arrow }><SubdirectorSVG fill={ styles.arrow.color } /></View>,
]
) }
<Icon size={ 24 } icon={ blockIcon.src } fill={ styles.icon.color } />
<Text style={ styles.breadcrumbTitle }><BlockTitle clientId={ clientId } /></Text>
<Text style={ styles.breadcrumbTitle }>{ isUnregisteredBlock ? __( 'Unsupported' ) : <BlockTitle clientId={ clientId } /> }</Text>
lukewalczak marked this conversation as resolved.
Show resolved Hide resolved
</TouchableOpacity>
</View>
);
Expand All @@ -48,10 +52,13 @@ export default compose( [

const rootClientId = getBlockRootClientId( clientId );

const isUnregisteredBlock = blockName === getUnregisteredTypeHandlerName();

if ( ! rootClientId ) {
return {
clientId,
blockIcon,
isUnregisteredBlock,
};
}
const rootBlockName = getBlockName( rootClientId );
Expand All @@ -63,6 +70,7 @@ export default compose( [
blockIcon,
rootClientId,
rootBlockIcon,
isUnregisteredBlock,
};
} ),
] )( BlockBreadcrumb );