search

linuxmint / cinnamon

A Linux desktop featuring a traditional layout, built from modern technology and introducing brand new innovative features.
GNU General Public License v2.0
4.57k stars 744 forks source link

Improved settings UI #12486

Open clefebvre opened 2 weeks ago

clefebvre commented 2 weeks ago

Requires https://github.com/linuxmint/python3-xapp/pull/24

The purpose is to improve the look and feel of the settings application. Some of the ideas are inspired by what has been done in GNOME, KDE and Ubuntu and what's been observed outside of the Linux community.

Rounded sections

Rounded sections make the UI more modern and integrate nicely with the rounded nature of Cinnamon themes. In the screenshot below, the first section is rounded, the second one isn't.

image

The rounded section should look nice in any theme but also be themeable via newly introduced CSS style names.

Subtitles and tooltips hints

Tooltip hints make it more obvious when more info is available.

Subtitles allow us to squeeze in more information. Along with tooltips they can reduce the need for text blocks.

image

Disabled settings vs hidden settings

Cinnamon Settings relies on revealers to show/hide settings which depend on others. Although that's pretty nifty, it makes screenshots less consistent, it's harder to remember when a particular setting is or to find it when looking for it. In general, it's also a bad idea to hide widgets away from the user or having things suddenly pop up.

This PR goes towards showing everything and relying on sensitivity to disable settings which aren't available.

clefebvre commented 2 weeks ago

Here's a quick prototype to illustrate old vs new class structures and to troubleshoot with Glade:

settings.tar.gz

To run it with Gtk Inspector:

gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
GTK_DEBUG=interactive python3 ./settings.py
leigh123linux commented 2 weeks ago

I really dislike the shadow.

image

clefebvre commented 2 weeks ago

We can improve the default CSS. Experiment with it if you have the time and let me know if you find something better.

clefebvre commented 2 weeks ago

Here it is with no shadow.

image

Note: Ignore the bottom border, it has an extra separator which shouldn't be there.

clefebvre commented 2 weeks ago

Here's an example in GNOME

image

Rounded section, shadows, subtitles and tooltip hint.

axel358 commented 1 week ago

For the Mint-Y style, I also agree that looks better with no shadow. I think subtitles should be preferred over tooltips when possible, as they expose the additional information/context right away to the user. It would also be nice to see a unified settings style between all OS components. xlets and system settings modules use the style shown above, but apps like the file manager use a completely different one