[gnome-shell] screenshot-ui: Add the control panel

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

commit 3b4fe9af317ff3e90b0aa0e7c1e0ab6fb1b7a523
Author: Ivan Molodetskikh <yalterz gmail com>
Date:   Mon Aug 16 10:25:52 2021 +0300

    screenshot-ui: Add the control panel
    
    The (currently empty) panel resides on the primary monitor.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1954>

 data/theme/gnome-shell-sass/_widgets.scss            |  1 +
 data/theme/gnome-shell-sass/widgets/_screenshot.scss |  9 +++++++++
 data/theme/meson.build                               |  1 +
 js/ui/screenshot.js                                  | 14 ++++++++++++++
 4 files changed, 25 insertions(+)
---
diff --git a/data/theme/gnome-shell-sass/_widgets.scss b/data/theme/gnome-shell-sass/_widgets.scss
index a8d0aa9f4d..6896213e8f 100644
--- a/data/theme/gnome-shell-sass/_widgets.scss
+++ b/data/theme/gnome-shell-sass/_widgets.scss
@@ -29,6 +29,7 @@
 @import 'widgets/osd';
 @import 'widgets/switcher-popup';
 @import 'widgets/workspace-switcher';
+@import 'widgets/screenshot';
 // Panel
 @import 'widgets/panel';
 @import 'widgets/corner-ripple';
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss 
b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
new file mode 100644
index 0000000000..d28aacb0e2
--- /dev/null
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -0,0 +1,9 @@
+// Screenshot UI
+.screenshot-ui-panel {
+  background-color: $osd_bg_color;
+  border-radius: 12px + 21px;
+  padding: 18px;
+  padding-bottom: 18px - 6px;
+  margin-bottom: $base_margin * 8;
+  spacing: $base_padding * 2;
+}
diff --git a/data/theme/meson.build b/data/theme/meson.build
index 87112c358d..8467325506 100644
--- a/data/theme/meson.build
+++ b/data/theme/meson.build
@@ -30,6 +30,7 @@ theme_sources = files([
   'gnome-shell-sass/widgets/_panel.scss',
   'gnome-shell-sass/widgets/_popovers.scss',
   'gnome-shell-sass/widgets/_screen-shield.scss',
+  'gnome-shell-sass/widgets/_screenshot.scss',
   'gnome-shell-sass/widgets/_scrollbars.scss',
   'gnome-shell-sass/widgets/_search-entry.scss',
   'gnome-shell-sass/widgets/_search-results.scss',
diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index abc4a32543..6850e66cc5 100644
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -4,6 +4,7 @@
 const { Clutter, Gio, GObject, GLib, Meta, Shell, St } = imports.gi;
 
 const GrabHelper = imports.ui.grabHelper;
+const Layout = imports.ui.layout;
 const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
 
@@ -39,6 +40,19 @@ class ScreenshotUI extends St.Widget {
             actionMode: Shell.ActionMode.POPUP,
         });
 
+        this._primaryMonitorBin = new St.Widget({ layout_manager: new Clutter.BinLayout() });
+        this._primaryMonitorBin.add_constraint(
+            new Layout.MonitorConstraint({ 'primary': true }));
+        this.add_child(this._primaryMonitorBin);
+
+        this._panel = new St.BoxLayout({
+            style_class: 'screenshot-ui-panel',
+            y_align: Clutter.ActorAlign.END,
+            y_expand: true,
+            vertical: true,
+        });
+        this._primaryMonitorBin.add_child(this._panel);
+
         Main.layoutManager.connect('monitors-changed', () => {
             // Nope, not dealing with monitor changes.
             this.close(true);