Skip to content

Commit

Permalink
fix: layout issue in horizontal sensors header
Browse files Browse the repository at this point in the history 
fix #111
  • Loading branch information
@ljuzig
ljuzig committed Sep 28, 2024
1 parent e0108c1 commit 1257e0c
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 27 deletions.
1 change: 1 addition & 0 deletions RELEASES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
### Bug fixes

- Temporary, but effective, fix for the bars overflowing from their container when there's a fullscreen window [[#127](https://github.com/AstraExt/astra-monitor/issues/127)]
- Addressed a layout issue in horizontal sensors header where sudden changes in one of the sensors values length could disrupt the overall arrangement [[#111](https://github.com/AstraExt/astra-monitor/issues/111)]
- Resolved an issue where `iotop` was not accurately identifying process names when both SWAPIN and IO% information were present

# Astra Monitor 28 - September 27 2024
Expand Down
115 changes: 88 additions & 27 deletions src/sensors/sensorsHeader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import * as Main from 'resource:///org/gnome/shell/ui/main.js';
import Header from '../header.js';
import Config from '../config.js';
import Utils from '../utils/utils.js';
import Grid from '../grid.js';
import SensorsMenu from './sensorsMenu.js';
import { SensorsData } from './sensorsMonitor.js';
import MenuBase from '../menu.js';
Expand All @@ -51,11 +52,14 @@ export default GObject.registerClass(
class SensorsHeader extends Header {
private icon!: St.Icon;
private valuesContainer!: St.BoxLayout;
private sensors!: St.Label;
private sensorGrid!: InstanceType<typeof Grid>;
private sensorLabel1!: St.Label;
private sensorLabel2!: St.Label;
private sensorsNum: number = 1;
private sensorsLayout!: string;

private maxWidths: number[] = [];
private maxWidths1: number[] = [];
private maxWidths2: number[] = [];

protected tooltipMenu!: TooltipMenu;
protected tooltipItem!: TooltipItem;
Expand Down Expand Up @@ -95,7 +99,8 @@ export default GObject.registerClass(
const updateSensorsLayout = () => {
this.sensorsLayout =
Config.get_string('sensors-header-sensor2-layout') || 'vertical';
this.sensors.text = '';
this.sensorLabel1.text = '';
this.sensorLabel2.text = '';
this.resetMaxWidths();
};
Config.connect(
Expand Down Expand Up @@ -133,9 +138,11 @@ export default GObject.registerClass(
}

resetMaxWidths() {
this.maxWidths = [];
this.maxWidths1 = [];
this.maxWidths2 = [];

if(!this.sensors.get_stage()) return;
if(!this.sensorLabel1.get_stage()) return;
if(!this.sensorLabel2.get_stage()) return;

this.fixContainerStyle();
}
Expand Down Expand Up @@ -196,7 +203,28 @@ export default GObject.registerClass(
width: 1,
});

this.sensors = new St.Label({
this.sensorGrid = new Grid({
numCols: 2,
styleClass: '',
xAlign: Clutter.ActorAlign.END,
yAlign: Clutter.ActorAlign.FILL,
});
this.valuesContainer.add_child(this.sensorGrid);

this.sensorLabel1 = new St.Label({
text: '',
styleClass: 'astra-monitor-header-sensors-values-label',
style: 'font-size: 0.65em;',
yAlign: Clutter.ActorAlign.CENTER,
xAlign: Clutter.ActorAlign.END,
xExpand: true,
yExpand: true,
});
this.sensorLabel1.clutterText.ellipsize = Pango.EllipsizeMode.NONE;
this.sensorLabel1.clutterText.lineWrap = false;
this.sensorGrid.addToGrid(this.sensorLabel1);

this.sensorLabel2 = new St.Label({
text: '',
styleClass: 'astra-monitor-header-sensors-values-label',
style: 'font-size: 0.65em;',
Expand All @@ -205,9 +233,9 @@ export default GObject.registerClass(
xExpand: true,
yExpand: true,
});
this.sensors.clutterText.ellipsize = Pango.EllipsizeMode.NONE;
this.sensors.clutterText.lineWrap = false;
this.valuesContainer.add_child(this.sensors);
this.sensorLabel2.clutterText.ellipsize = Pango.EllipsizeMode.NONE;
this.sensorLabel2.clutterText.lineWrap = false;
this.sensorGrid.addToGrid(this.sensorLabel2);

Config.bind(
'sensors-header-sensor1-show',
Expand Down Expand Up @@ -252,12 +280,19 @@ export default GObject.registerClass(
if(sensor2) {
this.sensorsNum = 2;

if(this.sensorsLayout === 'horizontal')
this.sensors.text = `${sensor1} | ${sensor2}`;
else this.sensors.text = `${sensor1}\n${sensor2}`;
if(this.sensorsLayout === 'horizontal') {
this.sensorLabel1.text = `${sensor1} |`;
this.sensorLabel2.text = sensor2;
this.sensorLabel2.visible = true;
} else if(this.sensorsLayout === 'vertical') {
this.sensorLabel1.text = `${sensor1}\n${sensor2}`;
this.sensorLabel2.text = '';
this.sensorLabel2.visible = false;
}
} else {
this.sensorsNum = 1;
this.sensors.text = sensor1;
this.sensorLabel1.text = sensor1;
this.sensorLabel2.visible = false;
}
this.fixContainerStyle();
}
Expand Down Expand Up @@ -317,14 +352,15 @@ export default GObject.registerClass(

fixContainerStyle() {
if(!this.valuesContainer.get_parent()) return;
if(!this.sensors.get_parent()) return;
if(!this.sensorLabel1.get_parent()) return;
if(!this.sensorLabel2.get_parent()) return;

const calculateStyle = () => {
let defaultStyle = 'font-size:0.65em;';
const fontSize = Config.get_int('headers-font-size');
if(fontSize) defaultStyle = `font-size:${fontSize}px;`;
if(this.sensorsNum === 1 || this.sensorsLayout === 'horizontal')
return fontSize ? defaultStyle : 'font-size:1em';
return fontSize ? defaultStyle : 'font-size:1em;';

const superHeight =
this.valuesContainer.get_parent()?.get_allocation_box()?.get_height() ?? 0;
Expand All @@ -337,28 +373,53 @@ export default GObject.registerClass(
};
const style = calculateStyle();

if(this.sensors.style !== style) {
this.sensors.style = style;
this.sensors.queue_relayout();
if(this.sensorLabel1.style !== style || this.sensorLabel2.style !== style) {
this.sensorLabel1.style = style;
this.sensorLabel2.style = style;
this.sensorLabel1.queue_relayout();
this.sensorLabel2.queue_relayout();
this.valuesContainer.queue_relayout();
}

const sensorsWidth = this.sensors.get_preferred_width(-1);
const width = sensorsWidth ? sensorsWidth[1] : 0;
// SensorLabel 1
const sensor1Width = this.sensorLabel1.get_preferred_width(-1);
const width1 = sensor1Width ? sensor1Width[1] : 0;

this.maxWidths1.push(width1);

if(this.maxWidths1.length > Utils.sensorsMonitor.updateFrequency * 10)
this.maxWidths1.shift();

const max1 = Math.max(...this.maxWidths1);

this.maxWidths.push(width);
// SensorLabel 2
let max2 = 0;

if(this.maxWidths.length > Utils.sensorsMonitor.updateFrequency * 10)
this.maxWidths.shift();
if(this.sensorLabel2.visible) {
const sensor2Width = this.sensorLabel2.get_preferred_width(-1);
const width2 = sensor2Width ? sensor2Width[1] : 0;

const max = Math.max(...this.maxWidths);
this.maxWidths2.push(width2);

if(this.maxWidths2.length > Utils.sensorsMonitor.updateFrequency * 10)
this.maxWidths2.shift();

max2 = Math.max(...this.maxWidths2);

const margin1 = max1 - width1;
this.sensorLabel1.style += `margin-left:${margin1}px;`;

const margin2 = max2 - width2;
this.sensorLabel2.style += `margin-left:${margin2}px;`;
}

if(max === this.valuesContainer.width) return;
this.valuesContainer.set_width(max);
if(max1 + max2 === this.valuesContainer.width) return;
this.valuesContainer.set_width(max1 + max2);
}

update() {
this.maxWidths = [];
this.maxWidths1 = [];
this.maxWidths2 = [];
this.updateValues();
}

Expand Down

0 comments on commit 1257e0c

Please sign in to comment.