search

pop-os / cosmic-epoch

Next generation Cosmic desktop environment
1.79k stars 58 forks source link

[Apps] Context drawer and responsiveness #343

Open WatchMkr opened 1 month ago

WesfunOfficial commented 1 month ago

Any details you could provide?

WatchMkr commented 1 month ago
  1. List items are wider in COSMIC Settings than other COSMIC apps. Wider ListItems (less border) should be used to better utilize the space at the app contracts to a single column. This should help with labels breaking at certain points as well.

Image

  1. Labels don't fit well in a single column. This applies to the ContextDrawer and single column content window view in COSMIC Settings. COSMIC Settings does not yet contract to our minimum size so that will get worse. In COSMIC Settings, I suggested wrapping sliders to the second line and wrapping text so toggles don't move. More design guidance will help to be sure these suggestions will work.

Image Image

maria-komarova commented 1 month ago

There are a few parts to improving things.

  1. List item responsiveness. Wrap the label on the left to the next line when there isn’t enough space. Exception: stack the list item with the slider instead of wrapping to line 3. List item with dropdown: if there isn’t enough space, truncate the dropdown menu item label with “...”. Maintain 16px (@space_s) between left and right sides of the List item content. Decrease horizontal padding on list items from @space_m (24) to @space_s (16) and divider padding from @space_s (16) to @space_xxs (8) respectively when the list item width is below 360.

  2. Changes to the two-column view (Figma link).

    • Floating windows open in this width. If we need a specific width, let's say 920px.
    • NavBar and content area are next to each other.
    • When ContextDrawer is present it should appear on top of the content.
    • Minimum window width = 648px (360px content area + 280px NavBar + 8px padding on the left side of the NavBar). If apps set a different NavBar or ContextDrawer width, minimum width might differ and will need to be adjusted based on the NavBar width.
    • Maximum window width is 1365px.
    • Content area padding when the NavBar is open: 360-455px - @space_s (16px) over 456px - @space_xl (48px)
    • Padding on the sides of the content inside the content area is 48px (@space_xl) when the NavBar is closed.

  3. Context drawer responsiveness, specifically padding (link to Figma). Context Drawer is 480px width by default. It can shrink to 344px. 344-391px width - padding is @space_s (16px) 392-480px width - padding is @space_l (32px)