Remove "%" from NVerticalPill add force close option to it too

NVerticalPill: add force close option
Any vertical bar widget: remove "%" display to have nice horizontal text
BarTab: add "always hide percentage" option so the pills will never
expand (opposite of always show percentage)

Modules/SettingsPanel/Bar/WidgetSettings/BatterySettings.qml

@@ -14,20 +14,36 @@ ColumnLayout {
   property var widgetMetadata: null
 
   // Local state
-  property bool valueAlwaysShowPercentage: widgetData.alwaysShowPercentage !== undefined ? widgetData.alwaysShowPercentage : widgetMetadata.alwaysShowPercentage
+  property string valueDisplayMode: widgetData.displayMode !== undefined ? widgetData.displayMode : widgetMetadata.displayMode
   property int valueWarningThreshold: widgetData.warningThreshold !== undefined ? widgetData.warningThreshold : widgetMetadata.warningThreshold
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
-    settings.alwaysShowPercentage = valueAlwaysShowPercentage
+    settings.displayMode = valueDisplayMode
     settings.warningThreshold = valueWarningThreshold
     return settings
   }
 
-  NToggle {
-    label: "Always show percentage"
-    checked: root.valueAlwaysShowPercentage
-    onToggled: checked => root.valueAlwaysShowPercentage = checked
+  NComboBox {
+    label: "Display mode"
+    description: "Choose how the percentage is displayed."
+    minimumWidth: 134 * scaling
+    model: ListModel {
+      ListElement {
+        key: "normal"
+        name: "Normal"
+      }
+      ListElement {
+        key: "alwaysShow"
+        name: "Always Show"
+      }
+      ListElement {
+        key: "alwaysHide"
+        name: "Always Hide"
+      }
+    }
+    currentKey: root.valueDisplayMode
+    onSelected: key => root.valueDisplayMode = key
   }
 
   NSpinBox {

Modules/SettingsPanel/Bar/WidgetSettings/BrightnessSettings.qml

@@ -14,17 +14,33 @@ ColumnLayout {
   property var widgetMetadata: null
 
   // Local state
-  property bool valueAlwaysShowPercentage: widgetData.alwaysShowPercentage !== undefined ? widgetData.alwaysShowPercentage : widgetMetadata.alwaysShowPercentage
+  property string valueDisplayMode: widgetData.displayMode !== undefined ? widgetData.displayMode : widgetMetadata.displayMode
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
-    settings.alwaysShowPercentage = valueAlwaysShowPercentage
+    settings.displayMode = valueDisplayMode
     return settings
   }
 
-  NToggle {
-    label: "Always show percentage"
-    checked: valueAlwaysShowPercentage
-    onToggled: checked => valueAlwaysShowPercentage = checked
+  NComboBox {
+    label: "Display mode"
+    description: "Choose how the percentage is displayed."
+    minimumWidth: 134 * scaling
+    model: ListModel {
+      ListElement {
+        key: "normal"
+        name: "Normal"
+      }
+      ListElement {
+        key: "alwaysShow"
+        name: "Always Show"
+      }
+      ListElement {
+        key: "alwaysHide"
+        name: "Always Hide"
+      }
+    }
+    currentKey: valueDisplayMode
+    onSelected: key => valueDisplayMode = key
   }
 }

Modules/SettingsPanel/Bar/WidgetSettings/KeyboardLayoutSettings.qml

@@ -14,18 +14,33 @@ ColumnLayout {
   property var widgetMetadata: null
 
   // Local state
-  property bool valueForceOpen: widgetData.forceOpen !== undefined ? widgetData.forceOpen : widgetMetadata.forceOpen
+  property string valueDisplayMode: widgetData.displayMode !== undefined ? widgetData.displayMode : widgetMetadata.displayMode
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
-    settings.forceOpen = valueForceOpen
+    settings.displayMode = valueDisplayMode
     return settings
   }
 
-  NToggle {
-    label: "Force open"
-    description: "Keep the keyboard layout widget always expanded."
-    checked: valueForceOpen
-    onToggled: checked => valueForceOpen = checked
+  NComboBox {
+    label: "Display mode"
+    description: "Choose how the keyboard layout is displayed."
+    minimumWidth: 134 * scaling
+    model: ListModel {
+      ListElement {
+        key: "normal"
+        name: "Normal"
+      }
+      ListElement {
+        key: "forceOpen"
+        name: "Force Open"
+      }
+      ListElement {
+        key: "alwaysHide"
+        name: "Always Hide"
+      }
+    }
+    currentKey: valueDisplayMode
+    onSelected: key => valueDisplayMode = key
   }
 }

Modules/SettingsPanel/Bar/WidgetSettings/MicrophoneSettings.qml

@@ -14,17 +14,33 @@ ColumnLayout {
   property var widgetMetadata: null
 
   // Local state
-  property bool valueAlwaysShowPercentage: widgetData.alwaysShowPercentage !== undefined ? widgetData.alwaysShowPercentage : widgetMetadata.alwaysShowPercentage
+  property string valueDisplayMode: widgetData.displayMode !== undefined ? widgetData.displayMode : widgetMetadata.displayMode
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
-    settings.alwaysShowPercentage = valueAlwaysShowPercentage
+    settings.displayMode = valueDisplayMode
     return settings
   }
 
-  NToggle {
-    label: "Always show percentage"
-    checked: valueAlwaysShowPercentage
-    onToggled: checked => valueAlwaysShowPercentage = checked
+  NComboBox {
+    label: "Display mode"
+    description: "Choose how the percentage is displayed."
+    minimumWidth: 134 * scaling
+    model: ListModel {
+      ListElement {
+        key: "normal"
+        name: "Normal"
+      }
+      ListElement {
+        key: "alwaysShow"
+        name: "Always Show"
+      }
+      ListElement {
+        key: "alwaysHide"
+        name: "Always Hide"
+      }
+    }
+    currentKey: valueDisplayMode
+    onSelected: key => valueDisplayMode = key
   }
 }

Modules/SettingsPanel/Bar/WidgetSettings/VolumeSettings.qml

@@ -14,17 +14,33 @@ ColumnLayout {
   property var widgetMetadata: null
 
   // Local state
-  property bool valueAlwaysShowPercentage: widgetData.alwaysShowPercentage !== undefined ? widgetData.alwaysShowPercentage : widgetMetadata.alwaysShowPercentage
+  property string valueDisplayMode: widgetData.displayMode !== undefined ? widgetData.displayMode : widgetMetadata.displayMode
 
   function saveSettings() {
     var settings = Object.assign({}, widgetData || {})
-    settings.alwaysShowPercentage = valueAlwaysShowPercentage
+    settings.displayMode = valueDisplayMode
     return settings
   }
 
-  NToggle {
-    label: "Always show percentage"
-    checked: valueAlwaysShowPercentage
-    onToggled: checked => valueAlwaysShowPercentage = checked
+  NComboBox {
+    label: "Display mode"
+    description: "Choose how the percentage is displayed."
+    minimumWidth: 134 * scaling
+    model: ListModel {
+      ListElement {
+        key: "normal"
+        name: "Normal"
+      }
+      ListElement {
+        key: "alwaysShow"
+        name: "Always Show"
+      }
+      ListElement {
+        key: "alwaysHide"
+        name: "Always Hide"
+      }
+    }
+    currentKey: valueDisplayMode
+    onSelected: key => valueDisplayMode = key
   }
 }