Skip to content

Commit

Permalink
[RNMobile] Native mobile release v1.11.0 (#17181)
Browse files Browse the repository at this point in the history
* [RNMobile] Fix crash when adding separator

* Build: remove global install of latest npm since we want to use the paired node/npm version (#17134)

* Build: remove global install of latest npm since we want to use the paired node/npm version
* Also update travis to remove --latest-npm flag

* [RNMobile] Try dark mode (iOS) (#17067)

* Adding dark mode component implemented on list and list block

* Adding DarkMode handling to RichText, ToolBar and SafeArea

* Mobile: Using DarkMode as HOC

* iOS DarkMode: Modified colors on block list and block container

* iOS DarkMode: Improved Header Toolbar colors

* iOS DarkMode: Removing background from buttons

* iOS DarkMode warning and unsupported

* iOS DarkMode: MediaPlaceholder

* iOS DarkMode: BottomSheets

* iOS DarkMode: Inserter

* iOS DarkMode: DefaultBlockAppender

* iOS DarkMode: PostTite

* Update hardcoded colors with variables

* iOS DarkMode: Fix bottom-sheet cell value color

* iOS DarkMode: More - PageBreak - Add Block Here

* iOS DarkMode: Better text color

* iOS Darkmode: Code block

* iOS DarkMode: HTML View

* iOS DarkMode: Improve colors on SafeArea

* Fix toolbar not avoiding keyboard regression

* Fix native unit tests

* Fix gutenberg-mobile unit tests

* Adding RNDarkMode mocks

* RNMobile: Fix crash when viewing HTML on iOS

* [RNMobile] Remove toolbar from html view

* [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186)

* Fix MaxListenersExceededWarning caused by dark-mode event emitter

* Checking for setMaxListeners trying to avoid CI error

* Adding remove listener to DarkMode HOC

* DarkMode: Binding this.onModeChanged to `this`

* DarkMode: Adding conditional needed to pass UI Tests on CI

* Fix focus title on new posts regression (#17180)

* BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193)
  • Loading branch information
etoledom authored Aug 28, 2019
1 parent ab70dc2 commit 635108e
Show file tree
Hide file tree
Showing 53 changed files with 507 additions and 145 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,13 @@
}

.blockContainer {
background-color: $white;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
padding-bottom: 12px;
}

.blockContainerFocused {
background-color: $white;
padding-left: 16px;
padding-right: 16px;
padding-top: 12px;
Expand Down
16 changes: 10 additions & 6 deletions packages/block-editor/src/components/block-list/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/components';
import { KeyboardAwareFlatList, ReadableContentView, useStyle, withTheme } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -103,7 +103,7 @@ export class BlockList extends Component {
innerRef={ this.scrollViewInnerRef }
extraScrollHeight={ innerToolbarHeight + 10 }
keyboardShouldPersistTaps="always"
style={ styles.list }
style={ useStyle( styles.list, styles.listDark, this.context ) }
data={ this.props.blockClientIds }
extraData={ [ this.props.isFullyBordered ] }
keyExtractor={ identity }
Expand All @@ -126,6 +126,7 @@ export class BlockList extends Component {
}

renderItem( { item: clientId, index } ) {
const blockHolderFocusedStyle = useStyle( styles.blockHolderFocused, styles.blockHolderFocusedDark, this.props.theme );
const { shouldShowBlockAtIndex, shouldShowInsertionPoint } = this.props;
return (
<ReadableContentView>
Expand All @@ -138,18 +139,20 @@ export class BlockList extends Component {
rootClientId={ this.props.rootClientId }
onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
borderStyle={ this.blockHolderBorderStyle() }
focusedBorderColor={ styles.blockHolderFocused.borderColor }
focusedBorderColor={ blockHolderFocusedStyle }
/> ) }
</ReadableContentView>
);
}

renderAddBlockSeparator() {
const lineStyle = useStyle( styles.lineStyleAddHere, styles.lineStyleAddHereDark, this.props.theme );
const labelStyle = useStyle( styles.labelStyleAddHere, styles.labelStyleAddHereDark, this.props.theme );
return (
<View style={ styles.containerStyleAddHere } >
<View style={ styles.lineStyleAddHere }></View>
<Text style={ styles.labelStyleAddHere } >{ __( 'ADD BLOCK HERE' ) }</Text>
<View style={ styles.lineStyleAddHere }></View>
<View style={ lineStyle }></View>
<Text style={ labelStyle } >{ __( 'ADD BLOCK HERE' ) }</Text>
<View style={ lineStyle }></View>
</View>
);
}
Expand Down Expand Up @@ -228,5 +231,6 @@ export default compose( [
replaceBlock,
};
} ),
withTheme,
] )( BlockList );

18 changes: 16 additions & 2 deletions packages/block-editor/src/components/block-list/style.native.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
flex: 1;
}

.listDark {
background: #1c1c1e;
}

.switch {
flex-direction: row;
justify-content: flex-start;
Expand All @@ -26,6 +30,10 @@
height: 2px;
}

.lineStyleAddHereDark {
background-color: $gray-50;
}

.labelStyleAddHere {
flex: 1;
text-align: center;
Expand All @@ -34,9 +42,12 @@
font-weight: bold;
}

.labelStyleAddHereDark {
color: $gray-20;
}

.containerStyleAddHere {
flex-direction: row;
background-color: $white;
}

.blockHolderSemiBordered {
Expand All @@ -54,7 +65,6 @@
}

.blockContainerFocused {
background-color: $white;
padding-left: 16;
padding-right: 16;
padding-top: 12;
Expand All @@ -65,6 +75,10 @@
border-color: $gray-lighten-30;
}

.blockHolderFocusedDark {
border-color: $gray-70;
}

.blockListFooter {
height: 80px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
}

.blockContainer {
background-color: $white;
padding-top: 0;
padding-left: 16px;
padding-right: 16px;
Expand Down
12 changes: 7 additions & 5 deletions packages/block-editor/src/components/inserter/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Dropdown, ToolbarButton, Dashicon } from '@wordpress/components';
import { Dropdown, ToolbarButton, Dashicon, withTheme, useStyle } from '@wordpress/components';
import { Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
Expand All @@ -14,10 +14,10 @@ import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
import styles from './style.scss';
import InserterMenu from './menu';

const defaultRenderToggle = ( { onToggle, disabled } ) => (
const defaultRenderToggle = ( { onToggle, disabled, style } ) => (
<ToolbarButton
title={ __( 'Add block' ) }
icon={ ( <Dashicon icon="plus-alt" style={ styles.addBlockButton } color={ styles.addBlockButton.color } /> ) }
icon={ ( <Dashicon icon="plus-alt" style={ style } color={ style.color } /> ) }
onClick={ onToggle }
extraProps={ { hint: __( 'Double tap to add a block' ) } }
isDisabled={ disabled }
Expand Down Expand Up @@ -56,9 +56,10 @@ class Inserter extends Component {
const {
disabled,
renderToggle = defaultRenderToggle,
theme,
} = this.props;

return renderToggle( { onToggle, isOpen, disabled } );
const style = useStyle( styles.addBlockButton, styles.addBlockButtonDark, theme );
return renderToggle( { onToggle, isOpen, disabled, style } );
}

/**
Expand Down Expand Up @@ -118,4 +119,5 @@ export default compose( [
items: inserterItems.filter( ( { name } ) => name !== getUnregisteredTypeHandlerName() ),
};
} ),
withTheme,
] )( Inserter );
14 changes: 9 additions & 5 deletions packages/block-editor/src/components/inserter/menu.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '@wordpress/blocks';
import { withDispatch, withSelect } from '@wordpress/data';
import { withInstanceId, compose } from '@wordpress/compose';
import { BottomSheet, Icon } from '@wordpress/components';
import { BottomSheet, Icon, withTheme, useStyle } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -63,6 +63,9 @@ export class InserterMenu extends Component {
render() {
const numberOfColumns = this.calculateNumberOfColumns();
const bottomPadding = styles.contentBottomPadding;
const modalIconWrapperStyle = useStyle( styles.modalIconWrapper, styles.modalIconWrapperDark, this.props.theme );
const modalIconStyle = useStyle( styles.modalIcon, styles.modalIconDark, this.props.theme );
const modalItemLabelStyle = useStyle( styles.modalItemLabel, styles.modalItemLabelDark, this.props.theme );

return (
<BottomSheet
Expand All @@ -89,12 +92,12 @@ export class InserterMenu extends Component {
accessibilityLabel={ item.title }
onPress={ () => this.props.onSelect( item ) }>
<View style={ styles.modalItem }>
<View style={ styles.modalIconWrapper }>
<View style={ styles.modalIcon }>
<Icon icon={ item.icon.src } fill={ styles.modalIcon.fill } size={ styles.modalIcon.width } />
<View style={ modalIconWrapperStyle }>
<View style={ modalIconStyle }>
<Icon icon={ item.icon.src } fill={ modalIconStyle.fill } size={ modalIconStyle.width } />
</View>
</View>
<Text style={ styles.modalItemLabel }>{ item.title }</Text>
<Text style={ modalItemLabelStyle }>{ item.title }</Text>
</View>
</TouchableHighlight>
}
Expand Down Expand Up @@ -213,4 +216,5 @@ export default compose(
};
} ),
withInstanceId,
withTheme,
)( InserterMenu );
17 changes: 17 additions & 0 deletions packages/block-editor/src/components/inserter/style.native.scss
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@
align-items: center;
}

.modalIconWrapperDark {
background-color: rgba($white, 0.07);
}

.modalIcon {
width: 32px;
height: 32px;
Expand All @@ -45,6 +49,10 @@
fill: $gray-dark;
}

.modalIconDark {
fill: $white;
}

.modalItemLabel {
background-color: transparent;
padding-left: 2;
Expand All @@ -56,9 +64,18 @@
color: $gray-dark;
}

.modalItemLabelDark {
color: $white;
}

.addBlockButton {
color: $blue-wordpress;
border: 2px;
border-radius: 10px;
border-color: $blue-wordpress;
}

.addBlockButtonDark {
color: $blue-30;
border-color: $blue-30;
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ import { View, Text, TouchableWithoutFeedback } from 'react-native';
*/
import { __, sprintf } from '@wordpress/i18n';
import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO } from '@wordpress/block-editor';
import { withTheme, useStyle } from '@wordpress/components';

/**
* Internal dependencies
*/
import styles from './styles.scss';

function MediaPlaceholder( props ) {
const { mediaType, labels = {}, icon, onSelectURL } = props;
const { mediaType, labels = {}, icon, onSelectURL, theme } = props;

const isImage = MEDIA_TYPE_IMAGE === mediaType;
const isVideo = MEDIA_TYPE_VIDEO === mediaType;
Expand Down Expand Up @@ -46,6 +47,9 @@ function MediaPlaceholder( props ) {
accessibilityHint = __( 'Double tap to select a video' );
}

const emptyStateContainerStyle = useStyle( styles.emptyStateContainer, styles.emptyStateContainerDark, theme );
const emptyStateTitleStyle = useStyle( styles.emptyStateTitle, styles.emptyStateTitleDark, theme );

return (
<MediaUpload
mediaType={ mediaType }
Expand All @@ -65,12 +69,12 @@ function MediaPlaceholder( props ) {
open();
} }
>
<View style={ styles.emptyStateContainer }>
<View style={ emptyStateContainerStyle }>
{ getMediaOptions() }
<View style={ styles.modalIcon }>
{ icon }
</View>
<Text style={ styles.emptyStateTitle }>
<Text style={ emptyStateTitleStyle }>
{ placeholderTitle }
</Text>
<Text style={ styles.emptyStateDescription }>
Expand All @@ -83,4 +87,4 @@ function MediaPlaceholder( props ) {
);
}

export default MediaPlaceholder;
export default withTheme( MediaPlaceholder );
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
padding-bottom: 12;
}

.emptyStateContainerDark {
background-color: $background-dark-secondary;
}

.emptyStateTitle {
text-align: center;
margin-top: 8;
Expand All @@ -19,6 +23,10 @@
color: #2e4453;
}

.emptyStateTitleDark {
color: $white;
}

.emptyStateDescription {
text-align: center;
color: $blue-wordpress;
Expand Down
18 changes: 11 additions & 7 deletions packages/block-editor/src/components/warning/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,41 @@ import { View, Text } from 'react-native';
/**
* WordPress dependencies
*/
import { Icon } from '@wordpress/components';
import { Icon, withTheme, useStyle } from '@wordpress/components';
import { normalizeIconObject } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import styles from './style.scss';

function Warning( { title, message, icon, iconClass, ...viewProps } ) {
function Warning( { title, message, icon, iconClass, theme, ...viewProps } ) {
icon = icon && normalizeIconObject( icon );
const internalIconClass = 'warning-icon' + '-' + theme;
const titleStyle = useStyle( styles.title, styles.titleDark, theme );
const messageStyle = useStyle( styles.message, styles.messageDark, theme );

return (
<View
style={ styles.container }
style={ useStyle( styles.container, styles.containerDark, theme ) }
{ ...viewProps }
>
{ icon && (
<View style={ styles.icon }>
<Icon
className={ iconClass || 'warning-icon' }
className={ iconClass || internalIconClass }
icon={ icon && icon.src ? icon.src : icon }
/>
</View>
) }
{ title && (
<Text style={ styles.title }>{ title }</Text>
<Text style={ titleStyle }>{ title }</Text>
) }
{ message && (
<Text style={ styles.message }>{ message }</Text>
<Text style={ messageStyle }>{ message }</Text>
) }
</View>
);
}

export default Warning;
export default withTheme( Warning );
Loading

0 comments on commit 635108e

Please sign in to comment.