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] Support percentage in columns #23828

Merged
merged 31 commits into from
Aug 7, 2020
Merged

Conversation

lukewalczak
Copy link
Member

@lukewalczak lukewalczak commented Jul 9, 2020

Fixes / first iteration of: wordpress-mobile/gutenberg-mobile#2197

Description

That PR introduces the first iteration of the column percentage mechanism. It includes:

  • controller to change column width available in column settings and the preview next to the slider:
Screenshot 2020-07-27 at 14 54 56
  • columns layout picker:
Screenshot 2020-07-27 at 14 56 14

How has this been tested?

  1. Open mobile app
  2. Add Columns block
    3. Expect to see bottom sheet with layout picker
  3. Choose one of the options e.g: 33/33/33
  4. Select the first column
  5. Open its settings
  6. Change the value e.g. to 90
    8. Expect that fill level in the preview (to the left of a slider) increased
  7. Close bottom sheet and select the second column
  8. Open its settings
  9. Press text input (to the right of a slider)
  10. Type value with more than 1 decimal e.g: 55.555555 and press Done
    13. Expect to have value with 1 decimal
  11. Close bottom sheet and switch to HTML mode
    15. Expect that first column has width equal 90 and the second 55.5
  12. Save the post and open it on web
    17. Expect to see columns displayed proportionally to set the width values

Screenshots

Kapture 2020-07-27 at 15 12 28

Types of changes

New feature/functionality - columns percentage

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Jul 9, 2020

Size Change: 0 B

Total Size: 1.15 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.97 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 125 kB 0 B
build/block-editor/style-rtl.css 10.6 kB 0 B
build/block-editor/style.css 10.6 kB 0 B
build/block-library/editor-rtl.css 7.59 kB 0 B
build/block-library/editor.css 7.59 kB 0 B
build/block-library/index.js 132 kB 0 B
build/block-library/style-rtl.css 7.76 kB 0 B
build/block-library/style.css 7.77 kB 0 B
build/block-library/theme-rtl.css 729 B 0 B
build/block-library/theme.css 730 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.9 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.59 kB 0 B
build/edit-post/style.css 5.59 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 9.38 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@lukewalczak lukewalczak force-pushed the rnmobile/column-percentage branch from bb1c6a8 to 239476a Compare July 10, 2020 11:49
@lukewalczak lukewalczak force-pushed the rnmobile/column-percentage branch from 239476a to 9e03916 Compare July 10, 2020 12:32
@lukewalczak lukewalczak force-pushed the rnmobile/column-percentage branch 4 times, most recently from 7a43e55 to 35338e3 Compare July 21, 2020 15:23
@lukewalczak lukewalczak force-pushed the rnmobile/column-percentage branch from 35338e3 to b11bee4 Compare July 24, 2020 09:09
@lukewalczak lukewalczak force-pushed the rnmobile/column-percentage branch from ce94d64 to fbad1ac Compare July 27, 2020 12:50
@lukewalczak lukewalczak self-assigned this Jul 27, 2020
@lukewalczak lukewalczak requested review from geriux and dratwas July 27, 2020 13:13
@lukewalczak lukewalczak marked this pull request as ready for review July 27, 2020 13:15
@lukewalczak lukewalczak added [Block] Columns Affects the Columns Block Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) labels Jul 27, 2020
@lukewalczak
Copy link
Member Author

UPDATES

  • Changed Cancel button color
  • Limit the slider adjustments to whole numbers (while still allowing decimals in the text input)
light dark
Screenshot 2020-08-03 at 10 29 11 Screenshot 2020-08-03 at 10 29 06

@lukewalczak
Copy link
Member Author

UPDATES

  • Rename label from Column percentage to Width

Screenshot 2020-08-04 at 11 27 34

@lukewalczak lukewalczak force-pushed the rnmobile/column-percentage branch from 8eb8bb9 to 249a71c Compare August 7, 2020 13:54
@lukewalczak lukewalczak force-pushed the rnmobile/column-percentage branch from 89596cc to c569bd2 Compare August 7, 2020 14:01
@lukewalczak lukewalczak merged commit 62d0e11 into master Aug 7, 2020
@lukewalczak lukewalczak deleted the rnmobile/column-percentage branch August 7, 2020 14:46
@github-actions github-actions bot added this to the Gutenberg 8.8 milestone Aug 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants