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

[Mobile] Create cover block with custom colour (without an image) #23870

Merged
merged 52 commits into from
Jul 24, 2020
Merged
Changes from 1 commit
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
c608052
Create cover block with only colour (from a default palette)
Jul 9, 2020
508f015
Added custom colour swatch
Jul 10, 2020
96b1582
Custom Color picker action
Jul 10, 2020
8c13787
Hide the block settings button
Jul 10, 2020
6e83663
Use noop instead of empty arrow function
Jul 13, 2020
3919a7d
Use default settings colors
Jul 13, 2020
a2eee4b
WIP: Changes Based on design feedback
Jul 13, 2020
83668c7
Merge branch 'master' into rnmobile/23831_Cover_Only_color
Jul 14, 2020
c71346a
Merge branch 'master' into rnmobile/23831_Cover_Only_color
Jul 14, 2020
a41dc37
Merge branch 'rnmobile/23831_Cover_Only_color' into rnmobile/Cover_wi…
Jul 14, 2020
0cbe0c1
Show palette with both hardcoded and theme colors
Jul 14, 2020
a0cd93b
Customise media placeholder styles only for the cover component
Jul 14, 2020
30d5ccb
Merge branch 'rnmobile/23831_Cover_Only_color' into rnmobile/Cover_wi…
Jul 14, 2020
7aec919
Pass only modified media-placeholder styles
Jul 15, 2020
a152a4a
Pass only modified color-palette styles
Jul 15, 2020
53d5435
Merge branch 'rnmobile/23831_Cover_Only_color' into rnmobile/Cover_wi…
Jul 15, 2020
787b462
Fixes lint issue
Jul 15, 2020
9929516
Updated color palette height
Jul 16, 2020
485cef9
Updated color palette height
Jul 16, 2020
91ff055
Use only theme colors
Jul 16, 2020
3babed3
Merge branch 'rnmobile/23831_Cover_Only_color' into rnmobile/Cover_wi…
Jul 16, 2020
a6a1f3f
Merge branch 'master' into rnmobile/23831_Cover_Only_color
Jul 17, 2020
97cc951
Fixes Dark mode styling bug
Jul 17, 2020
ecf4147
Merge branch 'rnmobile/23831_Cover_Only_color' into rnmobile/Cover_wi…
Jul 17, 2020
60f248d
Use noop instead of empty arrow functions
Jul 17, 2020
9036c9e
Simplified media-placeholder props
Jul 17, 2020
7d6219f
Removed unnecessary style
Jul 17, 2020
201c7d6
Revert "Removed unnecessary style"
Jul 17, 2020
77b06a8
Merge branch 'rnmobile/23831_tmp' into rnmobile/Cover_with_custom_color
Jul 17, 2020
65fc25e
Merge branch 'rnmobile/23831_tmp' into rnmobile/Cover_with_custom_color
Jul 17, 2020
be77f4f
Fixes style issue
Jul 17, 2020
2bfd357
Added missing callbacks
Jul 17, 2020
e5d0a77
Added bottom label
Jul 17, 2020
56449db
Removes unnecessary function
Jul 17, 2020
8d2237d
Merge branch 'master' into rnmobile/Cover_with_custom_color
Jul 19, 2020
7179432
Apply custom color picker color
Jul 19, 2020
d8fbac9
Removes unused import
Jul 19, 2020
dc664fb
Lint issues and cleanup
Jul 20, 2020
0a37400
Merge branch 'master' into rnmobile/Cover_with_custom_color
Jul 22, 2020
0a72e9f
Design fixes
Jul 22, 2020
7a4f90d
Renamed prop to declare usage more clearly
Jul 22, 2020
8e2c894
Lint Issue
Jul 22, 2020
537211c
PR review fixes
Jul 23, 2020
df25f6b
Extra fixes to avoid inconsistent states
Jul 23, 2020
054a6b5
Lint fix and comment
Jul 23, 2020
852f9a4
Revert "Lint fix and comment"
Jul 24, 2020
f529dae
Revert "Extra fixes to avoid inconsistent states"
Jul 24, 2020
a623b1b
Review changes
Jul 24, 2020
b4ab716
Android hardware button handling
Jul 24, 2020
979e8d4
Merge branch 'master' into rnmobile/Cover_with_custom_color
Jul 24, 2020
a416741
Lint fix
Jul 24, 2020
2ae97d2
Removed unused prop/style
Jul 24, 2020
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
Prev Previous commit
Next Next commit
Revert "Removed unnecessary style"
This reverts commit 7d6219f.
Antonis Lilis committed Jul 17, 2020
commit 201c7d63bb1878529b8293146cd91f10494cca67
3 changes: 3 additions & 0 deletions packages/block-library/src/cover/edit.native.js
Original file line number Diff line number Diff line change
@@ -346,6 +346,9 @@ const Cover = ( {
customColorIndicatorStyles={
styles.paletteColorIndicator
}
customIndicatorWrapperStyles={
styles.paletteCustomIndicatorWrapper
}
setColor={ setColor }
onCustomPress={ noop }
defaultSettings={ coverDefaultPalette }
7 changes: 7 additions & 0 deletions packages/block-library/src/cover/style.native.scss
Original file line number Diff line number Diff line change
@@ -87,6 +87,13 @@
height: 32px;
}

.paletteCustomIndicatorWrapper {
flex-direction: row;
align-items: center;
width: 32px;
height: 32px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
width: 32px;
height: 32px;
width: $grid-unit-40;
height: $grid-unit-40;

}

.mediaPlaceholderEmptyStateContainer {
height: 300;
}
13 changes: 11 additions & 2 deletions packages/components/src/color-palette/index.native.js
Original file line number Diff line number Diff line change
@@ -43,6 +43,7 @@ function ColorPalette( {
shouldShowCustomIndicatorOption = true,
shouldShowCustomLabel = true,
customColorIndicatorStyles,
customIndicatorWrapperStyles,
} ) {
const customSwatchGradients = [
'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)',
@@ -237,7 +238,10 @@ function ColorPalette( {
} ) }
{ shouldShowCustomIndicator && (
<View
style={ styles.customIndicatorWrapper }
style={ [
styles.customIndicatorWrapper,
customIndicatorWrapperStyles,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we move it to the const since the same styles are used also in other View?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for reviewing this @lukewalczak :)
I agree with all your suggestions and submitted the changes

] }
onLayout={ onCustomIndicatorLayout }
>
<View style={ verticalSeparatorStyle } />
@@ -247,7 +251,12 @@ function ColorPalette( {
accessibilityState={ { selected: isSelectedCustom() } }
accessibilityHint={ accessibilityHint }
>
<View style={ styles.customIndicatorWrapper }>
<View
style={ [
styles.customIndicatorWrapper,
customIndicatorWrapperStyles,
] }
>
<ColorIndicator
withCustomPicker={ ! isGradientSegment }
color={ customIndicatorColor }