fix(ui): header height overhaul

fix #114
AstraExt · Apr 23, 2024 · 3fa5395 · 3fa5395
1 parent 775e33a
commit 3fa5395
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 38 deletions.
diff --git a/RELEASES.md b/RELEASES.md
@@ -1,9 +1,14 @@
 # Astra Monitor 22 - TO BE RELEASED
 
+### Breaking changes
+
+-   <u>**Headers Height** functionality has been changed</u>. Prior to this release, the default height was 28px and you could change it to fit your needs. Now it will defaults to disabled and the extension will try to accomodate the height of the panel. You still can override the value to be whatever you want in the settings. Upon update we automatically move your previous value to the new setting and disable it if it was set to 28px. **<u>We still suggest you to check the value and eventually reset it to 0 it's not already</u>, to check if the new behavior fits your needs**. [[#114](https://github.com/AstraExt/astra-monitor/issues/114)]
+
 ### Bug fixes
 
 -   Fixed gpu monitoring not working on some AMD gpus [[#116](https://github.com/AstraExt/astra-monitor/issues/116)]
 -   Arrow colors in Storage Top Processes popup wasn't following menu's color settings [[#115](https://github.com/AstraExt/astra-monitor/issues/115)]
+-   Now Headers Font Size override apply to multiple lines values too
 
 # Astra Monitor 21 - April 19 2024
 

diff --git a/prefs.ts b/prefs.ts
@@ -456,15 +456,18 @@ export default class AstraMonitorPrefs extends ExtensionPreferences {
         this.addSpinRow(
             {
                 title: _('Headers Height'),
-                subtitle: _('Experimental feature: may require to disable/enable the extension.'),
+                subtitle:
+                    _('Experimental feature: may require to disable/enable the extension.') +
+                    '\n' +
+                    _('Set between 15 and 80 to enable height override'),
                 icon_name: 'am-dialog-warning-symbolic',
                 tabs: 1,
             },
-            'headers-height',
+            'headers-height-override',
             headersSection,
-            { min: 15, max: 80, digits: 0, step: 1, page: 5 },
+            { min: 0, max: 80, digits: 0, step: 1, page: 5 },
             true,
-            28
+            0
         );
         this.addFontRow(
             {

diff --git a/schemas/org.gnome.shell.extensions.astra-monitor.gschema.xml b/schemas/org.gnome.shell.extensions.astra-monitor.gschema.xml
@@ -144,11 +144,11 @@
       <description>Set the font size of the headers (0 to disable override)</description>
       <range min="0" max="30"/>
     </key>
-    <key name="headers-height" type="i">
+    <key name="headers-height-override" type="i">
       <default>28</default>
       <summary>Headers Height</summary>
-      <description>Set the height of the headers</description>
-      <range min="15" max="80"/>
+      <description>Set between 15 and 80 to override the height of the headers</description>
+      <range min="0" max="80"/>
     </key>
 
     <!-- PROCESSOR -->
@@ -324,21 +324,6 @@
       <description>Show the GPU info in the menu</description>
     </key>
 
-    <!-- DEPRECATED KEYS
-    VALUES ARE MOVED TO PROPER NEW KEYS AS SOON AS FIRST RUN (V20)
-    KEEP THEM FOR BACKWARD COMPATIBILITY
-    -->
-    <key name="processor-menu-gpu" type="s">
-      <default>'""'</default>
-      <summary>GPU</summary>
-      <description>Show the GPU usage</description>
-    </key>
-    <key name="processor-menu-gpu-color" type="s">
-      <default>'rgba(29,172,214,1.0)'</default>
-      <summary>GPU Bars Color 1</summary>
-      <description>Main color for GPU bars</description>
-    </key>
-
     <!-- GPU -->
     <key name="gpu-header-show" type="b">
       <default>false</default>
@@ -1226,5 +1211,26 @@
       <description>Fifth sensor digits to show on the Tooltip of the sensors monitor</description>
       <range min="-1" max="3"/>
     </key>
+
+    <!-- DEPRECATED KEYS
+    VALUES ARE MOVED TO PROPER NEW KEYS AS SOON AS FIRST RUN (V20)
+    KEEP THEM FOR BACKWARD COMPATIBILITY
+    -->
+    <key name="processor-menu-gpu" type="s">
+      <default>'""'</default>
+      <summary>GPU</summary>
+      <description>Show the GPU usage</description>
+    </key>
+    <key name="processor-menu-gpu-color" type="s">
+      <default>'rgba(29,172,214,1.0)'</default>
+      <summary>GPU Bars Color 1</summary>
+      <description>Main color for GPU bars</description>
+    </key>
+    <key name="headers-height" type="i">
+      <default>28</default>
+      <summary>Headers Height</summary>
+      <description>Set the height of the headers</description>
+      <range min="0" max="80"/>
+    </key>
   </schema>
 </schemalist>
diff --git a/src/container.ts b/src/container.ts
@@ -20,6 +20,7 @@
 
 import GObject from 'gi://GObject';
 import St from 'gi://St';
+import Clutter from 'gi://Clutter';
 
 import * as Main from 'resource:///org/gnome/shell/ui/main.js';
 import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js';
@@ -62,6 +63,8 @@ export default GObject.registerClass(
                 vertical: false,
                 x_expand: true,
                 y_expand: true,
+                x_align: Clutter.ActorAlign.START,
+                y_align: Clutter.ActorAlign.FILL,
                 style: this.computeStyle(),
             });
 

diff --git a/src/header.ts b/src/header.ts
@@ -34,10 +34,13 @@ declare const global: any;
 export default GObject.registerClass(
     class Header extends St.Widget {
         private menu?: MenuBase;
-        private box: St.Widget;
+        private box: St.BoxLayout;
+
+        private cachedHeight = { fill: -1, override: -1 };
 
         constructor(name: string) {
             super({
+                name: 'AstraMonitorHeader',
                 reactive: true,
                 can_focus: true,
                 track_hover: true,
@@ -47,14 +50,17 @@ export default GObject.registerClass(
                 layoutManager: new Clutter.BinLayout(),
                 x_expand: true,
                 y_expand: true,
+                x_align: Clutter.ActorAlign.START,
+                y_align: Clutter.ActorAlign.FILL,
             });
             this.name = name;
 
             Utils.verbose(`Creating ${this.name}`);
 
             this.box = new St.BoxLayout({
+                name: 'AstraMonitorHeaderBox',
                 x_expand: true,
-                y_expand: true,
+                y_expand: false,
                 x_align: Clutter.ActorAlign.START,
                 y_align: Clutter.ActorAlign.CENTER,
                 style_class: 'astra-monitor-header-box',
@@ -85,23 +91,36 @@ export default GObject.registerClass(
                 this.hideTooltip();
             });
 
-            Config.connect(this, 'changed::headers-height', this.setStyle.bind(this));
-            this.setStyle();
+            Config.connect(this, 'changed::headers-height-override', this.setStyle.bind(this));
+            this.box.connect('notify::allocation', () => {
+                Utils.lowPriorityTask(this.setStyle.bind(this));
+            });
         }
 
         public getMenu() {
             return this.menu;
         }
 
         setStyle() {
-            let style = '';
+            if(!this.box.get_parent()) return;
+            if(!this.box.has_allocation()) return;
+
+            let fillHeight = this.box.get_parent()!.height ?? 0;
+            const override = Config.get_int('headers-height-override');
+
+            if(this.cachedHeight.fill === fillHeight && this.cachedHeight.override === override) {
+                return;
+            }
+            this.cachedHeight = { fill: fillHeight, override };
+
+            fillHeight -= 4; // 2px padding top and bottom
+
+            const scaledFillHeight = Math.min(32, fillHeight) * this.scaleFactor;
+            let style = `height:${scaledFillHeight}px;`;
 
-            let height = Config.get_int('headers-height');
-            if(height < 15 || height > 80) height = 32;
-            style += `height:${height}px;`;
+            if(override > 15 && override < 80) style = `height:${override}px;`;
 
             this.box.set_style(style);
-            this.box.queue_relayout();
         }
 
         insert_child_above(child: any, sibling: any) {

diff --git a/src/network/networkHeader.ts b/src/network/networkHeader.ts
@@ -301,9 +301,13 @@ export default GObject.registerClass(
             const calculateStyle = () => {
                 if(this.ioLayout === 'horizontal') return 'font-size:1em;';
                 const superHeight = this.speedContainer.get_parent()?.height ?? 0;
-                const scaledHeight = superHeight / this.scaleFactor;
+                let scaledHeight = superHeight / this.scaleFactor;
                 if(scaledHeight <= 20) return 'font-size:0.65em;';
-                return `font-size:${Math.round(scaledHeight / 3)}px;`;
+                scaledHeight = Math.round(scaledHeight / 3);
+
+                const fontSize = Config.get_int('headers-font-size');
+                if(fontSize && fontSize < scaledHeight) return `font-size:${fontSize}px;`;
+                return `font-size:${scaledHeight}px;`;
             };
             const style = calculateStyle();
 

diff --git a/src/sensors/sensorsHeader.ts b/src/sensors/sensorsHeader.ts
@@ -313,9 +313,13 @@ export default GObject.registerClass(
                 if(this.sensorsNum === 1 || this.sensorsLayout === 'horizontal')
                     return 'font-size:1em;';
                 const superHeight = this.valuesContainer.get_parent()?.height ?? 0;
-                const scaledHeight = superHeight / this.scaleFactor;
+                let scaledHeight = superHeight / this.scaleFactor;
                 if(scaledHeight <= 20) return 'font-size:0.65em;';
-                return `font-size:${Math.round(scaledHeight / 3)}px;`;
+                scaledHeight = Math.round(scaledHeight / 3);
+
+                const fontSize = Config.get_int('headers-font-size');
+                if(fontSize && fontSize < scaledHeight) return `font-size:${fontSize}px;`;
+                return `font-size:${scaledHeight}px;`;
             };
             const style = calculateStyle();
 

diff --git a/src/storage/storageHeader.ts b/src/storage/storageHeader.ts
@@ -466,9 +466,13 @@ export default GObject.registerClass(
             const calculateStyle = () => {
                 if(this.ioLayout === 'horizontal') return 'font-size:1em;';
                 const superHeight = this.speedContainer.get_parent()?.height ?? 0;
-                const scaledHeight = superHeight / this.scaleFactor;
+                let scaledHeight = superHeight / this.scaleFactor;
                 if(scaledHeight <= 20) return 'font-size:0.65em;';
-                return `font-size:${Math.round(scaledHeight / 3)}px;`;
+                scaledHeight = Math.round(scaledHeight / 3);
+
+                const fontSize = Config.get_int('headers-font-size');
+                if(fontSize && fontSize < scaledHeight) return `font-size:${fontSize}px;`;
+                return `font-size:${scaledHeight}px;`;
             };
             const style = calculateStyle();
 

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -2383,6 +2383,16 @@ export default class Utils {
             Config.set('gpu-header-activity-graph-color1', processorMenuGpuColor, 'string');
             Config.set('processor-menu-gpu-color', '', 'string');
         }
+
+        //Fix headers-height moved to headers-height-override (v21 => v22)
+        const height = Config.get_int('headers-height');
+        if(height === 28) {
+            Config.set('headers-height-override', 0, 'int');
+            Config.set('headers-height', 0, 'int');
+        } else if(height > 15 && height < 80) {
+            Config.set('headers-height-override', height, 'int');
+            Config.set('headers-height', 0, 'int');
+        }
     }
 
     static unitToIcon(unit: string): IconData {

diff --git a/stylesheet.css b/stylesheet.css
@@ -24,7 +24,7 @@
 }
 
 .astra-monitor-header-box {
-    padding: 0 0.3em;
+    padding: 0 2px;
 }
 
 .astra-monitor-header-percentage4 {