Improve dock tabs UX #4754

DmitriyNoa · 2022-01-25T15:05:58Z

Closes: #4459

The current solution is inspired by VSCode and Webstrom tabs management solutions.

When the number of tabs is getting too high the area will be scrollable.

When the number of tabs is getting too high the scroll control are presented (scroll left, and scroll right).

Scroll controls are displayed based on the scroll position.

Tabs are now clearly separated from each other.

The active tab is highlighted and visible.

The double click handler was removed as it sometimes caused accidental close of the terminal area.

The active tab can be changed with keypress:
Next tab ctrl + .
Previous tab ctrl + ,

Some comments:

I decided to avoid the shrinking of the tabs as they are added because it makes navigation and searches pretty difficult (titles are getting cropped and the size is too small). Looks like it's common to approach among IDEs to scroll tabs.

VSCode approach with scroll:

Webstrom approach with arrows:

E.g. browser scenario with too many tabs:

Additional suggestions to add:

Drag and drop to change the order of the tabs?

UPDATE
Latest UX changes can be viewed below -> #4754 (comment)

ixrock

LGTM

src/renderer/components/dock/dock.scss

src/renderer/components/dock/dock-tabs.tsx

src/renderer/components/dock/dock-store/dock.store.ts

src/renderer/components/dock/dock-tabs.tsx

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Nokel81

Looks great, though I have found some oddities:

The new tab button is oddly moved to the right when there are no tabs:
The close button covers text of the current tab:
The current tab should be given more space so that you can still read it, even if the other tabs need to be shrunk:

src/renderer/hooks/useResizeObserver.ts

Nokel81 · 2022-03-16T12:56:21Z

src/renderer/components/dock/dock-tabs.tsx

@@ -20,6 +22,14 @@ export interface DockTabsProps {
 }

 export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabsProps) => {
+  const elem = useRef<HTMLDivElement>();
+  const minTabSize = useRef<number>(0);


Why is this a ref and not state?

Updating it only once and basically using it as instance variable - keeping across rerenders. https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

src/renderer/components/dock/dock-tabs.tsx

jim-docker · 2022-03-16T14:54:38Z

I'm seeing some odd behaviour, sometimes when I click on a tab (one in the middle, not clipped) the tabs shift but the tab I clicked on is not selected.

Screen.Recording.2022-03-16.at.11.32.27.AM.mov

Seems to only happen the first time you try to select a tab this way. I had to restart the app to reproduce.

jim-docker · 2022-03-16T15:48:58Z

Seems to open (and scroll if necessary) to the last tab when you close a tab:

Screen.Recording.2022-03-16.at.11.44.22.AM.mov

Better to open a neighbouring tab?

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

aleksfront · 2022-03-18T10:43:14Z

@Nokel81 @jim-docker Fixed all addressed issues except one described below. Please review again.

dock.tabs.in.action.mov

aleksfront · 2022-03-18T10:45:45Z

Related this one

The current tab should be given more space so that you can still read it, even if the other tabs need to be shrunk:

I don't think it's a good decision since this will lead us to layout jumps since switching active tab will cause all sibling tabs to change their sizes instantly. Also, can't find similar behavior across other apps.

Nokel81 · 2022-03-18T11:02:01Z

Okay I just know that in vscode the default tab size is such that for most file names it doesn't happen.

DmitriyNoa · 2022-03-18T14:11:46Z

LGTM

jim-docker

Got this when I clicked "Cancel" on an upgrade chart tab (doesn't happen on 5.4.3):

src/renderer/components/dock/dock-tabs.tsx

src/renderer/components/dock/dock.tsx

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

aleksfront · 2022-03-21T09:09:39Z

@jim-docker Created an issue with the bug you found. Happens in master too. #5050

DmitriyNoa added area/ui enhancement New feature or request labels Jan 25, 2022

DmitriyNoa force-pushed the improve-dock-tabs-ux branch from 665f37a to 994ae50 Compare January 25, 2022 16:33

DmitriyNoa marked this pull request as ready for review January 25, 2022 16:34

DmitriyNoa requested a review from a team as a code owner January 25, 2022 16:34

DmitriyNoa requested review from jansav and Nokel81 and removed request for a team January 25, 2022 16:34

Nokel81 added this to the 5.5.0 milestone Jan 25, 2022

DmitriyNoa requested review from aleksfront and ixrock and removed request for ixrock January 25, 2022 17:38

ixrock previously approved these changes Jan 27, 2022

View reviewed changes

src/renderer/components/dock/dock.scss Outdated Show resolved Hide resolved

DmitriyNoa dismissed ixrock’s stale review via 1b93ffd January 28, 2022 14:04

ixrock reviewed Jan 28, 2022

View reviewed changes

src/renderer/components/dock/dock-tabs.tsx Outdated Show resolved Hide resolved

ixrock reviewed Jan 28, 2022

View reviewed changes

src/renderer/components/dock/dock-store/dock.store.ts Outdated Show resolved Hide resolved

ixrock reviewed Jan 28, 2022

View reviewed changes

src/renderer/components/dock/dock-tabs.tsx Outdated Show resolved Hide resolved

DmitriyNoa added 8 commits January 31, 2022 09:51

Add separators and scroll button

2a0014f

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Add tabs controlls

130618c

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Update values on resize

f484620

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Fix right button

61345aa

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Add change tab on keydown

4eac1b1

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Fix flickering and arrows position

948b278

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Fix pr comments. Cleanup function. Simplify reaction

8674f3e

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Add disposer cleanup

70c3d03

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

DmitriyNoa force-pushed the improve-dock-tabs-ux branch from e12bf67 to 70c3d03 Compare January 31, 2022 08:52

DmitriyNoa added 4 commits January 31, 2022 10:04

Add separators and scroll button

f74d785

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Add tabs controlls

5f192f6

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Update values on resize

d2b9cb2

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

Fix right button

f622348

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

aleksfront added 2 commits March 16, 2022 13:13

Handle dock open/closed state

b2147b3

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Increase shadow corner size

23f29ba

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Nokel81 reviewed Mar 16, 2022

View reviewed changes

aleksfront added 8 commits March 17, 2022 17:02

Selecting next or previous tab after closing selected one

c50ca45

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Add tiny test

7736589

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Use scrollIntoViewIfNeeded in tabs

b3de179

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Small cleaning

2a568d0

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Small fix for useResizeObserver deps array

a198b03

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Fix plus button padding on empty dock

de96461

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Fix close button position in active tab

022097f

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Remove min-width for tab title

734f03c

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

aleksfront requested a review from Nokel81 March 18, 2022 10:45

Nokel81 previously approved these changes Mar 18, 2022

View reviewed changes

jim-docker reviewed Mar 18, 2022

View reviewed changes

src/renderer/components/dock/dock-tabs.tsx Outdated Show resolved Hide resolved

src/renderer/components/dock/dock.tsx Outdated Show resolved Hide resolved

Clean up

8a12500

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

aleksfront dismissed Nokel81’s stale review via 8a12500 March 21, 2022 07:51

aleksfront requested review from Nokel81 and jim-docker March 21, 2022 09:01

Nokel81 approved these changes Mar 21, 2022

View reviewed changes

jim-docker approved these changes Mar 21, 2022

View reviewed changes

aleksfront merged commit 9f6c3e2 into master Mar 21, 2022

aleksfront deleted the improve-dock-tabs-ux branch March 21, 2022 12:55

Nokel81 mentioned this pull request May 4, 2022

release v5.5.0-beta.0 #5326

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve dock tabs UX #4754

Improve dock tabs UX #4754

DmitriyNoa commented Jan 25, 2022 •

edited by aleksfront

Loading

ixrock left a comment

Nokel81 left a comment

Nokel81 Mar 16, 2022

aleksfront Mar 18, 2022 •

edited

Loading

jim-docker commented Mar 16, 2022 •

edited

Loading

jim-docker commented Mar 16, 2022 •

edited

Loading

aleksfront commented Mar 18, 2022

aleksfront commented Mar 18, 2022

Nokel81 commented Mar 18, 2022

DmitriyNoa commented Mar 18, 2022

jim-docker left a comment

aleksfront commented Mar 21, 2022

Improve dock tabs UX #4754

Improve dock tabs UX #4754

Conversation

DmitriyNoa commented Jan 25, 2022 • edited by aleksfront Loading

ixrock left a comment

Choose a reason for hiding this comment

Nokel81 left a comment

Choose a reason for hiding this comment

Nokel81 Mar 16, 2022

Choose a reason for hiding this comment

aleksfront Mar 18, 2022 • edited Loading

Choose a reason for hiding this comment

jim-docker commented Mar 16, 2022 • edited Loading

jim-docker commented Mar 16, 2022 • edited Loading

aleksfront commented Mar 18, 2022

aleksfront commented Mar 18, 2022

Nokel81 commented Mar 18, 2022

DmitriyNoa commented Mar 18, 2022

jim-docker left a comment

Choose a reason for hiding this comment

aleksfront commented Mar 21, 2022

DmitriyNoa commented Jan 25, 2022 •

edited by aleksfront

Loading

aleksfront Mar 18, 2022 •

edited

Loading

jim-docker commented Mar 16, 2022 •

edited

Loading

jim-docker commented Mar 16, 2022 •

edited

Loading