forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a vertical toolbar for zoom out mode (WordPress#60123)
* position toolbar popover to the left and change colors on zoomed-out mode * Make zoom out toolbar component * Create zoom out toolbar * Cleanup linting errors * Add orientation to toolbar component * css for vertical toolbars * Add similar classes to existing toolbar * Use correct placement for zoom out toolbar popover * remove cs that shouldn't be needed * Remove icon and block toolbar vertical css and apply just to base component * made toolbar unstyled and fixed stray background * Update Changelog * removed transparent background from component css * Update packages/components/src/toolbar/toolbar/types.ts Co-authored-by: Lena Morita <[email protected]> * document new prop for the toolbar component * remove white background * increase margin width * Also include the non-accessible toolbar in the vertical CSS rules * Move styles to the zoom out toolbar CSS * revert * avoid shifting of the toolbar to the right side * fix focus outline * moved vertical styles to toolbar component * missing display flex * removed orientation from NavigableToolbar props * Revert "removed orientation from NavigableToolbar props" This reverts commit 59e5bdb. * Use ToolbarButton instead of Button for Shuffle * added classes to avoid using component selectors --------- Co-authored-by: Jerry Jones <[email protected]> Co-authored-by: Lena Morita <[email protected]> Co-authored-by: Ben Dwyer <[email protected]>
- Loading branch information
1 parent
0253122
commit e4a9ad1
Showing
13 changed files
with
265 additions
and
82 deletions.
There are no files selected for viewing
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
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
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
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
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
49 changes: 49 additions & 0 deletions
49
packages/block-editor/src/components/block-tools/zoom-out-popover.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import clsx from 'clsx'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import BlockPopover from '../block-popover'; | ||
| import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props'; | ||
| import useSelectedBlockToolProps from './use-selected-block-tool-props'; | ||
| import ZoomOutToolbar from './zoom-out-toolbar'; | ||
|
|
||
| export default function ZoomOutPopover( { clientId, __unstableContentRef } ) { | ||
| const { | ||
| capturingClientId, | ||
| isInsertionPointVisible, | ||
| lastClientId, | ||
| rootClientId, | ||
| } = useSelectedBlockToolProps( clientId ); | ||
|
|
||
| const popoverProps = useBlockToolbarPopoverProps( { | ||
| contentElement: __unstableContentRef?.current, | ||
| clientId, | ||
| } ); | ||
|
|
||
| // Override some of the popover props for the zoom-out toolbar. | ||
| const props = { | ||
| ...popoverProps, | ||
| placement: 'left-start', | ||
| flip: false, | ||
| }; | ||
|
|
||
| return ( | ||
| <BlockPopover | ||
| clientId={ capturingClientId || clientId } | ||
| bottomClientId={ lastClientId } | ||
| className={ clsx( 'zoom-out-toolbar-popover', { | ||
| 'is-insertion-point-visible': isInsertionPointVisible, | ||
| } ) } | ||
| resize={ false } | ||
| { ...props } | ||
| > | ||
| <ZoomOutToolbar | ||
| clientId={ clientId } | ||
| rootClientId={ rootClientId } | ||
| /> | ||
| </BlockPopover> | ||
| ); | ||
| } |
Oops, something went wrong.