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.

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

[RNMobile] Try dark mode (iOS) #17067

Merged
merged 24 commits into from
Aug 23, 2019
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
7ebe160
Adding dark mode component implemented on list and list block
etoledom Aug 14, 2019
8a4a8a4
Adding DarkMode handling to RichText, ToolBar and SafeArea
etoledom Aug 14, 2019
8958ff6
Mobile: Using DarkMode as HOC
etoledom Aug 16, 2019
a1a26a5
Merge commit 'bbe692b' into rnmobile/try-dark-mode
etoledom Aug 20, 2019
8bb6d0e
iOS DarkMode: Modified colors on block list and block container
etoledom Aug 20, 2019
aa61ee7
iOS DarkMode: Improved Header Toolbar colors
etoledom Aug 20, 2019
d3c7eef
iOS DarkMode: Removing background from buttons
etoledom Aug 20, 2019
0d8f630
iOS DarkMode warning and unsupported
etoledom Aug 20, 2019
580b63b
iOS DarkMode: MediaPlaceholder
etoledom Aug 21, 2019
43bc042
iOS DarkMode: BottomSheets
etoledom Aug 21, 2019
d79f027
iOS DarkMode: Inserter
etoledom Aug 21, 2019
c096c3c
iOS DarkMode: DefaultBlockAppender
etoledom Aug 21, 2019
c826cf1
iOS DarkMode: PostTite
etoledom Aug 21, 2019
16ad3d8
Update hardcoded colors with variables
etoledom Aug 21, 2019
8654cb1
iOS DarkMode: Fix bottom-sheet cell value color
etoledom Aug 21, 2019
2809ebf
iOS DarkMode: More - PageBreak - Add Block Here
etoledom Aug 21, 2019
67cefed
iOS DarkMode: Better text color
etoledom Aug 22, 2019
8cb3708
iOS Darkmode: Code block
etoledom Aug 22, 2019
bf2a1b5
iOS DarkMode: HTML View
etoledom Aug 22, 2019
3f71f3d
iOS DarkMode: Improve colors on SafeArea
etoledom Aug 22, 2019
5aee1ce
Fix toolbar not avoiding keyboard regression
etoledom Aug 23, 2019
852fa05
Fix native unit tests
etoledom Aug 23, 2019
327d545
Fix gutenberg-mobile unit tests
etoledom Aug 23, 2019
de173df
Adding RNDarkMode mocks
etoledom Aug 23, 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
Next Next commit
Adding dark mode component implemented on list and list block
  • Loading branch information
etoledom committed Aug 14, 2019
commit 7ebe160815a1556c0b970c60179fe883b106b2ed
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { getBlockType } from '@wordpress/blocks';
import { __, sprintf } from '@wordpress/i18n';
import { useStyle, DarkMode } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -25,6 +26,8 @@ import BlockInvalidWarning from './block-invalid-warning';
import BlockMobileToolbar from './block-mobile-toolbar';

class BlockListBlock extends Component {
static contextType = DarkMode.Context;

constructor() {
super( ...arguments );

Expand Down Expand Up @@ -113,6 +116,7 @@ class BlockListBlock extends Component {
title,
} = this.props;

const blockContainerStyle = useStyle( styles.blockContainer, styles.blockContainerDark );
const borderColor = isSelected ? focusedBorderColor : 'transparent';

const accessibilityLabel = this.getAccessibilityLabel();
Expand All @@ -127,7 +131,7 @@ class BlockListBlock extends Component {
{ showTitle && this.renderBlockTitle() }
<View
accessibilityLabel={ accessibilityLabel }
style={ [ ! isSelected && styles.blockContainer, isSelected && styles.blockContainerFocused ] }
style={ [ ! isSelected && blockContainerStyle, isSelected && styles.blockContainerFocused ] }
>
{ isValid && this.getBlockForType() }
{ ! isValid &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
padding-bottom: 12px;
}

.blockContainerDark {
background-color: #1c1c1e;
}

.blockContainerFocused {
background-color: $white;
padding-left: 16px;
Expand Down
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, DarkMode } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -24,6 +24,8 @@ import DefaultBlockAppender from '../default-block-appender';
const innerToolbarHeight = 44;

export class BlockList extends Component {
static contextType = DarkMode.Context;

constructor() {
super( ...arguments );

Expand Down Expand Up @@ -103,7 +105,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 Down
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 Down
22 changes: 22 additions & 0 deletions packages/components/src/mobile/dark-mode/index.native.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* External dependencies
*/
import { eventEmitter, initialMode, DarkModeContext } from 'react-native-dark-mode';

let mode = initialMode;

eventEmitter.on( 'currentModeChanged', ( newMode ) => {
mode = newMode;
} );

export function useStyle( light, dark ) {
const finalDark = {
...light,
...dark,
};

return mode === 'dark' ? finalDark : light;
}

export const DarkMode = {};
DarkMode.Context = DarkModeContext;