From 301d9785c8a89c1c61173f8ef6eddb1407c67b2b Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 13 Apr 2023 12:56:04 +0200 Subject: [PATCH 1/6] List View: Update with scrolling and custom scrollbar. --- .../src/components/secondary-sidebar/style.scss | 11 ++++++++++- .../src/components/secondary-sidebar/style.scss | 11 +++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss index c3c5bf5e24c61..1a2e74f6b5574 100644 --- a/packages/edit-post/src/components/secondary-sidebar/style.scss +++ b/packages/edit-post/src/components/secondary-sidebar/style.scss @@ -1,3 +1,8 @@ +/** + * Note that this CSS file should be in sync with its counterpart in the other editor: + * packages/edit-site/src/components/secondary-sidebar/style.scss + */ + .edit-post-editor__inserter-panel, .edit-post-editor__document-overview-panel { height: 100%; @@ -62,8 +67,12 @@ .edit-post-editor__list-view-panel-content, .edit-post-editor__list-view-container > .document-outline, .edit-post-editor__list-view-empty-headings { - overflow: auto; height: 100%; + + // Include custom scrollbars. + @include custom-scrollbars-on-hover($gray-600, $white); + overflow: auto; + // The table cells use an extra pixels of space left and right. We compensate for that here. padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width); } diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss index 6dd1a0d9c4961..fa2c611963c12 100644 --- a/packages/edit-site/src/components/secondary-sidebar/style.scss +++ b/packages/edit-site/src/components/secondary-sidebar/style.scss @@ -1,3 +1,8 @@ +/** + * Note that this CSS file should be in sync with its counterpart in the other editor: + * packages/edit-post/src/components/secondary-sidebar/style.scss + */ + .edit-site-editor__inserter-panel, .edit-site-editor__list-view-panel { height: 100%; @@ -42,6 +47,12 @@ } .edit-site-editor__list-view-panel-content { + height: 100%; + + // Include custom scrollbars. + @include custom-scrollbars-on-hover($gray-600, $white); + overflow: auto; + overflow-y: auto; padding: $grid-unit-10; } From 1fc64a260746817d8a589721a4934132db7b29fd Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 14 Apr 2023 10:34:46 +0200 Subject: [PATCH 2/6] Update mixin, fix Safari, fix gutter. --- packages/base-styles/_mixins.scss | 14 +++++++++++++- .../src/components/secondary-sidebar/style.scss | 10 +++++----- .../src/components/secondary-sidebar/style.scss | 13 +++++++------ 3 files changed, 25 insertions(+), 12 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index ff68bbb36b1c7..e4ec0514e12c7 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -535,11 +535,23 @@ // Firefox 109+ and Chrome 111+ scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color" scrollbar-width: thin; - scrollbar-gutter: stable; + scrollbar-gutter: auto; + // Needed to fix a Safari rendering issue. + will-change: transform; + + // On-hover/focus visibility. &:hover, &:focus, & > * { visibility: visible; } + + // Scrolling behavior. + overflow: hidden; + + &:hover, + &:focus { + overflow: auto; + } } diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss index 1a2e74f6b5574..1b72fc5e8b17c 100644 --- a/packages/edit-post/src/components/secondary-sidebar/style.scss +++ b/packages/edit-post/src/components/secondary-sidebar/style.scss @@ -11,10 +11,11 @@ } .edit-post-editor__document-overview-panel { - // Same width as the Inserter. - // @see packages/block-editor/src/components/inserter/style.scss - // Width of the list view panel. - width: 350px; + @include break-medium() { + // Same width as the Inserter. + // @see packages/block-editor/src/components/inserter/style.scss + width: 350px; + } .edit-post-sidebar__panel-tabs { flex-direction: row-reverse; @@ -71,7 +72,6 @@ // Include custom scrollbars. @include custom-scrollbars-on-hover($gray-600, $white); - overflow: auto; // The table cells use an extra pixels of space left and right. We compensate for that here. padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width); diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss index fa2c611963c12..e98c9872c8a45 100644 --- a/packages/edit-site/src/components/secondary-sidebar/style.scss +++ b/packages/edit-site/src/components/secondary-sidebar/style.scss @@ -11,9 +11,11 @@ } .edit-site-editor__list-view-panel { - // Same width as the Inserter. - // @see packages/block-editor/src/components/inserter/style.scss - min-width: 350px; + @include break-medium() { + // Same width as the Inserter. + // @see packages/block-editor/src/components/inserter/style.scss + width: 350px; + } } .edit-site-editor__inserter-panel-header { @@ -51,8 +53,7 @@ // Include custom scrollbars. @include custom-scrollbars-on-hover($gray-600, $white); - overflow: auto; - overflow-y: auto; - padding: $grid-unit-10; + // The table cells use an extra pixels of space left and right. We compensate for that here. + padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width); } From 65ea3ba4c54501b0ce65814d9ad8ab353c6f9c2d Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 14 Apr 2023 10:41:44 +0200 Subject: [PATCH 3/6] Add stable gutter for templates. --- packages/edit-site/src/components/sidebar/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 4db6f772beea7..8dc018828f232 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -4,6 +4,7 @@ .components-navigator-screen { @include custom-scrollbars-on-hover($gray-700, $gray-900); + scrollbar-gutter: stable; } } From af1a900f4fcda601f71e9986d4284fa7ef8674dc Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 21 Apr 2023 11:09:48 +0200 Subject: [PATCH 4/6] Refactor approach to use color for show/hide. --- packages/base-styles/_mixins.scss | 32 ++++++++----------- .../components/secondary-sidebar/style.scss | 10 ++++-- .../components/secondary-sidebar/style.scss | 10 ++++-- .../src/components/sidebar/style.scss | 2 +- 4 files changed, 30 insertions(+), 24 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index e4ec0514e12c7..939334fb3c2c0 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -514,8 +514,7 @@ /* stylelint-enable function-comma-space-after */ } -@mixin custom-scrollbars-on-hover($handle-color, $track-color) { - visibility: hidden; +@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover, $track-color ) { // WebKit &::-webkit-scrollbar { @@ -531,27 +530,22 @@ border: 3px solid transparent; background-clip: padding-box; } + &:hover:hover::-webkit-scrollbar-thumb { // This needs specificity. + background-color: $handle-color-hover; + } // Firefox 109+ and Chrome 111+ - scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color" scrollbar-width: thin; - scrollbar-gutter: auto; - - // Needed to fix a Safari rendering issue. - will-change: transform; + scrollbar-gutter: stable; + scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color" - // On-hover/focus visibility. - &:hover, - &:focus, - & > * { - visibility: visible; + &:hover { + scrollbar-color: $handle-color-hover $track-color; } - - // Scrolling behavior. - overflow: hidden; - - &:hover, - &:focus { - overflow: auto; + &:hover::-webkit-scrollbar-thumb { + background-color: $handle-color-hover; } + + // Needed to fix a Safari rendering issue. + will-change: transform; } diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss index 1b72fc5e8b17c..751c6dbc59436 100644 --- a/packages/edit-post/src/components/secondary-sidebar/style.scss +++ b/packages/edit-post/src/components/secondary-sidebar/style.scss @@ -70,8 +70,14 @@ .edit-post-editor__list-view-empty-headings { height: 100%; - // Include custom scrollbars. - @include custom-scrollbars-on-hover($gray-600, $white); + // Include custom scrollbars, invisible until hovered. + @include custom-scrollbars-on-hover(transparent, $gray-600, $white); + overflow: auto; + + // Only reserve space for scrollbars when there is content to scroll. + // This allows items in the list view to have equidistant padding left and right + // right up until a scrollbar is present. + scrollbar-gutter: auto; // The table cells use an extra pixels of space left and right. We compensate for that here. padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width); diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss index e98c9872c8a45..7f8a82a7912c4 100644 --- a/packages/edit-site/src/components/secondary-sidebar/style.scss +++ b/packages/edit-site/src/components/secondary-sidebar/style.scss @@ -51,8 +51,14 @@ .edit-site-editor__list-view-panel-content { height: 100%; - // Include custom scrollbars. - @include custom-scrollbars-on-hover($gray-600, $white); + // Include custom scrollbars, invisible until hovered. + @include custom-scrollbars-on-hover(transparent, $gray-600, $white); + overflow: auto; + + // Only reserve space for scrollbars when there is content to scroll. + // This allows items in the list view to have equidistant padding left and right + // right up until a scrollbar is present. + scrollbar-gutter: auto; // The table cells use an extra pixels of space left and right. We compensate for that here. padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width); diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 8dc018828f232..a906ce80cf277 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -3,7 +3,7 @@ overflow-y: auto; .components-navigator-screen { - @include custom-scrollbars-on-hover($gray-700, $gray-900); + @include custom-scrollbars-on-hover(transparent, $gray-700, $gray-900); scrollbar-gutter: stable; } } From de7ac4db161676441d28f4c9975bd8660681ef83 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 21 Apr 2023 11:18:43 +0200 Subject: [PATCH 5/6] Polish for firefox, retire $track-color. --- packages/base-styles/_mixins.scss | 8 ++++---- .../edit-post/src/components/secondary-sidebar/style.scss | 2 +- .../edit-site/src/components/secondary-sidebar/style.scss | 2 +- packages/edit-site/src/components/sidebar/style.scss | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 939334fb3c2c0..bfda737a95c44 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -514,7 +514,7 @@ /* stylelint-enable function-comma-space-after */ } -@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover, $track-color ) { +@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover) { // WebKit &::-webkit-scrollbar { @@ -522,7 +522,7 @@ height: 12px; } &::-webkit-scrollbar-track { - background-color: $track-color; + background-color: transparent; } &::-webkit-scrollbar-thumb { background-color: $handle-color; @@ -537,10 +537,10 @@ // Firefox 109+ and Chrome 111+ scrollbar-width: thin; scrollbar-gutter: stable; - scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color" + scrollbar-color: $handle-color transparent; // Syntax, "dark", "light", or "#handle-color #track-color" &:hover { - scrollbar-color: $handle-color-hover $track-color; + scrollbar-color: $handle-color-hover transparent; } &:hover::-webkit-scrollbar-thumb { background-color: $handle-color-hover; diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss index 751c6dbc59436..63a3746e1b844 100644 --- a/packages/edit-post/src/components/secondary-sidebar/style.scss +++ b/packages/edit-post/src/components/secondary-sidebar/style.scss @@ -71,7 +71,7 @@ height: 100%; // Include custom scrollbars, invisible until hovered. - @include custom-scrollbars-on-hover(transparent, $gray-600, $white); + @include custom-scrollbars-on-hover(transparent, $gray-600); overflow: auto; // Only reserve space for scrollbars when there is content to scroll. diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss index 7f8a82a7912c4..0230c71b2e800 100644 --- a/packages/edit-site/src/components/secondary-sidebar/style.scss +++ b/packages/edit-site/src/components/secondary-sidebar/style.scss @@ -52,7 +52,7 @@ height: 100%; // Include custom scrollbars, invisible until hovered. - @include custom-scrollbars-on-hover(transparent, $gray-600, $white); + @include custom-scrollbars-on-hover(transparent, $gray-600); overflow: auto; // Only reserve space for scrollbars when there is content to scroll. diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index a906ce80cf277..08f6da48da666 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -3,7 +3,7 @@ overflow-y: auto; .components-navigator-screen { - @include custom-scrollbars-on-hover(transparent, $gray-700, $gray-900); + @include custom-scrollbars-on-hover(transparent, $gray-700); scrollbar-gutter: stable; } } From 271d4dd3d6bd0f6e8134f2737336301fb2789186 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 21 Apr 2023 11:51:09 +0200 Subject: [PATCH 6/6] Simplify, add focus-within. --- packages/base-styles/_mixins.scss | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index bfda737a95c44..a75c2f730a7a8 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -530,22 +530,30 @@ border: 3px solid transparent; background-clip: padding-box; } - &:hover:hover::-webkit-scrollbar-thumb { // This needs specificity. + &:hover::-webkit-scrollbar-thumb, // This needs specificity. + &:focus::-webkit-scrollbar-thumb, + &:focus-within::-webkit-scrollbar-thumb { background-color: $handle-color-hover; } // Firefox 109+ and Chrome 111+ scrollbar-width: thin; - scrollbar-gutter: stable; + scrollbar-gutter: stable both-edges; scrollbar-color: $handle-color transparent; // Syntax, "dark", "light", or "#handle-color #track-color" - &:hover { + &:hover, + &:focus, + &:focus-within { scrollbar-color: $handle-color-hover transparent; } - &:hover::-webkit-scrollbar-thumb { - background-color: $handle-color-hover; - } // Needed to fix a Safari rendering issue. will-change: transform; + + // Always show scrollbar on Mobile devices. + @media (hover: none) { + & { + scrollbar-color: $handle-color-hover transparent; + } + } }