Closed WatchMkr closed 1 month ago
The design has a nice compact tabs concept.
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.
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.
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.
Fixed items so far:
libcosmic issues:
Using cosmic-edit to check some of these items, there looks to be some improvements since last checked. Double check me on this:
Outstanding:
Mixed status:
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:
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
@maria-komarova please review and add your thoughts.