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

workspace: Use invisible guide actor to center overlay title on border

Browse Source 
Using CSS to center the title actor on the border is a bit ugly, because
it requires the CSS to match the calculations used in chromeHeights().
Also it is not possible to use CSS margins for cases where the position
of the actor is determined at run time, such as for the close button.

Instead use an invisible actor that spans between the horizontal and
vertical center lines of the border as guide when aligning the title
actor.

https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1313
This commit is contained in:
Sebastian Keller 2020-06-14 06:14:57 +02:00 committed by Florian Müllner
parent b2c35e4fb0
commit 9b22f6183f
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
data/theme/gnome-shell-sass/widgets/_window-picker.scss
View File

@ -35,7 +35,6 @@ $window_clone_border_size: 6px;
// Window titles // Window titles
.window-caption { .window-caption {
margin-top: $window_clone_border_size / 2;
color: $osd_fg_color; color: $osd_fg_color;
background-color: $osd_bg_color; background-color: $osd_bg_color;
border:1px solid $osd_outer_borders_color; border:1px solid $osd_outer_borders_color;

23
js/ui/workspace.js
View File

@ -283,6 +283,19 @@ var WindowClone = GObject.registerClass({
align_axis: Clutter.AlignAxis.BOTH, align_axis: Clutter.AlignAxis.BOTH,
factor: 0.5, factor: 0.5,
})); }));
this._borderCenter = new Clutter.Actor();
this._border.bind_property('visible', this._borderCenter, 'visible',
GObject.BindingFlags.SYNC_CREATE);
this._borderCenterConstraint = new Clutter.BindConstraint({
source: this._windowContainer,
coordinate: Clutter.BindCoordinate.SIZE,
});
this._borderCenter.add_constraint(this._borderCenterConstraint);
this._borderCenter.add_constraint(new Clutter.AlignConstraint({
source: this._windowContainer,
align_axis: Clutter.AlignAxis.BOTH,
factor: 0.5,
}));
this._border.connect('style-changed', this._border.connect('style-changed',
this._onBorderStyleChanged.bind(this)); this._onBorderStyleChanged.bind(this));
@ -292,13 +305,17 @@ var WindowClone = GObject.registerClass({
text: this._getCaption(), text: this._getCaption(),
reactive: true, reactive: true,
}); });
this._title.add_constraint(new Clutter.BindConstraint({
source: this._borderCenter,
coordinate: Clutter.BindCoordinate.POSITION,
}));
this._title.add_constraint(new Clutter.AlignConstraint({ this._title.add_constraint(new Clutter.AlignConstraint({
source: this._windowContainer, source: this._borderCenter,
align_axis: Clutter.AlignAxis.X_AXIS, align_axis: Clutter.AlignAxis.X_AXIS,
factor: 0.5, factor: 0.5,
})); }));
this._title.add_constraint(new Clutter.AlignConstraint({ this._title.add_constraint(new Clutter.AlignConstraint({
source: this._windowContainer, source: this._borderCenter,
align_axis: Clutter.AlignAxis.Y_AXIS, align_axis: Clutter.AlignAxis.Y_AXIS,
pivot_point: new Graphene.Point({ x: -1, y: 0.5 }), pivot_point: new Graphene.Point({ x: -1, y: 0.5 }),
factor: 1, factor: 1,
@ -337,6 +354,7 @@ var WindowClone = GObject.registerClass({
})); }));
this._closeButton.connect('clicked', () => this.deleteAll()); this._closeButton.connect('clicked', () => this.deleteAll());
this.add_child(this._borderCenter);
this.add_child(this._border); this.add_child(this._border);
this.add_child(this._title); this.add_child(this._title);
this.add_child(this._closeButton); this.add_child(this._closeButton);
@ -376,6 +394,7 @@ var WindowClone = GObject.registerClass({
// Increase the size of the border actor so the border outlines // Increase the size of the border actor so the border outlines
// the bounding box // the bounding box
this._borderConstraint.offset = this._borderSize * 2; this._borderConstraint.offset = this._borderSize * 2;
this._borderCenterConstraint.offset = this._borderSize;
} }
_windowCanClose() { _windowCanClose() {