fix(panel): avoid iconless layout spacing

Resource_Monitor@Ory0n/extension.js

@@ -53,6 +53,7 @@ import {
   applySecondarySeparatorStyle,
   buildMainGui,
   createMainGui,
+  syncMainGuiVisibility,
 } from "./panel/mainGui.js";
 import {
   detectCapabilities,
@@ -632,8 +633,8 @@ const ResourceMonitor = GObject.registerClass(
       createMainGui(this);
     }
 
-    _buildMainGui() {
-      buildMainGui(this);
+    _buildMainGui(options = {}) {
+      buildMainGui(this, options);
     }
 
     // SETTINGS
@@ -854,8 +855,14 @@ const ResourceMonitor = GObject.registerClass(
     }
 
     _iconsStatusChanged() {
+      const previousIconsStatus = this._iconsStatus;
       this._iconsStatus = this._settings.get_boolean(ICONS_STATUS);
 
+      if (previousIconsStatus !== this._iconsStatus && this._box?.get_parent()) {
+        this._box.remove_all_children();
+        this._buildMainGui({ refresh: false });
+      }
+
       if (this._iconsStatus) {
         if (
           this._cpuStatus ||
@@ -1679,6 +1686,10 @@ const ResourceMonitor = GObject.registerClass(
       syncThermalCpuVisibility(this);
     }
 
+    _syncMainGuiVisibility() {
+      syncMainGuiVisibility(this);
+    }
+
     _refreshHandler(forceGpu = false) {
       return refreshHandler(this, forceGpu);
     }
@@ -1839,6 +1850,8 @@ const ResourceMonitor = GObject.registerClass(
           element.hide();
         });
       }
+
+      this._syncMainGuiVisibility();
     }
 
     _basicItemWidth(width, element) {

Resource_Monitor@Ory0n/panel/mainGui.js

@@ -3,13 +3,15 @@ import Gio from "gi://Gio";
 import St from "gi://St";
 
 import { DiskContainerSpace, DiskContainerStats, GpuContainer } from "./containers.js";
+import { getPanelGroupVisibility } from "../services/visibility.js";
 
 function _addStyleClasses(actor, classes) {
   classes.forEach((cssClass) => actor.add_style_class_name(cssClass));
 }
 
 function _createGroupBox(name) {
   const box = new St.BoxLayout({
+    x_align: Clutter.ActorAlign.CENTER,
     style_class: "resource-monitor-group",
   });
   box.add_style_class_name(`resource-monitor-group-${name}`);
@@ -97,8 +99,8 @@ export function applySecondarySeparatorStyle(indicator) {
   }
 }
 
-function _appendCpuChildren(indicator, addChild, iconsPosition) {
-  if (iconsPosition === "left") {
+function _appendCpuChildren(indicator, addChild, iconsPosition, iconsStatus) {
+  if (iconsStatus && iconsPosition === "left") {
     addChild(indicator._cpuIcon);
   }
 
@@ -116,38 +118,46 @@ function _appendCpuChildren(indicator, addChild, iconsPosition) {
   addChild(indicator._cpuLoadAverageValue);
   addChild(indicator._cpuLoadAverageBracketEnd);
 
-  if (iconsPosition !== "left") {
+  if (iconsStatus && iconsPosition !== "left") {
     addChild(indicator._cpuIcon);
   }
 }
 
-function _appendSimpleChildren(icon, value, unit, addChild, iconsPosition) {
-  if (iconsPosition === "left") {
+function _appendSimpleChildren(
+  icon,
+  value,
+  unit,
+  addChild,
+  iconsPosition,
+  iconsStatus
+) {
+  if (iconsStatus && iconsPosition === "left") {
     addChild(icon);
   }
 
   addChild(value);
   addChild(unit);
 
-  if (iconsPosition !== "left") {
+  if (iconsStatus && iconsPosition !== "left") {
     addChild(icon);
   }
 }
 
-function _appendSingleBoxChildren(icon, box, addChild, iconsPosition) {
-  if (iconsPosition === "left") {
+function _appendSingleBoxChildren(icon, box, addChild, iconsPosition, iconsStatus) {
+  if (iconsStatus && iconsPosition === "left") {
     addChild(icon);
   }
 
   addChild(box);
 
-  if (iconsPosition !== "left") {
+  if (iconsStatus && iconsPosition !== "left") {
     addChild(icon);
   }
 }
 
 export function createMainGui(indicator) {
   indicator._box = new St.BoxLayout({
+    x_align: Clutter.ActorAlign.CENTER,
     style_class: "resource-monitor-box",
   });
   indicator._cpuGroup = _createGroupBox("cpu");
@@ -230,17 +240,26 @@ export function createMainGui(indicator) {
   indicator._gpuBox = new GpuContainer();
 }
 
-export function buildMainGui(indicator) {
-  indicator._refreshGui();
+export function buildMainGui(indicator, options = {}) {
+  const { refresh = true } = options;
+
+  if (refresh) {
+    indicator._refreshGui();
+  }
 
   const iconsPosition = indicator._iconsPosition;
+  const iconsStatus = indicator._iconsStatus;
   indicator._box.remove_style_class_name("resource-monitor-icons-left");
   indicator._box.remove_style_class_name("resource-monitor-icons-right");
+  indicator._box.remove_style_class_name("resource-monitor-icons-hidden");
   indicator._box.add_style_class_name(
     iconsPosition === "left"
       ? "resource-monitor-icons-left"
       : "resource-monitor-icons-right"
   );
+  if (!iconsStatus) {
+    indicator._box.add_style_class_name("resource-monitor-icons-hidden");
+  }
 
   const groupsByItem = {
     cpu: indicator._cpuGroup,
@@ -254,15 +273,16 @@ export function buildMainGui(indicator) {
   };
 
   _replaceGroupChildren(indicator._cpuGroup, (addChild) =>
-    _appendCpuChildren(indicator, addChild, iconsPosition)
+    _appendCpuChildren(indicator, addChild, iconsPosition, iconsStatus)
   );
   _replaceGroupChildren(indicator._ramGroup, (addChild) =>
     _appendSimpleChildren(
       indicator._ramIcon,
       indicator._ramValue,
       indicator._ramUnit,
       addChild,
-      iconsPosition
+      iconsPosition,
+      iconsStatus
     )
   );
   _replaceGroupChildren(indicator._swapGroup, (addChild) =>
@@ -271,23 +291,26 @@ export function buildMainGui(indicator) {
       indicator._swapValue,
       indicator._swapUnit,
       addChild,
-      iconsPosition
+      iconsPosition,
+      iconsStatus
     )
   );
   _replaceGroupChildren(indicator._diskStatsGroup, (addChild) =>
     _appendSingleBoxChildren(
       indicator._diskStatsIcon,
       indicator._diskStatsBox,
       addChild,
-      iconsPosition
+      iconsPosition,
+      iconsStatus
     )
   );
   _replaceGroupChildren(indicator._diskSpaceGroup, (addChild) =>
     _appendSingleBoxChildren(
       indicator._diskSpaceIcon,
       indicator._diskSpaceBox,
       addChild,
-      iconsPosition
+      iconsPosition,
+      iconsStatus
     )
   );
   _replaceGroupChildren(indicator._ethGroup, (addChild) =>
@@ -296,7 +319,8 @@ export function buildMainGui(indicator) {
       indicator._ethValue,
       indicator._ethUnit,
       addChild,
-      iconsPosition
+      iconsPosition,
+      iconsStatus
     )
   );
   _replaceGroupChildren(indicator._wlanGroup, (addChild) =>
@@ -305,15 +329,17 @@ export function buildMainGui(indicator) {
       indicator._wlanValue,
       indicator._wlanUnit,
       addChild,
-      iconsPosition
+      iconsPosition,
+      iconsStatus
     )
   );
   _replaceGroupChildren(indicator._gpuGroup, (addChild) =>
     _appendSingleBoxChildren(
       indicator._gpuIcon,
       indicator._gpuBox,
       addChild,
-      iconsPosition
+      iconsPosition,
+      iconsStatus
     )
   );
 
@@ -325,8 +351,35 @@ export function buildMainGui(indicator) {
   });
 
   applySecondarySeparatorStyle(indicator);
+  syncMainGuiVisibility(indicator);
 
   if (indicator._box.get_parent() !== indicator) {
     indicator.add_child(indicator._box);
   }
 }
+
+export function syncMainGuiVisibility(indicator) {
+  const visibility = getPanelGroupVisibility(indicator);
+  const groupsByItem = {
+    cpu: indicator._cpuGroup,
+    ram: indicator._ramGroup,
+    swap: indicator._swapGroup,
+    stats: indicator._diskStatsGroup,
+    space: indicator._diskSpaceGroup,
+    eth: indicator._ethGroup,
+    wlan: indicator._wlanGroup,
+    gpu: indicator._gpuGroup,
+  };
+
+  Object.entries(groupsByItem).forEach(([item, group]) => {
+    if (!group) {
+      return;
+    }
+
+    if (visibility[item]) {
+      group.show();
+    } else {
+      group.hide();
+    }
+  });
+}

Resource_Monitor@Ory0n/services/visibility.js

@@ -36,6 +36,27 @@ export function hasVisibleGpu(indicator) {
   );
 }
 
+export function getPanelGroupVisibility(indicator) {
+  return {
+    cpu:
+      indicator._cpuStatus ||
+      hasVisibleCpuFrequency(indicator) ||
+      indicator._cpuLoadAverageStatus ||
+      hasVisibleThermalCpuTemperature(indicator),
+    ram: indicator._ramStatus,
+    swap: indicator._swapStatus,
+    stats: indicator._diskStatsStatus,
+    space: indicator._diskSpaceStatus,
+    eth:
+      indicator._netEthStatus &&
+      (indicator._nmEthStatus || !indicator._netAutoHideStatus),
+    wlan:
+      indicator._netWlanStatus &&
+      (indicator._nmWlanStatus || !indicator._netAutoHideStatus),
+    gpu: hasVisibleGpu(indicator),
+  };
+}
+
 export function syncCpuFrequencyVisibility(indicator) {
   indicator._basicItemStatus(
     hasVisibleCpuFrequency(indicator),

Resource_Monitor@Ory0n/stylesheet.css

@@ -2,6 +2,10 @@
   spacing: 0.35em;
 }
 
+.resource-monitor-box.resource-monitor-icons-hidden {
+  spacing: 0.65em;
+}
+
 .resource-monitor-group {
   spacing: 0.05em;
 }
@@ -16,6 +20,10 @@
   padding-right: 0.3em;
 }
 
+.resource-monitor-box.resource-monitor-icons-hidden .resource-monitor-unit {
+  padding-right: 0;
+}
+
 .resource-monitor-bracket {
   padding-left: 0.05em;
   padding-right: 0.05em;