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

overview: Make the spacing dynamic depending on screen height

Browse Source 
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: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3278>
This commit is contained in:
Jonas Dreßler 2022-06-21 15:45:34 +02:00 committed by Marge Bot
parent 816b4e4bf1
commit b58119d5c6
3 changed files with 21 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/theme/gnome-shell-sass/widgets/_dash.scss
View File

@ -11,8 +11,6 @@ $dash_spacing: $base_margin * 0.5;
// container for the dash // container for the dash
#dash { #dash {
margin-top: $dash_edge_offset;
// background behind item container // background behind item container
.dash-background { .dash-background {
background-color: $dash_background_color; background-color: $dash_background_color;

2
data/theme/gnome-shell-sass/widgets/_overview.scss
View File

@ -1,6 +1,6 @@
/* OVERVIEW */ /* OVERVIEW */
.controls-manager, .secondary-monitor-workspaces { .secondary-monitor-workspaces {
spacing: $base_padding * 2; spacing: $base_padding * 2;
} }

54
js/ui/overviewControls.js
View File

@ -21,6 +21,7 @@ import * as WorkspacesView from './workspacesView.js';
export const SMALL_WORKSPACE_RATIO = 0.15; export const SMALL_WORKSPACE_RATIO = 0.15;
const DASH_MAX_HEIGHT_RATIO = 0.15; const DASH_MAX_HEIGHT_RATIO = 0.15;
const VERTICAL_SPACING_RATIO = 0.02;
const A11Y_SCHEMA = 'org.gnome.desktop.a11y.keyboard'; const A11Y_SCHEMA = 'org.gnome.desktop.a11y.keyboard';
@ -47,8 +48,6 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
this._searchController = searchController; this._searchController = searchController;
this._dash = dash; this._dash = dash;
this._spacing = 0;
this._cachedWorkspaceBoxes = new Map(); this._cachedWorkspaceBoxes = new Map();
this._postAllocationCallbacks = []; this._postAllocationCallbacks = [];
@ -76,7 +75,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
this._workAreaBox.set_size(workArea.width, workArea.height); 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 workspaceBox = box.copy();
const [width, height] = workspaceBox.get_size(); const [width, height] = workspaceBox.get_size();
const {y1: startY} = this._workAreaBox; const {y1: startY} = this._workAreaBox;
@ -89,16 +88,16 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
break; break;
case ControlsState.WINDOW_PICKER: case ControlsState.WINDOW_PICKER:
workspaceBox.set_origin(0, workspaceBox.set_origin(0,
startY + searchHeight + this._spacing + startY + searchHeight + spacing +
thumbnailsHeight + this._spacing * expandFraction); thumbnailsHeight + spacing * expandFraction);
workspaceBox.set_size(width, workspaceBox.set_size(width,
height - height -
dashHeight - this._spacing - dashHeight - spacing -
searchHeight - this._spacing - searchHeight - spacing -
thumbnailsHeight - this._spacing * expandFraction); thumbnailsHeight - spacing * expandFraction);
break; break;
case ControlsState.APP_GRID: case ControlsState.APP_GRID:
workspaceBox.set_origin(0, startY + searchHeight + this._spacing); workspaceBox.set_origin(0, startY + searchHeight + spacing);
workspaceBox.set_size( workspaceBox.set_size(
width, width,
Math.round(height * SMALL_WORKSPACE_RATIO)); Math.round(height * SMALL_WORKSPACE_RATIO));
@ -108,7 +107,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
return workspaceBox; return workspaceBox;
} }
_getAppDisplayBoxForState(state, box, searchHeight, dashHeight, workspacesBox) { _getAppDisplayBoxForState(state, box, searchHeight, dashHeight, workspacesBox, spacing) {
const [width, height] = box.get_size(); const [width, height] = box.get_size();
const {y1: startY} = this._workAreaBox; const {y1: startY} = this._workAreaBox;
const appDisplayBox = new Clutter.ActorBox(); const appDisplayBox = new Clutter.ActorBox();
@ -120,15 +119,15 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
break; break;
case ControlsState.APP_GRID: case ControlsState.APP_GRID:
appDisplayBox.set_origin(0, appDisplayBox.set_origin(0,
startY + searchHeight + this._spacing + workspacesBox.get_height() + this._spacing); startY + searchHeight + spacing + workspacesBox.get_height() + spacing);
break; break;
} }
appDisplayBox.set_size(width, appDisplayBox.set_size(width,
height - height -
searchHeight - this._spacing - searchHeight - spacing -
workspacesBox.get_height() - this._spacing - workspacesBox.get_height() - spacing -
dashHeight - this._spacing); dashHeight - spacing);
return appDisplayBox; return appDisplayBox;
} }
@ -141,20 +140,6 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
this._postAllocationCallbacks = []; 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) { vfunc_get_preferred_width(_container, _forHeight) {
// The MonitorConstraint will allocate us a fixed size anyway // The MonitorConstraint will allocate us a fixed size anyway
return [0, 0]; return [0, 0];
@ -171,6 +156,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
const startY = this._workAreaBox.y1; const startY = this._workAreaBox.y1;
box.y1 += startY; box.y1 += startY;
const [width, height] = box.get_size(); const [width, height] = box.get_size();
const spacing = Math.round(height * VERTICAL_SPACING_RATIO);
let availableHeight = height; let availableHeight = height;
// Search entry // Search entry
@ -179,7 +165,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
childBox.set_size(width, searchHeight); childBox.set_size(width, searchHeight);
this._searchEntry.allocate(childBox); this._searchEntry.allocate(childBox);
availableHeight -= searchHeight + this._spacing; availableHeight -= searchHeight + spacing;
// Dash // Dash
const maxDashHeight = Math.round(box.get_height() * DASH_MAX_HEIGHT_RATIO); 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); childBox.set_size(width, dashHeight);
this._dash.allocate(childBox); this._dash.allocate(childBox);
availableHeight -= dashHeight + this._spacing; availableHeight -= dashHeight + spacing;
// Workspace Thumbnails // Workspace Thumbnails
let thumbnailsHeight = 0; let thumbnailsHeight = 0;
@ -202,13 +188,13 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
thumbnailsHeight = Math.min( thumbnailsHeight = Math.min(
thumbnailsHeight * expandFraction, thumbnailsHeight * expandFraction,
height * this._workspacesThumbnails.maxThumbnailScale); height * this._workspacesThumbnails.maxThumbnailScale);
childBox.set_origin(0, startY + searchHeight + this._spacing); childBox.set_origin(0, startY + searchHeight + spacing);
childBox.set_size(width, thumbnailsHeight); childBox.set_size(width, thumbnailsHeight);
this._workspacesThumbnails.allocate(childBox); this._workspacesThumbnails.allocate(childBox);
} }
// Workspaces // Workspaces
let params = [box, searchHeight, dashHeight, thumbnailsHeight]; let params = [box, searchHeight, dashHeight, thumbnailsHeight, spacing];
const transitionParams = this._stateAdjustment.getStateTransitionParams(); const transitionParams = this._stateAdjustment.getStateTransitionParams();
// Update cached boxes // Update cached boxes
@ -233,7 +219,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
const workspaceAppGridBox = const workspaceAppGridBox =
this._cachedWorkspaceBoxes.get(ControlsState.APP_GRID); this._cachedWorkspaceBoxes.get(ControlsState.APP_GRID);
params = [box, searchHeight, dashHeight, workspaceAppGridBox]; params = [box, searchHeight, dashHeight, workspaceAppGridBox, spacing];
let appDisplayBox; let appDisplayBox;
if (!transitionParams.transitioning) { if (!transitionParams.transitioning) {
appDisplayBox = appDisplayBox =
@ -251,7 +237,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
} }
// Search // Search
childBox.set_origin(0, startY + searchHeight + this._spacing); childBox.set_origin(0, startY + searchHeight + spacing);
childBox.set_size(width, availableHeight); childBox.set_size(width, availableHeight);
this._searchController.allocate(childBox); this._searchController.allocate(childBox);