RNMobile - Starter Page Templates - Picker and preview design updates

WordPress · Mar 17, 2020 · abdeae5 · abdeae5
1 parent c77cef6
commit abdeae5
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 23 deletions.
diff --git a/packages/block-editor/src/components/page-template-picker/button.native.js b/packages/block-editor/src/components/page-template-picker/button.native.js
@@ -1,25 +1,29 @@
 /**
  * External dependencies
  */
-import { TouchableOpacity, Text } from 'react-native';
+import { TouchableOpacity, Text, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
-const PickerButton = ( { icon, label, onPress, getStylesFromColorScheme } ) => {
-	const butonStyles = getStylesFromColorScheme(
+const PickerButton = ( { icon, label, onPress } ) => {
+	const butonWrapperStyles = usePreferredColorSchemeStyle(
+		styles.buttonWrapper,
+		styles.buttonWrapperDark
+	);
+	const buttonStyles = usePreferredColorSchemeStyle(
 		styles.button,
 		styles.buttonDark
 	);
-	const butonTextStyles = getStylesFromColorScheme(
+	const buttonTextStyles = usePreferredColorSchemeStyle(
 		styles.buttonText,
 		styles.buttonTextDark
 	);
@@ -30,12 +34,14 @@ const PickerButton = ( { icon, label, onPress, getStylesFromColorScheme } ) => {
 			accessibilityHint={ __( 'Double tap to select layout' ) }
 			activeOpacity={ 0.7 }
 			onPress={ onPress }
-			style={ butonStyles }
+			style={ butonWrapperStyles }
 		>
-			<Text style={ styles.buttonIcon }>{ icon }</Text>
-			<Text style={ butonTextStyles }>{ label }</Text>
+			<View style={ buttonStyles }>
+				<Text style={ styles.buttonIcon }>{ icon }</Text>
+				<Text style={ buttonTextStyles }>{ label }</Text>
+			</View>
 		</TouchableOpacity>
 	);
 };
 
-export default withPreferredColorScheme( PickerButton );
+export default PickerButton;
diff --git a/...components/page-template-picker/picker.js → ...nts/page-template-picker/picker.native.js b/...components/page-template-picker/picker.js → ...nts/page-template-picker/picker.native.js
@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * External dependencies
  */
 import { logUserEvent, userEvents } from 'react-native-gutenberg-bridge';
+import { Animated } from 'react-native';
 
 /**
  * Internal dependencies
@@ -17,8 +18,11 @@ import Container from './container';
 import getDefaultTemplates from './default-templates';
 import Preview from './preview';
 
+const PICKER_ANIMATION_DELAY = 500;
+
 const __experimentalPageTemplatePicker = ( {
 	templates = getDefaultTemplates(),
+	visible,
 } ) => {
 	const { editPost } = useDispatch( 'core/editor' );
 	const { title } = useSelect( ( select ) => {
@@ -30,6 +34,16 @@ const __experimentalPageTemplatePicker = ( {
 	} );
 
 	const [ templatePreview, setTemplatePreview ] = useState();
+	const [ pickerVisible, setPickerVisible ] = useState( visible );
+	const contentOpacity = new Animated.Value( 1 );
+
+	useEffect( () => {
+		if ( ! visible ) {
+			onHidePicker();
+		} else {
+			setPickerVisible( true );
+		}
+	}, [ visible ] );
 
 	const onApply = () => {
 		editPost( {
@@ -42,8 +56,22 @@ const __experimentalPageTemplatePicker = ( {
 		setTemplatePreview( undefined );
 	};
 
+	const onHidePicker = () => {
+		Animated.timing( contentOpacity, {
+			toValue: 0,
+			duration: 300,
+			delay: PICKER_ANIMATION_DELAY,
+		} ).start( () => {
+			setPickerVisible( false );
+		} );
+	};
+
+	if ( ! pickerVisible ) {
+		return null;
+	}
+
 	return (
-		<>
+		<Animated.View style={ [ { opacity: contentOpacity } ] }>
 			<Container>
 				{ templates.map( ( template ) => (
 					<Button
@@ -67,7 +95,7 @@ const __experimentalPageTemplatePicker = ( {
 				onDismiss={ () => setTemplatePreview( undefined ) }
 				onApply={ onApply }
 			/>
-		</>
+		</Animated.View>
 	);
 };
 

diff --git a/packages/block-editor/src/components/page-template-picker/preview.native.js b/packages/block-editor/src/components/page-template-picker/preview.native.js
@@ -50,6 +50,10 @@ const Preview = ( props ) => {
 		styles.previewContainer,
 		styles.previewContainerDark
 	);
+	const previewContentStyle = usePreferredColorSchemeStyle(
+		styles.previewContent,
+		styles.previewContentDark
+	);
 
 	if ( template === undefined ) {
 		return null;
@@ -79,7 +83,9 @@ const Preview = ( props ) => {
 					title={ template.name }
 					subtitle={ __( 'Template Preview' ) }
 				/>
-				<BlockPreview blocks={ template.blocks } />
+				<View style={ previewContentStyle }>
+					<BlockPreview blocks={ template.blocks } />
+				</View>
 			</SafeAreaView>
 		</Modal>
 	);

diff --git a/packages/block-editor/src/components/page-template-picker/styles.native.scss b/packages/block-editor/src/components/page-template-picker/styles.native.scss
@@ -6,12 +6,21 @@
 	padding: 0 12px;
 }
 
-.button {
-	background-color: rgba($black, 0.04);
+.buttonWrapper {
+	background-color: $white;
 	border-radius: 20px;
-	flex-direction: row;
 	margin-right: 8px;
+	overflow: hidden;
+}
+
+.buttonWrapperDark {
+	background-color: $black;
+}
+
+.button {
+	background-color: rgba($black, 0.04);
 	padding: 9px 18px 9px 14px;
+	flex-direction: row;
 	align-items: center;
 }
 
@@ -41,6 +50,15 @@
 }
 
 .previewContainerDark {
+	background-color: #0f1518;
+}
+
+.previewContent {
+	flex: 1;
+	background-color: $white;
+}
+
+.previewContentDark {
 	background-color: $black;
 }
 

diff --git a/packages/components/src/mobile/modal-header-bar/styles.native.scss b/packages/components/src/mobile/modal-header-bar/styles.native.scss
@@ -56,5 +56,5 @@
 }
 
 .separatorDark {
-	background-color: $gray-70;
+	background-color: #2d2d2d;
 }
diff --git a/packages/edit-post/src/components/layout/index.native.js b/packages/edit-post/src/components/layout/index.native.js
@@ -94,8 +94,9 @@ class Layout extends Component {
 
 	render() {
 		const {
-			mode,
 			getStylesFromColorScheme,
+			isPage,
+			mode,
 			showPageTemplatePicker,
 		} = this.props;
 
@@ -143,8 +144,10 @@ class Layout extends Component {
 						parentHeight={ this.state.rootViewHeight }
 						style={ toolbarKeyboardAvoidingViewStyle }
 					>
-						{ showPageTemplatePicker && (
-							<__experimentalPageTemplatePicker />
+						{ isPage && (
+							<__experimentalPageTemplatePicker
+								visible={ showPageTemplatePicker }
+							/>
 						) }
 						<Header />
 						<BottomSheetSettings />
@@ -157,12 +160,14 @@ class Layout extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { __unstableIsEditorReady: isEditorReady } = select(
-			'core/editor'
-		);
+		const {
+			__unstableIsEditorReady: isEditorReady,
+			getCurrentPostType,
+		} = select( 'core/editor' );
 		const { getEditorMode } = select( 'core/edit-post' );
 
 		return {
+			isPage: getCurrentPostType(),
 			isReady: isEditorReady(),
 			mode: getEditorMode(),
 		};