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

screenshot: Move close button to the panel

Browse Source 
CSS and JS adapted from the Overview window close buttons, but with some
style tweaks requested by the designers.

Since the screenshot UI is long-lived (it's created once at startup,
rather than every time it's opened), we need to refresh the close button
position, as it can change at runtime. Subscribing to preference changes
seems to be skipped for bindings generation in Mutter, but simply
refreshing upon opening the UI should do the job.

Closes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/4997

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2147>
This commit is contained in:
Ivan Molodetskikh 2022-02-02 20:22:20 +03:00 committed by Marge Bot
parent 3cc045b6b8
commit 6765fac76a
2 changed files with 52 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
data/theme/gnome-shell-sass/widgets/_screenshot.scss
View File

@ -28,17 +28,26 @@ $screenshot_ui_button_red: #e01b24;
.screenshot-ui-close-button {
background-color: $osd_bg_color;
color: $osd_fg_color;
border-radius: 99px;
width: 64px;
height: 64px;
margin: 64px;
padding: 6px;
height: 30px;
width: 30px;
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
margin-top: 8px;
&:hover, &:focus { background-color: $hover_bg_color; }
&:active { background-color: $active_bg_color; }
&:checked { background-color: darken($osd_bg_color, 5%); }
&.left { margin-left: 8px; }
&.right { margin-right: 8px; }
StIcon {
icon-size: $base_icon_size * 2;
& StIcon { icon-size: 24px; }
&:hover {
background-color: lighten($osd_bg_color, 15%);
}
&:active {
color: transparentize($osd_fg_color, 0.2);
background-color: darken($osd_bg_color, 5%);
}
}

41
js/ui/screenshot.js
View File

@ -1,7 +1,7 @@
// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
/* exported ScreenshotService, ScreenshotUI, showScreenshotUI */
const { Clutter, Cogl, Gio, GObject, GLib, Gtk, Meta, Shell, St } = imports.gi;
const { Clutter, Cogl, Gio, GObject, GLib, Graphene, Gtk, Meta, Shell, St } = imports.gi;
const GrabHelper = imports.ui.grabHelper;
const Layout = imports.ui.layout;
@ -1089,12 +1089,24 @@ var ScreenshotUI = GObject.registerClass({
this._closeButton = new St.Button({
style_class: 'screenshot-ui-close-button',
x_align: Clutter.ActorAlign.END,
y_align: Clutter.ActorAlign.START,
x_expand: true,
y_expand: true,
child: new St.Icon({ icon_name: 'preview-close-symbolic' }),
});
this._closeButton.set_child(new St.Icon({ icon_name: 'window-close-symbolic' }));
this._closeButton.add_constraint(new Clutter.BindConstraint({
source: this._panel,
coordinate: Clutter.BindCoordinate.POSITION,
}));
this._closeButton.add_constraint(new Clutter.AlignConstraint({
source: this._panel,
align_axis: Clutter.AlignAxis.Y_AXIS,
pivot_point: new Graphene.Point({ x: -1, y: 0.5 }),
factor: 0,
}));
this._closeButtonXAlignConstraint = new Clutter.AlignConstraint({
source: this._panel,
align_axis: Clutter.AlignAxis.X_AXIS,
pivot_point: new Graphene.Point({ x: 0.5, y: -1 }),
});
this._closeButton.add_constraint(this._closeButtonXAlignConstraint);
this._closeButton.connect('clicked', () => this.close());
this._primaryMonitorBin.add_child(this._closeButton);
@ -1281,6 +1293,21 @@ var ScreenshotUI = GObject.registerClass({
);
}
_refreshButtonLayout() {
const buttonLayout = Meta.prefs_get_button_layout();
this._closeButton.remove_style_class_name('left');
this._closeButton.remove_style_class_name('right');
if (buttonLayout.left_buttons.includes(Meta.ButtonFunction.CLOSE)) {
this._closeButton.add_style_class_name('left');
this._closeButtonXAlignConstraint.factor = 0;
} else {
this._closeButton.add_style_class_name('right');
this._closeButtonXAlignConstraint.factor = 1;
}
}
_rebuildMonitorBins() {
for (const bin of this._monitorBins)
bin.destroy();
@ -1429,6 +1456,8 @@ var ScreenshotUI = GObject.registerClass({
if (!grabResult)
return;
this._refreshButtonLayout();
this.remove_all_transitions();
this.visible = true;
this.ease({