From 7123466b28dfc684eb568f3229510c27107b1786 Mon Sep 17 00:00:00 2001 From: Peter G Date: Sun, 5 May 2024 20:28:51 +0000 Subject: [PATCH 1/2] [QML] Align WebPatch Details design with Patch Details. (#460) * [QML] Align WepPatch Details design with Patch Details. * [QML] Dont force justifed text for description * [QML] Remove colorig from links: interactive parts should be in primary color --------- Co-authored-by: nephros --- src/qml/UnifiedPatchPage.qml | 3 - src/qml/WebPatchPage.qml | 127 ++++++++++++++++++----------------- 2 files changed, 66 insertions(+), 64 deletions(-) diff --git a/src/qml/UnifiedPatchPage.qml b/src/qml/UnifiedPatchPage.qml index 75ac81281..5e7a680fa 100644 --- a/src/qml/UnifiedPatchPage.qml +++ b/src/qml/UnifiedPatchPage.qml @@ -204,7 +204,6 @@ Page { anchors.left: parent.left anchors.right: parent.right anchors.margins: Theme.horizontalPageMargin - horizontalAlignment: Text.AlignJustify wrapMode: Text.WordWrap text: modelData.description } @@ -266,8 +265,6 @@ Page { } Label { anchors.verticalCenter: parent.verticalCenter - color: Theme.secondaryHighlightColor - linkColor: Theme.highlightColor text: linktext } } diff --git a/src/qml/WebPatchPage.qml b/src/qml/WebPatchPage.qml index f43963504..efc1e58bc 100644 --- a/src/qml/WebPatchPage.qml +++ b/src/qml/WebPatchPage.qml @@ -107,6 +107,36 @@ Page { */ property bool fetching: true + onPatchDataChanged: linksmodel.populate() + ListModel { + id: linksmodel + // simply defining the ListItems does not work, errors with "cannot assign a script item" + // so we append them when we're ready + function populate() { + if (patchData.discussion) { + linksmodel.append({ + "link": patchData.discussion, + "linktext": qsTranslate("", "Discussion"), + "iconname": "icon-s-chat" + }) + } + if (patchData.sources) { + linksmodel.append({ + "link": patchData.sources, + "linktext": qsTranslate("", "Sources"), + "iconname": "icon-s-developer" + }) + } + if (patchData.donations) { + linksmodel.append({ + "link": patchData.donations, + "linktext": qsTranslate("", "Donations"), + "iconname": "icon-s-invitation" + }) + } + } + } + onStatusChanged: { if (status == PageStatus.Active) { voteAction = PatchManager.checkVote(modelData.name) @@ -257,8 +287,12 @@ Page { } } + SectionHeader { + text: qsTranslate("", "Description") + } + Label { - color: Theme.highlightColor + color: Theme.secondaryHighlightColor anchors { left: parent.left right: parent.right @@ -270,69 +304,40 @@ Page { SectionHeader { text: qsTranslate("", "Links") - visible: !!patchData && (!!patchData.discussion || !!patchData.donations || !!patchData.sources) - } - - BackgroundItem { - width: parent.width - height: Theme.itemSizeExtraSmall - visible: !!patchData && !!patchData.discussion - - onClicked: { - Qt.openUrlExternally(patchData.discussion) - } - - Label { - color: Theme.highlightColor - anchors { - left: parent.left - right: parent.right - margins: Theme.horizontalPageMargin - verticalCenter: parent.verticalCenter - } - text: !!patchData && patchData.discussion ? qsTranslate("", "Open discussion link") : "" - } - } - - BackgroundItem { - width: parent.width - height: Theme.itemSizeExtraSmall - visible: !!patchData && !!patchData.donations - - onClicked: { - Qt.openUrlExternally(patchData.donations) - } - - Label { - color: Theme.highlightColor - anchors { - left: parent.left - right: parent.right - margins: Theme.horizontalPageMargin - verticalCenter: parent.verticalCenter - } - text: !!patchData && patchData.donations ? qsTranslate("", "Donate") : "" - } + visible: (linksmodel.count > 0) } - BackgroundItem { - width: parent.width - height: Theme.itemSizeExtraSmall - visible: !!patchData && patchData.sources - - onClicked: { - Qt.openUrlExternally(patchData.value.sources) - } - - Label { - color: Theme.highlightColor - anchors { - left: parent.left - right: parent.right - margins: Theme.horizontalPageMargin - verticalCenter: parent.verticalCenter + Column { + id: links + visible: linksmodel.count > 0 + anchors.left: parent.left + anchors.right: parent.right + anchors.margins: Theme.horizontalPageMargin + spacing: Theme.paddingSmall + Repeater { + model: linksmodel + delegate: Component { + ListItem { + contentHeight: Theme.itemSizeExtraSmall + width: parent.width + Row { + width: parent.width + anchors.verticalCenter: parent.verticalCenter + spacing: Theme.paddingMedium + Icon { + anchors.verticalCenter: parent.verticalCenter + source: "image://theme/" + iconname + sourceSize.width: Theme.iconSizeMedium + sourceSize.height: sourceSize.width + } + Label { + anchors.verticalCenter: parent.verticalCenter + text: linktext + } + } + onClicked: Qt.openUrlExternally(link) + } } - text: !!patchData && patchData.sources ? qsTranslate("", "Sources") : "" } } From 500f5c79fbc2940b5706ea420f9a70bb1281c23e Mon Sep 17 00:00:00 2001 From: Peter G Date: Mon, 6 May 2024 14:22:09 +0200 Subject: [PATCH 2/2] [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 --- src/qml/PatchManagerPage.qml | 83 ++++++++++++++++++++++++------- src/qml/RestartServicesDialog.qml | 57 +++++++++++++++------ 2 files changed, 106 insertions(+), 34 deletions(-) diff --git a/src/qml/PatchManagerPage.qml b/src/qml/PatchManagerPage.qml index b0ed4ae69..4bae477ef 100644 --- a/src/qml/PatchManagerPage.qml +++ b/src/qml/PatchManagerPage.qml @@ -188,7 +188,6 @@ Page { value: false } } - SilicaListView { id: view anchors.fill: parent @@ -196,9 +195,11 @@ Page { readonly property int topmostY: -view.headerItem.height readonly property int bottommostY: view.contentHeight - view.height - view.headerItem.height + Behavior on opacity { FadeAnimation { duration: 800 } } + PullDownMenu { busy: view.busy - enabled: !busy + enabled: !busy && background.drag && (background.drag.target === null) /* Disabled due to discussion at https://github.com/sailfishos-patches/patchmanager/pull/272#issuecomment-1047685536 @@ -518,23 +519,79 @@ Page { duration: 200 } - Switch { + GlassItem { + id: glass + width: Theme.itemSizeLarge + height: Theme.itemSizeLarge + anchors.horizontalCenter: parent.left + anchors.verticalCenter: nameLabel.verticalCenter + radius: 0.14 + falloffRadius: 0.13 + visible: (down || busy || patchObject.details.patched) + color: (down || busy || patchObject.details.patched) + ? Theme.rgba(Theme.primaryColor, Theme.opacityLow) + : Theme.rgba(Theme.secondaryColor, Theme.opacityLow) + Behavior on color { FadeAnimation {} } + } + + IconButton { id: appliedSwitch anchors.verticalCenter: parent.verticalCenter - automaticCheck: false - checked: patchObject.details.patched + x: Theme.paddingLarge + property string fallbackSource : fallbackIcon[patchObject.details.category] + readonly property var fallbackIcon: { + "browser": "image://theme/icon-m-website", + "camera": "image://theme/icon-m-camera", + "calendar": "image://theme/icon-m-date", + "clock": "image://theme/icon-m-clock", + "contacts": "image://theme/icon-m-users", + "email": "image://theme/icon-m-mail", + "gallery": "image://theme/icon-m-image", + "homescreen": "image://theme/icon-m-device", + "media": "image://theme/icon-m-media-playlists", + "messages": "image://theme/icon-m-message", + "phone": "image://theme/icon-m-call", + "silica": "image://theme/icon-m-sailfish", + "settings": "image://theme/icon-m-setting", + "keyboard": "image://theme/icon-m-keyboard", + "other": "image://theme/icon-m-patchmanager2", + } + icon.source: "image://theme/icon-m-patchmanager2" + Component.onCompleted:{ + var patchSource = PatchManager.iconForPatch(patchObject.details.patch, Theme.colorScheme ? (Theme.colorScheme == Theme.LightOnDark) : true) + if (patchSource.length > 0) { + icon.source = patchSource + } else if (fallbackSource) { + icon.source = fallbackSource + } + } + icon.sourceSize.height: Theme.iconSizeSmallPlus + icon.sourceSize.width: Theme.iconSizeSmallPlus + icon.height: Theme.iconSizeSmallPlus + icon.width: Theme.iconSizeSmallPlus + + palette.primaryColor: Theme.secondaryColor + palette.highlightColor: Theme.primaryColor + highlighted: down || patchObject.details.patched || busy + + property bool busy: patchObject.busy + enabled: !busy onClicked: background.doPatch() - enabled: !busy && PatchManager.loaded - busy: patchObject.busy + + Behavior on icon.opacity { PropertyAnimation { + duration: 1200; alwaysRunToEnd : true; easing.type: Easing.OutBack + }} } Column { id: nameLabel anchors.left: appliedSwitch.right - anchors.right: patchIcon.status == Image.Ready ? patchIcon.left : parent.right + //anchors.right: patchIcon.status == Image.Ready ? patchIcon.left : parent.right + anchors.right: appliedSwitch.status == Image.Ready ? appliedSwitch.left : parent.right anchors.margins: Theme.paddingMedium anchors.verticalCenter: parent.verticalCenter Label { + width: parent.width text: name color: patchObject.details.isCompatible ? background.down ? Theme.highlightColor : ( patchObject.details.patched ? Theme.primaryColor : Theme.secondaryColor ) : background.down ? Theme.highlightBackgroundFromColor(Theme.errorColor, Theme.colorScheme) : ( patchObject.details.patched ? Theme.errorColor : Theme.secondaryHighlightFromColor(Theme.errorColor, Theme.colorScheme) ) @@ -557,16 +614,6 @@ Page { } } } - - Image { - id: patchIcon - anchors.right: parent.right - anchors.verticalCenter: parent.verticalCenter - width: Theme.itemSizeExtraSmall - height: Theme.itemSizeExtraSmall - visible: status == Image.Ready - source: PatchManager.iconForPatch(patchObject.details.patch, Theme.colorScheme ? (Theme.colorScheme == Theme.LightOnDark) : true) - } } Component { diff --git a/src/qml/RestartServicesDialog.qml b/src/qml/RestartServicesDialog.qml index 9782bfc4c..bb11341e8 100644 --- a/src/qml/RestartServicesDialog.qml +++ b/src/qml/RestartServicesDialog.qml @@ -80,23 +80,48 @@ Dialog { width: parent.width - Theme.horizontalPageMargin * 2 Repeater { model: PatchManager.appsToRestart - delegate: Component { TextSwitch { - text: qsTranslate("Sections", modelData) - automaticCheck: false - checked: true - enabled: true - description: { - if ((modelData == "homescreen") - || (modelData == "silica")) - { return qsTranslate("","Note that this will close all apps."); } - else if (modelData == "settings") { return qsTranslate("","Note that this will close %1.").arg(qsTranslate("", "Patchmanager")); } - else if (modelData == "keyboard") { return "" } - else if (modelData == "other") { return "" } - else { return qsTranslate("","Note that this will close the %1 app.").arg(text); } + delegate: Component { Row { + spacing: Theme.paddingLarge + Icon { id: catIcon + source : iconList[modelData] || "image://theme/icon-m-setting" + readonly property var iconList: { + "browser": "image://theme/icon-m-website", + "camera": "image://theme/icon-m-camera", + "calendar": "image://theme/icon-m-date", + "clock": "image://theme/icon-m-clock", + "contacts": "image://theme/icon-m-users", + "email": "image://theme/icon-m-mail", + "gallery": "image://theme/icon-m-image", + "homescreen": "image://theme/icon-m-device", + "media": "image://theme/icon-m-media-playlists", + "messages": "image://theme/icon-m-message", + "phone": "image://theme/icon-m-call", + "silica": "image://theme/icon-m-sailfish", + "homescreen": "image://theme/icon-m-device", + "settings": "image://theme/icon-m-setting", + "keyboard": "image://theme/icon-m-keyboard", + "other": "image://theme/icon-m-patchmanager2", + } } - TouchBlocker { anchors.fill: parent} - } - } + Column { + Label { + text: qsTranslate("Sections", modelData) + } + Label { + font.pixelSize: Theme.fontSizeSmall + color: Theme.secondaryColor + text: { + if ((modelData == "homescreen") + || (modelData == "silica")) + { return qsTranslate("","Note that this will close all apps."); } + else if (modelData == "settings") { return qsTranslate("","Note that this will close %1.").arg(qsTranslate("", "Patchmanager")); } + else if (modelData == "keyboard") { return "" } + else if (modelData == "other") { return "" } + else { return qsTranslate("","Note that this will close the %1 app.").arg(text); } + } + } + } + }} } } }