Named workspaces improvements

- renamed settings to showWorkspacesNames (plural)
- improved overall look and readability

Commons/Settings.qml

@@ -122,7 +122,7 @@ Singleton {
         property bool showActiveWindowIcon: true
         property bool alwaysShowBatteryPercentage: false
         property real backgroundOpacity: 1.0
-        property bool showWorkspaceNames: false
+        property bool showWorkspacesNames: false
         property list<string> monitors: []
 
         // Widget configuration for modular bar system

Modules/Bar/Widgets/Workspace.qml

@@ -27,23 +27,27 @@ Item {
 
   signal workspaceChanged(int workspaceId, color accentColor)
 
-  implicitHeight: Math.round(36 * scaling)
+  implicitHeight: Math.round(Style.barHeight * scaling)
   implicitWidth: {
     let total = 0
     for (var i = 0; i < localWorkspaces.count; i++) {
       const ws = localWorkspaces.get(i)
-      if (ws.isFocused)
+      total += calculatedWsWidth(ws)
-        total += Math.round(44 * scaling)
-      else if (ws.isActive)
-        total += Math.round(28 * scaling)
-      else
-        total += Math.round(16 * scaling)
     }
     total += Math.max(localWorkspaces.count - 1, 0) * spacingBetweenPills
     total += horizontalPadding * 2
     return total
   }
 
+  function calculatedWsWidth(ws) {
+    if (ws.isFocused)
+      return Math.round(44 * scaling)
+    else if (ws.isActive)
+      return Math.round(28 * scaling)
+    else
+      return Math.round(20 * scaling)
+  }
+
   Component.onCompleted: {
     refreshWorkspaces()
   }
@@ -148,15 +152,8 @@ Item {
       model: localWorkspaces
       Item {
         id: workspacePillContainer
-        height: Math.round(12 * scaling)
+        height: Math.round(18 * scaling)
-        width: {
+        width: root.calculatedWsWidth(model)
-          if (model.isFocused)
-            return Math.round(44 * scaling)
-          else if (model.isActive)
-            return Math.round(28 * scaling)
-          else
-            return Math.round(16 * scaling)
-        }
 
         Rectangle {
           id: workspacePill
@@ -164,25 +161,31 @@ Item {
 
           Loader {
             anchors.centerIn: parent
-            active: Settings.data.bar.showWorkspaceNames 
+            active: Settings.data.bar.showWorkspacesNames
             sourceComponent: Component {
               Text {
-                text: model.name.substring(0,2)
+                text: model.name.substring(0, 2)
                 font.pointSize: Style.fontSizeXS * scaling
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 wrapMode: Text.Wrap
+                color: {
+                  if (model.isFocused)
+                    return Color.mOnPrimary
+                  if (model.isUrgent)
+                    return Color.mOnError
+                  if (model.isActive || model.isOccupied)
+                    return Color.mOnSecondary
+                  if (model.isUrgent)
+                    return Color.mOnError
+
+                  return Color.mOnSurface
+                }
               }
             }
           }
 
-          radius: {
+          radius: width * 0.5
-            if (model.isFocused)
-              return Math.round(12 * scaling)
-            else
-              // half of focused height (if you want to animate this too)
-              return Math.round(6 * scaling)
-          }
           color: {
             if (model.isFocused)
               return Color.mPrimary

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -121,19 +121,19 @@ ColumnLayout {
 
         NToggle {
           label: "Show Battery Percentage"
-          description: "Show battery percentage at all times."
+          description: "Display battery percentage at all times."
           checked: Settings.data.bar.alwaysShowBatteryPercentage
           onToggled: checked => {
                        Settings.data.bar.alwaysShowBatteryPercentage = checked
                      }
         }
-        
+
         NToggle {
-          label: "Show Workspace Names"
+          label: "Show Workspaces Names"
-          description: "Show the workspace names on the workspace indicators"
+          description: "Display the workspace name in the workspace indicator"
-          checked: Settings.data.bar.showWorkspaceNames
+          checked: Settings.data.bar.showWorkspacesNames
           onToggled: checked => {
-                       Settings.data.bar.showWorkspaceNames = checked
+                       Settings.data.bar.showWorkspacesNames = checked
                      }
         }