Merge pull request #85 from Favo02/css-refactor

CSS refactor, Add swap indicators position setting

README.md

@@ -39,6 +39,9 @@
 > [!TIP]
 > Customize CSS editing `stylesheet.css` file. Add more classes simply searching `css_*` variables in `extension.js`.
 
+> [!WARNING]
+> Centering vertically the labels independently from the font used is problematic. Tweak `.wboa-label` classes in `stylesheet.css` to adjust it.
+
 <img src="https://github.com/Favo02/workspaces-by-open-apps/assets/59796435/29f066c6-b2e8-411d-8430-faf4d921db27" alt="Preview" height="40">
 
 <img src="https://github.com/Favo02/workspaces-by-open-apps/assets/59796435/72d6ea78-640a-4f1f-8c50-ddf5bb3baabb" alt="Preview" height="40">

src/application.js

@@ -60,7 +60,7 @@ export default class Application extends St.BoxLayout {
    * @param {Map} occurrences
    */
   _render_occurrences_label(occurrences, window) {
-    const css_classes_text = [ "wboa-app-group-text" ]
+    const css_classes_text = [ "wboa-label" ]
     if ((this._settings.icons_group === 1) && (occurrences.get(window.get_pid()).count > 1)) {
       this.add_child(new St.Label({
         style_class: css_classes_text.join(" "),

src/extension.js

@@ -59,6 +59,7 @@ export default class WorkspacesByOpenApps extends Extension {
       indicator_show_focused_app: rs.get_boolean("indicator-show-focused-app"),
       indicator_color: rs.get_string("indicator-color"),
       indicator_round_borders: rs.get_boolean("indicator-round-borders"),
+      indicator_swap_position: rs.get_boolean("indicator-swap-position"),
 
       indicator_show_indexes: rs.get_boolean("indicator-show-indexes"),
       indicator_hide_empty: rs.get_boolean("indicator-hide-empty"),
@@ -216,11 +217,19 @@ export default class WorkspacesByOpenApps extends Extension {
     const css_inline_workspace = `border-color: ${this._settings.indicator_color}`
 
     const css_classes_workspace = [ "wboa-workspace" ]
+    if (this._settings.indicator_swap_position) {
+      css_classes_workspace.push("wboa-top")
+    } else {
+      css_classes_workspace.push("wboa-bottom")
+    }
     if (is_active) css_classes_workspace.push("wboa-active")
     if (!this._settings.indicator_show_active_workspace) css_classes_workspace.push("wboa-no-indicator")
-    if (!this._settings.indicator_round_borders) css_classes_workspace.push("wboa-no-rounded")
+    if (this._settings.indicator_round_borders) css_classes_workspace.push("wboa-rounded")
+
+    const css_classes_panel = [ "panel-button", "wboa-panel-rounded" ]
+    if (!this._settings.indicator_round_borders) css_classes_panel.push("wboa-no-rounded")
 
-    return new Workspace(this._settings, workspace, windows, index, is_active, is_other_monitor, css_inline_workspace, css_classes_workspace)
+    return new Workspace(this._settings, workspace, windows, index, is_active, is_other_monitor, css_classes_panel, css_inline_workspace, css_classes_workspace)
   }
 
 }

src/metadata.json

@@ -4,6 +4,6 @@
   "uuid": "[email protected]",
   "settings-schema": "org.gnome.shell.extensions.workspaces-indicator-by-open-apps",
   "url": "https://github.com/Favo02/workspaces-by-open-apps",
-  "version": "16",
+  "version": "17",
   "shell-version": [ "45", "46" ]
 }

src/prefs.js

@@ -276,6 +276,18 @@ export default class WorkspacesByOpenAppsPrefs extends ExtensionPreferences {
     row.activatable_widget = widget
     group.add(row)
 
+    row = new Adw.ActionRow({
+      title: "Swap indicators position",
+      subtitle: "Move active app indicator to bottom and active workspace to top"
+    })
+    widget = new Gtk.Switch({
+      valign: Gtk.Align.CENTER
+    })
+    settings.bind("indicator-swap-position", widget, "active", Gio.SettingsBindFlags.DEFAULT)
+    row.add_suffix(widget)
+    row.activatable_widget = widget
+    group.add(row)
+
     return group
   }
 

src/schemas/org.gnome.shell.extensions.workspaces-indicator-by-open-apps.gschema.xml

@@ -108,6 +108,12 @@
       <description>Round borders of active workspace and focused app indicators</description>
     </key>
 
+    <key type="b" name="indicator-swap-position">
+      <default>false</default>
+      <summary>Swap indicators position</summary>
+      <description>Move active app indicator to bottom and active workspace to top</description>
+    </key>
+
     <!-- PAGE 2 GROUP 2: WORKSPACES APPEARANCE -->
 
     <key type="b" name="indicator-show-indexes">

src/stylesheet.css

@@ -3,81 +3,116 @@
   the hardest thing to get right in css
  */
 
-/* --- workspace --- */
-.wboa-workspace { /* workspace indicator */
-  display: flex;
-  justify-items: center;
-  align-items: center;
+/* list of available classes (all prefixed with wboa-)
+
+  label: font size of labels
+  active > label (direct child): toggle color of labels
+
+  workspace: indicator spacing
+  workspace > label (direct child): workspace label color and spacing
+
+  app (:hover and :focus): app icon hover effect
+  app > label (direct child): app group label color and spacing
+
+  rounded: round borders (5px)
+  panel-rounded: round borders (15px)
+  no-rounded: do not round borders
+
+  top: space for placing indicator at top
+  top active (same element): indicator at top
+  top no-indicator (same element): always disable indicator at top (add space for placing)
+
+  bottom: space for placing indicator at bottom
+  bottom active (same element): indicator at bottom
+  bottom no-indicator (same element): always disable indicator at bottom (add space for placing)
+*/
+
+/* --- labels (workspace name and apps count) --- */
+.wboa-label {
+  font-size: 12px;
+}
+.wboa-active > .wboa-label {
+  color: rgba(255, 255, 255, 1) !important;
+}
+
+/* --- workspace indicator --- */
+.wboa-workspace {
   border: none;
   /* space horizontally indicators */
   margin-left: 2px;
   margin-right: 2px;
-  /* simulate presence of active indicator */
-  margin-bottom: 2px;
-}
-.wboa-workspace.wboa-active { /* active workspace */
-  border-radius: 5px;
-  border-bottom: 2px solid white;
-  /* disable simulation of presence of active indicator */
-  margin-bottom: 0px;
-}
-.wboa-workspace.wboa-active.wboa-no-indicator {
-  border: none !important;
-  /* simulate presence of active indicator */
-  margin-bottom: 2px;
 }
 
 /* --- workspace label --- */
-.wboa-workspace-label { /* label text (number or name) */
-  color: rgb(110, 110, 110);
-  font-size: 12px;
+.wboa-workspace > .wboa-label {
+  color: rgba(255, 255, 255, 0.5);
   /* space horizontally from icons */
-  margin: 0px 2px;
-  /* center vertically */
-  padding-top: 4px;
+  margin-right: 2px;
+  margin-left: 2px;
 }
-.wboa-active .wboa-workspace-label { /* active workspace label */
-  color: white;
+.wboa-workspace.wboa-top > .wboa-label {
+  /* fix vertical offset when workspace indicator position is bottom */
+  padding-bottom: 3px;
 }
 
-/* --- app --- */
-.wboa-app { /* app icon */
-  /* simulate presence of active indicator */
-  margin-top: 2px;
-  /* hover effect */
-  padding-top: 2px;
-}
+/* --- app icon --- */
 .wboa-app:hover, .wboa-app:focus {
   /* hover effect */
-  padding-top: 0px;
+  margin-top: -2px;
 }
-.wboa-app.wboa-active { /* active app */
+
+/* --- apps group label (x2, x3, ...) --- */
+.wboa-app > .wboa-label {
+  color: rgba(255, 255, 255, 0.4);
+  /* space horizontally app groups */
+  margin-right: 2px;
+}
+
+/* --- COMMON --- */
+
+/* round indicator borders */
+.wboa-rounded {
   border-radius: 5px;
+}
+/* round panel button borders */
+.wboa-panel-rounded {
+  border-radius: 15px !important;
+}
+/* do not round indicator borders */
+.wboa-no-rounded {
+  border-radius: 0px !important;
+}
+
+/* --- TOP indicators --- */
+.wboa-top {
+  border: none;
+  /* simulate presence of active indicator */
+  margin-top: 2px;
+}
+.wboa-top.wboa-active {
   border-top: 2px solid white;
   /* disable simulation of presence of active indicator */
   margin-top: 0px;
 }
-.wboa-app.wboa-active.wboa-no-indicator {
+.wboa-top.wboa-no-indicator {
   border: none !important;
   /* simulate presence of active indicator */
   margin-top: 2px;
 }
 
-/* --- apps group --- */
-.wboa-app-group-text { /* group text (x2, x3, ...) */
-  color: rgba(110, 110, 110, 0.58);
-  font-size: 12px;
-  /* space horizontally app groups */
-  margin-right: 2px;
-}
-.wboa-active .wboa-app-group-text { /* active group */
-  color: white;
+/* --- BOTTOM indicators --- */
+.wboa-bottom {
+  border: none;
+  /* simulate presence of active indicator */
+  margin-bottom: 2px;
 }
-
-/* --- common --- */
-.wboa-no-rounded {
-  border-radius: 0px !important;
+.wboa-bottom.wboa-active {
+  border-bottom: 2px solid white;
+  /* disable simulation of presence of active indicator */
+  margin-bottom: 0px;
 }
-.panel-button {
-  border-radius: 15px;
+.wboa-bottom.wboa-no-indicator {
+  border: none !important;
+  /* simulate presence of active indicator */
+  margin-bottom: 2px;
 }

src/workspace.js

@@ -15,9 +15,9 @@ export default class Workspace extends St.Bin {
     GObject.registerClass(this)
   }
 
-  constructor(settings, workspace, windows, index, is_active, is_other_monitor, css_inline_workspace, css_classes_workspace) {
+  constructor(settings, workspace, windows, index, is_active, is_other_monitor, css_classes_panel, css_inline_workspace, css_classes_workspace) {
     super({
-      style_class: "panel-button",
+      style_class: css_classes_panel.join(" "),
       reactive: true,
       can_focus: true,
       track_hover: true,
@@ -184,15 +184,14 @@ export default class Workspace extends St.Bin {
     const css_inline_app = `border-color: ${this._settings.indicator_color}`
 
     const css_classes_app = [ "wboa-app" ]
-    if (is_focus) {
-      css_classes_app.push("wboa-active")
-    }
-    if (!this._settings.indicator_show_focused_app) {
-      css_classes_app.push("wboa-no-indicator")
-    }
-    if (!this._settings.indicator_round_borders) {
-      css_classes_app.push("wboa-no-rounded")
+    if (this._settings.indicator_swap_position) {
+      css_classes_app.push("wboa-bottom")
+    } else {
+      css_classes_app.push("wboa-top")
     }
+    if (is_focus) css_classes_app.push("wboa-active")
+    if (!this._settings.indicator_show_focused_app) css_classes_app.push("wboa-no-indicator")
+    if (this._settings.indicator_round_borders) css_classes_app.push("wboa-rounded")
 
     return new Application(this._settings, this._index, window, occurrences, app_icon, css_inline_app, css_classes_app)
   }
@@ -247,7 +246,7 @@ export default class Workspace extends St.Bin {
       indicator_text = (index+1).toString()
     }
 
-    const css_classes_label = [ "wboa-workspace-label" ]
+    const css_classes_label = [ "wboa-label" ]
 
     // add label to indicator
     this.get_child().insert_child_at_index(new St.Label({
@@ -288,7 +287,7 @@ export default class Workspace extends St.Bin {
         return
       }
 
-      const css_classes_label = [ "wboa-workspace-label" ]
+      const css_classes_label = [ "wboa-label" ]
 
       // create text input
       const entry = new St.Entry({