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

Add Notice view for Copy/Cut blocks #23113

Conversation

pinarol
Copy link
Contributor

@pinarol pinarol commented Jun 12, 2020

Description

Fixes wordpress-mobile/gutenberg-mobile#2326
gutenberg-mobile PR wordpress-mobile/gutenberg-mobile#2379

Target PR that is associated with the target branch rnmobile/copy-duplicate-blocks: #23110

This PR adds a Notice view to show some small, self-dismissing messages at the top of the page. Plus, integrates it with Copy, Cut events.

Colors: Same colors with Tooltip.
Timeout: 3secs before self dismissing
Height: 30px

Test:

After copying/cutting a block:

WPiOS:

  • Notice is showing
  • Self dismissing within 3 seconds
  • Dismissing immediately when tapped
  • Width adjusts for landscape/portrait
  • Sequential notices are stacked

WPAndroid:

  • Notice is showing
  • Self dismissing within 3 seconds
  • Dismissing immediately when tapped
  • Width adjusts for landscape/portrait
  • Sequential notices are stacked

Screenshots

👇👇👇
Click here to watch the video.
👆👆👆

Light Mode

IMG_4319

Dark Mode

IMG_4316

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 Jun 12, 2020

Size Change: 0 B

Total Size: 1.13 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.77 kB 0 B
build/block-directory/style-rtl.css 892 B 0 B
build/block-directory/style.css 892 B 0 B
build/block-editor/index.js 106 kB 0 B
build/block-editor/style-rtl.css 11.8 kB 0 B
build/block-editor/style.css 11.8 kB 0 B
build/block-library/editor-rtl.css 7.88 kB 0 B
build/block-library/editor.css 7.89 kB 0 B
build/block-library/index.js 127 kB 0 B
build/block-library/style-rtl.css 7.72 kB 0 B
build/block-library/style.css 7.72 kB 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 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.1 kB 0 B
build/components/index.js 195 kB 0 B
build/components/style-rtl.css 19.5 kB 0 B
build/components/style.css 19.5 kB 0 B
build/compose/index.js 9.31 kB 0 B
build/core-data/index.js 11.4 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.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.17 kB 0 B
build/edit-navigation/index.js 8.25 kB 0 B
build/edit-navigation/style-rtl.css 918 B 0 B
build/edit-navigation/style.css 919 B 0 B
build/edit-post/index.js 303 kB 0 B
build/edit-post/style-rtl.css 5.6 kB 0 B
build/edit-post/style.css 5.6 kB 0 B
build/edit-site/index.js 15.5 kB 0 B
build/edit-site/style-rtl.css 2.96 kB 0 B
build/edit-site/style.css 2.96 kB 0 B
build/edit-widgets/index.js 9.34 kB 0 B
build/edit-widgets/style-rtl.css 2.4 kB 0 B
build/edit-widgets/style.css 2.4 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.8 kB 0 B
build/editor/style-rtl.css 4.26 kB 0 B
build/editor/style.css 4.27 kB 0 B
build/element/index.js 4.64 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 502 B 0 B
build/format-library/style.css 502 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 710 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.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 5.3 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.41 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 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 14.8 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 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

@pinarol pinarol self-assigned this Jun 12, 2020
@pinarol pinarol added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Jun 12, 2020
@geriux
Copy link
Member

geriux commented Jun 12, 2020

This is looking good! 👏 Nice work 🎉 just left a couple of messages and some are optional =D

@pinarol pinarol requested a review from geriux June 12, 2020 16:07
Copy link
Member

@geriux geriux left a comment

Choose a reason for hiding this comment

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

Thank you for the changes! LGTM! Nice work 🙌

@geriux geriux merged commit e22dd0d into rnmobile/copy-duplicate-blocks Jun 12, 2020
@geriux geriux deleted the rnmobile/copy-duplicate-blocks-plus-notices branch June 12, 2020 16:15
geriux added a commit that referenced this pull request Jun 30, 2020
* RNMobile - Copy / Duplicate functionality and Menu Inserter refactor: Move items rendering to its own component

* RNMobile - Store selector fix after merge

* RNMobile - Cut feature

* RNMobile - Verify if block can be inserted from clipboard

* RNMobile - Cut functionality

* RNMobile - Remove unused async

* Add Notice view for Copy/Cut blocks (#23113)

* Add notices

* Remove duplicate function

* Fix errors

* Update NoticeList

* Fix default val

* Bind on notice hidden

* Add timer and fix formatting

* Prevent NoticeList from appearing inside nested blocks

* Update animation

* RNMobile - Notice - Fix animation

* Add onDimensionsChange listener

* RNMobile - FloatingToolbar - Disable pointer Events if its not visible

* Make zIndex values get effective

* Update packages/components/src/notice/index.native.js

Co-authored-by: Gerardo Pacheco <[email protected]>

* Update packages/components/src/notice/list.native.js

Co-authored-by: Gerardo Pacheco <[email protected]>

* Simplify reducer

Co-authored-by: Gerardo Pacheco <[email protected]>

* RNMobile - Fix lint error and change the default value of the Notice component animation

* Mobile - Notice component - Blur effect for iOS and change styling for Android

* Mobile - Add react-native-blur

* Mobile - Mock @react-native-community/blur

* Mobile - Update Podfile lock

Co-authored-by: Pinar Olguc <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
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.

None yet

2 participants