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.

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

Mobile bottom sheet component #13612

Merged
merged 18 commits into from Feb 1, 2019

Conversation

Projects
None yet
3 participants
@etoledom
Copy link
Contributor

etoledom commented Jan 31, 2019

Description

This PR introduces a BottomSheet component to be used on mobile. It's a special use-case of the react-native-modal component implementing our design and animations.

It has props for the header's left and right buttons and title, and the onClose action.

It's firstly implemented as the Image Settings interface for the Image block.

bottom-sheet

To test:

  • Checkout the gutenberg-mobile side PR (wordpress-mobile/gutenberg-mobile#529).
  • Build and run the example project.
  • Select an image block with image.
  • Press the settings button (dented wheel) in the inline toolbar.
  • Check that the bottom sheet appears.
  • Check that the bottom sheet dismiss with when
    • Tapping on the Done button.
    • Tapping on the background.
    • Sliding it down.
onClose={ onImageSettingsClose }
rightButtonConfig={ { text: __( 'Done' ), color: '#0087be', onPress: onImageSettingsClose } }
>
<TouchableOpacity style={ inspectorStyles.bottomSheetCell } onPress={ () => { } }>

This comment has been minimized.

@Tug

Tug Jan 31, 2019

Contributor

This could probably be part of BottomSheet which would have its default style and could accept a prop containerStyle or style to customize it.

This comment has been minimized.

@etoledom

etoledom Jan 31, 2019

Author Contributor

Do you mean, similar to the Button above?
To have a Cell kind-of component exposed from BottomSheet?

This comment has been minimized.

@Tug

Tug Jan 31, 2019

Contributor

I meant more like update the BottomSheet render method to something like:

render() {
	const { isVisible, leftButtonConfig, rightButtonConfig, containerStyle, onContainerPress } = this.props;
 	return (
		<Modal
			....
			<View style={ styles.separator } />
			<TouchableOpacity style={ { ... defaultContainerStyle, ...containerStyle } } onPress={ onContainerPress || noop }>
				{ this.props.children }
			</TouchableOpacity>
			<View style={ { flexGrow: 1 } }></View>
			....
		</Modal>
	);
}

This comment has been minimized.

@etoledom

etoledom Jan 31, 2019

Author Contributor

Right, the problem there is that the buttons or cells are defined by the caller side. And each of those cells will have a TouchableOpacity component. Later on we will add more cells to it:

<BottomSheet
	isVisible={ this.state.showSettings }
	title={ __( 'Image Settings' ) }
	onClose={ onImageSettingsClose }
	rightButtonConfig={ { text: __( 'Done' ), color: '#0087be', onPress: onImageSettingsClose } }
>
	<TouchableOpacity style={ inspectorStyles.bottomSheetCell } onPress={ () => { } }>
		<Text style={ inspectorStyles.bottomSheetCellLabel }>{ __( 'Alt Text' ) }</Text>
		<Text style={ inspectorStyles.bottomSheetCellValue }>{ __( 'None' ) }</Text>
	</TouchableOpacity>
	<TouchableOpacity style={ inspectorStyles.bottomSheetCell } onPress={ () => { } }>
		<Text style={ inspectorStyles.bottomSheetCellLabel }>{ __( 'Size' ) }</Text>
		<Text style={ inspectorStyles.bottomSheetCellValue }>{ __( 'Full Size' ) }</Text>
	</TouchableOpacity>
</BottomSheet>

That's why I thought that maybe extracting the whole cell as a small component would be good:

<TouchableOpacity style={ inspectorStyles.bottomSheetCell } onPress={ () => { } }>
	<Text style={ inspectorStyles.bottomSheetCellLabel }>{ __( 'Size' ) }</Text>
	<Text style={ inspectorStyles.bottomSheetCellValue }>{ __( 'Full Size' ) }</Text>
</TouchableOpacity>

This comment has been minimized.

@Tug

Tug Feb 1, 2019

Contributor

Oh I see, so the TouchableOpacity is for a "cell" I thought it was for the whole content. Yeah makes sense. I'm not sure the concept of a cell needs to be part or BottomSheet but it looks like a nice addition at this point 👍

@etoledom

This comment has been minimized.

Copy link
Contributor Author

etoledom commented Jan 31, 2019

Hey @Tug - Thanks for the review!
I implemented the requested changes on Buttons, and my idea about the Cell component so you can check it out.

Now when we need more cells we just do:

<BottomSheet.Cell label={ __( 'Alt Text' ) } value={ __( 'None' ) } onPress={ () => {} } />
<BottomSheet.Cell label={ __( 'Second' ) } value={ __( 'Something else' ) } onPress={ () => {} } />

And it will look like this:
simulator screen shot - iphone x - 2019-01-31 at 20 56 17

Let me know if you like that.

@etoledom

This comment has been minimized.

Copy link
Contributor Author

etoledom commented Feb 1, 2019

@Tug - Another info: We will continue to iterate in the design and implementation of the BottomSheet.

I'm already working on:

  • Adding icons to the Cell, and
  • Making it possible to show just the label with text centered.
  • An option to completely hide the header from the BottomSheet.

All these on a separate PR (based on this one)

@Tug

Tug approved these changes Feb 1, 2019

Copy link
Contributor

Tug left a comment

LGTM 👍

@etoledom etoledom merged commit c20a644 into master Feb 1, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@etoledom

This comment has been minimized.

Copy link
Contributor Author

etoledom commented Feb 1, 2019

Thank you!

daniloercoli added a commit that referenced this pull request Feb 1, 2019

Merge branch 'master' of https://github.com/WordPress/gutenberg into …
…rnmobile/372-use-RichText-on-Title-block

* 'master' of https://github.com/WordPress/gutenberg:
  Try alternate list item jump fix. (#12941)
  Mobile bottom sheet component (#13612)
  Remove unintentional right-margin on last odd-item. (#12199)
  Introduce left and right float alignment options to latest posts block (#8814)
  Fix Google Docs table paste (#13543)
  Increase bottom padding on gallery image caption (#13623)
  Fix the editor save keyboard shortcut not working in code editor view (#13159)
  Plugin: Deprecate gutenberg_add_admin_body_class (#13572)
  Rnmobile/upload media failed state (#13615)
  Make clickOnMoreMenuItem not dependent on aria labels (#13166)
  Add: className prop support to server side render. (#13568)
  Fix: Categories Block: hierarchical Dropdown (#13567)
  Docs: Add clarification about git workflow (#13534)
  Plugin: Remove `user_can_richedit` filtering (#13608)
  eslint-plugin: Add rule `no-unused-vars-before-return` (#12828)
  Image settings button (#13597)
  Fixed wording for the color picker saturation (#13479)

# Conflicts:
#	packages/block-library/src/image/edit.native.js

@etoledom etoledom deleted the rnmobile/bottom-sheet-component branch Feb 1, 2019

@youknowriad youknowriad added this to the 5.0 (Gutenberg) milestone Feb 4, 2019

@etoledom etoledom referenced this pull request Feb 7, 2019

Open

Image settings #202

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment