[gnome-shell/gbsneto/multiline-on-hover: 1/2] appDisplay: Let icon labels be multiline when hovered

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit efd1e06fecfff962e2184adb6ce7bebe8f11ed9b
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Wed Oct 21 14:33:23 2020 -0300

    appDisplay: Let icon labels be multiline when hovered
    
    When hovered, remove constraints from the icon labels that
    limit the number of lines. Do that inside a saved easing
    state so that the allocation can ease the label.
    
    This helps with applications with long titles.
    
    Related: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/363
    
    https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1477

 js/ui/appDisplay.js | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)
---
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 56b4a58714..83977a7150 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -1,7 +1,8 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 /* exported AppDisplay, AppSearchProvider */
 
-const { Clutter, Gio, GLib, GObject, Graphene, Meta, Shell, St } = imports.gi;
+const { Clutter, Gio, GLib, GObject, Graphene, Meta,
+    Pango, Shell, St } = imports.gi;
 const Signals = imports.signals;
 
 const AppFavorites = imports.ui.appFavorites;
@@ -31,6 +32,9 @@ var SCROLL_TIMEOUT_TIME = 150;
 var APP_ICON_SCALE_IN_TIME = 500;
 var APP_ICON_SCALE_IN_DELAY = 700;
 
+var APP_ICON_TITLE_EXPAND_TIME = 250;
+var APP_ICON_TITLE_COLLAPSE_TIME = 150;
+
 const FOLDER_DIALOG_ANIMATION_TIME = 200;
 
 const OVERSHOOT_THRESHOLD = 20;
@@ -1470,6 +1474,7 @@ class AppViewItem extends St.Button {
 
         this._otherIconIsHovering = false;
 
+        this.connect('notify::hover', this._onHover.bind(this));
         this.connect('destroy', this._onDestroy.bind(this));
     }
 
@@ -1486,6 +1491,35 @@ class AppViewItem extends St.Button {
         }
     }
 
+    _onHover() {
+        if (!this.icon.label)
+            return;
+
+        const { label } = this.icon;
+        const { clutterText } = label;
+        const layout = clutterText.get_layout();
+        if (!layout.is_wrapped() && !layout.is_ellipsized())
+            return;
+
+        label.remove_transition('allocation');
+
+        const id = label.connect('notify::allocation', () => {
+            label.restore_easing_state();
+            label.disconnect(id);
+        });
+
+        const { hover } = this;
+        label.save_easing_state();
+        label.set_easing_duration(hover
+            ? APP_ICON_TITLE_EXPAND_TIME
+            : APP_ICON_TITLE_COLLAPSE_TIME);
+        clutterText.set({
+            line_wrap: hover,
+            line_wrap_mode: hover ? Pango.WrapMode.WORD_CHAR : Pango.WrapMode.NONE,
+            ellipsize: hover ? Pango.EllipsizeMode.NONE : Pango.EllipsizeMode.END,
+        });
+    }
+
     _onDragBegin() {
         this._dragging = true;
         this.scaleAndFade();