Refactor

.gitignore

@@ -0,0 +1 @@
+.vscode

extension.js

@@ -19,6 +19,7 @@ var WorkspacesBar = GObject.registerClass(
 class WorkspacesBar extends PanelMenu.Button {
 	_init() {
 		super._init(0.0, 'Workspaces bar');
+		this.track_hover = false;
 
 		// define gsettings schema for workspaces names, get workspaces names, signal for settings key changed
 		this.workspaces_settings = new Gio.Settings({ schema: WORKSPACES_SCHEMA });
@@ -78,6 +79,19 @@ class WorkspacesBar extends PanelMenu.Button {
 		this.workspaces_names = this.workspaces_settings.get_strv(WORKSPACES_KEY);
 		this._update_ws();
 	}
+
+    _get_ws_box_class(ws_index) {
+        const BASE_CLASS = "desktop__label";
+        let classes = BASE_CLASS;
+
+        const has_windows = global.workspace_manager.get_workspace_by_index(ws_index)
+            .n_windows > 0;
+        const is_active = ws_index == this.active_ws_index;
+
+        if (is_active) classes += ` ${BASE_CLASS}--active`;
+        if (has_windows) classes += ` ${BASE_CLASS}--occupied`;
+        return classes;
+    }
 
 	// update the workspaces bar
     _update_ws() {
@@ -92,24 +106,11 @@ class WorkspacesBar extends PanelMenu.Button {
         for (let ws_index = 0; ws_index < this.ws_count; ++ws_index) {
 			this.ws_box = new St.Bin({visible: true, reactive: true, can_focus: true, track_hover: true});						
 			this.ws_box.label = new St.Label({y_align: Clutter.ActorAlign.CENTER});
-			if (ws_index == this.active_ws_index) {
-				if (global.workspace_manager.get_workspace_by_index(ws_index).n_windows > 0) {
-					this.ws_box.label.style_class = 'desktop-label-nonempty-active';
-				} else {
-					this.ws_box.label.style_class = 'desktop-label-empty-active';
-				}
-			} else {
-				if (global.workspace_manager.get_workspace_by_index(ws_index).n_windows > 0) {
-					this.ws_box.label.style_class = 'desktop-label-nonempty-inactive';
-				} else {
-					this.ws_box.label.style_class = 'desktop-label-empty-inactive';
-				}
-			}
-			if (this.workspaces_names[ws_index]) {
-				this.ws_box.label.set_text("  " + this.workspaces_names[ws_index] + "  ");
-			} else {
-				this.ws_box.label.set_text("  " + (ws_index + 1) + "  ");
-			}
+			this.ws_box.label.style_class = this._get_ws_box_class(ws_index);
+
+            const ws_name = String(this.workspaces_names[ws_index] || ws_index + 1);
+
+            this.ws_box.label.set_text(ws_name);
 			this.ws_box.set_child(this.ws_box.label);
 			this.ws_box.connect('button-release-event', () => this._toggle_ws(ws_index) );
 	        this.ws_bar.add_actor(this.ws_box);
@@ -118,7 +119,8 @@ class WorkspacesBar extends PanelMenu.Button {
 
     // activate workspace or show overview
     _toggle_ws(ws_index) {
-		if (global.workspace_manager.get_active_workspace_index() == ws_index) {
+        const is_active = global.workspace_manager.get_active_workspace_index() == ws_index
+		if (is_active) {
 			Main.overview.toggle();
 		} else {
 			global.workspace_manager.get_workspace_by_index(ws_index).activate(global.get_current_time());

stylesheet.css

@@ -1,67 +1,66 @@
-/* framed version */
+/* :::::::::::::::::::::::: */
+/* :::: Framed version :::: */
+/* :::::::::::::::::::::::: */
 
-/*.desktop-label-nonempty-active {
+/* empty inactive state
+.desktop__label {
   margin-left: 0px;
   margin-right: 8px;
-  background-color: rgba(128, 128, 128, 0.7);
-  color: rgba(207, 207, 207, 1);
-  border: 1px solid rgba(207, 207, 207, 0.7);
-  border-radius: 4px;
-}
 
-.desktop-label-nonempty-inactive {
-  margin-left: 0px;
-  margin-right: 8px;
+  padding: 0 4px;
+
   background-color: rgba(76, 76, 76, 0.7);
   color: rgba(207, 207, 207, 0.7);
-  border: 1px solid rgba(207, 207, 207, 0.7);
+  border: 1px solid rgba(207, 207, 207, 0);
   border-radius: 4px;
 }
 
-.desktop-label-empty-active {
-  margin-left: 0px;
-  margin-right: 8px;
-  background-color: rgba(128, 128, 128, 0.7);
-  color: rgba(207, 207, 207, 1);
-  border: 1px solid rgba(207, 207, 207, 0);
-  border-radius: 4px;
+.desktop__label.desktop__label--occupied {
+  background-color: rgba(96, 96, 96, 0.7);
+  border: 1px solid rgba(207, 207, 207, 0.7);
 }
 
-.desktop-label-empty-inactive {
-  margin-left: 0px;
-  margin-right: 8px;
-  background-color: rgba(76, 76, 76, 0.7);
-  color: rgba(207, 207, 207, 0.7);
-  border: 1px solid rgba(207, 207, 207, 0);
-  border-radius: 4px;
-}*/
+.desktop__label.desktop__label--active {
+  color: rgba(207, 207, 207, 1);
+  background-color: rgba(128, 128, 128, 0.7);
+} */
 
-/* non-framed version */
+/* :::::::::::::::::::::::: */
+/* :: Non-framed version :: */
+/* :::::::::::::::::::::::: */
 
-.desktop-label-nonempty-active {
+.desktop__label {
   margin-left: 0px;
   margin-right: 8px;
-  background-color: rgba(154, 154, 154, 0.7);
+
+  padding: 0 4px;
+
+  background-color: rgba(0, 0, 0, 0);
   border-radius: 4px;
 }
 
-.desktop-label-nonempty-inactive {
-  margin-left: 0px;
-  margin-right: 8px;
+.desktop__label.desktop__label--occupied {
   background-color: rgba(96, 96, 96, 0.7);
-  border-radius: 4px;
 }
 
-.desktop-label-empty-active {
-  margin-left: 0px;
-  margin-right: 8px;
+.desktop__label.desktop__label--active {
   background-color: rgba(154, 154, 154, 0.7);
-  border-radius: 4px;
 }
 
-.desktop-label-empty-inactive {
-  margin-left: 0px;
-  margin-right: 8px;
-  background-color: rgba(0, 0, 0, 0.0);
-  border-radius: 4px;
+/* :::::::::::::::::::::::: */
+/* ::::: i3 - version ::::: */
+/* :::::::::::::::::::::::: */
+
+/* .desktop__label {
+  padding: 8px 6px;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.6);
 }
+
+.desktop__label.desktop__label--occupied {
+  color: white;
+}
+
+.desktop__label.desktop__label--active {
+  background-color: rgba(255, 255, 255, 0.2);
+} */