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
#dash {
margin-top: $dash_edge_offset;
// background behind item container
.dash-background {
background-color: $dash_background_color;

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

@ -1,6 +1,6 @@
/* OVERVIEW */
.controls-manager, .secondary-monitor-workspaces {
.secondary-monitor-workspaces {
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;
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);