[gnome-shell] osdWindow: Implement new OSD design

[Marge Bot <marge-bot src gnome org>]

commit 3e8fd65045f0309e32702856f238f74c645c9222
Author: Florian Müllner <fmuellner gnome org>
Date:   Tue Jan 25 23:15:52 2022 +0100

    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>

 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 b68260236c..ff630616af 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 87f376d17f..e3d07074cd 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 ce33c069ce..b183333613 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 {