feat(ui): the toolbox became vertical #2014
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* FIx mobile popover fixed positioning * Add mobile popover overlay * Hide mobile popover on scroll * Alter toolbox buttons hover * Fix closing popover on overlay click * Tests fix * Fix onchange test * restore focus after toolbox closing by ESC * don't move toolbar by block-hover on mobile Resolves #1972 * popover mobile styles improved * Cleanup * Remove scroll event listener * Lock scroll on mobile * don't show shortcuts in mobile popover * Change data attr name * Remove unused styles * Remove unused listeners * disable hover on mobile popover * Scroll fix * Lint * Revert "Scroll fix" This reverts commit 82deae5. * Return back background color for active state of toolbox buttons Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
gohabereg
requested changes
Apr 11, 2022
src/components/flipper.ts
Outdated
Comment on lines
275
to
276
| // eslint-disable-next-line @typescript-eslint/ban-ts-ignore | ||
| // @ts-ignore |
Comment on lines
517
to
519
| if (_.isMobile()) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
Can we just do not subscribe on mobile?
src/components/polyfills.ts
Outdated
Comment on lines
105
to
111
| // eslint-disable-next-line @typescript-eslint/ban-ts-ignore | ||
| // @ts-ignore | ||
| if (!Element.prototype.scrollIntoViewIfNeeded) { | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-ignore | ||
| // @ts-ignore | ||
| Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded): void { | ||
| centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded; |
There was a problem hiding this comment.
You can extends Element interface to avoid ts-ignore here
src/components/ui/toolbox.ts
Outdated
|
|
||
| this.addTools(); | ||
| this.enableFlipper(); | ||
| this.popover.on(PopoverEvent.OverlayClicked, () => { |
src/components/utils.ts
Outdated
| /** | ||
| * True if screen has mobile size | ||
| */ | ||
| export function isMobile(): boolean { |
There was a problem hiding this comment.
I suggest to rename the function as it doesn't return what expected. Something like isNarrowScreen
There was a problem hiding this comment.
renamed to isMobileScreen
Comment on lines
+120
to
+133
| popover: 'ce-popover', | ||
| popoverOpened: 'ce-popover--opened', | ||
| itemsWrapper: 'ce-popover__items', | ||
| item: 'ce-popover__item', | ||
| itemHidden: 'ce-popover__item--hidden', | ||
| itemFocused: 'ce-popover__item--focused', | ||
| itemLabel: 'ce-popover__item-label', | ||
| itemIcon: 'ce-popover__item-icon', | ||
| itemSecondaryLabel: 'ce-popover__item-secondary-label', | ||
| noFoundMessage: 'ce-popover__no-found', | ||
| noFoundMessageShown: 'ce-popover__no-found--shown', | ||
| popoverOverlay: 'ce-popover__overlay', | ||
| popoverOverlayHidden: 'ce-popover__overlay--hidden', | ||
| documentScrollLocked: 'ce-scroll-locked', |
There was a problem hiding this comment.
We should really think of using css modules
There was a problem hiding this comment.
We will, at some of the next updates
src/components/utils/popover.ts
Outdated
| private createItem(item: PopoverItem): HTMLElement { | ||
| const el = Dom.make('div', Popover.CSS.item); | ||
|
|
||
| el.setAttribute('data-item-name', item.name); |
There was a problem hiding this comment.
Suggested change
| el.setAttribute('data-item-name', item.name); | |
| el.dataset.itemName = item.name; |
src/styles/input.css
Outdated
| @@ -0,0 +1,46 @@ | |||
| img, video, audio, canvas, input, | |||
* Replace visibility property with display for hiding popover * Disable arrow right and left keys for popover * Revert "Replace visibility property with display for hiding popover" This reverts commit af521cf. * Hide popover via setting max-height to 0 to fix animation in safari * Remove redundant condition
gohabereg
reviewed
Apr 16, 2022
src/components/utils/popover.ts
Outdated
|
|
||
| if (item.secondaryLabel) { | ||
| el.appendChild(Dom.make('div', Popover.CSS.itemSecondaryLabel, { | ||
| innerHTML: item.secondaryLabel, |
There was a problem hiding this comment.
Do we really need innerHTML here? Can we use textCintent?
src/styles/input.css
Outdated
| @@ -0,0 +1,46 @@ | |||
| img, video, audio, canvas, input, | |||
* Change popover opening direction based on available space below it * Update check * Use cacheable decorator
Co-authored-by: George Berezhnoy <gohabereg@users.noreply.github.com>
…/editor.js into feat/vertical-toolbox
because I have no idea what does it mean
gohabereg
approved these changes
Apr 19, 2022
ilyamore88
approved these changes
Apr 19, 2022
also, improve popover padding for two reasons: - make the popover more consistent with the Table tool popover (in future, it can be done with the same api method) - make popover looks better
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is the second part of the big UI update called "Unified Toolbox". See the Roadmap for more details.
In this iteration, the Toolbox became a vertical list.
Changelog
Popoverutility has been created. It will be used for all vertical lists.Toolboxnow uses thePopoverto display the tools listPlusbutton will be always shown (previously, it appears only for empty blocks)Toolbarwon't move on hover at mobile viewports. Resolves [Bug] hover toolbar doesn't work on mobile responsive size layout #1972Flippernow scrolls to the focused item usingscrollIntoViewIfNeededAlso, see the Discussion #1811
Thanks to @TatianaFomina for finishing the PR so fast.