[gnome-shell/gbsneto/pagination: 3/15] iconGrid: Adapt grid layout according to available size
- From: Georges Basile Stavracas Neto <gbsneto src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell/gbsneto/pagination: 3/15] iconGrid: Adapt grid layout according to available size
- Date: Mon, 25 May 2020 19:56:08 +0000 (UTC)
commit 55f092209a9c7e182bd26fc891270d04d2c74c96
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date: Tue May 19 14:19:05 2020 -0300
iconGrid: Adapt grid layout according to available size
The new icon grid layout operates based on rows and columns, and
doesn't try to dynamically adapt it to fit to the container. In
this case, it is better to have a pre-defined set of well-known,
well-tested rows and columns, and switch between them based on
the aspect ratio of the screen.
Introduce a set of modes to the icon grid, and select the mode
that is closest to the aspect ratio.
https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1271
js/ui/iconGrid.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 53 insertions(+)
---
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index df749605bf..584d3a19a6 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -33,6 +33,25 @@ var APPICON_ANIMATION_OUT_TIME = 250;
const ICON_POSITION_DELAY = 25;
+const gridModes = [
+ {
+ rows: 8,
+ columns: 3,
+ },
+ {
+ rows: 6,
+ columns: 4,
+ },
+ {
+ rows: 4,
+ columns: 6,
+ },
+ {
+ rows: 3,
+ columns: 8,
+ },
+];
+
var BaseIcon = GObject.registerClass(
class BaseIcon extends St.Bin {
_init(label, params) {
@@ -1058,6 +1077,7 @@ var IconGrid = GObject.registerClass({
});
this._currentPage = 0;
+ this._currentMode = -1;
this._clonesAnimating = [];
this.connect('actor-added', this._childAdded.bind(this));
@@ -1097,6 +1117,38 @@ var IconGrid = GObject.registerClass({
});
}
+ _setGridMode(modeIndex) {
+ if (this._currentMode === modeIndex)
+ return;
+
+ this._currentMode = modeIndex;
+
+ if (modeIndex !== -1) {
+ const newMode = gridModes[modeIndex];
+
+ this.layout_manager.rows_per_page = newMode.rows;
+ this.layout_manager.columns_per_page = newMode.columns;
+ }
+ }
+
+ _findBestModeForSize(width, height) {
+ const sizeRatio = width / height;
+ let closestRatio = Infinity;
+ let bestMode = -1;
+
+ for (let modeIndex in gridModes) {
+ const mode = gridModes[modeIndex];
+ const modeRatio = mode.columns / mode.rows;
+
+ if (Math.abs(sizeRatio - modeRatio) < Math.abs(sizeRatio - closestRatio)) {
+ closestRatio = modeRatio;
+ bestMode = modeIndex;
+ }
+ }
+
+ this._setGridMode(bestMode);
+ }
+
_childRemoved(grid, child) {
child.disconnect(child._iconGridKeyFocusInId);
delete child._iconGridKeyFocusInId;
@@ -1280,6 +1332,7 @@ var IconGrid = GObject.registerClass({
}
adaptToSize(width, height) {
+ this._findBestModeForSize(width, height);
this.layout_manager.adaptToSize(width, height);
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]