[gnome-shell] screenshot-ui: Add screenshot/screencast toggle
- From: Marge Bot <marge-bot src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-shell] screenshot-ui: Add screenshot/screencast toggle
- Date: Sat, 29 Jan 2022 14:48:37 +0000 (UTC)
commit 497d9f32eb02c1bc188f4b3b7ec8a068e3bd5b0a
Author: Ivan Molodetskikh <yalterz gmail com>
Date: Mon Aug 16 18:16:11 2021 +0300
screenshot-ui: Add screenshot/screencast toggle
Currently does nothing. When we're in screencast mode, we hide the
screenshot preview because screencast doesn't start until the capture
button is pressed.
The window selection is currently left as is, but it should probably be
changed to something closer to a real overview, showing windows in
real-time.
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2103>
.../gnome-shell-sass/widgets/_screenshot.scss | 44 ++++++++++
js/ui/screenshot.js | 97 +++++++++++++++++++++-
2 files changed, 139 insertions(+), 2 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 1d9cd12aa4..5855fbedda 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -8,6 +8,8 @@
}
}
+$screenshot_ui_button_red: #e01b24;
+
.screenshot-ui-panel {
background-color: $osd_bg_color;
border-radius: 12px + 21px;
@@ -68,6 +70,48 @@
background-color: darken(white, 50%);
}
}
+
+ &:cast {
+ .screenshot-ui-capture-button-circle {
+ background-color: $screenshot_ui_button_red;
+ }
+
+ &:hover, &:focus {
+ .screenshot-ui-capture-button-circle {
+ background-color: darken($screenshot_ui_button_red, 15%);
+ }
+ }
+
+ &:active {
+ .screenshot-ui-capture-button-circle {
+ background-color: darken($screenshot_ui_button_red, 30%);
+ }
+ }
+ }
+}
+
+.screenshot-ui-shot-cast-container {
+ background-color: $hover_bg_color;
+ border-radius: 12px;
+ padding: $base_padding / 2;
+ spacing: $base_padding / 2;
+
+ &:ltr { margin-left: 3px; }
+ &:rtl { margin-right: 3px; }
+}
+
+.screenshot-ui-shot-cast-button {
+ padding: $base_padding $base_padding * 1.5;
+ background-color: transparent;
+ &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
+ &:active { background-color: $active_bg_color; }
+ &:checked { background-color: white; color: black; }
+
+ border-radius: 12px - 3px;
+
+ StIcon {
+ icon-size: $base_icon_size;
+ }
}
.screenshot-ui-show-pointer-button {
diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index 97f782e524..8c41f4efed 100644
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -1153,6 +1153,46 @@ class ScreenshotUI extends St.Widget {
this._bottomRowContainer = new St.Widget({ layout_manager: new Clutter.BinLayout() });
this._panel.add_child(this._bottomRowContainer);
+ this._shotCastContainer = new St.BoxLayout({
+ style_class: 'screenshot-ui-shot-cast-container',
+ x_align: Clutter.ActorAlign.START,
+ x_expand: true,
+ });
+ this._bottomRowContainer.add_child(this._shotCastContainer);
+
+ this._shotButton = new St.Button({
+ style_class: 'screenshot-ui-shot-cast-button',
+ checked: true,
+ });
+ this._shotButton.set_child(new St.Icon({ icon_name: 'camera-photo-symbolic' }));
+ this._shotButton.connect('notify::checked',
+ this._onShotButtonToggled.bind(this));
+ this._shotCastContainer.add_child(this._shotButton);
+
+ this._castButton = new St.Button({
+ style_class: 'screenshot-ui-shot-cast-button',
+ toggle_mode: true,
+ });
+ this._castButton.set_child(new St.Icon({ icon_name: 'camera-web-symbolic' }));
+ this._castButton.connect('notify::checked',
+ this._onCastButtonToggled.bind(this));
+ this._shotCastContainer.add_child(this._castButton);
+
+ this._shotCastTooltip = new Tooltip(this._shotCastContainer, {
+ text: _('Screenshot / Screencast'),
+ style_class: 'screenshot-ui-tooltip',
+ visible: false,
+ });
+ const shotCastCallback = () => {
+ if (this._shotButton.hover || this._castButton.hover)
+ this._shotCastTooltip.open();
+ else
+ this._shotCastTooltip.close();
+ };
+ this._shotButton.connect('notify::hover', shotCastCallback);
+ this._castButton.connect('notify::hover', shotCastCallback);
+ this.add_child(this._shotCastTooltip);
+
this._captureButton = new St.Button({ style_class: 'screenshot-ui-capture-button' });
this._captureButton.set_child(new St.Widget({
style_class: 'screenshot-ui-capture-button-circle',
@@ -1307,7 +1347,8 @@ class ScreenshotUI extends St.Widget {
});
}
- this._windowButton.reactive = windows.length > 0;
+ this._windowButton.reactive =
+ windows.length > 0 && !this._castButton.checked;
if (!this._windowButton.reactive)
this._selectionButton.checked = true;
@@ -1377,6 +1418,9 @@ class ScreenshotUI extends St.Widget {
this._shooter = null;
+ // Switch back to screenshot mode.
+ this._shotButton.checked = true;
+
this._stageScreenshotContainer.get_parent().remove_child(
this._stageScreenshotContainer);
Main.layoutManager.screenshotUIGroup.insert_child_at_index(
@@ -1499,6 +1543,54 @@ class ScreenshotUI extends St.Widget {
}
}
+ _onShotButtonToggled() {
+ if (this._shotButton.checked) {
+ this._shotButton.toggle_mode = false;
+ this._castButton.checked = false;
+
+ this._stageScreenshotContainer.show();
+ this._stageScreenshotContainer.remove_all_transitions();
+ this._stageScreenshotContainer.ease({
+ opacity: 255,
+ duration: 200,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ });
+ } else {
+ this._shotButton.toggle_mode = true;
+ }
+ }
+
+ _onCastButtonToggled() {
+ if (this._castButton.checked) {
+ this._castButton.toggle_mode = false;
+ this._shotButton.checked = false;
+
+ this._captureButton.add_style_pseudo_class('cast');
+
+ this._stageScreenshotContainer.remove_all_transitions();
+ this._stageScreenshotContainer.ease({
+ opacity: 0,
+ duration: 200,
+ mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+ onComplete: () => this._stageScreenshotContainer.hide(),
+ });
+
+ // Screen recording doesn't support window selection yet.
+ if (this._windowButton.checked)
+ this._selectionButton.checked = true;
+
+ this._windowButton.reactive = false;
+ } else {
+ this._castButton.toggle_mode = true;
+
+ this._captureButton.remove_style_pseudo_class('cast');
+
+ const windows =
+ this._windowSelectors.flatMap(selector => selector.windows());
+ this._windowButton.reactive = windows.length > 0;
+ }
+ }
+
_getSelectedGeometry() {
let x, y, w, h;
@@ -1524,7 +1616,8 @@ class ScreenshotUI extends St.Widget {
}
_onCaptureButtonClicked() {
- this._saveScreenshot();
+ if (this._shotButton.checked)
+ this._saveScreenshot();
// TODO: screencasting.
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]