Make Widget Style (Theme) Switching Discoverable

[shundhammer]

Trello

https://trello.com/c/joXRejJi/

Jira

• Epic: https://jira.suse.com/browse/SLE-20547
• Dev: https://jira.suse.com/browse/SLE-20564

Bugzilla

• https://bugzilla.suse.com/show_bug.cgi?id=1195730 (P2)

Description

This is the next step of PR #64 : Making the widget style / theme switching discoverable so users don't need to know a magic key combination like Shift-F3.

This adds a dedicated button to the YQWizard widget so the user gets a hint that the feature even exists. That button opens the same pop-up dialog like in PR #64, i.e. all available QSS style sheets are offered for selecting.

Persistency?

Notice that this is just temporary for the current program run; it will not be saved to file. Which is fine for the main use case: Low contrast with the very dark SLE installation theme. It's now easy to switch this to a light theme, and when the installation is over, Qt will use the theme from the current desktop anyway, and the desktops have their own much more sophisticated theme switchers. The default there is the normal light grey Qt theme.

Screenshots

Notice the button in the top right corner.

Tooltip on that "Change widget style" button

Button Placement

Since our YQWizard is very flexible, it supports many types of layouts:

• With or without wizard steps in the left panel
• With or without a banner panel at the top with a product logo and optionally a machine type / name
• With the wizard title (the title of that particular wizard page) at the top (below the banner panel) or in the left third of the screen

That means that it's not so easy to pick a good place for that "Change widget style" button. Preferably, we would always want it in the top right corner; but that top right corner might belong to one of different layout manager widgets, depending on which optional parts of the wizard are in use; which in turn depends on the product configuration (control.xml) and some environment variables.

Sometimes that screen space might not be free for use at all; and in that case, we need to resort to a different location. The last-ditch effort for that is to the right of the "Help" / "Release Notes" buttons, somewhere in the bottom left of the wizard. That looks quite out of place, but it's still better than reserving considerable space at the top for only that "Change widget style" button; space that might be needed for other widgets such as tables that occupy a lot of screen space.

So here is the fallback cascade:

• Use the wizard title area unless the wizard title uses the left third of the wizard.
• Use the banner area with the logo if there is one.
• Use the button area at the bottom right of the "Help" / "Release Notes" buttons.

Debugging / Testing Aids

This PR also adds some more environment variables to enforce some of those wizard layouts to make testing them even possible:

• Y2_FORCE_BANNER: Enforce creating the banner area. Best used together with YAST_BANNER to actually see that area.

• Y2_FORCE_TITLE_LEFT: Enforce showing the dialog title (wizard title) at the left side (like during the SLE installation), not at the top.

In addition to those that already existed:

• YAST_BANNER: A string that is displayed at the top right of the banner area.

• Y2STYLE: The name of the QSS style sheet (without path) to use from /usr/share/YaST2/theme/current/wizard.

Examples

Y2_FORCE_BANNER=1 YAST_BANNER="HAL z42" yast2 widget_demo

Y2_FORCE_TITLE_LEFT=1 Y2STYLE=sle-installation.qss yast2 widget_demo

Screenshots

Button in the Wizard Title Area

---

Button in the Banner Area

Button next to "Help" Button

Since there is no free screen space at the top right corner, the button was moved to the bottom left next to the "Help" button.

Page 2 of the widget demo has a menu and no dialog (wizard) title, so the button was also moved to the bottom left corner. Notice that it will move back to the top right on the next page, just like it was on the first page. That is intentional: The normal place is at the top right, unless there is a page where that is impossible.

---

The Icon

(Grey background only for demonstration purposes here to have some contrast; the background is normally transparent.)

The new icon was assembled from two icons from https://eos-icons.com/ :

• light_mode
• mode_night

Both put together to one in Inkscape and slightly enlarged, the light_mode icon changed to (almost) white, the canvas resized to accomodate them both. The icons have an alpha (transparency) channel so the background shines through.

The icon is compiled into the libyui-qt sources with a Qt resource file so it cannot get lost (making the button invisible and thus unusable), in particular not due to loading a buggy or incomplete QSS style sheet.

The general idea behind the two colors of the icon is that some part of it is always visible, no matter if the currently active QSS style sheet uses a dark or a light background: On a light background, the (almost) white sun that indicates day mode will usually disappear, and the black half-moon will be visible; on a dark background, the bright sun will be clearly visible, and the black half-moon will disappear. It is perfectly okay (and intended) if either part is still visible in any color scheme; the important part is that the idea comes across.

Other Fixes

• Fixed a very old (15+ years?) Qt warning in the y2log:

  QFrame ' ' already has a layout

  That was due to creating a QVBoxLayout with a widget parent, which is intended to make that new layout the new layout of that widget; but it already had one, so the QLayout parent class threw that warning and simply reset the widget parent to 0 to avoid problems; because there can only be one layout in a QWidget that manages child widget positions and sizes.

• Renamed a number of local variables (especially for layouts) that had very confusing and very similar names.

The Future: Left To Do in YQWizard

The YQWizard accumulated a lot of technical debt over all the years and with all the hands that it went through. It should really be cleaned up:

• Move out parts of those looong layoutXY...() functions into separate functions for clarity. Basically most parts that now have a separate heading comment that tells what the next section does: That should really be encapsulated into a separate function each wherever possible. That should also drastically reduce the amount of local variables for sub-widgets and sub-layouts, so clearer names are possible, and responsibilities become clearer.

  Notice that most of those sub-layouts etc. are not used anymore after the widget is created; that's why most of them are just local variables, not member variables of the class instance.

• On the long run, get rid of the wizard menu; the newer MenuBar widget is much more powerful and convenient, and it's available for both Qt and NCurses. Right now, the wizard menu only seems to be used in the AutoYaST config module.

  We'll need to contact our libyui community about that, though, to make sure we don't remove anything that is in active use elsewhere; so we'll probably need a phase where we clearly deprecate that wizard menu before we can finally remove it.

Review Notes

This is best reviewed without whitespace changes (Files changed -> cogwheel icon).

[joseivanlopez]

LGTM

[joseivanlopez]

I think there are a lot of things that could be more discoverable, e.g., Save y2logs (even with a send option), Open terminal, Open UI inspector, etc. Maybe a hamburger button could help with that. I am asking myself if placing the hamburger will present the same issues as this "Theme Icon". If so, maybe we should think in other kind of solutions.