osdWindow: Implement new OSD design
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:
parent
5135af0750
commit
3e8fd65045
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user