From 3e8fd65045f0309e32702856f238f74c645c9222 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Tue, 25 Jan 2022 23:15:52 +0100 Subject: [PATCH] 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: --- data/theme/gnome-shell-sass/_common.scss | 2 +- data/theme/gnome-shell-sass/widgets/_osd.scss | 15 +-- js/ui/osdWindow.js | 94 ++++--------------- 3 files changed, 28 insertions(+), 83 deletions(-) diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index b68260236..ff630616a 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -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; } diff --git a/data/theme/gnome-shell-sass/widgets/_osd.scss b/data/theme/gnome-shell-sass/widgets/_osd.scss index 87f376d17..e3d07074c 100644 --- a/data/theme/gnome-shell-sass/widgets/_osd.scss +++ b/data/theme/gnome-shell-sass/widgets/_osd.scss @@ -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;} } } diff --git a/js/ui/osdWindow.js b/js/ui/osdWindow.js index ce33c069c..b18333361 100644 --- a/js/ui/osdWindow.js +++ b/js/ui/osdWindow.js @@ -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 {