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.

Sign up for GitHub

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

[List View]: Improve icon alignments and added scroll when blocks are deeply nested. #46990

Closed
wants to merge 9 commits into from
Closed

[List View]: Improve icon alignments and added scroll when blocks are deeply nested. #46990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f8ed98f
add css scrollbar to off canvas list view
MaggieCabrera Jan 9, 2023
a844c13
refactor list view to align icons to the right
MaggieCabrera Jan 9, 2023
cade5cc
comment cleanup, moved max-width to off canvas only
MaggieCabrera Jan 9, 2023
66a33c3
remove extra wrapper
MaggieCabrera Jan 10, 2023
6e4e7a7
center dots menu
MaggieCabrera Jan 10, 2023
eb3ffce
enable scrollbars on mobile
MaggieCabrera Jan 26, 2023
3168a61
offset the sidebar's padding
MaggieCabrera Jan 26, 2023
b8c6613
vertically center the icons
MaggieCabrera Jan 26, 2023
01f349f
center differently to keep background color to full height
MaggieCabrera Jan 27, 2023
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
13 changes: 9 additions & 4 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,12 +489,9 @@
/* stylelint-enable function-comma-space-after */
}

@mixin custom-scrollbars-on-hover() {
@mixin custom-scrollbars-on-hover($track-color: #1e1e1e, $handle-color: #757575) {
MaggieCabrera marked this conversation as resolved.
Show resolved Hide resolved
visibility: hidden;

$handle-color: #757575;
$track-color: #1e1e1e;

// WebKit
&::-webkit-scrollbar {
width: 12px;
Expand All @@ -520,4 +517,12 @@
& > * {
visibility: visible;
}

// Always enable scrollbar on Mobile devices.
@media (hover: none) {
Copy link
Contributor

Choose a reason for hiding this comment

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

TIL

.scrollable {
visibility: visible;
}
}

}
44 changes: 33 additions & 11 deletions packages/block-editor/src/components/list-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,30 @@
.block-editor-list-view-tree {
width: 100%;
border-collapse: collapse;
//extending over the padding of the sidebar so that we don't get the icons cut off
width: calc(100% + #{ $grid-unit-20 });
max-width: calc(100% + #{ $grid-unit-20 });
margin: 0 ($grid-unit-20 * -1) 0 0;
padding: 0;
margin: 0;
overflow-x: auto;
@include custom-scrollbars-on-hover(#ffffff);
display: block;
border-collapse: collapse;

// Move upwards when in modal.
.components-modal__content & {
margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
width: calc(100% + #{ $grid-unit-15 });
}

tbody {
display: flex;
flex-direction: column;
}
}

.block-editor-list-view-leaf {
// Use position relative for row animation.
position: relative;
display: flex;

// The background has to be applied to the td, not tr, or border-radius won't work.
&.is-selected td {
Expand Down Expand Up @@ -190,6 +201,10 @@
flex: 0 0 $icon-size;
}

.block-editor-list-view-block__contents-cell {
flex-basis: 100%;
}

.block-editor-list-view-block__menu-cell,
.block-editor-list-view-block__mover-cell,
.block-editor-list-view-block__contents-cell {
Expand Down Expand Up @@ -228,6 +243,8 @@

.block-editor-list-view-block__menu-cell {
padding-right: $grid-unit-05;
display: flex;
align-items: center;

.components-button.has-icon {
height: 24px;
Expand Down Expand Up @@ -278,6 +295,12 @@
}
}

.block-editor-block-settings-menu {
height: 100%;
display: flex;
align-items: center;
}

.block-editor-inserter__toggle {
background: $gray-900;
color: $white;
Expand All @@ -290,18 +313,17 @@
}
}

.block-editor-list-view-block-select-button__label-wrapper {
min-width: 120px;
}

.block-editor-list-view-block-select-button__title {
flex: 1;
position: relative;
margin-right: auto;
display: inline-flex;
align-items: center;

.components-truncate {
position: absolute;
width: 100%;
transform: translateY(-50%);
display: inline-block;
max-width: 120px;
text-overflow: ellipsis;
overflow: hidden;
}
}

Expand Down
88 changes: 43 additions & 45 deletions packages/block-editor/src/components/off-canvas-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,52 +208,50 @@ function __ExperimentalOffCanvasEditor(
listViewRef={ elementRef }
blockDropTarget={ blockDropTarget }
/>
<div className="offcanvas-editor-list-view-tree-wrapper">
<TreeGrid
id={ id }
className="block-editor-list-view-tree"
aria-label={ __( 'Block navigation structure' ) }
ref={ treeGridRef }
onCollapseRow={ collapseRow }
onExpandRow={ expandRow }
onFocusRow={ focusRow }
applicationAriaLabel={ __( 'Block navigation structure' ) }
>
<ListViewContext.Provider value={ contextValue }>
<ListViewBranch
blocks={ clientIdsTree }
selectBlock={ selectEditorBlock }
showBlockMovers={ showBlockMovers }
fixedListWindow={ fixedListWindow }
selectedClientIds={ selectedClientIds }
isExpanded={ isExpanded }
shouldShowInnerBlocks={ shouldShowInnerBlocks }
selectBlockInCanvas={ selectBlockInCanvas }
/>
<TreeGridRow
level={ 1 }
setSize={ 1 }
positionInSet={ 1 }
isExpanded={ true }
>
<TreeGridCell>
{ ( treeGridCellProps ) => (
<Appender { ...treeGridCellProps } />
) }
</TreeGridCell>
{ ! clientIdsTree.length && (
<TreeGridCell withoutGridItem>
<div className="offcanvas-editor-list-view-is-empty">
{ __(
'Your menu is currently empty. Add your first menu item to get started.'
) }
</div>
</TreeGridCell>
<TreeGrid
id={ id }
className="block-editor-list-view-tree"
aria-label={ __( 'Block navigation structure' ) }
ref={ treeGridRef }
onCollapseRow={ collapseRow }
onExpandRow={ expandRow }
onFocusRow={ focusRow }
applicationAriaLabel={ __( 'Block navigation structure' ) }
>
<ListViewContext.Provider value={ contextValue }>
<ListViewBranch
blocks={ clientIdsTree }
selectBlock={ selectEditorBlock }
showBlockMovers={ showBlockMovers }
fixedListWindow={ fixedListWindow }
selectedClientIds={ selectedClientIds }
isExpanded={ isExpanded }
shouldShowInnerBlocks={ shouldShowInnerBlocks }
selectBlockInCanvas={ selectBlockInCanvas }
/>
<TreeGridRow
level={ 1 }
setSize={ 1 }
positionInSet={ 1 }
isExpanded={ true }
>
<TreeGridCell>
{ ( treeGridCellProps ) => (
<Appender { ...treeGridCellProps } />
) }
</TreeGridRow>
</ListViewContext.Provider>
</TreeGrid>
</div>
</TreeGridCell>
{ ! clientIdsTree.length && (
<TreeGridCell withoutGridItem>
<div className="offcanvas-editor-list-view-is-empty">
{ __(
'Your menu is currently empty. Add your first menu item to get started.'
) }
</div>
</TreeGridCell>
) }
</TreeGridRow>
</ListViewContext.Provider>
</TreeGrid>
</AsyncModeProvider>
);
}
Expand Down
6 changes: 0 additions & 6 deletions packages/block-editor/src/components/off-canvas-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,7 @@
}
}

.offcanvas-editor-list-view-tree-wrapper {
max-width: 100%;
overflow-x: auto;
}

.offcanvas-editor-list-view-leaf {
display: block;
// sidebar width - tab panel padding
max-width: $sidebar-width - (2 * $grid-unit-20);
}
Expand Down