Skip to content

Mobile: BottomSheet design tweaks #13633

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

Merged
etoledom merged 28 commits into from
Feb 1, 2019
Merged

Mobile: BottomSheet design tweaks #13633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
fd7c7eb
rnmobile: Implement image settings button using InspectorControls.Slo…
etoledom Jan 30, 2019
abdfd03
rnmobile: Add missing semicolon
etoledom Jan 30, 2019
1a4e35a
rnmobile: Adding bottom-sheet component to mobile
etoledom Jan 30, 2019
4352c7a
rnmobile: Styling bottom-sheet header
etoledom Jan 30, 2019
f132158
rnmobile: Bottom-sheet clean up
etoledom Jan 30, 2019
7bd8a4f
rnmobile: Fix lint issues on bottom-sheet related code.
etoledom Jan 30, 2019
541db3b
rnmobile: Fix small lint issues
etoledom Jan 31, 2019
b8e5dcf
rnmobile: Move inline toolbar button definition out of constant.
etoledom Jan 31, 2019
92e5357
rnmobile: Remove extra white-spaces
etoledom Jan 31, 2019
b7236e0
revert package-lock.json changes
etoledom Jan 31, 2019
4828348
Merge branch 'master' into rnmobile/bottom-sheet-component
etoledom Jan 31, 2019
09582b7
rnmobile: Fix merge issue
etoledom Jan 31, 2019
d335a84
rnmobile: exporting component BottomSheet.Button to be used as bottom…
etoledom Jan 31, 2019
67c2ffc
rnmobile: Adding BottomSheet.Cell component as an extraction for Bott…
etoledom Jan 31, 2019
edcd79b
Fix lint issues
etoledom Jan 31, 2019
fc1043a
Reverting changes to package-lock.json
etoledom Jan 31, 2019
bfd5832
Merge branch 'master' into rnmobile/bottom-sheet-component
etoledom Jan 31, 2019
4d7a80c
Fix merge issues
etoledom Jan 31, 2019
e92bf54
Add prop to Hide header on Bottom-Sheet
etoledom Feb 1, 2019
baa9e1e
BottomSheet cell label is centered when value prop is not set
etoledom Feb 1, 2019
91c1b60
Adding icons option to BottomSheet.Cell
etoledom Feb 1, 2019
c72534a
Added option to override Label and Value text styles on BottomSheet.Cell
etoledom Feb 1, 2019
7190348
Clean up BottomSheet.Cell styles
etoledom Feb 1, 2019
c9bcb3f
Image native: Separate BottomSheet.Cell props in multiple lines
etoledom Feb 1, 2019
09af40d
Fix lint issues
etoledom Feb 1, 2019
6e4249e
Merge branch 'master' into rnmobile/bottom-sheet-design-tweaks
etoledom Feb 1, 2019
94ff384
Added WordPress dependencies to BottomSheet.Cell
etoledom Feb 1, 2019
5b50a4c
Merge branch 'master' into rnmobile/bottom-sheet-design-tweaks
etoledom Feb 1, 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
15 changes: 13 additions & 2 deletions packages/block-library/src/image/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,8 +189,8 @@ export default class ImageEdit extends React.Component {
const getInspectorControls = () => (
<BottomSheet
isVisible={ this.state.showSettings }
title={ __( 'Image Settings' ) }
onClose={ onImageSettingsClose }
hideHeader
rightButton={
<BottomSheet.Button
text={ __( 'Done' ) }
Expand All @@ -199,7 +199,18 @@ export default class ImageEdit extends React.Component {
/>
}
>
<BottomSheet.Cell label={ __( 'Alt Text' ) } value={ __( 'None' ) } onPress={ () => {} } />
<BottomSheet.Cell
icon={ 'editor-textcolor' }
label={ __( 'Alt Text' ) }
value={ __( 'None' ) }
onPress={ () => {} }
/>
<BottomSheet.Cell
label={ __( 'Reset to original' ) }
labelStyle={ { color: 'red' } }
drawSeparator={ false }
onPress={ () => {} }
/>
</BottomSheet>
);

Expand Down
34 changes: 30 additions & 4 deletions packages/editor/src/components/mobile/bottom-sheet/cell.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
/**
* External dependencies
*/
import { TouchableOpacity, Text } from 'react-native';
import { TouchableOpacity, Text, View } from 'react-native';

/**
* WordPress dependencies
*/
import { Dashicon } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -13,12 +18,33 @@ export default function Cell( props ) {
onPress,
label,
value,
drawSeparator = true,
icon,
labelStyle = {},
valueStyle = {},
} = props;

const defaultLabelStyle = value ? styles.cellLabel : styles.cellLabelCentered;

return (
<TouchableOpacity style={ styles.cellContainer } onPress={ onPress }>
<Text style={ styles.cellLabel }>{ label }</Text>
<Text style={ styles.cellValue }>{ value }</Text>
<TouchableOpacity onPress={ onPress }>
<View style={ styles.cellContainer }>
<View style={ styles.cellRowContainer }>
{ icon && (
<View style={ styles.cellRowContainer }>
<Dashicon icon={ icon } size={ 30 } />
<View style={ { width: 12 } } />
</View>
) }
<Text style={ { ...defaultLabelStyle, ...labelStyle } }>{ label }</Text>
</View>
{ value && (
<Text style={ { ...styles.cellValue, ...valueStyle } }>{ value }</Text>
) }
</View>
{ drawSeparator && (
<View style={ styles.separator } />
) }
</TouchableOpacity>
);
}
32 changes: 18 additions & 14 deletions packages/editor/src/components/mobile/bottom-sheet/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ class BottomSheet extends Component {
}

render() {
const { isVisible, leftButton, rightButton } = this.props;
const { title = '', isVisible, leftButton, rightButton, hideHeader } = this.props;

return (
<Modal
Expand All @@ -60,21 +60,25 @@ class BottomSheet extends Component {
>
<View style={ { ...styles.content, borderColor: 'rgba(0, 0, 0, 0.1)' } }>
<View style={ styles.dragIndicator } />
<View style={ styles.head }>
<View style={ { flex: 1 } }>
{ leftButton }
{ hideHeader || (
<View>
<View style={ styles.head }>
<View style={ { flex: 1 } }>
{ leftButton }
</View>
<View style={ styles.titleContainer }>
<Text style={ styles.title }>
{ title }
</Text>
</View>
<View style={ { flex: 1 } }>
{ rightButton }
</View>
</View>
<View style={ styles.separator } />
</View>
<View style={ styles.titleContainer }>
<Text style={ styles.title }>
{ this.props.title }
</Text>
</View>
<View style={ { flex: 1 } }>
{ rightButton }
</View>
</View>
) }

<View style={ styles.separator } />
{ this.props.children }
<View style={ { flexGrow: 1 } }></View>
<View style={ { height: this.state.safeAreaBottomInset } } />
Expand Down
17 changes: 16 additions & 1 deletion packages/editor/src/components/mobile/bottom-sheet/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
background-color: $light-gray-400;
height: 1px;
width: 100%;
margin: auto;
}

.content {
Expand Down Expand Up @@ -71,11 +70,27 @@
align-items: center;
}

.cellRowContainer {
flex-direction: row;
align-items: center;
}

.cellIcon {
padding-right: 30;
}

.cellLabel {
font-size: 18px;
color: #000;
}

.cellLabelCentered {
font-size: 18px;
color: #000;
flex: 1;
text-align: center;
}

.cellValue {
font-size: 18px;
color: $dark-gray-400;
Expand Down