[UI] Use icons instead of Switches

[nephros]

This may prove controversial, but replace the glass switches with icon buttons

Sorry oldschool ui lovers (and I am one myself).

Much cleaner look of the patch list. Also, now all Patches get an icon, not only those shipping one with the patch.

• [UI] Lock pulley menu while dragging
• [UI] Remove glass switch, use icons
• [UI] Use Icons instead of Switch in Restart Dialog

[nephros]

... also sneaks in a fix for drag-reordering patches. It would activate the pulley which made dragging hard.

[nephros]

![Uploading Screenshot_20240225_002.png…]()

[nephros]

[Olf0]

Well, there are two aspects:

1. Look & Feel

This may prove controversial, …

+1: It is.

Sorry oldschool ui lovers (and I am one myself).

:persevere:

Much cleaner look of the patch list …

+1 +1 +1: Oh yes, it definitely does look much cleaner.

Hence ultimately this is clearly an improvement, even more so the behavioural (= invisible) changes.

2. Technical

The implementation is looking good & clean. The changeset is also quite small and non-intrusive. Though, as I do not trust my little QML skills very much, I would like to provide others a chance to read the changes, because non-obvious errors will evade detection by me.

⇒ I will approve these changes after a little time (one or two weeks); if I forget to or you want it quicker, please ping me.

[nephros]

One significant drawback is that the icon buttons are not immediately obvious as interactive elements.

Which of course is terrible UX.

(Are there any adjectives to UX in common use other than 'terrible' and 'clean', and maybe 'improved'? I can't think of any.)

[nephros]

Sorry oldschool ui lovers (and I am one myself).

... btw if you are you may notice that is not Sail Sans in the screenshots! :D

That is utterly unrelated to this change though.

[b100dian]

Looks better than today indeed!

The only worry is if enabled/disabled is signalled by changing the icons color luminance, since I have to test it, my intuiltion says there a thinner and thicker paths in those icons that may look lighter as in disabled. I assume we don't have an outline or glow effect at hand to "offset" this?

[nephros]

[nephros]

Looks better than today indeed!

The only worry is if enabled/disabled is signalled by changing the icons color luminance, since I have to test it, my intuiltion says there a thinner and thicker paths in those icons that may look lighter as in disabled. I assume we don't have an outline or glow effect at hand to "offset" this?

There is https://doc.qt.io/qt-5/qml-qtgraphicaleffects-glow.html

but is it worth it?

[Olf0]

There is https://doc.qt.io/qt-5/qml-qtgraphicaleffects-glow.html

but is it worth it?

Oh, a cool, mighty, but costly effect. Would have to use the cache property (as these icons are small and not animated) and might also need alter the glow colour depending on the background colour (i.e. dark vs. light ambiences: a white glow is almost invisible on a bright background).

Is that easy to use / implement?

[nephros]

There is https://doc.qt.io/qt-5/qml-qtgraphicaleffects-glow.html but is it worth it?

Oh, a cool, mighty, but costly effect. Would have to use the cache property (as these icons are small and not animated) and might also need alter the glow colour depending on the background colour (i.e. dark vs. light ambiences: a white glow is almost invisible on a bright background).

Is that easy to use / implement?

Quite.

I have tried variations on this:

 import QtQuick 2.0
+import QtGraphicalEffects 1.0
 import Sailfish.Silica 1.0
 import Nemo.Configuration 1.0
 import org.SfietKonstantin.patchmanager 2.0
@@ -598,6 +599,17 @@ Page {
                         duration: 1200; alwaysRunToEnd : true; easing.type: Easing.OutBack
                     }}

+                    icon.visible: patchObject.details.patched
+                    Glow {
+                        visible: !parent.icon.visible
+                        cached: true
+                        anchors.fill: parent.icon
+                        radius: 4
+                        samples: 5
+                        color: (Theme.colorScheme === Theme.LightOnDark) ? Theme.lightSecondaryColor : Theme.darkSecondaryColor
+                        source: parent.icon
+                    }
+
                 }

                 Column {

But I don't think the result is an improved icon look.

They appear "bolder" but also kind of cramped and unclear. I like the plain Opacity change better, and it can be animated.

[b100dian]

Thanks for the code sample. This is so fun to play with:) Here's my try:

diff --git a/src/qml/PatchManagerPage.qml b/src/qml/PatchManagerPage.qml
index e7a7bed..a9dc386 100644
--- a/src/qml/PatchManagerPage.qml
+++ b/src/qml/PatchManagerPage.qml
@@ -38,6 +38,7 @@
 import QtQuick 2.0
 import Sailfish.Silica 1.0
 import Nemo.Configuration 1.0
+import QtGraphicalEffects 1.0
 import org.SfietKonstantin.patchmanager 2.0

 /*! \qmltype PatchManagerPage
@@ -597,6 +598,16 @@ Page {
                     Behavior on icon.opacity { PropertyAnimation {
                         duration: 1200; alwaysRunToEnd : true; easing.type: Easing.OutBack
                     }}
+                    Glow {
+                        visible: patchObject.details.patched
+                        cached: true
+                        anchors.fill: parent.icon
+                        radius: 20
+                        samples: 20
+                        color: Theme.highlightColor
+                        source: parent.icon
+                       opacity: 0.5
+                    }

                 }

[b100dian]

However I must admit I agree with the fact that the effect may be suboptimal, that I tested the original version before and it was pretty usable, and that the opacity thing is indeed an advantage (though that remains true if you want to animate the glow too).

So while this was fun I think (with my first comment about duplicated homescreen entry) we should just go with your version as it is cleaner and glow just adds more un-sailfish-y things and no-one here is a designer;P

[Olf0]

Here's my try:

Oh, both screenshots look fantastic! I did not expect the glow effect to be so nice on both, a bright and dark background, simply by choosing color: Theme.highlightColor for the glow effect.

Besides the pretty look, I do appreciate that the visual contrast between on and off state is well increased, despite it technically still is opacity: 0.5 versus opacity: 1.0 (but plus glow effect here).

I also strongly prefer the lack of cyclic animations, any continuous pulsing or blinking (even softly and slowly) gets on my nerves very easily; I know that I am much more susceptible for such stimuli than most people, such continuous stimuli quickly irritate and annoy me.

But as you both prefer the rather simple look (which is also closer to the original PM-look), this is also fine for me, if only the visual contrast between on and off state would be larger: Maybe opacity: 0.4 (down from opacity: 0.5, AFAICS) for icon and the following line of text archives that. _{BTW, IMO the simple look is only more "sailfishy" relative to SFOS 1 & 2, but not really SFOS ≥ 3.}

[nephros]

Ok so I guess we agree to go without the Glow thingie.

Not totally happy with the hint stuff but can't make it look any better.

[nephros]

Sorry, another try at tweaking.

I'm satisfied with this now, it has a nice balance with traditional look and cleaner outline. The Glass thing IMO also reduces the need for a helper hint.

I'd merge this now.

[b100dian]

Hmm so this moves the dots to the left? That is also the reason there is overlap with page navigation dot? Hmm not entirely sure how this is better..

[nephros]

Hmm so this moves the dots to the left? That is also the reason there is overlap with page navigation dot? Hmm not entirely sure how this is better..

They are different dots but yes. Inspired by what the Email app does. It also has the overlapping, but there they use different colors (read/unread)

[b100dian]

I see, so if it is like email I assume you have scrolled before screenshotting, tbat was not clear, why the overlap :+1: . Again, we can get this in and see if there is feedback and we have several alternatives to fast follow up if so.