From d4d620fa6df150672f6daa8b23be2a7a8222fd54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= Date: Sat, 24 Aug 2024 22:26:34 +0200 Subject: [PATCH] Workboard: have thin scrollbars Summary: The original intention was to hugely improve the UX interaction on Workboards for Microsoft Windows users, since they have BIG GIANT SCROLLBARS. So we adopted thin scrollbars, that are graphically pleasant for all other "normal" browsers too. Note that this can be really thin now. The premise is: probably you will never notice this, since you never try to click on the scrollbar. In case, if you have problems, contact us. But note: - you can use the mouse wheel as usual - you can use keyboard navigation (try the tab key - it auto-scrolls!) - you can use usual touch movements on relevant devices. The non-standard CSS version is kept for compatibility. Scrollbar examples in Microsoft Windows with Chromium-based browser: | Before | After | |-----------|-----------| | {F312321} | {F312323} | Scrollbar examples in GNU/Linux with KDE, on mouse hover: | Before | After | |-----------|-----------| | {F313082} | {F313083} | ... on bar selected: | Before | After | |-----------|-----------| | {F313084} | {F313085} | Ref T15488 Test Plan: View a Workboard and a Differential side panel on Firefox with static scrollbars enabled. Reviewers: O1 Blessed Committers, valerio.bozzolan Reviewed By: O1 Blessed Committers, valerio.bozzolan Subscribers: aklapper, speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno Maniphest Tasks: T15488 Differential Revision: https://we.phorge.it/D25305 --- resources/celerity/map.php | 20 +++++++++---------- webroot/rsrc/css/phui/phui-formation-view.css | 6 ++++++ .../css/phui/workboards/phui-workboard.css | 6 ++++++ .../css/phui/workboards/phui-workpanel.css | 3 +++ 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 0911be5e57..661e474efb 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -12,7 +12,7 @@ return array( 'core.pkg.css' => 'ac619266', 'core.pkg.js' => '2eeda9e0', 'dark-console.pkg.js' => '187792c2', - 'differential.pkg.css' => 'fda9518d', + 'differential.pkg.css' => '94bb10ca', 'differential.pkg.js' => '46fcb3af', 'diffusion.pkg.css' => '354279ea', 'diffusion.pkg.js' => '78c9885d', @@ -156,7 +156,7 @@ return array( 'rsrc/css/phui/phui-fontkit.css' => '1ec937e5', 'rsrc/css/phui/phui-form-view.css' => '57edecb7', 'rsrc/css/phui/phui-form.css' => '1f177cb7', - 'rsrc/css/phui/phui-formation-view.css' => 'd2dec8ed', + 'rsrc/css/phui/phui-formation-view.css' => 'd3956117', 'rsrc/css/phui/phui-head-thing.css' => 'd7f293df', 'rsrc/css/phui/phui-header-view.css' => '4cd25427', 'rsrc/css/phui/phui-hovercard.css' => '39fd2e14', @@ -181,9 +181,9 @@ return array( 'rsrc/css/phui/phui-timeline-view.css' => '7f8659ec', 'rsrc/css/phui/phui-two-column-view.css' => 'f96d319f', 'rsrc/css/phui/workboards/phui-workboard-color.css' => '3a1c21ff', - 'rsrc/css/phui/workboards/phui-workboard.css' => '74fc9d98', + 'rsrc/css/phui/workboards/phui-workboard.css' => 'e7ba21a7', 'rsrc/css/phui/workboards/phui-workcard.css' => '62056e3b', - 'rsrc/css/phui/workboards/phui-workpanel.css' => 'bc06f022', + 'rsrc/css/phui/workboards/phui-workpanel.css' => 'c44f95c7', 'rsrc/css/sprite-login.css' => '07052ee0', 'rsrc/css/sprite-tokens.css' => 'f1896dc5', 'rsrc/css/syntax/syntax-default.css' => 'c0307dc6', @@ -849,7 +849,7 @@ return array( 'phui-fontkit-css' => '1ec937e5', 'phui-form-css' => '1f177cb7', 'phui-form-view-css' => '57edecb7', - 'phui-formation-view-css' => 'd2dec8ed', + 'phui-formation-view-css' => 'd3956117', 'phui-head-thing-view-css' => 'd7f293df', 'phui-header-view-css' => '4cd25427', 'phui-hovercard' => '6199f752', @@ -884,9 +884,9 @@ return array( 'phui-timeline-view-css' => '7f8659ec', 'phui-two-column-view-css' => 'f96d319f', 'phui-workboard-color-css' => '3a1c21ff', - 'phui-workboard-view-css' => '74fc9d98', + 'phui-workboard-view-css' => 'e7ba21a7', 'phui-workcard-view-css' => '62056e3b', - 'phui-workpanel-view-css' => 'bc06f022', + 'phui-workpanel-view-css' => 'c44f95c7', 'phuix-action-list-view' => 'c68f183f', 'phuix-action-view' => 'a8f573a9', 'phuix-autocomplete' => '2fbe234d', @@ -2007,9 +2007,6 @@ return array( 'javelin-uri', 'phabricator-notification', ), - 'bc06f022' => array( - 'phui-workcard-view-css', - ), 'c03f2fb4' => array( 'javelin-install', ), @@ -2029,6 +2026,9 @@ return array( 'javelin-workboard-card', 'javelin-workboard-header', ), + 'c44f95c7' => array( + 'phui-workcard-view-css', + ), 'c538cbfc' => array( 'javelin-behavior', 'javelin-stratcom', diff --git a/webroot/rsrc/css/phui/phui-formation-view.css b/webroot/rsrc/css/phui/phui-formation-view.css index cc6748c35a..8db7153bc5 100644 --- a/webroot/rsrc/css/phui/phui-formation-view.css +++ b/webroot/rsrc/css/phui/phui-formation-view.css @@ -147,6 +147,12 @@ overflow: hidden auto; } +.device-desktop .phui-flank-view-fixed .phui-flank-view-body { + scrollbar-width: thin; +} + +/* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */ +/* (Use the same selector as above for consistent behavior on Chrome/Firefox) */ .device-desktop .phui-flank-view-fixed .phui-flank-view-body::-webkit-scrollbar { height: 6px; diff --git a/webroot/rsrc/css/phui/workboards/phui-workboard.css b/webroot/rsrc/css/phui/workboards/phui-workboard.css index 10450ad836..94b144a921 100644 --- a/webroot/rsrc/css/phui/workboards/phui-workboard.css +++ b/webroot/rsrc/css/phui/workboards/phui-workboard.css @@ -21,6 +21,12 @@ padding: 16px; } +.phui-workboard-view-shadow { + scrollbar-width: thin; +} + +/* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */ +/* (Use the same selector as above for consistent behavior on Chrome/Firefox) */ .phui-workboard-view-shadow::-webkit-scrollbar { height: 8px; width: 8px; diff --git a/webroot/rsrc/css/phui/workboards/phui-workpanel.css b/webroot/rsrc/css/phui/workboards/phui-workpanel.css index e1f6d3296b..4d3eb8a690 100644 --- a/webroot/rsrc/css/phui/workboards/phui-workpanel.css +++ b/webroot/rsrc/css/phui/workboards/phui-workpanel.css @@ -95,11 +95,14 @@ } .device-desktop .phui-workpanel-body-content { + scrollbar-width: thin; max-height: calc(100vh - 162px); overflow-y: auto; overflow-x: hidden; } +/* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */ +/* (Use the same selector as above for consistent behavior on Chrome/Firefox) */ .device-desktop .phui-workpanel-body-content::-webkit-scrollbar { height: 8px; width: 8px;