brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

workspaceThumbnail: Make it horizontal

Browse Source 
Allocate workspace thumbnails horizontally. This requires introducing code
to handle the RTL direction. Do a small rewrite of the DnD hover method to
be simultaneously simpler and easier to follow, and work correctly on RTL.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1593>
This commit is contained in:
Georges Basile Stavracas Neto 2021-01-25 20:52:17 -03:00 committed by Marge Bot
parent 99d1529e8c
commit 3ad7b85e25
1 changed files with 166 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

293
js/ui/workspaceThumbnail.js
View File

@ -627,9 +627,11 @@ var ThumbnailsBox = GObject.registerClass({
}, },
}, class ThumbnailsBox extends St.Widget { }, class ThumbnailsBox extends St.Widget {
_init(scrollAdjustment) { _init(scrollAdjustment) {
super._init({ reactive: true, super._init({
style_class: 'workspace-thumbnails', style_class: 'workspace-thumbnails',
request_mode: Clutter.RequestMode.WIDTH_FOR_HEIGHT }); reactive: true,
x_align: Clutter.ActorAlign.CENTER,
});
this._delegate = this; this._delegate = this;
@ -723,11 +725,11 @@ var ThumbnailsBox = GObject.registerClass({
} }
_activateThumbnailAtPoint(stageX, stageY, time) { _activateThumbnailAtPoint(stageX, stageY, time) {
let [r_, x_, y] = this.transform_stage_point(stageX, stageY); const [r_, x] = this.transform_stage_point(stageX, stageY);
let thumbnail = this._thumbnails.find(t => { const thumbnail = this._thumbnails.find(t => {
let [, h] = t.get_transformed_size(); const [w] = t.get_transformed_size();
return y >= t.y && y <= t.y + h; return x >= t.x && x <= t.x + w;
}); });
if (thumbnail) if (thumbnail)
thumbnail.activate(time); thumbnail.activate(time);
@ -792,6 +794,57 @@ var ThumbnailsBox = GObject.registerClass({
this.queue_relayout(); this.queue_relayout();
} }
_getPlaceholderTarget(index, spacing, rtl) {
const workspace = this._thumbnails[index];
let targetX1;
let targetX2;
if (rtl) {
const [r_, w] = workspace.get_transformed_size();
const baseX = workspace.x + w;
targetX1 = baseX - WORKSPACE_CUT_SIZE;
targetX2 = baseX + spacing + WORKSPACE_CUT_SIZE;
} else {
targetX1 = workspace.x - spacing - WORKSPACE_CUT_SIZE;
targetX2 = workspace.x + WORKSPACE_CUT_SIZE;
}
if (index === 0) {
if (rtl)
targetX2 -= spacing + WORKSPACE_CUT_SIZE;
else
targetX1 += spacing + WORKSPACE_CUT_SIZE;
}
if (index === this._dropPlaceholderPos) {
const placeholderWidth = this._dropPlaceholder.get_width() + spacing;
if (rtl)
targetX2 += placeholderWidth;
else
targetX1 -= placeholderWidth;
}
return [targetX1, targetX2];
}
_withinWorkspace(x, index, rtl) {
const length = this._thumbnails.length;
const workspace = this._thumbnails[index];
let workspaceX1 = workspace.x + WORKSPACE_CUT_SIZE;
let workspaceX2 = workspace.x + workspace.width - WORKSPACE_CUT_SIZE;
if (index === length - 1) {
if (rtl)
workspaceX1 -= WORKSPACE_CUT_SIZE;
else
workspaceX2 += WORKSPACE_CUT_SIZE;
}
return x > workspaceX1 && x <= workspaceX2;
}
// Draggable target interface // Draggable target interface
handleDragOver(source, actor, x, y, time) { handleDragOver(source, actor, x, y, time) {
if (!source.metaWindow && if (!source.metaWindow &&
@ -800,41 +853,30 @@ var ThumbnailsBox = GObject.registerClass({
source != Main.xdndHandler) source != Main.xdndHandler)
return DND.DragMotionResult.CONTINUE; return DND.DragMotionResult.CONTINUE;
const rtl = Clutter.get_default_text_direction() === Clutter.TextDirection.RTL;
let canCreateWorkspaces = Meta.prefs_get_dynamic_workspaces(); let canCreateWorkspaces = Meta.prefs_get_dynamic_workspaces();
let spacing = this.get_theme_node().get_length('spacing'); let spacing = this.get_theme_node().get_length('spacing');
this._dropWorkspace = -1; this._dropWorkspace = -1;
let placeholderPos = -1; let placeholderPos = -1;
let targetBase;
if (this._dropPlaceholderPos == 0)
targetBase = this._dropPlaceholder.y;
else
targetBase = this._thumbnails[0].y;
let targetTop = targetBase - spacing - WORKSPACE_CUT_SIZE;
let length = this._thumbnails.length; let length = this._thumbnails.length;
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
// Allow the reorder target to have a 10px "cut" into const index = rtl ? length - i - 1 : i;
// each side of the thumbnail, to make dragging onto the
// placeholder easier
let [, h] = this._thumbnails[i].get_transformed_size();
let targetBottom = targetBase + WORKSPACE_CUT_SIZE;
let nextTargetBase = targetBase + h + spacing;
let nextTargetTop = nextTargetBase - spacing - (i == length - 1 ? 0 : WORKSPACE_CUT_SIZE);
// Expand the target to include the placeholder, if it exists. if (canCreateWorkspaces && source !== Main.xdndHandler) {
if (i == this._dropPlaceholderPos) const [targetStart, targetEnd] =
targetBottom += this._dropPlaceholder.get_height(); this._getPlaceholderTarget(index, spacing, rtl);
if (y > targetTop && y <= targetBottom && source != Main.xdndHandler && canCreateWorkspaces) { if (x > targetStart && x <= targetEnd) {
placeholderPos = i; placeholderPos = index;
break; break;
} else if (y > targetBottom && y <= nextTargetTop) { }
this._dropWorkspace = i;
break;
} }
targetBase = nextTargetBase; if (this._withinWorkspace(x, index, rtl)) {
targetTop = nextTargetTop; this._dropWorkspace = index;
break;
}
} }
if (this._dropPlaceholderPos != placeholderPos) { if (this._dropPlaceholderPos != placeholderPos) {
@ -1156,8 +1198,27 @@ var ThumbnailsBox = GObject.registerClass({
this._stateUpdateQueued = true; this._stateUpdateQueued = true;
} }
vfunc_get_preferred_height(_forWidth) { vfunc_get_preferred_height(forWidth) {
// Note that for getPreferredWidth/Height we cheat a bit and skip propagating let workspaceManager = global.workspace_manager;
let themeNode = this.get_theme_node();
forWidth = themeNode.adjust_for_width(forWidth);
let spacing = themeNode.get_length('spacing');
let nWorkspaces = workspaceManager.n_workspaces;
let totalSpacing = (nWorkspaces - 1) * spacing;
const avail = forWidth - totalSpacing;
let scale = (avail / nWorkspaces) / this._porthole.width;
scale = Math.min(scale, MAX_THUMBNAIL_SCALE);
const height = Math.round(this._porthole.height * scale);
return themeNode.adjust_preferred_height(height, height);
}
vfunc_get_preferred_width(_forHeight) {
// Note that for getPreferredHeight/Width we cheat a bit and skip propagating
// the size request to our children because we know how big they are and know // the size request to our children because we know how big they are and know
// that the actors aren't depending on the virtual functions being called. // that the actors aren't depending on the virtual functions being called.
let workspaceManager = global.workspace_manager; let workspaceManager = global.workspace_manager;
@ -1167,29 +1228,9 @@ var ThumbnailsBox = GObject.registerClass({
let nWorkspaces = workspaceManager.n_workspaces; let nWorkspaces = workspaceManager.n_workspaces;
let totalSpacing = (nWorkspaces - 1) * spacing; let totalSpacing = (nWorkspaces - 1) * spacing;
let naturalHeight = totalSpacing + nWorkspaces * this._porthole.height * MAX_THUMBNAIL_SCALE; const naturalWidth =
totalSpacing + nWorkspaces * this._porthole.width * MAX_THUMBNAIL_SCALE;
return themeNode.adjust_preferred_height(totalSpacing, naturalHeight); return themeNode.adjust_preferred_width(totalSpacing, naturalWidth);
}
vfunc_get_preferred_width(forHeight) {
let workspaceManager = global.workspace_manager;
let themeNode = this.get_theme_node();
forHeight = themeNode.adjust_for_height(forHeight);
let spacing = themeNode.get_length('spacing');
let nWorkspaces = workspaceManager.n_workspaces;
let totalSpacing = (nWorkspaces - 1) * spacing;
let avail = forHeight - totalSpacing;
let scale = (avail / nWorkspaces) / this._porthole.height;
scale = Math.min(scale, MAX_THUMBNAIL_SCALE);
let width = Math.round(this._porthole.width * scale);
return themeNode.adjust_preferred_width(width, width);
} }
_updatePorthole() { _updatePorthole() {
@ -1216,17 +1257,18 @@ var ThumbnailsBox = GObject.registerClass({
box = themeNode.get_content_box(box); box = themeNode.get_content_box(box);
let portholeWidth = this._porthole.width; const portholeWidth = this._porthole.width;
let portholeHeight = this._porthole.height; const portholeHeight = this._porthole.height;
let spacing = themeNode.get_length('spacing'); const spacing = themeNode.get_length('spacing');
// Compute the scale we'll need once everything is updated // Compute the scale we'll need once everything is updated
let nWorkspaces = workspaceManager.n_workspaces; let nWorkspaces = workspaceManager.n_workspaces;
let totalSpacing = (nWorkspaces - 1) * spacing; let totalSpacing = (nWorkspaces - 1) * spacing;
let avail = (box.y2 - box.y1) - totalSpacing; const availableWidth = (box.get_width() - totalSpacing) / nWorkspaces;
let newScale = (avail / nWorkspaces) / portholeHeight; const hScale = availableWidth / portholeWidth;
newScale = Math.min(newScale, MAX_THUMBNAIL_SCALE); const vScale = box.get_height() / portholeHeight;
const newScale = Math.min(hScale, vScale);
if (newScale != this._targetScale) { if (newScale != this._targetScale) {
if (this._targetScale > 0) { if (this._targetScale > 0) {
@ -1242,24 +1284,19 @@ var ThumbnailsBox = GObject.registerClass({
this._queueUpdateStates(); this._queueUpdateStates();
} }
let thumbnailHeight = portholeHeight * this._scale; const ratio = portholeWidth / portholeHeight;
let thumbnailWidth = Math.round(portholeWidth * this._scale); const thumbnailHeight = Math.round(portholeHeight * this._scale);
let roundedHScale = thumbnailWidth / portholeWidth; const thumbnailWidth = Math.round(thumbnailHeight * ratio);
const roundedVScale = thumbnailHeight / portholeHeight;
let slideOffset; // X offset when thumbnail is fully slid offscreen
if (rtl)
slideOffset = -(thumbnailWidth + themeNode.get_padding(St.Side.LEFT));
else
slideOffset = thumbnailWidth + themeNode.get_padding(St.Side.RIGHT);
let indicatorValue = this._scrollAdjustment.value; let indicatorValue = this._scrollAdjustment.value;
let indicatorUpperWs = Math.ceil(indicatorValue); let indicatorUpperWs = Math.ceil(indicatorValue);
let indicatorLowerWs = Math.floor(indicatorValue); let indicatorLowerWs = Math.floor(indicatorValue);
let indicatorLowerY1 = 0; let indicatorLowerX1 = 0;
let indicatorLowerY2 = 0; let indicatorLowerX2 = 0;
let indicatorUpperY1 = 0; let indicatorUpperX1 = 0;
let indicatorUpperY2 = 0; let indicatorUpperX2 = 0;
let indicatorThemeNode = this._indicator.get_theme_node(); let indicatorThemeNode = this._indicator.get_theme_node();
let indicatorTopFullBorder = indicatorThemeNode.get_padding(St.Side.TOP) + indicatorThemeNode.get_border_width(St.Side.TOP); let indicatorTopFullBorder = indicatorThemeNode.get_padding(St.Side.TOP) + indicatorThemeNode.get_border_width(St.Side.TOP);
@ -1267,7 +1304,7 @@ var ThumbnailsBox = GObject.registerClass({
let indicatorLeftFullBorder = indicatorThemeNode.get_padding(St.Side.LEFT) + indicatorThemeNode.get_border_width(St.Side.LEFT); let indicatorLeftFullBorder = indicatorThemeNode.get_padding(St.Side.LEFT) + indicatorThemeNode.get_border_width(St.Side.LEFT);
let indicatorRightFullBorder = indicatorThemeNode.get_padding(St.Side.RIGHT) + indicatorThemeNode.get_border_width(St.Side.RIGHT); let indicatorRightFullBorder = indicatorThemeNode.get_padding(St.Side.RIGHT) + indicatorThemeNode.get_border_width(St.Side.RIGHT);
let y = box.y1; let x = box.x1;
if (this._dropPlaceholderPos == -1) { if (this._dropPlaceholderPos == -1) {
this._dropPlaceholder.allocate_preferred_size( this._dropPlaceholder.allocate_preferred_size(
@ -1281,82 +1318,84 @@ var ThumbnailsBox = GObject.registerClass({
let childBox = new Clutter.ActorBox(); let childBox = new Clutter.ActorBox();
for (let i = 0; i < this._thumbnails.length; i++) { for (let i = 0; i < this._thumbnails.length; i++) {
let thumbnail = this._thumbnails[i]; const thumbnail = this._thumbnails[i];
if (i > 0) if (i > 0)
y += spacing - Math.round(thumbnail.collapse_fraction * spacing); x += spacing - Math.round(thumbnail.collapse_fraction * spacing);
let x1, x2; const y1 = box.y1;
if (rtl) { const y2 = y1 + thumbnailHeight;
x1 = box.x1 + slideOffset * thumbnail.slide_position;
x2 = x1 + thumbnailWidth; if (i === this._dropPlaceholderPos) {
} else { const [, placeholderWidth] = this._dropPlaceholder.get_preferred_width(-1);
x1 = box.x2 - thumbnailWidth + slideOffset * thumbnail.slide_position; childBox.y1 = y1;
x2 = x1 + thumbnailWidth; childBox.y2 = y2;
}
if (rtl) {
childBox.x2 = box.x2 - Math.round(x);
childBox.x1 = box.x2 - Math.round(x + placeholderWidth);
} else {
childBox.x1 = Math.round(x);
childBox.x2 = Math.round(x + placeholderWidth);
}
if (i == this._dropPlaceholderPos) {
let [, placeholderHeight] = this._dropPlaceholder.get_preferred_height(-1);
childBox.x1 = x1;
childBox.x2 = x2;
childBox.y1 = Math.round(y);
childBox.y2 = Math.round(y + placeholderHeight);
this._dropPlaceholder.allocate(childBox); this._dropPlaceholder.allocate(childBox);
Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => { Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => {
this._dropPlaceholder.show(); this._dropPlaceholder.show();
}); });
y += placeholderHeight + spacing; x += placeholderWidth + spacing;
} }
// We might end up with thumbnailHeight being something like 99.33 // We might end up with thumbnailWidth being something like 99.33
// pixels. To make this work and not end up with a gap at the bottom, // pixels. To make this work and not end up with a gap at the end,
// we need some thumbnails to be 99 pixels and some 100 pixels height; // we need some thumbnails to be 99 pixels and some 100 pixels width;
// we compute an actual scale separately for each thumbnail. // we compute an actual scale separately for each thumbnail.
let y1 = Math.round(y); const x1 = Math.round(x);
let y2 = Math.round(y + thumbnailHeight); const x2 = Math.round(x + thumbnailWidth);
let roundedVScale = (y2 - y1) / portholeHeight; const roundedHScale = (x2 - x1) / portholeWidth;
if (i === indicatorUpperWs) {
indicatorUpperY1 = y1;
indicatorUpperY2 = y2;
}
if (i === indicatorLowerWs) {
indicatorLowerY1 = y1;
indicatorLowerY2 = y2;
}
// Allocating a scaled actor is funny - x1/y1 correspond to the origin // Allocating a scaled actor is funny - x1/y1 correspond to the origin
// of the actor, but x2/y2 are increased by the *unscaled* size. // of the actor, but x2/y2 are increased by the *unscaled* size.
childBox.x1 = x1; if (rtl) {
childBox.x2 = x1 + portholeWidth; childBox.x2 = box.x2 - x1;
childBox.x1 = box.x2 - (x1 + portholeWidth);
} else {
childBox.x1 = x1;
childBox.x2 = x1 + portholeWidth;
}
childBox.y1 = y1; childBox.y1 = y1;
childBox.y2 = y1 + portholeHeight; childBox.y2 = y1 + portholeHeight;
thumbnail.set_scale(roundedHScale, roundedVScale); thumbnail.set_scale(roundedHScale, roundedVScale);
thumbnail.allocate(childBox); thumbnail.allocate(childBox);
if (i === indicatorUpperWs) {
indicatorUpperX1 = childBox.x1;
indicatorUpperX2 = childBox.x2;
}
if (i === indicatorLowerWs) {
indicatorLowerX1 = childBox.x1;
indicatorLowerX2 = childBox.x2;
}
// We round the collapsing portion so that we don't get thumbnails resizing // We round the collapsing portion so that we don't get thumbnails resizing
// during an animation due to differences in rounded, but leave the uncollapsed // during an animation due to differences in rounded, but leave the uncollapsed
// portion unrounded so that non-animating we end up with the right total // portion unrounded so that non-animating we end up with the right total
y += thumbnailHeight - Math.round(thumbnailHeight * thumbnail.collapse_fraction); x += thumbnailWidth - Math.round(thumbnailWidth * thumbnail.collapse_fraction);
} }
if (rtl) { childBox.y1 = box.y1;
childBox.x1 = box.x1; childBox.y2 = box.y1 + thumbnailHeight;
childBox.x2 = box.x1 + thumbnailWidth;
} else {
childBox.x1 = box.x2 - thumbnailWidth;
childBox.x2 = box.x2;
}
let indicatorY1 = indicatorLowerY1 +
(indicatorUpperY1 - indicatorLowerY1) * (indicatorValue % 1);
let indicatorY2 = indicatorLowerY2 +
(indicatorUpperY2 - indicatorLowerY2) * (indicatorValue % 1);
childBox.x1 -= indicatorLeftFullBorder; const indicatorX1 = indicatorLowerX1 +
childBox.x2 += indicatorRightFullBorder; (indicatorUpperX1 - indicatorLowerX1) * (indicatorValue % 1);
childBox.y1 = indicatorY1 - indicatorTopFullBorder; const indicatorX2 = indicatorLowerX2 +
childBox.y2 = indicatorY2 + indicatorBottomFullBorder; (indicatorUpperX2 - indicatorLowerX2) * (indicatorValue % 1);
childBox.x1 = indicatorX1 - indicatorLeftFullBorder;
childBox.x2 = indicatorX2 + indicatorRightFullBorder;
childBox.y1 -= indicatorTopFullBorder;
childBox.y2 += indicatorBottomFullBorder;
this._indicator.allocate(childBox); this._indicator.allocate(childBox);
} }
}); });