From b58119d5c69bde093fac3f471ec25e21bc67d079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= Date: Tue, 21 Jun 2022 15:45:34 +0200 Subject: [PATCH] overview: Make the spacing dynamic depending on screen height The HTML/CSS sizing prototype that was done back in the day for GNOME 40 has a dynamic spacing depending on the height of the monitor. Let's try to follow that more closely and make the spacing dependent on screen height. For the sizing prototype, see https://gitlab.gnome.org/Teams/Design/os-mockups/-/tree/master/overview/sizing-prototype This also allows removing of a bit of manually added spacing at the top of the dash. Part-of: --- .../theme/gnome-shell-sass/widgets/_dash.scss | 2 - .../gnome-shell-sass/widgets/_overview.scss | 2 +- js/ui/overviewControls.js | 54 +++++++------------ 3 files changed, 21 insertions(+), 37 deletions(-) diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index db378ca1e..e49a259ae 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -11,8 +11,6 @@ $dash_spacing: $base_margin * 0.5; // container for the dash #dash { - margin-top: $dash_edge_offset; - // background behind item container .dash-background { background-color: $dash_background_color; diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss b/data/theme/gnome-shell-sass/widgets/_overview.scss index ac94f740f..1172c070e 100644 --- a/data/theme/gnome-shell-sass/widgets/_overview.scss +++ b/data/theme/gnome-shell-sass/widgets/_overview.scss @@ -1,6 +1,6 @@ /* OVERVIEW */ -.controls-manager, .secondary-monitor-workspaces { +.secondary-monitor-workspaces { spacing: $base_padding * 2; } diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js index 9b1eaf52b..43817a862 100644 --- a/js/ui/overviewControls.js +++ b/js/ui/overviewControls.js @@ -21,6 +21,7 @@ import * as WorkspacesView from './workspacesView.js'; export const SMALL_WORKSPACE_RATIO = 0.15; const DASH_MAX_HEIGHT_RATIO = 0.15; +const VERTICAL_SPACING_RATIO = 0.02; const A11Y_SCHEMA = 'org.gnome.desktop.a11y.keyboard'; @@ -47,8 +48,6 @@ class ControlsManagerLayout extends Clutter.LayoutManager { this._searchController = searchController; this._dash = dash; - this._spacing = 0; - this._cachedWorkspaceBoxes = new Map(); this._postAllocationCallbacks = []; @@ -76,7 +75,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager { this._workAreaBox.set_size(workArea.width, workArea.height); } - _computeWorkspacesBoxForState(state, box, searchHeight, dashHeight, thumbnailsHeight) { + _computeWorkspacesBoxForState(state, box, searchHeight, dashHeight, thumbnailsHeight, spacing) { const workspaceBox = box.copy(); const [width, height] = workspaceBox.get_size(); const {y1: startY} = this._workAreaBox; @@ -89,16 +88,16 @@ class ControlsManagerLayout extends Clutter.LayoutManager { break; case ControlsState.WINDOW_PICKER: workspaceBox.set_origin(0, - startY + searchHeight + this._spacing + - thumbnailsHeight + this._spacing * expandFraction); + startY + searchHeight + spacing + + thumbnailsHeight + spacing * expandFraction); workspaceBox.set_size(width, height - - dashHeight - this._spacing - - searchHeight - this._spacing - - thumbnailsHeight - this._spacing * expandFraction); + dashHeight - spacing - + searchHeight - spacing - + thumbnailsHeight - spacing * expandFraction); break; case ControlsState.APP_GRID: - workspaceBox.set_origin(0, startY + searchHeight + this._spacing); + workspaceBox.set_origin(0, startY + searchHeight + spacing); workspaceBox.set_size( width, Math.round(height * SMALL_WORKSPACE_RATIO)); @@ -108,7 +107,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager { return workspaceBox; } - _getAppDisplayBoxForState(state, box, searchHeight, dashHeight, workspacesBox) { + _getAppDisplayBoxForState(state, box, searchHeight, dashHeight, workspacesBox, spacing) { const [width, height] = box.get_size(); const {y1: startY} = this._workAreaBox; const appDisplayBox = new Clutter.ActorBox(); @@ -120,15 +119,15 @@ class ControlsManagerLayout extends Clutter.LayoutManager { break; case ControlsState.APP_GRID: appDisplayBox.set_origin(0, - startY + searchHeight + this._spacing + workspacesBox.get_height() + this._spacing); + startY + searchHeight + spacing + workspacesBox.get_height() + spacing); break; } appDisplayBox.set_size(width, height - - searchHeight - this._spacing - - workspacesBox.get_height() - this._spacing - - dashHeight - this._spacing); + searchHeight - spacing - + workspacesBox.get_height() - spacing - + dashHeight - spacing); return appDisplayBox; } @@ -141,20 +140,6 @@ class ControlsManagerLayout extends Clutter.LayoutManager { this._postAllocationCallbacks = []; } - vfunc_set_container(container) { - this._container?.disconnectObject(this); - this._container = container; - this._container?.connectObject('style-changed', - () => { - const node = this._container.get_theme_node(); - const spacing = node.get_length('spacing'); - if (this._spacing !== spacing) { - this._spacing = spacing; - this.layout_changed(); - } - }, this); - } - vfunc_get_preferred_width(_container, _forHeight) { // The MonitorConstraint will allocate us a fixed size anyway return [0, 0]; @@ -171,6 +156,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager { const startY = this._workAreaBox.y1; box.y1 += startY; const [width, height] = box.get_size(); + const spacing = Math.round(height * VERTICAL_SPACING_RATIO); let availableHeight = height; // Search entry @@ -179,7 +165,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager { childBox.set_size(width, searchHeight); this._searchEntry.allocate(childBox); - availableHeight -= searchHeight + this._spacing; + availableHeight -= searchHeight + spacing; // Dash const maxDashHeight = Math.round(box.get_height() * DASH_MAX_HEIGHT_RATIO); @@ -191,7 +177,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager { childBox.set_size(width, dashHeight); this._dash.allocate(childBox); - availableHeight -= dashHeight + this._spacing; + availableHeight -= dashHeight + spacing; // Workspace Thumbnails let thumbnailsHeight = 0; @@ -202,13 +188,13 @@ class ControlsManagerLayout extends Clutter.LayoutManager { thumbnailsHeight = Math.min( thumbnailsHeight * expandFraction, height * this._workspacesThumbnails.maxThumbnailScale); - childBox.set_origin(0, startY + searchHeight + this._spacing); + childBox.set_origin(0, startY + searchHeight + spacing); childBox.set_size(width, thumbnailsHeight); this._workspacesThumbnails.allocate(childBox); } // Workspaces - let params = [box, searchHeight, dashHeight, thumbnailsHeight]; + let params = [box, searchHeight, dashHeight, thumbnailsHeight, spacing]; const transitionParams = this._stateAdjustment.getStateTransitionParams(); // Update cached boxes @@ -233,7 +219,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager { const workspaceAppGridBox = this._cachedWorkspaceBoxes.get(ControlsState.APP_GRID); - params = [box, searchHeight, dashHeight, workspaceAppGridBox]; + params = [box, searchHeight, dashHeight, workspaceAppGridBox, spacing]; let appDisplayBox; if (!transitionParams.transitioning) { appDisplayBox = @@ -251,7 +237,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager { } // Search - childBox.set_origin(0, startY + searchHeight + this._spacing); + childBox.set_origin(0, startY + searchHeight + spacing); childBox.set_size(width, availableHeight); this._searchController.allocate(childBox);