isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

osdWindow: Implement new OSD design

Browse Source 
Switch to a horizontal layout, use smaller icons and move
the OSD to the bottom of the screen.

https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/152

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2127>
This commit is contained in:
Florian Müllner 2022-01-25 23:15:52 +01:00 committed by Marge Bot
parent 5135af0750
commit 3e8fd65045
3 changed files with 28 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/theme/gnome-shell-sass/_common.scss
View File

@ -77,7 +77,7 @@ stage {
color: $osd_fg_color;
background-color: $osd_bg_color;
border: 1px solid $osd_outer_borders_color;
border-radius: $modal_radius;
border-radius: 999px;
padding: $base_padding*2;
}

15
data/theme/gnome-shell-sass/widgets/_osd.scss
View File

@ -1,29 +1,32 @@
/* OSD */
$osd_levelbar_height:8px;
$osd_levelbar_height:6px;
.osd-window {
@extend %osd_panel;
text-align: center;
font-weight: bold;
spacing: $base_spacing * 2; // 12px
margin: $base_margin * 8; // 32px
min-width: 64px;
min-height: 64px;
&, & > * { spacing: $base_spacing * 2; } // 12px
margin: 4em;
StIcon {
icon-size:$base_icon_size * 6;
icon-size:$base_icon_size * 2;
&:first-child:last-child { padding: 0 $base_padding * 2; }
}
.osd-monitor-label { font-size: 3em; }
.level {
height: $osd_levelbar_height;
min-width:$base_icon_size * 10;
-barlevel-height: $osd_levelbar_height;
-barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
-barlevel-active-background-color: $osd_fg_color;
-barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 3px;
&:ltr {margin-right: 16px;}
&:rtl {margin-left: 16px;}
}
}

94
js/ui/osdWindow.js
View File

@ -11,36 +11,6 @@ var HIDE_TIMEOUT = 1500;
var FADE_TIME = 100;
var LEVEL_ANIMATION_TIME = 100;
var OsdWindowConstraint = GObject.registerClass(
class OsdWindowConstraint extends Clutter.Constraint {
_init(props) {
this._minSize = 0;
super._init(props);
}
set minSize(v) {
this._minSize = v;
if (this.actor)
this.actor.queue_relayout();
}
vfunc_update_allocation(actor, actorBox) {
// Clutter will adjust the allocation for margins,
// so add it to our minimum size
let minSize = this._minSize + actor.margin_top + actor.margin_bottom;
let [width, height] = actorBox.get_size();
// Enforce a ratio of 1
let size = Math.ceil(Math.max(minSize, height));
actorBox.set_size(size, size);
// Recenter
let [x, y] = actorBox.get_origin();
actorBox.set_origin(Math.ceil(x + width / 2 - size / 2),
Math.ceil(y + height / 2 - size / 2));
}
});
var OsdWindow = GObject.registerClass(
class OsdWindow extends Clutter.Actor {
_init(monitorIndex) {
@ -48,56 +18,43 @@ class OsdWindow extends Clutter.Actor {
x_expand: true,
y_expand: true,
x_align: Clutter.ActorAlign.CENTER,
y_align: Clutter.ActorAlign.CENTER,
y_align: Clutter.ActorAlign.END,
});
this._monitorIndex = monitorIndex;
let constraint = new Layout.MonitorConstraint({ index: monitorIndex });
this.add_constraint(constraint);
this._boxConstraint = new OsdWindowConstraint();
this._box = new St.BoxLayout({ style_class: 'osd-window',
vertical: true });
this._box.add_constraint(this._boxConstraint);
this.add_actor(this._box);
this._hbox = new St.BoxLayout({
style_class: 'osd-window',
});
this.add_actor(this._hbox);
this._icon = new St.Icon({ y_expand: true });
this._box.add_child(this._icon);
this._hbox.add_child(this._icon);
this._vbox = new St.BoxLayout({
vertical: true,
y_align: Clutter.ActorAlign.CENTER,
});
this._hbox.add_child(this._vbox);
this._label = new St.Label();
this._box.add(this._label);
this._vbox.add_child(this._label);
this._level = new BarLevel.BarLevel({
style_class: 'level',
value: 0,
});
this._box.add(this._level);
this._vbox.add_child(this._level);
this._hideTimeoutId = 0;
this._reset();
this.connect('destroy', this._onDestroy.bind(this));
this._monitorsChangedId =
Main.layoutManager.connect('monitors-changed',
this._relayout.bind(this));
let themeContext = St.ThemeContext.get_for_stage(global.stage);
this._scaleChangedId =
themeContext.connect('notify::scale-factor',
this._relayout.bind(this));
this._relayout();
Main.uiGroup.add_child(this);
}
_onDestroy() {
if (this._monitorsChangedId)
Main.layoutManager.disconnect(this._monitorsChangedId);
this._monitorsChangedId = 0;
let themeContext = St.ThemeContext.get_for_stage(global.stage);
if (this._scaleChangedId)
themeContext.disconnect(this._scaleChangedId);
this._scaleChangedId = 0;
_updateBoxVisibility() {
this._vbox.visible = [...this._vbox].some(c => c.visible);
}
setIcon(icon) {
@ -108,6 +65,7 @@ class OsdWindow extends Clutter.Actor {
this._label.visible = label != undefined;
if (label)
this._label.text = label;
this._updateBoxVisibility();
}
setLevel(value) {
@ -122,6 +80,7 @@ class OsdWindow extends Clutter.Actor {
this._level.value = value;
}
}
this._updateBoxVisibility();
}
setMaxLevel(maxLevel = 1) {
@ -180,23 +139,6 @@ class OsdWindow extends Clutter.Actor {
this.setMaxLevel(null);
this.setLevel(null);
}
_relayout() {
/* assume 110x110 on a 640x480 display and scale from there */
let monitor = Main.layoutManager.monitors[this._monitorIndex];
if (!monitor)
return; // we are about to be removed
let scalew = monitor.width / 640.0;
let scaleh = monitor.height / 480.0;
let scale = Math.min(scalew, scaleh);
let popupSize = 110 * Math.max(1, scale);
let scaleFactor = St.ThemeContext.get_for_stage(global.stage).scale_factor;
this._icon.icon_size = popupSize / (2 * scaleFactor);
this._box.translation_y = Math.round(monitor.height / 4);
this._boxConstraint.minSize = popupSize;
}
});
var OsdWindowManager = class {