edu4rdshl/gnome-shell
1
0
Fork 0
mirror of https://github.com/edu4rdshl/gnome-shell.git synced 2026-07-17 23:24:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

layout: Add CSS classes to adapt style based on the monitor size

Browse source 
We'll need to adapt the spacing (and potentially the icon sizes) of the icon
grid based on the monitor size, so that the grid fits better on small
monitors. The easy way to do this (and also the way everyone does it these
days) is to add CSS classes based on the monitor size to the uiGroup, aka a
very simple version of layout breakpoints. These classes can simply be
selected via the selector "#uiGroup.small-screen-size" in CSS, and therefore
styling can be made dependent on the screen size.

The small/normal/large screen classes are chosen based on the dimension with
the least available space for now. That might not be the most flexible
approach, but seems simple enough right now. Also the threshold sizes are
not set in stone and can be tweaked again later of course.
This commit is contained in:
Jonas Dreßler 2024-06-25 13:41:05 +02:00
parent c789f62f8f
commit f6f12e4738
1 changed files with 26 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

26
js/ui/layout.js
View file

@ -601,6 +601,31 @@ export const LayoutManager = GObject.registerClass({
}
}
_updateMonitorSizeCssClass() {
if (!this.primaryMonitor)
return;
const oldMonitorSizeCssClass = this._monitorSizeCssClass;
const smallestDimensionSizePx =
this.primaryMonitor.width > this.primaryMonitor.height
? this.primaryMonitor.height
: this.primaryMonitor.width;
if (smallestDimensionSizePx < 900)
this._monitorSizeCssClass = "small-screen-size";
else if (smallestDimensionSizePx < 1200)
this._monitorSizeCssClass = "normal-screen-size";
else
this._monitorSizeCssClass = "large-screen-size";
if (oldMonitorSizeCssClass === this._monitorSizeCssClass)
return;
if (oldMonitorSizeCssClass)
this.uiGroup.remove_style_class_name(oldMonitorSizeCssClass);
this.uiGroup.add_style_class_name(this._monitorSizeCssClass);
}
_monitorsChanged() {
this._updateMonitors();
this._updateBoxes();
@ -608,6 +633,7 @@ export const LayoutManager = GObject.registerClass({
this._updateBackgrounds();
this._updateFullscreen();
this._updateVisibility();
this._updateMonitorSizeCssClass();
this._queueUpdateRegions();
this.emit('monitors-changed');