feat: misc settings UI adjustments

Author: luisbocanegra

package/contents/ui/components/ComboBoxWithIcons.qml

@@ -0,0 +1,57 @@
+/*
+    SPDX-FileCopyrightText: 2020 Tobias Fella <fella@posteo.de>
+    SPDX-FileCopyrightText: 2023 ivan tkachenko <me@ratijas.tk>
+
+    SPDX-License-Identifier: GPL-2.0-or-later
+*/
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import org.kde.kirigami as Kirigami
+import org.kde.kitemmodels as KItemModels
+
+QQC2.ComboBox {
+    id: comboBox
+
+    onActivated: component.select(currentIndex)
+
+    // HACK QQC2 doesn't support icons, so we just tamper with the desktop style ComboBox's background
+    function loadProps() {
+        if (!background || !background.hasOwnProperty("properties")) {
+            //not a KQuickStyleItem
+            return;
+        }
+
+        const props = background.properties || {};
+
+        background.properties = Qt.binding(() => {
+            const modelIndex = model.index(currentIndex, 0);
+            const currentIcon = model.data(modelIndex, model.KItemModels.KRoleNames.role("icon"));
+            return Object.assign(props, {
+                currentIcon,
+                iconColor: Kirigami.Theme.textColor
+            });
+        });
+    }
+
+    Connections {
+        target: comboBox.component
+        function onIndexChanged() {
+            comboBox.loadProps();
+        }
+    }
+
+    delegate: QQC2.ItemDelegate {
+        width: ListView.view.width
+        text: model.name
+        highlighted: comboBox.highlightedIndex == index
+        icon.name: model.icon
+        // fix bottom padding on the popup
+        leftPadding: Kirigami.Units.mediumSpacing
+        topPadding: Kirigami.Units.mediumSpacing
+        rightPadding: Kirigami.Units.mediumSpacing
+        bottomPadding: Kirigami.Units.mediumSpacing
+    }
+
+    Component.onCompleted: loadProps()
+}

package/contents/ui/components/Header.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import org.kde.plasma.plasmoid
 import "../" as Root
 
 RowLayout {
@@ -14,43 +15,33 @@ RowLayout {
     readonly property string projects: "https://github.com/" + ghUser + "?tab=repositories&q=&type=source&language=&sort=stargazers"
     readonly property string kdeStore: "https://store.kde.org/p/2139746"
     readonly property string matrixRoom: "https://matrix.to/#/#kde-plasma-smart-video-wallpaper-reborn:matrix.org"
-    property string wallpaperVersion
-
-    Root.RunCommand {
-        id: runCommand
-        onExited: (cmd, exitCode, exitStatus, stdout, stderr) => {
-            if (exitCode !== 0) {
-                root.wallpaperVersion = stderr;
-                console.log(cmd, stderr);
-            } else {
-                try {
-                    root.wallpaperVersion = JSON.parse(stdout).KPlugin.Version;
-                } catch (e) {
-                    console.log(e);
-                    root.wallpaperVersion = e;
-                }
-            }
-        }
-    }
+    property string wallpaperVersion: Plasmoid.metaData.version
 
     Component.onCompleted: {
         const metaDataFile = Qt.resolvedUrl("../../../").toString().substring(7) + "metadata.json";
         console.log(metaDataFile);
-        runCommand.run(`cat "${metaDataFile}"`);
     }
 
-    Item {
-        Layout.fillWidth: true
+    // RowLayout {
+    // }
+    Layout.alignment: Qt.AlignRight
+    Label {
+        text: wallpaperVersion
+        font.weight: Font.DemiBold
     }
-    RowLayout {
-        Layout.alignment: Qt.AlignRight
-        Label {
-            text: i18n("Version:")
-        }
-        Label {
-            text: wallpaperVersion
-            font.weight: Font.DemiBold
+
+    Button {
+        id: linksButton
+        text: i18n("About")
+        icon.name: "info-symbolic"
+        onClicked: {
+            if (menu.opened) {
+                menu.close();
+            } else {
+                menu.open();
+            }
         }
+        Layout.fillHeight: true
     }
 
     Menu {
@@ -144,15 +135,4 @@ RowLayout {
             icon.name: "starred-symbolic"
         }
     }
-    ToolButton {
-        id: linksButton
-        icon.name: "application-menu"
-        onClicked: {
-            if (menu.opened) {
-                menu.close();
-            } else {
-                menu.open();
-            }
-        }
-    }
 }