Skip to content

Commit 500f5c7

Browse files
nephrosnephros
authored
[UI] Use icons instead of Switches (#459)
* [UI] Lock pulley menu while dragging * [UI] Remove glass switch, use icons * [UI] Use Icons instead of Switch in Restart Dialog * [UI] Add busy indicator to Icon
1 parent 7123466 commit 500f5c7

File tree

2 files changed

+106
-34
lines changed

2 files changed

+106
-34
lines changed

‎src/qml/PatchManagerPage.qml‎

Lines changed: 65 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -188,17 +188,18 @@ Page {
188188
value: false
189189
}
190190
}
191-
192191
SilicaListView {
193192
id: view
194193
anchors.fill: parent
195194

196195
readonly property int topmostY: -view.headerItem.height
197196
readonly property int bottommostY: view.contentHeight - view.height - view.headerItem.height
198197

198+
Behavior on opacity { FadeAnimation { duration: 800 } }
199+
199200
PullDownMenu {
200201
busy: view.busy
201-
enabled: !busy
202+
enabled: !busy && background.drag && (background.drag.target === null)
202203

203204
/*
204205
Disabled due to discussion at https://github.com/sailfishos-patches/patchmanager/pull/272#issuecomment-1047685536
@@ -518,23 +519,79 @@ Page {
518519
duration: 200
519520
}
520521

521-
Switch {
522+
GlassItem {
523+
id: glass
524+
width: Theme.itemSizeLarge
525+
height: Theme.itemSizeLarge
526+
anchors.horizontalCenter: parent.left
527+
anchors.verticalCenter: nameLabel.verticalCenter
528+
radius: 0.14
529+
falloffRadius: 0.13
530+
visible: (down || busy || patchObject.details.patched)
531+
color: (down || busy || patchObject.details.patched)
532+
? Theme.rgba(Theme.primaryColor, Theme.opacityLow)
533+
: Theme.rgba(Theme.secondaryColor, Theme.opacityLow)
534+
Behavior on color { FadeAnimation {} }
535+
}
536+
537+
IconButton {
522538
id: appliedSwitch
523539
anchors.verticalCenter: parent.verticalCenter
524-
automaticCheck: false
525-
checked: patchObject.details.patched
540+
x: Theme.paddingLarge
541+
property string fallbackSource : fallbackIcon[patchObject.details.category]
542+
readonly property var fallbackIcon: {
543+
"browser": "image://theme/icon-m-website",
544+
"camera": "image://theme/icon-m-camera",
545+
"calendar": "image://theme/icon-m-date",
546+
"clock": "image://theme/icon-m-clock",
547+
"contacts": "image://theme/icon-m-users",
548+
"email": "image://theme/icon-m-mail",
549+
"gallery": "image://theme/icon-m-image",
550+
"homescreen": "image://theme/icon-m-device",
551+
"media": "image://theme/icon-m-media-playlists",
552+
"messages": "image://theme/icon-m-message",
553+
"phone": "image://theme/icon-m-call",
554+
"silica": "image://theme/icon-m-sailfish",
555+
"settings": "image://theme/icon-m-setting",
556+
"keyboard": "image://theme/icon-m-keyboard",
557+
"other": "image://theme/icon-m-patchmanager2",
558+
}
559+
icon.source: "image://theme/icon-m-patchmanager2"
560+
Component.onCompleted:{
561+
var patchSource = PatchManager.iconForPatch(patchObject.details.patch, Theme.colorScheme ? (Theme.colorScheme == Theme.LightOnDark) : true)
562+
if (patchSource.length > 0) {
563+
icon.source = patchSource
564+
} else if (fallbackSource) {
565+
icon.source = fallbackSource
566+
}
567+
}
568+
icon.sourceSize.height: Theme.iconSizeSmallPlus
569+
icon.sourceSize.width: Theme.iconSizeSmallPlus
570+
icon.height: Theme.iconSizeSmallPlus
571+
icon.width: Theme.iconSizeSmallPlus
572+
573+
palette.primaryColor: Theme.secondaryColor
574+
palette.highlightColor: Theme.primaryColor
575+
highlighted: down || patchObject.details.patched || busy
576+
577+
property bool busy: patchObject.busy
578+
enabled: !busy
526579
onClicked: background.doPatch()
527-
enabled: !busy && PatchManager.loaded
528-
busy: patchObject.busy
580+
581+
Behavior on icon.opacity { PropertyAnimation {
582+
duration: 1200; alwaysRunToEnd : true; easing.type: Easing.OutBack
583+
}}
529584
}
530585

531586
Column {
532587
id: nameLabel
533588
anchors.left: appliedSwitch.right
534-
anchors.right: patchIcon.status == Image.Ready ? patchIcon.left : parent.right
589+
//anchors.right: patchIcon.status == Image.Ready ? patchIcon.left : parent.right
590+
anchors.right: appliedSwitch.status == Image.Ready ? appliedSwitch.left : parent.right
535591
anchors.margins: Theme.paddingMedium
536592
anchors.verticalCenter: parent.verticalCenter
537593
Label {
594+
width: parent.width
538595
text: name
539596
color: patchObject.details.isCompatible ? background.down ? Theme.highlightColor : ( patchObject.details.patched ? Theme.primaryColor : Theme.secondaryColor )
540597
: background.down ? Theme.highlightBackgroundFromColor(Theme.errorColor, Theme.colorScheme) : ( patchObject.details.patched ? Theme.errorColor : Theme.secondaryHighlightFromColor(Theme.errorColor, Theme.colorScheme) )
@@ -557,16 +614,6 @@ Page {
557614
}
558615
}
559616
}
560-
561-
Image {
562-
id: patchIcon
563-
anchors.right: parent.right
564-
anchors.verticalCenter: parent.verticalCenter
565-
width: Theme.itemSizeExtraSmall
566-
height: Theme.itemSizeExtraSmall
567-
visible: status == Image.Ready
568-
source: PatchManager.iconForPatch(patchObject.details.patch, Theme.colorScheme ? (Theme.colorScheme == Theme.LightOnDark) : true)
569-
}
570617
}
571618

572619
Component {

‎src/qml/RestartServicesDialog.qml‎

Lines changed: 41 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -80,23 +80,48 @@ Dialog {
8080
width: parent.width - Theme.horizontalPageMargin * 2
8181
Repeater {
8282
model: PatchManager.appsToRestart
83-
delegate: Component { TextSwitch {
84-
text: qsTranslate("Sections", modelData)
85-
automaticCheck: false
86-
checked: true
87-
enabled: true
88-
description: {
89-
if ((modelData == "homescreen")
90-
|| (modelData == "silica"))
91-
{ return qsTranslate("","Note that this will close all apps."); }
92-
else if (modelData == "settings") { return qsTranslate("","Note that this will close %1.").arg(qsTranslate("", "Patchmanager")); }
93-
else if (modelData == "keyboard") { return "" }
94-
else if (modelData == "other") { return "" }
95-
else { return qsTranslate("","Note that this will close the %1 app.").arg(text); }
83+
delegate: Component { Row {
84+
spacing: Theme.paddingLarge
85+
Icon { id: catIcon
86+
source : iconList[modelData] || "image://theme/icon-m-setting"
87+
readonly property var iconList: {
88+
"browser": "image://theme/icon-m-website",
89+
"camera": "image://theme/icon-m-camera",
90+
"calendar": "image://theme/icon-m-date",
91+
"clock": "image://theme/icon-m-clock",
92+
"contacts": "image://theme/icon-m-users",
93+
"email": "image://theme/icon-m-mail",
94+
"gallery": "image://theme/icon-m-image",
95+
"homescreen": "image://theme/icon-m-device",
96+
"media": "image://theme/icon-m-media-playlists",
97+
"messages": "image://theme/icon-m-message",
98+
"phone": "image://theme/icon-m-call",
99+
"silica": "image://theme/icon-m-sailfish",
100+
"homescreen": "image://theme/icon-m-device",
101+
"settings": "image://theme/icon-m-setting",
102+
"keyboard": "image://theme/icon-m-keyboard",
103+
"other": "image://theme/icon-m-patchmanager2",
104+
}
96105
}
97-
TouchBlocker { anchors.fill: parent}
98-
}
99-
}
106+
Column {
107+
Label {
108+
text: qsTranslate("Sections", modelData)
109+
}
110+
Label {
111+
font.pixelSize: Theme.fontSizeSmall
112+
color: Theme.secondaryColor
113+
text: {
114+
if ((modelData == "homescreen")
115+
|| (modelData == "silica"))
116+
{ return qsTranslate("","Note that this will close all apps."); }
117+
else if (modelData == "settings") { return qsTranslate("","Note that this will close %1.").arg(qsTranslate("", "Patchmanager")); }
118+
else if (modelData == "keyboard") { return "" }
119+
else if (modelData == "other") { return "" }
120+
else { return qsTranslate("","Note that this will close the %1 app.").arg(text); }
121+
}
122+
}
123+
}
124+
}}
100125
}
101126
}
102127
}

0 commit comments

Comments
 (0)