@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

authored by

Bartosz Dziewoński and committed by
Bartosz Dziewoński
d4d620fa b02615bd

+25 -10
+10 -10
resources/celerity/map.php
··· 12 12 'core.pkg.css' => 'ac619266', 13 13 'core.pkg.js' => '2eeda9e0', 14 14 'dark-console.pkg.js' => '187792c2', 15 - 'differential.pkg.css' => 'fda9518d', 15 + 'differential.pkg.css' => '94bb10ca', 16 16 'differential.pkg.js' => '46fcb3af', 17 17 'diffusion.pkg.css' => '354279ea', 18 18 'diffusion.pkg.js' => '78c9885d', ··· 156 156 'rsrc/css/phui/phui-fontkit.css' => '1ec937e5', 157 157 'rsrc/css/phui/phui-form-view.css' => '57edecb7', 158 158 'rsrc/css/phui/phui-form.css' => '1f177cb7', 159 - 'rsrc/css/phui/phui-formation-view.css' => 'd2dec8ed', 159 + 'rsrc/css/phui/phui-formation-view.css' => 'd3956117', 160 160 'rsrc/css/phui/phui-head-thing.css' => 'd7f293df', 161 161 'rsrc/css/phui/phui-header-view.css' => '4cd25427', 162 162 'rsrc/css/phui/phui-hovercard.css' => '39fd2e14', ··· 181 181 'rsrc/css/phui/phui-timeline-view.css' => '7f8659ec', 182 182 'rsrc/css/phui/phui-two-column-view.css' => 'f96d319f', 183 183 'rsrc/css/phui/workboards/phui-workboard-color.css' => '3a1c21ff', 184 - 'rsrc/css/phui/workboards/phui-workboard.css' => '74fc9d98', 184 + 'rsrc/css/phui/workboards/phui-workboard.css' => 'e7ba21a7', 185 185 'rsrc/css/phui/workboards/phui-workcard.css' => '62056e3b', 186 - 'rsrc/css/phui/workboards/phui-workpanel.css' => 'bc06f022', 186 + 'rsrc/css/phui/workboards/phui-workpanel.css' => 'c44f95c7', 187 187 'rsrc/css/sprite-login.css' => '07052ee0', 188 188 'rsrc/css/sprite-tokens.css' => 'f1896dc5', 189 189 'rsrc/css/syntax/syntax-default.css' => 'c0307dc6', ··· 849 849 'phui-fontkit-css' => '1ec937e5', 850 850 'phui-form-css' => '1f177cb7', 851 851 'phui-form-view-css' => '57edecb7', 852 - 'phui-formation-view-css' => 'd2dec8ed', 852 + 'phui-formation-view-css' => 'd3956117', 853 853 'phui-head-thing-view-css' => 'd7f293df', 854 854 'phui-header-view-css' => '4cd25427', 855 855 'phui-hovercard' => '6199f752', ··· 884 884 'phui-timeline-view-css' => '7f8659ec', 885 885 'phui-two-column-view-css' => 'f96d319f', 886 886 'phui-workboard-color-css' => '3a1c21ff', 887 - 'phui-workboard-view-css' => '74fc9d98', 887 + 'phui-workboard-view-css' => 'e7ba21a7', 888 888 'phui-workcard-view-css' => '62056e3b', 889 - 'phui-workpanel-view-css' => 'bc06f022', 889 + 'phui-workpanel-view-css' => 'c44f95c7', 890 890 'phuix-action-list-view' => 'c68f183f', 891 891 'phuix-action-view' => 'a8f573a9', 892 892 'phuix-autocomplete' => '2fbe234d', ··· 2007 2007 'javelin-uri', 2008 2008 'phabricator-notification', 2009 2009 ), 2010 - 'bc06f022' => array( 2011 - 'phui-workcard-view-css', 2012 - ), 2013 2010 'c03f2fb4' => array( 2014 2011 'javelin-install', 2015 2012 ), ··· 2028 2025 'javelin-install', 2029 2026 'javelin-workboard-card', 2030 2027 'javelin-workboard-header', 2028 + ), 2029 + 'c44f95c7' => array( 2030 + 'phui-workcard-view-css', 2031 2031 ), 2032 2032 'c538cbfc' => array( 2033 2033 'javelin-behavior',
+6
webroot/rsrc/css/phui/phui-formation-view.css
··· 147 147 overflow: hidden auto; 148 148 } 149 149 150 + .device-desktop .phui-flank-view-fixed .phui-flank-view-body { 151 + scrollbar-width: thin; 152 + } 153 + 154 + /* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */ 155 + /* (Use the same selector as above for consistent behavior on Chrome/Firefox) */ 150 156 .device-desktop .phui-flank-view-fixed 151 157 .phui-flank-view-body::-webkit-scrollbar { 152 158 height: 6px;
+6
webroot/rsrc/css/phui/workboards/phui-workboard.css
··· 21 21 padding: 16px; 22 22 } 23 23 24 + .phui-workboard-view-shadow { 25 + scrollbar-width: thin; 26 + } 27 + 28 + /* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */ 29 + /* (Use the same selector as above for consistent behavior on Chrome/Firefox) */ 24 30 .phui-workboard-view-shadow::-webkit-scrollbar { 25 31 height: 8px; 26 32 width: 8px;
+3
webroot/rsrc/css/phui/workboards/phui-workpanel.css
··· 95 95 } 96 96 97 97 .device-desktop .phui-workpanel-body-content { 98 + scrollbar-width: thin; 98 99 max-height: calc(100vh - 162px); 99 100 overflow-y: auto; 100 101 overflow-x: hidden; 101 102 } 102 103 104 + /* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */ 105 + /* (Use the same selector as above for consistent behavior on Chrome/Firefox) */ 103 106 .device-desktop .phui-workpanel-body-content::-webkit-scrollbar { 104 107 height: 8px; 105 108 width: 8px;