gnome-shell/js/ui/overviewControls.js
Florian Müllner a5730d7b30 overviewControls: Make sure dash is positioned at the bottom
We don't want the dash to expand, but if it's given more space
than requested, we want it to be positioned at the bottom.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1577>
2021-01-20 11:34:43 +00:00

463 lines
14 KiB
JavaScript

// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
/* exported ControlsManager */
const { Clutter, GObject, Meta, St } = imports.gi;
const Dash = imports.ui.dash;
const Main = imports.ui.main;
const Params = imports.misc.params;
const ViewSelector = imports.ui.viewSelector;
const WorkspaceThumbnail = imports.ui.workspaceThumbnail;
const Overview = imports.ui.overview;
var SIDE_CONTROLS_ANIMATION_TIME = Overview.ANIMATION_TIME;
function getRtlSlideDirection(direction, actor) {
let rtl = actor.text_direction == Clutter.TextDirection.RTL;
if (rtl) {
direction = direction == SlideDirection.LEFT
? SlideDirection.RIGHT : SlideDirection.LEFT;
}
return direction;
}
var SlideDirection = {
LEFT: 0,
RIGHT: 1,
};
var SlideLayout = GObject.registerClass({
Properties: {
'slide-x': GObject.ParamSpec.double(
'slide-x', 'slide-x', 'slide-x',
GObject.ParamFlags.READWRITE,
0, 1, 1),
},
}, class SlideLayout extends Clutter.FixedLayout {
_init(params) {
this._slideX = 1;
this._direction = SlideDirection.LEFT;
super._init(params);
}
vfunc_get_preferred_width(container, forHeight) {
let child = container.get_first_child();
let [minWidth, natWidth] = child.get_preferred_width(forHeight);
minWidth *= this._slideX;
natWidth *= this._slideX;
return [minWidth, natWidth];
}
vfunc_allocate(container, box) {
let child = container.get_first_child();
let availWidth = Math.round(box.x2 - box.x1);
let availHeight = Math.round(box.y2 - box.y1);
let [, natWidth] = child.get_preferred_width(availHeight);
// Align the actor inside the clipped box, as the actor's alignment
// flags only determine what to do if the allocated box is bigger
// than the actor's box.
let realDirection = getRtlSlideDirection(this._direction, child);
let alignX = realDirection == SlideDirection.LEFT
? availWidth - natWidth
: availWidth - natWidth * this._slideX;
let actorBox = new Clutter.ActorBox();
actorBox.x1 = box.x1 + alignX;
actorBox.x2 = actorBox.x1 + (child.x_expand ? availWidth : natWidth);
actorBox.y1 = box.y1;
actorBox.y2 = actorBox.y1 + availHeight;
child.allocate(actorBox);
}
// eslint-disable-next-line camelcase
set slide_x(value) {
if (this._slideX == value)
return;
this._slideX = value;
this.notify('slide-x');
this.layout_changed();
}
// eslint-disable-next-line camelcase
get slide_x() {
return this._slideX;
}
set slideDirection(direction) {
this._direction = direction;
this.layout_changed();
}
get slideDirection() {
return this._direction;
}
});
var FaderControl = GObject.registerClass(
class FaderControl extends St.Widget {
_init(params) {
super._init(params);
this._inDrag = false;
Main.overview.connect('item-drag-begin', this._onDragBegin.bind(this));
Main.overview.connect('item-drag-end', this._onDragEnd.bind(this));
Main.overview.connect('item-drag-cancelled', this._onDragEnd.bind(this));
Main.overview.connect('window-drag-begin', this._onWindowDragBegin.bind(this));
Main.overview.connect('window-drag-cancelled', this._onWindowDragEnd.bind(this));
Main.overview.connect('window-drag-end', this._onWindowDragEnd.bind(this));
}
_onWindowDragBegin() {
this._onDragBegin();
}
_onWindowDragEnd() {
this._onDragEnd();
}
_onDragBegin() {
this._inDrag = true;
}
_onDragEnd() {
this._inDrag = false;
}
fadeIn() {
this.ease({
opacity: 255,
duration: SIDE_CONTROLS_ANIMATION_TIME / 2,
mode: Clutter.AnimationMode.EASE_IN_QUAD,
});
}
fadeHalf() {
this.ease({
opacity: 128,
duration: SIDE_CONTROLS_ANIMATION_TIME / 2,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
}
});
var SlidingControl = GObject.registerClass(
class SlidingControl extends FaderControl {
_init(params) {
params = Params.parse(params, { slideDirection: SlideDirection.LEFT });
this.layout = new SlideLayout();
this.layout.slideDirection = params.slideDirection;
super._init({
layout_manager: this.layout,
style_class: 'overview-controls',
clip_to_allocation: true,
});
this._visible = true;
Main.overview.connect('hiding', this._onOverviewHiding.bind(this));
}
_getSlide() {
throw new GObject.NotImplementedError('_getSlide in %s'.format(this.constructor.name));
}
_updateSlide() {
this.ease_property('@layout.slide-x', this._getSlide(), {
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
duration: SIDE_CONTROLS_ANIMATION_TIME,
});
}
getVisibleWidth() {
let child = this.get_first_child();
let [, , natWidth] = child.get_preferred_size();
return natWidth;
}
_getTranslation() {
let child = this.get_first_child();
let direction = getRtlSlideDirection(this.layout.slideDirection, child);
let visibleWidth = this.getVisibleWidth();
if (direction == SlideDirection.LEFT)
return -visibleWidth;
else
return visibleWidth;
}
_updateTranslation() {
let translationStart = 0;
let translationEnd = 0;
let translation = this._getTranslation();
let shouldShow = this._getSlide() > 0;
if (shouldShow)
translationStart = translation;
else
translationEnd = translation;
if (this.translation_x === translationEnd)
return;
this.translation_x = translationStart;
this.ease({
translation_x: translationEnd,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
duration: SIDE_CONTROLS_ANIMATION_TIME,
});
}
_onOverviewHiding() {
// We need to explicitly slideOut since showing pages
// doesn't imply sliding out, instead, hiding the overview does.
this.slideOut();
}
_onDragBegin() {
super._onDragBegin();
this._updateTranslation();
this._updateSlide();
}
_onDragEnd() {
super._onDragEnd();
this._updateSlide();
}
slideIn() {
this._visible = true;
// we will update slide_x and the translation from pageEmpty
}
slideOut() {
this._visible = false;
this._updateTranslation();
// we will update slide_x from pageEmpty
}
pageEmpty() {
// When pageEmpty is received, there's no visible view in the
// selector; this means we can now safely set the full slide for
// the next page, since slideIn or slideOut might have been called,
// changing the visibility
this.remove_transition('@layout.slide-x');
this.layout.slide_x = this._getSlide();
this._updateTranslation();
}
});
var ThumbnailsSlider = GObject.registerClass(
class ThumbnailsSlider extends SlidingControl {
_init(thumbnailsBox) {
super._init({ slideDirection: SlideDirection.RIGHT });
this._thumbnailsBox = thumbnailsBox;
this.request_mode = Clutter.RequestMode.WIDTH_FOR_HEIGHT;
this.reactive = true;
this.track_hover = true;
this.add_actor(this._thumbnailsBox);
Main.layoutManager.connect('monitors-changed', this._updateSlide.bind(this));
global.workspace_manager.connect('active-workspace-changed',
this._updateSlide.bind(this));
global.workspace_manager.connect('notify::n-workspaces',
this._updateSlide.bind(this));
this.connect('notify::hover', this._updateSlide.bind(this));
this._thumbnailsBox.bind_property('visible', this, 'visible', GObject.BindingFlags.SYNC_CREATE);
}
_getAlwaysZoomOut() {
// Always show the pager on hover, during a drag, or if workspaces are
// actually used, e.g. there are windows on any non-active workspace
let workspaceManager = global.workspace_manager;
let alwaysZoomOut = this.hover ||
this._inDrag ||
!Meta.prefs_get_dynamic_workspaces() ||
workspaceManager.n_workspaces > 2 ||
workspaceManager.get_active_workspace_index() != 0;
if (!alwaysZoomOut) {
let monitors = Main.layoutManager.monitors;
let primary = Main.layoutManager.primaryMonitor;
/* Look for any monitor to the right of the primary, if there is
* one, we always keep zoom out, otherwise its hard to reach
* the thumbnail area without passing into the next monitor. */
for (let i = 0; i < monitors.length; i++) {
if (monitors[i].x >= primary.x + primary.width) {
alwaysZoomOut = true;
break;
}
}
}
return alwaysZoomOut;
}
getNonExpandedWidth() {
let child = this.get_first_child();
return child.get_theme_node().get_length('visible-width');
}
_onDragEnd() {
this.sync_hover();
super._onDragEnd();
}
_getSlide() {
if (!this._visible)
return 0;
let alwaysZoomOut = this._getAlwaysZoomOut();
if (alwaysZoomOut)
return 1;
let child = this.get_first_child();
let preferredHeight = child.get_preferred_height(-1)[1];
let expandedWidth = child.get_preferred_width(preferredHeight)[1];
return this.getNonExpandedWidth() / expandedWidth;
}
getVisibleWidth() {
let alwaysZoomOut = this._getAlwaysZoomOut();
if (alwaysZoomOut)
return super.getVisibleWidth();
else
return this.getNonExpandedWidth();
}
});
var DashFader = GObject.registerClass(
class DashFader extends FaderControl {
_init(dash) {
super._init({
x_expand: true,
x_align: Clutter.ActorAlign.CENTER,
y_align: Clutter.ActorAlign.END,
});
this._dash = dash;
this.add_child(this._dash);
}
_onWindowDragBegin() {
this.fadeHalf();
}
_onWindowDragEnd() {
this.fadeIn();
}
});
var ControlsManager = GObject.registerClass(
class ControlsManager extends St.Widget {
_init(searchEntry) {
super._init({
layout_manager: new Clutter.BinLayout(),
x_expand: true,
y_expand: true,
clip_to_allocation: true,
});
this.dash = new Dash.Dash();
this._dashFader = new DashFader(this.dash);
let workspaceManager = global.workspace_manager;
let activeWorkspaceIndex = workspaceManager.get_active_workspace_index();
this._workspaceAdjustment = new St.Adjustment({
actor: this,
value: activeWorkspaceIndex,
lower: 0,
page_increment: 1,
page_size: 1,
step_increment: 0,
upper: workspaceManager.n_workspaces,
});
this._nWorkspacesNotifyId =
workspaceManager.connect('notify::n-workspaces',
this._updateAdjustment.bind(this));
this._thumbnailsBox =
new WorkspaceThumbnail.ThumbnailsBox(this._workspaceAdjustment);
this._thumbnailsSlider = new ThumbnailsSlider(this._thumbnailsBox);
this.viewSelector = new ViewSelector.ViewSelector(searchEntry,
this._workspaceAdjustment, this.dash.showAppsButton);
this.viewSelector.connect('page-changed', this._setVisibility.bind(this));
this.viewSelector.connect('page-empty', this._onPageEmpty.bind(this));
this._group = new St.BoxLayout({
name: 'overview-group',
vertical: true,
x_expand: true,
y_expand: true,
});
this.add_actor(this._group);
const box = new St.BoxLayout({
x_expand: true,
y_expand: true,
});
box.add_child(this.viewSelector);
box.add_child(this._thumbnailsSlider);
this._group.add_child(box);
this._group.add_actor(this._dashFader);
this.connect('destroy', this._onDestroy.bind(this));
}
_onDestroy() {
global.workspace_manager.disconnect(this._nWorkspacesNotifyId);
}
_updateAdjustment() {
let workspaceManager = global.workspace_manager;
let newNumWorkspaces = workspaceManager.n_workspaces;
let activeIndex = workspaceManager.get_active_workspace_index();
this._workspaceAdjustment.upper = newNumWorkspaces;
// A workspace might have been inserted or removed before the active
// one, causing the adjustment to go out of sync, so update the value
this._workspaceAdjustment.remove_transition('value');
this._workspaceAdjustment.value = activeIndex;
}
_setVisibility() {
// Ignore the case when we're leaving the overview, since
// actors will be made visible again when entering the overview
// next time, and animating them while doing so is just
// unnecessary noise
if (!Main.overview.visible ||
(Main.overview.animationInProgress && !Main.overview.visibleTarget))
return;
let activePage = this.viewSelector.getActivePage();
let thumbnailsVisible = activePage == ViewSelector.ViewPage.WINDOWS;
if (thumbnailsVisible)
this._thumbnailsSlider.slideIn();
else
this._thumbnailsSlider.slideOut();
}
_onPageEmpty() {
this._thumbnailsSlider.pageEmpty();
}
});