From f0afbd60738fcd2a454e0106f61fea561631af7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= Date: Fri, 10 Jun 2022 11:56:14 +0200 Subject: [PATCH 1/8] style/app-grid: Decrease horizontal spacing in the pageIndicators To make the page indicators look nice on smaller screens, they have to be smaller. This seems to look just fine on large screens too, so no need to special-case it. --- data/theme/gnome-shell-sass/widgets/_app-grid.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 2fe110fe8..626cd7564 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -119,7 +119,7 @@ $app_folder_size: 720px; // App Grid pagination indicators $page_indicator_size: 10px; .page-indicator { - padding: $base_padding $base_padding * 2 0; + padding: $base_padding $base_padding 0; transition-duration:400ms; .page-indicator-icon { From 67a386ff1728f629baf546c2bb8128c64c83d96b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= Date: Tue, 25 Jun 2024 16:40:13 +0200 Subject: [PATCH 2/8] style/app-grid: Decrease padding on appGrid items Remove the horizontal and vertical padding override on the .overview-tile, so that we use the default padding of %tile (which is just 1*$base_padding). This will make the grid items use less space, allowing the dynamic icon sizing code to choose a larger size even on small monitors. --- data/theme/gnome-shell-sass/widgets/_app-grid.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 626cd7564..11640c8c4 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -23,7 +23,6 @@ $app_folder_size: 720px; // override the %tile style border-radius: $base_border_radius*3; - padding: $base_padding * 2; // the icon itself .overview-icon { From 28f892bc741f760f9afc79bd197f5a88dab1014b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= Date: Tue, 25 Jun 2024 17:12:21 +0200 Subject: [PATCH 3/8] appDisplay: Reduce size of the horizontal space for DND page previews Free up a bit more horizontal space for the icons of the appGrid, so that we can show larger icon sizes even on small monitors. --- js/ui/appDisplay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 0ba6a8164..6111c94a1 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -46,7 +46,7 @@ const FOLDER_DIALOG_ANIMATION_TIME = 200; const PAGE_PREVIEW_ANIMATION_TIME = 150; const PAGE_INDICATOR_FADE_TIME = 200; -const PAGE_PREVIEW_RATIO = 0.20; +const PAGE_PREVIEW_RATIO = 0.16; const DRAG_PAGE_SWITCH_INITIAL_TIMEOUT = 1000; const DRAG_PAGE_SWITCH_IMMEDIATELY_THRESHOLD_PX = 20; From 5210fab7cb11d860aa746421f4336f4f676549d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= Date: Tue, 16 Jan 2024 22:03:31 +0100 Subject: [PATCH 4/8] appDisplay: Move page indicators into container for the app grid Right now the page indicators are positioned above the dash with a fixed vertical distance of "spacing" as defined in ControlsManagerLayout. There can be quite a big distance between dash and app grid on large screens or certain aspect ratios though, and we want the page indicators to be aligned right below the app grid, not right above the dash. As a first step towards that, move the page indicators into the scrollContainer that we use to allocate everything app grid related. To actually align the indicator closer below the app grid, more complex changes to the layout managers of the iconGrid will be necessary. We'll do those at some later point, but for now this change seems nice to have anyway. --- .../gnome-shell-sass/widgets/_app-grid.scss | 6 +++++ js/ui/appDisplay.js | 23 +++++++++++++++---- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 11640c8c4..baf8b9f6d 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -130,6 +130,12 @@ $page_indicator_size: 10px; } } +// App Grid small pagination dots +// the osk also has pagination dots, we only want margin here +#overviewGroup .page-indicators { + margin-top: 12px; +} + .apps-scroll-view { padding: 0; } diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 6111c94a1..2fdb858a1 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -204,7 +204,7 @@ export const AppGrid = GObject.registerClass({ const BaseAppViewGridLayout = GObject.registerClass( class BaseAppViewGridLayout extends Clutter.BinLayout { _init(grid, scrollView, nextPageIndicator, nextPageArrow, - previousPageIndicator, previousPageArrow) { + previousPageIndicator, previousPageArrow, pageIndicators) { if (!(grid instanceof AppGrid)) throw new Error('Grid must be an AppGrid subclass'); @@ -216,6 +216,7 @@ class BaseAppViewGridLayout extends Clutter.BinLayout { this._previousPageArrow = previousPageArrow; this._nextPageIndicator = nextPageIndicator; this._nextPageArrow = nextPageArrow; + this._pageIndicators = pageIndicators; grid.connect('pages-changed', () => this._syncPageIndicatorsVisibility()); @@ -415,6 +416,13 @@ class BaseAppViewGridLayout extends Clutter.BinLayout { this._syncPageIndicators(); } + vfunc_get_preferred_height(_container, forWidth) { + const [gridMinH, gridNatH] = this._grid.get_preferred_height(forWidth); + const [, pageIndicatorsH] = this._pageIndicators.get_preferred_height(-1); + + return [gridNatH + pageIndicatorsH, gridNatH + pageIndicatorsH]; + } + vfunc_allocate(container, box) { const ltr = container.get_text_direction() !== Clutter.TextDirection.RTL; const indicatorsWidth = this._getIndicatorsWidth(box); @@ -424,6 +432,10 @@ class BaseAppViewGridLayout extends Clutter.BinLayout { right: indicatorsWidth, }); + this._pageWidth = box.get_width(); + + const [, pageIndicatorsHeight] = this._pageIndicators.get_preferred_height(-1); + box.y2 -= pageIndicatorsHeight; this._scrollView.allocate(box); const leftBox = box.copy(); @@ -439,7 +451,9 @@ class BaseAppViewGridLayout extends Clutter.BinLayout { this._nextPageArrow.allocate_align_fill(ltr ? rightBox : leftBox, 0.5, 0.5, false, false); - this._pageWidth = box.get_width(); + box.y1 = box.y2; + box.y2 = box.y1 + pageIndicatorsHeight; + this._pageIndicators.allocate(box); } goToPage(page, animate = true) { @@ -601,13 +615,15 @@ var BaseAppView = GObject.registerClass({ scrollContainer.add_child(this._nextPageIndicator); scrollContainer.add_child(this._nextPageArrow); scrollContainer.add_child(this._prevPageArrow); + scrollContainer.add_child(this._pageIndicators); scrollContainer.layoutManager = new BaseAppViewGridLayout( this._grid, this._scrollView, this._nextPageIndicator, this._nextPageArrow, this._prevPageIndicator, - this._prevPageArrow); + this._prevPageArrow, + this._pageIndicators); this._appGridLayout = scrollContainer.layoutManager; scrollContainer._delegate = this; @@ -617,7 +633,6 @@ var BaseAppView = GObject.registerClass({ y_expand: true, }); this._box.add_child(scrollContainer); - this._box.add_child(this._pageIndicators); // Swipe this._swipeTracker = new SwipeTracker.SwipeTracker(this._scrollView, From c789f62f8fb962d930e96154d6546a85f8082357 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= Date: Tue, 25 Jun 2024 12:47:17 +0200 Subject: [PATCH 5/8] appDisplay: Remove two unused layers of nesting The this._box container is unused since the last commit, so can remove that one. The scrollContainer also no longer seems necessary, so remove that one too in favour of the scrollView we have already. --- js/ui/appDisplay.js | 37 ++++++++++++------------------------- 1 file changed, 12 insertions(+), 25 deletions(-) diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 2fdb858a1..75f7c9203 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -606,17 +606,13 @@ var BaseAppView = GObject.registerClass({ this._prevPageArrow.connect('clicked', () => this.goToPage(this._grid.currentPage - 1)); - const scrollContainer = new St.Widget({ - clip_to_allocation: true, - y_expand: true, - }); - scrollContainer.add_child(this._scrollView); - scrollContainer.add_child(this._prevPageIndicator); - scrollContainer.add_child(this._nextPageIndicator); - scrollContainer.add_child(this._nextPageArrow); - scrollContainer.add_child(this._prevPageArrow); - scrollContainer.add_child(this._pageIndicators); - scrollContainer.layoutManager = new BaseAppViewGridLayout( + this.add_child(this._scrollView); + this.add_child(this._prevPageIndicator); + this.add_child(this._nextPageIndicator); + this.add_child(this._nextPageArrow); + this.add_child(this._prevPageArrow); + this.add_child(this._pageIndicators); + this.layoutManager = new BaseAppViewGridLayout( this._grid, this._scrollView, this._nextPageIndicator, @@ -624,15 +620,10 @@ var BaseAppView = GObject.registerClass({ this._prevPageIndicator, this._prevPageArrow, this._pageIndicators); - this._appGridLayout = scrollContainer.layoutManager; - scrollContainer._delegate = this; + this._appGridLayout = this.layoutManager; + //scrollContainer._delegate = this; - this._box = new St.BoxLayout({ - vertical: true, - x_expand: true, - y_expand: true, - }); - this._box.add_child(scrollContainer); + // this.add_child(scrollContainer); // Swipe this._swipeTracker = new SwipeTracker.SwipeTracker(this._scrollView, @@ -1362,7 +1353,7 @@ export const AppDisplay = GObject.registerClass( class AppDisplay extends BaseAppView { _init() { super._init({ - layout_manager: new Clutter.BinLayout(), + clip_to_allocation: true, x_expand: true, y_expand: true, }); @@ -1370,8 +1361,6 @@ class AppDisplay extends BaseAppView { this._pageManager = new PageManager(); this._pageManager.connect('layout-changed', () => this._redisplay()); - this.add_child(this._box); - this._folderIcons = []; this._currentDialog = null; @@ -2136,7 +2125,7 @@ export const FolderView = GObject.registerClass( class FolderView extends BaseAppView { _init(folder, id, parentView) { super._init({ - layout_manager: new Clutter.BinLayout(), + clip_to_allocation: true, x_expand: true, y_expand: true, gesture_modes: Shell.ActionMode.POPUP, @@ -2150,8 +2139,6 @@ class FolderView extends BaseAppView { this._parentView = parentView; this._grid._delegate = this; - this.add_child(this._box); - this._deletingFolder = false; this._apps = []; this._redisplay(); From f6f12e4738fe2d0ce97230f575e7e9d9611ed8bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= Date: Tue, 25 Jun 2024 13:41:05 +0200 Subject: [PATCH 6/8] layout: Add CSS classes to adapt style based on the monitor size We'll need to adapt the spacing (and potentially the icon sizes) of the icon grid based on the monitor size, so that the grid fits better on small monitors. The easy way to do this (and also the way everyone does it these days) is to add CSS classes based on the monitor size to the uiGroup, aka a very simple version of layout breakpoints. These classes can simply be selected via the selector "#uiGroup.small-screen-size" in CSS, and therefore styling can be made dependent on the screen size. The small/normal/large screen classes are chosen based on the dimension with the least available space for now. That might not be the most flexible approach, but seems simple enough right now. Also the threshold sizes are not set in stone and can be tweaked again later of course. --- js/ui/layout.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/js/ui/layout.js b/js/ui/layout.js index 3b54960f8..918868112 100644 --- a/js/ui/layout.js +++ b/js/ui/layout.js @@ -601,6 +601,31 @@ export const LayoutManager = GObject.registerClass({ } } + _updateMonitorSizeCssClass() { + if (!this.primaryMonitor) + return; + + const oldMonitorSizeCssClass = this._monitorSizeCssClass; + const smallestDimensionSizePx = + this.primaryMonitor.width > this.primaryMonitor.height + ? this.primaryMonitor.height + : this.primaryMonitor.width; + + if (smallestDimensionSizePx < 900) + this._monitorSizeCssClass = "small-screen-size"; + else if (smallestDimensionSizePx < 1200) + this._monitorSizeCssClass = "normal-screen-size"; + else + this._monitorSizeCssClass = "large-screen-size"; + + if (oldMonitorSizeCssClass === this._monitorSizeCssClass) + return; + + if (oldMonitorSizeCssClass) + this.uiGroup.remove_style_class_name(oldMonitorSizeCssClass); + this.uiGroup.add_style_class_name(this._monitorSizeCssClass); + } + _monitorsChanged() { this._updateMonitors(); this._updateBoxes(); @@ -608,6 +633,7 @@ export const LayoutManager = GObject.registerClass({ this._updateBackgrounds(); this._updateFullscreen(); this._updateVisibility(); + this._updateMonitorSizeCssClass(); this._queueUpdateRegions(); this.emit('monitors-changed'); From 93835e354a3ea7b700f1bd76ad06bef1f916fef0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= Date: Tue, 25 Jun 2024 13:46:52 +0200 Subject: [PATCH 7/8] style/app-grid: Adjust appGrid sizing based on "breakpoints" for screen size We just introduced a simple version of "breakpoints" to be able to style things differently in CSS based on the screen size. Let's start using it and change the various spacings in the appGrid dependent on the size of the monitor. For small screens, also use a smaller font size, so that we're able to display slightly longer (about 3 more characters) app titles on those small monitors. --- .../gnome-shell-sass/widgets/_app-grid.scss | 72 ++++++++++++++----- js/ui/appDisplay.js | 1 + 2 files changed, 56 insertions(+), 17 deletions(-) diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index baf8b9f6d..be23f7c8c 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -3,16 +3,60 @@ $app_icon_size: 96px; $app_folder_size: 720px; -// app icons -.icon-grid { - row-spacing: $base_padding * 2; - column-spacing: $base_padding * 2; - max-row-spacing: $base_padding * 6; - max-column-spacing: $base_padding * 6; - page-padding-top: $base_padding * 4; - page-padding-bottom: $base_padding * 4; - page-padding-left: $base_padding * 3; - page-padding-right: $base_padding * 3; +#uiGroup.small-screen-size #appDisplay { + margin-top: $base_padding * 2; + margin-bottom: $base_padding * 2; + + .icon-grid { + row-spacing: 0; + column-spacing: $base_padding * 1; + max-row-spacing: $base_padding * 6; + max-column-spacing: $base_padding * 4; + page-padding-left: $base_padding; + page-padding-right: $base_padding; + } + + StLabel { + font-weight: 400; + @include fontsize(10pt); + } + + .page-indicators { + margin-top: 10px; + } +} + +#uiGroup.normal-screen-size #appDisplay { + margin-top: $base_padding * 2; + margin-bottom: $base_padding * 2; + + .icon-grid { + row-spacing: $base_padding * 2; + column-spacing: $base_padding * 2; + max-row-spacing: $base_padding * 8; + max-column-spacing: $base_padding * 4; + page-padding-left: $base_padding; + page-padding-right: $base_padding; + } + + .page-indicators { + margin-top: 14px; + } +} + +#uiGroup.large-screen-size #appDisplay { + .icon-grid { + row-spacing: $base_padding * 4; + column-spacing: $base_padding * 4; + max-row-spacing: $base_padding * 12; + max-column-spacing: $base_padding * 8; + page-padding-left: $base_padding; + page-padding-right: $base_padding; + } + + .page-indicators { + margin-top: 20px; + } } /* App Icons */ @@ -118,7 +162,7 @@ $app_folder_size: 720px; // App Grid pagination indicators $page_indicator_size: 10px; .page-indicator { - padding: $base_padding $base_padding 0; + padding: 0 $base_padding 0; transition-duration:400ms; .page-indicator-icon { @@ -130,12 +174,6 @@ $page_indicator_size: 10px; } } -// App Grid small pagination dots -// the osk also has pagination dots, we only want margin here -#overviewGroup .page-indicators { - margin-top: 12px; -} - .apps-scroll-view { padding: 0; } diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js index 75f7c9203..c02c18be7 100644 --- a/js/ui/appDisplay.js +++ b/js/ui/appDisplay.js @@ -1356,6 +1356,7 @@ class AppDisplay extends BaseAppView { clip_to_allocation: true, x_expand: true, y_expand: true, + name: 'appDisplay', }); this._pageManager = new PageManager(); From ff6c9d550fd3ef163ae99e4c5466c7141033b11a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= Date: Wed, 10 Jan 2024 17:35:57 +0100 Subject: [PATCH 8/8] overviewControls: Make workspaces in appGrid state a bit larger Now that we tweaked the app grid to use larger icon sizes and fit nicely on smaller screens, we can allow the workspaces in the appGrid state to use a bit more vertical space. This is useful on small screens so that the individual workspaces are more easily recognizable, and also useful on large screens (1920x1080p or larger), because there we're actually dealing with too much vertical space that we need to fill. --- js/ui/overviewControls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js index a52aa85d2..18a5803d9 100644 --- a/js/ui/overviewControls.js +++ b/js/ui/overviewControls.js @@ -19,7 +19,7 @@ import * as WindowManager from './windowManager.js'; import * as WorkspaceThumbnail from './workspaceThumbnail.js'; import * as WorkspacesView from './workspacesView.js'; -export const SMALL_WORKSPACE_RATIO = 0.15; +export const SMALL_WORKSPACE_RATIO = 0.18; const DASH_MAX_HEIGHT_RATIO = 0.16; const VERTICAL_SPACING_RATIO = 0.02; const THUMBNAILS_SPACING_ADJUSTMENT_TOP = 0.6;