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

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

View File

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

View File

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