iconGrid/iconGridLayout: Add support for page-padding

This is a new property to control the padding around each page,
as opposed to the padding around the entire container.

Following the original design of IconGridLayout [1], changing
the page-padding property doesn't trigger relayouts; the container
is responsible for queueing a relayout appropriately.

[1] 3555550d5e

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1510>
This commit is contained in:
Georges Basile Stavracas Neto 2020-11-25 18:39:08 -03:00 committed by Marge Bot
parent 588457cb73
commit 5b6686095a

View File

@ -299,6 +299,10 @@ var IconGridLayout = GObject.registerClass({
GObject.ParamFlags.READWRITE, GObject.ParamFlags.READWRITE,
Clutter.ActorAlign.$gtype, Clutter.ActorAlign.$gtype,
Clutter.ActorAlign.FILL), Clutter.ActorAlign.FILL),
'page-padding': GObject.ParamSpec.boxed('page-padding',
'Page padding', 'Page padding',
GObject.ParamFlags.READWRITE,
Clutter.Margin.$gtype),
'page-valign': GObject.ParamSpec.enum('page-valign', 'page-valign': GObject.ParamSpec.enum('page-valign',
'Vertical page align', 'Vertical page align',
'Vertical page align', 'Vertical page align',
@ -329,6 +333,7 @@ var IconGridLayout = GObject.registerClass({
max_row_spacing: -1, max_row_spacing: -1,
orientation: Clutter.Orientation.VERTICAL, orientation: Clutter.Orientation.VERTICAL,
page_halign: Clutter.ActorAlign.FILL, page_halign: Clutter.ActorAlign.FILL,
page_padding: new Clutter.Margin(),
page_valign: Clutter.ActorAlign.FILL, page_valign: Clutter.ActorAlign.FILL,
row_spacing: 0, row_spacing: 0,
rows_per_page: 4, rows_per_page: 4,
@ -343,6 +348,7 @@ var IconGridLayout = GObject.registerClass({
this._maxRowSpacing = params.max_row_spacing; this._maxRowSpacing = params.max_row_spacing;
this._orientation = params.orientation; this._orientation = params.orientation;
this._pageHAlign = params.page_halign; this._pageHAlign = params.page_halign;
this._pagePadding = params.page_padding;
this._pageVAlign = params.page_valign; this._pageVAlign = params.page_valign;
this._rowSpacing = params.row_spacing; this._rowSpacing = params.row_spacing;
this._rowsPerPage = params.rows_per_page; this._rowsPerPage = params.rows_per_page;
@ -417,9 +423,11 @@ var IconGridLayout = GObject.registerClass({
} }
const emptyHSpace = const emptyHSpace =
this._pageWidth - usedWidth - columnSpacingPerPage; this._pageWidth - usedWidth - columnSpacingPerPage -
this._pagePadding.left - this._pagePadding.right;
const emptyVSpace = const emptyVSpace =
this._pageHeight - usedHeight - rowSpacingPerPage; this._pageHeight - usedHeight - rowSpacingPerPage -
this._pagePadding.top - this._pagePadding.bottom;
if (emptyHSpace >= 0 && emptyVSpace > 0) { if (emptyHSpace >= 0 && emptyVSpace > 0) {
bestSize = size; bestSize = size;
@ -590,28 +598,30 @@ var IconGridLayout = GObject.registerClass({
const columnSpacingPerPage = this._columnSpacing * (nColumns - 1); const columnSpacingPerPage = this._columnSpacing * (nColumns - 1);
const rowSpacingPerPage = this._rowSpacing * (nRows - 1); const rowSpacingPerPage = this._rowSpacing * (nRows - 1);
let emptyHSpace = this._pageWidth - usedWidth - columnSpacingPerPage; const emptyHSpace =
let emptyVSpace = this._pageHeight - usedHeight - rowSpacingPerPage; this._pageWidth - usedWidth - columnSpacingPerPage -
let leftEmptySpace; this._pagePadding.left - this._pagePadding.right;
let topEmptySpace; const emptyVSpace =
this._pageHeight - usedHeight - rowSpacingPerPage -
this._pagePadding.top - this._pagePadding.bottom;
let leftEmptySpace = this._pagePadding.left;
let topEmptySpace = this._pagePadding.top;
let hSpacing; let hSpacing;
let vSpacing; let vSpacing;
switch (this._pageHAlign) { switch (this._pageHAlign) {
case Clutter.ActorAlign.START: case Clutter.ActorAlign.START:
leftEmptySpace = 0;
hSpacing = this._columnSpacing; hSpacing = this._columnSpacing;
break; break;
case Clutter.ActorAlign.CENTER: case Clutter.ActorAlign.CENTER:
leftEmptySpace = Math.floor(emptyHSpace / 2); leftEmptySpace += Math.floor(emptyHSpace / 2);
hSpacing = this._columnSpacing; hSpacing = this._columnSpacing;
break; break;
case Clutter.ActorAlign.END: case Clutter.ActorAlign.END:
leftEmptySpace = emptyHSpace; leftEmptySpace += emptyHSpace;
hSpacing = this._columnSpacing; hSpacing = this._columnSpacing;
break; break;
case Clutter.ActorAlign.FILL: case Clutter.ActorAlign.FILL:
leftEmptySpace = 0;
hSpacing = this._columnSpacing + emptyHSpace / (nColumns - 1); hSpacing = this._columnSpacing + emptyHSpace / (nColumns - 1);
// Maybe constraint horizontal spacing // Maybe constraint horizontal spacing
@ -620,7 +630,7 @@ var IconGridLayout = GObject.registerClass({
(this._maxColumnSpacing - this._columnSpacing) * (nColumns - 1); (this._maxColumnSpacing - this._columnSpacing) * (nColumns - 1);
hSpacing = this._maxColumnSpacing; hSpacing = this._maxColumnSpacing;
leftEmptySpace = leftEmptySpace +=
Math.max((emptyHSpace - extraHSpacing) / 2, 0); Math.max((emptyHSpace - extraHSpacing) / 2, 0);
} }
break; break;
@ -628,19 +638,17 @@ var IconGridLayout = GObject.registerClass({
switch (this._pageVAlign) { switch (this._pageVAlign) {
case Clutter.ActorAlign.START: case Clutter.ActorAlign.START:
topEmptySpace = 0;
vSpacing = this._rowSpacing; vSpacing = this._rowSpacing;
break; break;
case Clutter.ActorAlign.CENTER: case Clutter.ActorAlign.CENTER:
topEmptySpace = Math.floor(emptyVSpace / 2); topEmptySpace += Math.floor(emptyVSpace / 2);
vSpacing = this._rowSpacing; vSpacing = this._rowSpacing;
break; break;
case Clutter.ActorAlign.END: case Clutter.ActorAlign.END:
topEmptySpace = emptyVSpace; topEmptySpace += emptyVSpace;
vSpacing = this._rowSpacing; vSpacing = this._rowSpacing;
break; break;
case Clutter.ActorAlign.FILL: case Clutter.ActorAlign.FILL:
topEmptySpace = 0;
vSpacing = this._rowSpacing + emptyVSpace / (nRows - 1); vSpacing = this._rowSpacing + emptyVSpace / (nRows - 1);
// Maybe constraint vertical spacing // Maybe constraint vertical spacing
@ -649,7 +657,7 @@ var IconGridLayout = GObject.registerClass({
(this._maxRowSpacing - this._rowSpacing) * (nRows - 1); (this._maxRowSpacing - this._rowSpacing) * (nRows - 1);
vSpacing = this._maxRowSpacing; vSpacing = this._maxRowSpacing;
topEmptySpace = topEmptySpace +=
Math.max((emptyVSpace - extraVSpacing) / 2, 0); Math.max((emptyVSpace - extraVSpacing) / 2, 0);
} }
@ -1201,6 +1209,23 @@ var IconGridLayout = GObject.registerClass({
this.notify('page-halign'); this.notify('page-halign');
} }
// eslint-disable-next-line camelcase
get page_padding() {
return this._pagePadding;
}
// eslint-disable-next-line camelcase
set page_padding(padding) {
if (this._pagePadding.top === padding.top &&
this._pagePadding.right === padding.right &&
this._pagePadding.bottom === padding.bottom &&
this._pagePadding.left === padding.left)
return;
this._pagePadding = padding;
this.notify('page-padding');
}
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
get page_valign() { get page_valign() {
return this._pageVAlign; return this._pageVAlign;
@ -1368,6 +1393,10 @@ var IconGrid = GObject.registerClass({
} }
_findBestModeForSize(width, height) { _findBestModeForSize(width, height) {
const { pagePadding } = this.layout_manager;
width -= pagePadding.left + pagePadding.right;
height -= pagePadding.top + pagePadding.bottom;
const sizeRatio = width / height; const sizeRatio = width / height;
let closestRatio = Infinity; let closestRatio = Infinity;
let bestMode = -1; let bestMode = -1;