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
This commit is contained in:
Georges Basile Stavracas Neto 2020-10-21 14:33:23 -03:00
parent 4fcbf6c974
commit efd1e06fec

View File

@ -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();