[gnome-shell] screenshot-ui: Add close button

[Marge Bot <marge-bot src gnome org>]

commit df0cd3457fb2cb84361b1be0b3476b52632187b9
Author: Ivan Molodetskikh <yalterz gmail com>
Date:   Sun Jan 23 13:53:35 2022 +0300

    screenshot-ui: Add close button
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1954>

 data/theme/gnome-shell-sass/widgets/_screenshot.scss | 16 ++++++++++++++++
 js/ui/screenshot.js                                  | 11 +++++++++++
 2 files changed, 27 insertions(+)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss 
b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index d28aacb0e2..aa1a11a8c8 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -7,3 +7,19 @@
   margin-bottom: $base_margin * 8;
   spacing: $base_padding * 2;
 }
+
+.screenshot-ui-close-button {
+  background-color: $osd_bg_color;
+  border-radius: 99px;
+  width: 64px;
+  height: 64px;
+  margin: 64px;
+
+  &:hover, &:focus { background-color: $hover_bg_color; }
+  &:active { background-color: $active_bg_color; }
+  &:checked { background-color: darken($osd_bg_color, 5%); }
+
+  StIcon {
+    icon-size: $base_icon_size * 2;
+  }
+}
diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index 6850e66cc5..548df498ee 100644
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -53,6 +53,17 @@ class ScreenshotUI extends St.Widget {
         });
         this._primaryMonitorBin.add_child(this._panel);
 
+        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,
+        });
+        this._closeButton.set_child(new St.Icon({ icon_name: 'window-close-symbolic' }));
+        this._closeButton.connect('clicked', () => this.close());
+        this._primaryMonitorBin.add_child(this._closeButton);
+
         Main.layoutManager.connect('monitors-changed', () => {
             // Nope, not dealing with monitor changes.
             this.close(true);