Skip to content

Instantly share code, notes, and snippets.

@lslezak
Last active May 27, 2016 11:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lslezak/5ed82fe19337bef4807b to your computer and use it in GitHub Desktop.
Save lslezak/5ed82fe19337bef4807b to your computer and use it in GitHub Desktop.
Proposal for the Extension Selection Dialog in YaST

Proposal for the Extension Selection Dialog

Currently the extension selection dialog uses fixed layout with check boxes.

This can lead to bugs like bnc#967387 where the check boxes do not fit the screen. A similar problem exists also in the text mode (esp. in the 80x25 text resolution).

The Current UI

The check boxes with labels are clipped off even when some addons are moved to the second column on the right side.

The New UI

There are basically three important RichText widget properties which we could use to solve this issue:

  • The text area is scrollable
  • It can contain hyper links which can be clicked - already used e.g. in the installation proposal
  • Rich text can contain images
  • The content can be styled (to some extent)

The idea is basically switch to a RichText widget and display the check boxes as images with text inside hyperlinks to allow user interaction.

Proof of Concept

File extensions_rich_text.rb (see at the bottom) contains an experimental code for using a RichText with check boxes.

You can run it using /sbin/yast2 ./extensions_rich_text.rb (Qt GUI) or /sbin/yast ./extensions_rich_text.rb (Ncurses text mode).

Note: The code does not handle the user interaction, i.e. the state of the check boxes cannot be changed.

Screenshots

Here are the screenshots when running the experimental code.

Note: The screenshots were taken in running openSUSE so the theme is different than in SLE, but the check boxes use the same icons as the YaST QSS style so they should look exactly same as the other standard CheckBox widgets.

New Graphical UI

In an reasonably large dialog it would look like this:

After resizing it down it looks like this (note the scroll bar at the right side, long texts are also wrapped):

New Text Mode UI

The default 80x25 resolution would look like this (again note the scroll bar):

With more space available:

Disadvantages

So far I found out these disadvantages:

  • The check boxes cannot have a keyboard shortcut
  • The look is a bit different than the standard check boxes (esp. in the text mode)
  • After changing a check box state we need to regenerate the RichText content. However, we cannot focus the previously active link, the user would have to again navigate from the top item. (Again mainly the text mode would be affected, in GUI the mouse position is not changed.)

IMHO the advantage (scrollable area) overweights the disadvantages and it makes sense to change the dialog to the layout.

Other Solutions

Another option would be to use the MultiSelectionBox widget. However it does not allow to disable specific list items, it can be disabled as a whole widget only. Additionally you cannot indent the items to visually mark dependent extensions.

module Yast
class ExtensionsRichText < Client
def main
Yast.import "UI"
# this is just a proff of concept we can still adjust the styling or the layout...
if UI.TextMode
content = "<h3>Available Extensions and Modules</h3>" \
"<p>&nbsp;<a href=\"ext1\">[ ] SUSE Cloud for SLE 12 Compute Nodes 5 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext2\">[ ] SUSE Enterprise Storage 2 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext3\">[ ] SUSE Linux Enterprise High Availability Extension 12 x86_64</a></p>" \
"<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[ ] SUSE Linux Enterprise High Availability GEO Extension 12 x86_64</p>" \
"<p>&nbsp;<a href=\"ext4\">[ ] SUSE Linux Enterprise Live Patching 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext5\">[ ] SUSE Linux Enterprise Workstation Extension 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext6\">[x] SUSE Linux Enterprise Software Development Kit 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext7\">[ ] Advanced Systems Management Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext8\">[ ] Containers Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext9\">[ ] Legacy Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext10\">[ ] Public Cloud Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext11\">[ ] Toolchain Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext12\">[ ] Web and Scripting Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext13\">[ ] Toolchain Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext14\">[x] Web and Scripting Module 12 x86_64</a></p>"
else
content = "<h3>Available Extensions and Modules</h3>" \
"<p>&nbsp;<a href=\"ext1\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> SUSE Cloud for SLE 12 Compute Nodes 5 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext2\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> SUSE Enterprise Storage 2 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext3\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> SUSE Linux Enterprise High Availability Extension 12 x86_64</a></p>" \
"<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style=\"color:grey\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> SUSE Linux Enterprise High Availability GEO Extension 12 x86_64</p>" \
"<p>&nbsp;<a href=\"ext4\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> SUSE Linux Enterprise Live Patching 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext5\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> SUSE Linux Enterprise Workstation Extension 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext6\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-on.png\"></img> SUSE Linux Enterprise Software Development Kit 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext7\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> Advanced Systems Management Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext8\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> Containers Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext9\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> Legacy Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext10\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> Public Cloud Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext11\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> Toolchain Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext12\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> Web and Scripting Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext13\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-off.png\"></img> Toolchain Module 12 x86_64</a></p>" \
"<p>&nbsp;<a href=\"ext14\" style=\"text-decoration:none; color:black\"><img src=\"/usr/share/YaST2/theme/current/wizard/checkbox-on.png\"></img> Web and Scripting Module 12 x86_64</a></p>"
end
UI.OpenDialog(
Opt(:defaultsize),
VBox(
RichText(content),
PushButton(Id(:close), Opt(:default), "&Close")
)
)
loop { break if UI.UserInput == :close }
UI.CloseDialog
nil
end
end
end
Yast::ExtensionsRichText.new.main
@lslezak
Copy link
Author

lslezak commented Apr 7, 2016

Note: Discussed with Ken, the mentioned drawbacks are acceptable given that it fixes the main problem (completely broken layout with hardly readable labels).

@kwwii
Copy link

kwwii commented May 25, 2016

One thing that I am missing is the separation of products vs. extensions and modules into different (but similar) ui's.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment