Configurable Icons for the indications, and I18n.

Assets/Translations/en.json

@@ -1258,6 +1258,18 @@
         }
       },
       "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."

Modules/Bar/Widgets/LockKeys.qml

@@ -6,7 +6,6 @@ import qs.Commons
 import qs.Modules.Settings
 import qs.Services
 import qs.Widgets
-//import qs.Modules.Bar.Extras
 
 Rectangle {
   id: root
@@ -30,6 +29,7 @@ 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
@@ -50,6 +50,8 @@ 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
@@ -57,17 +59,17 @@ Rectangle {
 
       NIcon {
         visible: root.showCaps
-        icon: "letter-c"
+        icon: layout.indicatorStyle[0]
         color: LockKeysService.capsLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
       NIcon {
         visible: root.showNum
-        icon: "letter-n"
+        icon: layout.indicatorStyle[1]
         color: LockKeysService.numLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
       NIcon {
         visible: root.showScroll
-        icon: "letter-s"
+        icon: layout.indicatorStyle[2]
         color: LockKeysService.scrollLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
     }
@@ -79,19 +81,42 @@ Rectangle {
 
       NIcon {
         visible: root.showCaps
-        icon: "letter-c"
+        icon: layout.indicatorStyle[0]
         color: LockKeysService.capsLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
       NIcon {
         visible: root.showNum
-        icon: "letter-n"
+        icon: layout.indicatorStyle[1]
         color: LockKeysService.numLockOn ? Color.mTertiary : Qt.alpha(Color.mOnSurfaceVariant, 0.3)
       }
       NIcon {
         visible: root.showScroll
-        icon: "letter-s"
+        icon: layout.indicatorStyle[2]
         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,18 +14,53 @@ 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
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
+    settings.indicatorStyle = valueIndicatorStyle
     settings.showCapsLock = valueShowCapsLock
     settings.showNumLock = valueShowNumLock
     settings.showScrollLock = valueShowScrollLock
     return settings
   }
 
+  NComboBox {
+    Layout.fillWidth: true
+    label: I18n.tr("bar.widget-settings.lock-keys.indicator-style.label")
+    description: I18n.tr("bar.widget-settings.lock-keys.indicator-style.description")
+    model: [{
+      "key": "large",
+      "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.large")
+    }, {
+      "key": "small",
+      "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.small")
+    }, {
+      "key": "square",
+      "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.square")
+    }, {
+      "key": "square-round",
+      "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.square-round")
+    }, {
+      "key": "circle",
+      "name": I18n.tr("bar.widget-settings.lock-keys.indicator-style.circle")
+    }, {
+      "key": "circle-dash",
+      "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 {
     label: I18n.tr("bar.widget-settings.lock-keys.show-caps-lock.label")
     description: I18n.tr("bar.widget-settings.lock-keys.show-caps-lock.description")

Services/BarWidgetRegistry.qml

@@ -101,6 +101,7 @@ Singleton {
                                   },
                                   "LockKeys": {
                                     "allowUserSettings": true,
+                                    "indicatorStyle": "large",
                                     "showCapsLock": true,
                                     "showNumLock": true,
                                     "showScrollLock": true