Merge pull request #645 from MrDowntempo/feat/better-lockkeys-settings

Feat/better lockkeys settings

Assets/Translations/de.json

@@ -1319,18 +1319,7 @@
           "description": "Scroll-Lock-Status anzeigen.",
           "label": "Rollenfeststelltaste"
         },
-        "indicator-style": {
+        "browse": "Durchsuchen"
-          "circle": "Kreisbuchstaben",
-          "circle-dash": "Gestrichelte Kreisbuchstaben",
-          "circle-dot": "Punktierte Kreisbuchstaben",
-          "description": "Symbolstil für die Feststelltastenanzeigen",
-          "hex": "Sechseck-Buchstaben",
-          "label": "Indikatorstil",
-          "large": "Große Buchstaben",
-          "small": "Kleinbuchstaben",
-          "square": "Quadratische Buchstaben",
-          "square-round": "Abgerundete quadratische Buchstaben"
-        }
       }
     }
   },

Assets/Translations/en.json

@@ -1290,18 +1290,6 @@
         }
       },
       "lock-keys": {
-        "indicator-style": {
-          "label": "Indicator Style",
-          "description": "Icon style for the lock key indicators",
-          "large": "Large Letters",
-          "small": "Small Letters",
-          "square": "Square Letters",
-          "square-round": "Rounded Squre Letters",
-          "circle": "Circle Letters",
-          "circle-dash": "Dashed Circle Letters",
-          "circle-dot": "Dotted Circle Letters",
-          "hex": "Hexagon Letters"
-        },
         "show-caps-lock": {
           "label": "Caps Lock",
           "description": "Display caps lock status."
@@ -1313,7 +1301,8 @@
         "show-scroll-lock": {
           "label": "Scroll Lock",
           "description": "Display scroll lock status."
-        }
+        },
+        "browse": "Browse"
       }
     }
   },
@@ -1484,9 +1473,9 @@
     "colors": {
       "primary": "Primary",
       "secondary": "Secondary",
-      "tertiary":  "Tertiary",
+      "tertiary": "Tertiary",
-      "error":  "Error",
+      "error": "Error",
-      "onSurface":  "On Surface"
+      "onSurface": "On Surface"
     },
     "bar": {
       "position": {

Assets/Translations/es.json

@@ -1302,18 +1302,7 @@
           "description": "Mostrar el estado de Bloq Despl.",
           "label": "Bloq Despl"
         },
-        "indicator-style": {
+        "browse": "Navegar"
-          "circle": "Letras circulares",
-          "circle-dash": "Letras de círculo discontinuo",
-          "circle-dot": "Letras de círculo punteado",
-          "description": "Estilo de icono para los indicadores de las teclas de bloqueo",
-          "hex": "Letras hexagonales",
-          "label": "Estilo del indicador",
-          "large": "Letras grandes",
-          "small": "Letras minúsculas",
-          "square": "Letras cuadradas",
-          "square-round": "Letras cuadradas redondeadas"
-        }
       }
     }
   },

Assets/Translations/fr.json

@@ -1302,18 +1302,7 @@
           "description": "Afficher l'état du verrouillage du défilement.",
           "label": "Verr Maj"
         },
-        "indicator-style": {
+        "browse": "Parcourir"
-          "circle": "Lettres circulaires",
-          "circle-dash": "Lettres en cercle pointillé",
-          "circle-dot": "Lettres en pointillés dans un cercle",
-          "description": "Style d'icône pour les indicateurs de la touche de verrouillage",
-          "hex": "Lettres hexagonales",
-          "label": "Style d'indicateur",
-          "large": "Grandes lettres",
-          "small": "Petites lettres",
-          "square": "Lettres carrées",
-          "square-round": "Lettres carrées arrondies"
-        }
       }
     }
   },

Assets/Translations/pt.json

@@ -1302,18 +1302,7 @@
           "description": "Exibir o status do Scroll Lock.",
           "label": "Scroll Lock"
         },
-        "indicator-style": {
+        "browse": "Navegar"
-          "circle": "Letras Circulares",
-          "circle-dash": "Letras em Círculo Tracejadas",
-          "circle-dot": "Letras de Círculo Pontilhado",
-          "description": "Estilo de ícone para os indicadores da tecla de bloqueio.",
-          "hex": "Letras Hexagonais",
-          "label": "Estilo do Indicador",
-          "large": "Letras grandes",
-          "small": "Letras minúsculas",
-          "square": "Letras Quadradas",
-          "square-round": "Letras Quadradas Arredondadas"
-        }
       }
     }
   },

Assets/Translations/zh-CN.json

@@ -1302,18 +1302,7 @@
           "description": "显示滚动锁定状态。",
           "label": "滚动锁定"
         },
-        "indicator-style": {
+        "browse": "浏览"
-          "hex": "六边形字母",
-          "large": "大写字母",
-          "small": "小写字母",
-          "square": "方块字",
-          "square-round": "圆角方形字母",
-          "circle": "圆圈字母",
-          "circle-dash": "虚线圆圈字母",
-          "circle-dot": "虚线圆圈字母",
-          "description": "锁键指示器的图标样式",
-          "label": "指标样式"
-        }
       }
     }
   },

Modules/Bar/Widgets/LockKeys.qml

@@ -30,11 +30,14 @@ Rectangle {
   readonly property string barPosition: Settings.data.bar.position
   readonly property bool isVertical: barPosition === "left" || barPosition === "right"
 
-  readonly property string iconStyle: (widgetSettings.indicatorStyle !== undefined) ? widgetSettings.indicatorStyle : widgetMetadata.indicatorStyle
   readonly property bool showCaps: (widgetSettings.showCapsLock !== undefined) ? widgetSettings.showCapsLock : widgetMetadata.showCapsLock
   readonly property bool showNum: (widgetSettings.showNumLock !== undefined) ? widgetSettings.showNumLock : widgetMetadata.showNumLock
   readonly property bool showScroll: (widgetSettings.showScrollLock !== undefined) ? widgetSettings.showScrollLock : widgetMetadata.showScrollLock
 
+  readonly property string capsIcon: widgetSettings.capsLockIcon !== undefined ? widgetSettings.capsLockIcon : widgetMetadata.capsLockIcon
+  readonly property string numIcon: widgetSettings.numLockIcon !== undefined ? widgetSettings.numLockIcon : widgetMetadata.numLockIcon
+  readonly property string scrollIcon: widgetSettings.scrollLockIcon !== undefined ? widgetSettings.scrollLockIcon : widgetMetadata.scrollLockIcon
+
   implicitWidth: isVertical ? Style.capsuleHeight : Math.round(layout.implicitWidth + Style.marginM * 2)
   implicitHeight: isVertical ? Math.round(layout.implicitHeight + Style.marginM * 2) : Style.capsuleHeight
 
@@ -51,8 +54,6 @@ Rectangle {
     implicitWidth: rowLayout.visible ? rowLayout.implicitWidth : colLayout.implicitWidth
     implicitHeight: rowLayout.visible ? rowLayout.implicitHeight : colLayout.implicitHeight
 
-    readonly property var indicatorStyle: root.getIndicatorStyle(root.iconStyle)
-
     RowLayout {
       id: rowLayout
       visible: !root.isVertical
@@ -60,17 +61,17 @@ Rectangle {
 
       NIcon {
         visible: root.showCaps
-        icon: layout.indicatorStyle[0]
+        icon: root.capsIcon
         color: LockKeysService.capsLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
       NIcon {
         visible: root.showNum
-        icon: layout.indicatorStyle[1]
+        icon: root.numIcon
         color: LockKeysService.numLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
       NIcon {
         visible: root.showScroll
-        icon: layout.indicatorStyle[2]
+        icon: root.scrollIcon
         color: LockKeysService.scrollLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
     }
@@ -82,42 +83,19 @@ Rectangle {
 
       NIcon {
         visible: root.showCaps
-        icon: layout.indicatorStyle[0]
+        icon: root.capsIcon
         color: LockKeysService.capsLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
       NIcon {
         visible: root.showNum
-        icon: layout.indicatorStyle[1]
+        icon: root.numIcon
         color: LockKeysService.numLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
       NIcon {
         visible: root.showScroll
-        icon: layout.indicatorStyle[2]
+        icon: root.scrollIcon
         color: LockKeysService.scrollLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
     }
   }
-
-  function getIndicatorStyle(styleName) {
-    switch (styleName) {
-    case "large":
-      return ["letter-c", "letter-n", "letter-s"]
-    case "small":
-      return ["letter-c-small", "letter-n-small", "letter-s-small"]
-    case "square":
-      return ["square-letter-c", "square-letter-n", "square-letter-s"]
-    case "square-round":
-      return ["square-rounded-letter-c", "square-rounded-letter-n", "square-rounded-letter-s"]
-    case "circle":
-      return ["circle-letter-c", "circle-letter-n", "circle-letter-s"]
-    case "circle-dash":
-      return ["circle-dashed-letter-c", "circle-dashed-letter-n", "circle-dashed-letter-s"]
-    case "circle-dot":
-      return ["circle-dotted-letter-c", "circle-dotted-letter-n", "circle-dotted-letter-s"]
-    case "hex":
-      return ["hexagon-letter-c", "hexagon-letter-n", "hexagon-letter-s"]
-    default:
-      return ["letter-c", "letter-n", "letter-s"]
-    }
-  }
 }

Modules/Settings/Bar/WidgetSettings/LockKeysSettings.qml

@@ -14,71 +14,121 @@ ColumnLayout {
   property var widgetMetadata: null
 
   // Local state
-  property string valueIndicatorStyle: widgetData.indicatorStyle !== undefined ? widgetData.indicatorStyle : widgetMetadata.indicatorStyle
   property bool valueShowCapsLock: widgetData.showCapsLock !== undefined ? widgetData.showCapsLock : widgetMetadata.showCapsLock
   property bool valueShowNumLock: widgetData.showNumLock !== undefined ? widgetData.showNumLock : widgetMetadata.showNumLock
   property bool valueShowScrollLock: widgetData.showScrollLock !== undefined ? widgetData.showScrollLock : widgetMetadata.showScrollLock
 
+  property string capsIcon: widgetData.capsLockIcon !== undefined ? widgetData.capsLockIcon : widgetMetadata.capsLockIcon
+  property string numIcon: widgetData.numLockIcon !== undefined ? widgetData.numLockIcon : widgetMetadata.numLockIcon
+  property string scrollIcon: widgetData.scrollLockIcon !== undefined ? widgetData.scrollLockIcon : widgetMetadata.scrollLockIcon
+
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
-    settings.indicatorStyle = valueIndicatorStyle
     settings.showCapsLock = valueShowCapsLock
     settings.showNumLock = valueShowNumLock
     settings.showScrollLock = valueShowScrollLock
+    settings.capsLockIcon = capsIcon
+    settings.numLockIcon = numIcon
+    settings.scrollLockIcon = scrollIcon
     return settings
   }
 
-  NComboBox {
+  RowLayout {
-    Layout.fillWidth: true
+    spacing: Style.marginM
-    label: I18n.tr("bar.widget-settings.lock-keys.indicator-style.label")
+
-    description: I18n.tr("bar.widget-settings.lock-keys.indicator-style.description")
+    NToggle {
-    model: [{
+      label: I18n.tr("bar.widget-settings.lock-keys.show-caps-lock.label")
-        "key": "large",
+      description: I18n.tr("bar.widget-settings.lock-keys.show-caps-lock.description")
-        "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.large")
+      checked: valueShowCapsLock
-      }, {
+      onToggled: checked => valueShowCapsLock = checked
-        "key": "small",
+    }
-        "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.small")
+
-      }, {
+    NIcon {
-        "key": "square",
+      Layout.alignment: Qt.AlignVCenter
-        "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.square")
+      icon: capsIcon
-      }, {
+      pointSize: Style.fontSizeXL
-        "key": "square-round",
+      visible: capsIcon !== ""
-        "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.square-round")
+    }
-      }, {
+
-        "key": "circle",
+    NButton {
-        "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.circle")
+      text: I18n.tr("bar.widget-settings.lock-keys.browsedd")
-      }, {
+      onClicked: capsPicker.open()
-        "key": "circle-dash",
+      enabled: valueShowCapsLock
-        "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.circle-dash")
+    }
-      }, {
-        "key": "circle-dot",
-        "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.circle-dot")
-      }, {
-        "key": "hex",
-        "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.hex")
-      }]
-    currentKey: valueIndicatorStyle
-    onSelected: key => valueIndicatorStyle = key
   }
 
-  NToggle {
+  NIconPicker {
-    label: I18n.tr("bar.widget-settings.lock-keys.show-caps-lock.label")
+    id: capsPicker
-    description: I18n.tr("bar.widget-settings.lock-keys.show-caps-lock.description")
+    initialIcon: capsIcon
-    checked: valueShowCapsLock
+    query: "letter-c"
-    onToggled: checked => valueShowCapsLock = checked
+    onIconSelected: function (iconName) {
+      capsIcon = iconName
+    }
   }
 
-  NToggle {
+  RowLayout {
-    label: I18n.tr("bar.widget-settings.lock-keys.show-num-lock.label")
+    spacing: Style.marginM
-    description: I18n.tr("bar.widget-settings.lock-keys.show-num-lock.description")
+
-    checked: valueShowNumLock
+    NToggle {
-    onToggled: checked => valueShowNumLock = checked
+      label: I18n.tr("bar.widget-settings.lock-keys.show-num-lock.label")
+      description: I18n.tr("bar.widget-settings.lock-keys.show-num-lock.description")
+      checked: valueShowNumLock
+      onToggled: checked => valueShowNumLock = checked
+    }
+
+    NIcon {
+      Layout.alignment: Qt.AlignVCenter
+      icon: numIcon
+      pointSize: Style.fontSizeXL
+      visible: numIcon !== ""
+    }
+
+    NButton {
+      text: I18n.tr("bar.widget-settings.lock-keys.browse")
+      onClicked: numPicker.open()
+      enabled: valueShowNumLock
+    }
   }
 
-  NToggle {
+  NIconPicker {
-    label: I18n.tr("bar.widget-settings.lock-keys.show-scroll-lock.label")
+    id: numPicker
-    description: I18n.tr("bar.widget-settings.lock-keys.show-scroll-lock.description")
+    initialIcon: numIcon
-    checked: valueShowScrollLock
+    query: "letter-n"
-    onToggled: checked => valueShowScrollLock = checked
+    onIconSelected: function (iconName) {
+      numIcon = iconName
+    }
+  }
+
+  RowLayout {
+    spacing: Style.marginM
+
+    NToggle {
+      label: I18n.tr("bar.widget-settings.lock-keys.show-scroll-lock.label")
+      description: I18n.tr("bar.widget-settings.lock-keys.show-scroll-lock.description")
+      checked: valueShowScrollLock
+      onToggled: checked => valueShowScrollLock = checked
+    }
+
+    NIcon {
+      Layout.alignment: Qt.AlignVCenter
+      icon: scrollIcon
+      pointSize: Style.fontSizeXL
+      visible: scrollIcon !== ""
+    }
+
+    NButton {
+      text: I18n.tr("bar.widget-settings.lock-keys.browse")
+      onClicked: scrollPicker.open()
+      enabled: valueShowScrollLock
+    }
+  }
+
+  NIconPicker {
+    id: scrollPicker
+    initialIcon: scrollIcon
+    query: "letter-s"
+    onIconSelected: function (iconName) {
+      scrollIcon = iconName
+    }
   }
 }

Services/BarWidgetRegistry.qml

@@ -101,10 +101,12 @@ Singleton {
                                   },
                                   "LockKeys": {
                                     "allowUserSettings": true,
-                                    "indicatorStyle": "large",
                                     "showCapsLock": true,
                                     "showNumLock": true,
-                                    "showScrollLock": true
+                                    "showScrollLock": true,
+                                    "capsLockIcon": "letter-c",
+                                    "numLockIcon": "letter-n",
+                                    "scrollLockIcon": "letter-s"
                                   },
                                   "MediaMini": {
                                     "allowUserSettings": true,