workspaceSwitcherPopup: Implement new OSD design
Move the popup to the bottom and represent workspaces as small dots instead of as scaled down representations of the work area. https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/152 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2127>
This commit is contained in:
Florian Müllner
Marge Bot
parent
00ccea48a6
commit
f88222edd6
@ -1,38 +1,24 @@
|
||||
/* Workspace Switcher */
|
||||
|
||||
$ws_padding: $base_padding*2;
|
||||
$ws_border_radius: $modal_radius + 8px;
|
||||
|
||||
.workspace-switcher-group {
|
||||
padding: $base_padding * 2;
|
||||
}
|
||||
|
||||
.workspace-switcher-container {
|
||||
@extend %osd_panel;
|
||||
padding: $ws_padding;
|
||||
border-radius: $ws_border_radius;
|
||||
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
$ws_indicator_height: $base_icon_size * 2;
|
||||
$ws_dot_active: $ws_indicator_height / 3;
|
||||
$ws_dot_inactive: $ws_indicator_height / 6;
|
||||
|
||||
.workspace-switcher {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
@extend %osd_panel;
|
||||
margin: 4em;
|
||||
spacing: $base_spacing * 2;
|
||||
}
|
||||
|
||||
.ws-switcher-indicator {
|
||||
background: transparent;
|
||||
height: 50px;
|
||||
background-size: 32px;
|
||||
border: 1px solid transparentize($osd_fg_color,0.9);
|
||||
border-radius: $base_border_radius + 3px;
|
||||
background-color: transparentize($osd_fg_color,0.5);
|
||||
padding: $ws_dot_inactive / 2;
|
||||
margin: ($ws_indicator_height - $ws_dot_inactive) / 2;
|
||||
border-radius: $ws_indicator_height;
|
||||
|
||||
&:active {
|
||||
height: 52px;
|
||||
background-color: $selected_bg_color;
|
||||
border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%));
|
||||
border-radius: $base_border_radius + 3px;
|
||||
color: $selected_fg_color;
|
||||
background-color: $osd_fg_color;
|
||||
padding: $ws_dot_active / 2;
|
||||
margin: ($ws_indicator_height - $ws_dot_active) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,140 +3,35 @@
|
||||
|
||||
const { Clutter, GLib, GObject, St } = imports.gi;
|
||||
|
||||
const Layout = imports.ui.layout;
|
||||
const Main = imports.ui.main;
|
||||
|
||||
var ANIMATION_TIME = 100;
|
||||
var DISPLAY_TIMEOUT = 600;
|
||||
|
||||
var WorkspaceSwitcherPopupList = GObject.registerClass(
|
||||
class WorkspaceSwitcherPopupList extends St.Widget {
|
||||
_init() {
|
||||
super._init({
|
||||
style_class: 'workspace-switcher',
|
||||
offscreen_redirect: Clutter.OffscreenRedirect.ALWAYS,
|
||||
});
|
||||
|
||||
this._itemSpacing = 0;
|
||||
this._childHeight = 0;
|
||||
this._childWidth = 0;
|
||||
this._orientation = global.workspace_manager.layout_rows == -1
|
||||
? Clutter.Orientation.VERTICAL
|
||||
: Clutter.Orientation.HORIZONTAL;
|
||||
|
||||
this.connect('style-changed', () => {
|
||||
this._itemSpacing = this.get_theme_node().get_length('spacing');
|
||||
});
|
||||
}
|
||||
|
||||
_getPreferredSizeForOrientation(_forSize) {
|
||||
let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
|
||||
let themeNode = this.get_theme_node();
|
||||
|
||||
let availSize;
|
||||
if (this._orientation == Clutter.Orientation.HORIZONTAL)
|
||||
availSize = workArea.width - themeNode.get_horizontal_padding();
|
||||
else
|
||||
availSize = workArea.height - themeNode.get_vertical_padding();
|
||||
|
||||
let size = 0;
|
||||
for (let child of this.get_children()) {
|
||||
let [, childNaturalHeight] = child.get_preferred_height(-1);
|
||||
let height = childNaturalHeight * workArea.width / workArea.height;
|
||||
|
||||
if (this._orientation == Clutter.Orientation.HORIZONTAL)
|
||||
size += height * workArea.width / workArea.height;
|
||||
else
|
||||
size += height;
|
||||
}
|
||||
|
||||
let workspaceManager = global.workspace_manager;
|
||||
let spacing = this._itemSpacing * (workspaceManager.n_workspaces - 1);
|
||||
size += spacing;
|
||||
size = Math.min(size, availSize);
|
||||
|
||||
if (this._orientation == Clutter.Orientation.HORIZONTAL) {
|
||||
this._childWidth = (size - spacing) / workspaceManager.n_workspaces;
|
||||
return themeNode.adjust_preferred_width(size, size);
|
||||
} else {
|
||||
this._childHeight = (size - spacing) / workspaceManager.n_workspaces;
|
||||
return themeNode.adjust_preferred_height(size, size);
|
||||
}
|
||||
}
|
||||
|
||||
_getSizeForOppositeOrientation() {
|
||||
let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
|
||||
|
||||
if (this._orientation == Clutter.Orientation.HORIZONTAL) {
|
||||
this._childHeight = Math.round(this._childWidth * workArea.height / workArea.width);
|
||||
return [this._childHeight, this._childHeight];
|
||||
} else {
|
||||
this._childWidth = Math.round(this._childHeight * workArea.width / workArea.height);
|
||||
return [this._childWidth, this._childWidth];
|
||||
}
|
||||
}
|
||||
|
||||
vfunc_get_preferred_height(forWidth) {
|
||||
if (this._orientation == Clutter.Orientation.HORIZONTAL)
|
||||
return this._getSizeForOppositeOrientation();
|
||||
else
|
||||
return this._getPreferredSizeForOrientation(forWidth);
|
||||
}
|
||||
|
||||
vfunc_get_preferred_width(forHeight) {
|
||||
if (this._orientation == Clutter.Orientation.HORIZONTAL)
|
||||
return this._getPreferredSizeForOrientation(forHeight);
|
||||
else
|
||||
return this._getSizeForOppositeOrientation();
|
||||
}
|
||||
|
||||
vfunc_allocate(box) {
|
||||
this.set_allocation(box);
|
||||
|
||||
let themeNode = this.get_theme_node();
|
||||
box = themeNode.get_content_box(box);
|
||||
|
||||
let childBox = new Clutter.ActorBox();
|
||||
|
||||
let rtl = this.text_direction == Clutter.TextDirection.RTL;
|
||||
let x = rtl ? box.x2 - this._childWidth : box.x1;
|
||||
let y = box.y1;
|
||||
for (let child of this.get_children()) {
|
||||
childBox.x1 = Math.round(x);
|
||||
childBox.x2 = Math.round(x + this._childWidth);
|
||||
childBox.y1 = Math.round(y);
|
||||
childBox.y2 = Math.round(y + this._childHeight);
|
||||
|
||||
if (this._orientation == Clutter.Orientation.HORIZONTAL) {
|
||||
if (rtl)
|
||||
x -= this._childWidth + this._itemSpacing;
|
||||
else
|
||||
x += this._childWidth + this._itemSpacing;
|
||||
} else {
|
||||
y += this._childHeight + this._itemSpacing;
|
||||
}
|
||||
child.allocate(childBox);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var WorkspaceSwitcherPopup = GObject.registerClass(
|
||||
class WorkspaceSwitcherPopup extends St.Widget {
|
||||
class WorkspaceSwitcherPopup extends Clutter.Actor {
|
||||
_init() {
|
||||
super._init({ x: 0,
|
||||
y: 0,
|
||||
width: global.screen_width,
|
||||
height: global.screen_height,
|
||||
style_class: 'workspace-switcher-group' });
|
||||
super._init({
|
||||
offscreen_redirect: Clutter.OffscreenRedirect.ALWAYS,
|
||||
x_expand: true,
|
||||
y_expand: true,
|
||||
x_align: Clutter.ActorAlign.CENTER,
|
||||
y_align: Clutter.ActorAlign.END,
|
||||
});
|
||||
|
||||
const constraint = new Layout.MonitorConstraint({ primary: true });
|
||||
this.add_constraint(constraint);
|
||||
|
||||
Main.uiGroup.add_actor(this);
|
||||
|
||||
this._timeoutId = 0;
|
||||
|
||||
this._container = new St.BoxLayout({ style_class: 'workspace-switcher-container' });
|
||||
this.add_child(this._container);
|
||||
|
||||
this._list = new WorkspaceSwitcherPopupList();
|
||||
this._container.add_child(this._list);
|
||||
this._list = new St.BoxLayout({
|
||||
style_class: 'workspace-switcher',
|
||||
});
|
||||
this.add_child(this._list);
|
||||
|
||||
this._redisplay();
|
||||
|
||||
@ -167,12 +62,6 @@ class WorkspaceSwitcherPopup extends St.Widget {
|
||||
|
||||
this._list.add_actor(indicator);
|
||||
}
|
||||
|
||||
let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
|
||||
let [, containerNatHeight] = this._container.get_preferred_height(global.screen_width);
|
||||
let [, containerNatWidth] = this._container.get_preferred_width(containerNatHeight);
|
||||
this._container.x = workArea.x + Math.floor((workArea.width - containerNatWidth) / 2);
|
||||
this._container.y = workArea.y + Math.floor((workArea.height - containerNatHeight) / 2);
|
||||
}
|
||||
|
||||
display(activeWorkspaceIndex) {
|
||||
@ -186,8 +75,8 @@ class WorkspaceSwitcherPopup extends St.Widget {
|
||||
|
||||
const duration = this.visible ? 0 : ANIMATION_TIME;
|
||||
this.show();
|
||||
this._container.opacity = 0;
|
||||
this._container.ease({
|
||||
this.opacity = 0;
|
||||
this.ease({
|
||||
opacity: 255,
|
||||
duration,
|
||||
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
|
||||
@ -197,7 +86,7 @@ class WorkspaceSwitcherPopup extends St.Widget {
|
||||
_onTimeout() {
|
||||
GLib.source_remove(this._timeoutId);
|
||||
this._timeoutId = 0;
|
||||
this._container.ease({
|
||||
this.ease({
|
||||
opacity: 0.0,
|
||||
duration: ANIMATION_TIME,
|
||||
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user