libcosmic tabs issues

[WatchMkr]

COSMIC Edit is the first instance of libcosmic tabs needing more refined functionality.

The design for tabs: https://www.figma.com/file/SkAtS5qlVOGQC0n895AHzX/Design-System-(WIP)?type=design&node-id=7914-5446&mode=design&t=NKlxg637660dOibH-0

Issues

• [ ] Tabs do not contract cleanly. The design suggest moving to a dropdown menu but we should consider other options like horizontal scroll with controls similar to Firefox.
• [ ] Text overlaps the close icon. The design file suggest moving to ellipses.
• [ ] Text on an active tab can overlap the tab boundary
• [x] The document icon is the same for all files I've opened. This doesn't seem useful.
• [x] An unsaved indicator, as described in the design file would be useful
• [x] Tabs look about 10% too tall compared to the design (cosmic-edit design for additional reference)

@maria-komarova please review and add your thoughts.

[WatchMkr]

The design has a nice compact tabs concept.

[maria-komarova]

We initially designed those tabs as a separate component although they are now combined in the Design system. But there are some differences between when tabs are used to switch between options inside Settings versus when they are used with expanded functionality like in text editor.

• Text editor tabs have smaller vertical padding (4px - space_xxxs)
• Text editor tabs should have close button as well as an indicator for unsaved changes.

Collapsing tabs to a dropdown is a good solution inside Settings but won't work for tabs that are in Text editor. What we have on that mockup - collapsing file names with ellipses would work better. Or we can follow the same pattern we introduced for window stacks and use the file name fading rather than ellipses, mostly so that more of the word is visible. The rest is already implied as being similar - with arrows on left and right to cycle through the tabs once there isn't enough space to show them all. I'm not sure if this pattern is good inside Settings though so we either need to have a different tab variant inside the Design system or just break it into separate widgets. From what I remember it was also combined with Segmented controls in libcosmic?

Icons might still be useful if they are different depending on the file type. I'm not sure if we have those anywhere or can pull universal icons for various programming languages.

[jackpot51]

It would be nice if this was broken into separate issues. Some of the problems have been fixed, others need to be fixed in cosmic-edit, others in libcosmic.

[jackpot51]

Fixed items so far:

• The document icon is the same for all files I've opened. This doesn't seem useful.
• An unsaved indicator, as described in the design file would be useful
• Tabs look about 10% too tall compared to the design

libcosmic issues:

• Tabs do not contract cleanly. The design suggest moving to a dropdown menu but we should consider other options like horizontal scroll with controls similar to Firefox.
• Text overlaps the close icon. The design file suggest moving to ellipses.
• Text on an active tab can overlap the tab boundary

[XV-02]

Using cosmic-edit to check some of these items, there looks to be some improvements since last checked. Double check me on this:

• Looks like text on an active tab no longer overlaps the tab boundary.

Outstanding:

• Tabs do not contract cleanly.

Mixed status:

• Horizontal scroll is present, but interferes with other UX elements such as cosmic-edit's 'new document' button
• Looks like text no longer overlaps close icon, but text does not truncate to ellipses.

Here's another few things I noticed from testing in cosmic-edit: https://github.com/pop-os/libcosmic/issues/327

And here is something new which maybe a libcosmic issue, and maybe application specific:

• The pip which marks unsaved modifications appears to be smaller than the design doc. indicates.