From 1dda3393959fcb8b19cf3f169cd7f2f75d5f5206 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20M=C3=BCllner?= Date: Wed, 21 Jun 2023 17:47:13 +0200 Subject: [PATCH] animation: Use appropriate spinner asset in light variant Ideally we would replace the sliced-image based animation with a themed `process-working-symbolic` icon and rotate it, so the spinner simply picks up the current foreground color. Unfortunately the `repeat-count` property does not work for rotations, so to fix the broken spinner in the light variant in the meantime, include assets for both variants and swap them out at runtime. Not everything in the light variant is actually light (overview, OSDs, ...), so use a simple heuristic on the text color to decide which asset to use. Close https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/6783 Part-of: --- data/gnome-shell-theme.gresource.xml | 3 +- data/theme/process-working-dark.svg | 1 + data/theme/process-working-light.svg | 1 + data/theme/process-working.svg | 3084 -------------------------- js/ui/animation.js | 20 +- 5 files changed, 22 insertions(+), 3087 deletions(-) create mode 100644 data/theme/process-working-dark.svg create mode 100644 data/theme/process-working-light.svg delete mode 100644 data/theme/process-working.svg diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml index 8a4948e41..0ce8cca93 100644 --- a/data/gnome-shell-theme.gresource.xml +++ b/data/gnome-shell-theme.gresource.xml @@ -14,7 +14,8 @@ gnome-shell-high-contrast.css gnome-shell-start.svg pad-osd.css - process-working.svg + process-working-light.svg + process-working-dark.svg toggle-off.svg toggle-off-hc.svg toggle-off-light.svg diff --git a/data/theme/process-working-dark.svg b/data/theme/process-working-dark.svg new file mode 100644 index 000000000..6c7ad64a6 --- /dev/null +++ b/data/theme/process-working-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/theme/process-working-light.svg b/data/theme/process-working-light.svg new file mode 100644 index 000000000..903edde0f --- /dev/null +++ b/data/theme/process-working-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/data/theme/process-working.svg b/data/theme/process-working.svg deleted file mode 100644 index 920a67d2d..000000000 --- a/data/theme/process-working.svg +++ /dev/null @@ -1,3084 +0,0 @@ - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/js/ui/animation.js b/js/ui/animation.js index 85b4d5d73..5ceba6910 100644 --- a/js/ui/animation.js +++ b/js/ui/animation.js @@ -138,8 +138,24 @@ class Spinner extends AnimatedIcon { animate: false, hideOnStop: false, }); - let file = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg'); - super._init(file, size); + this._fileDark = Gio.File.new_for_uri( + 'resource:///org/gnome/shell/theme/process-working-dark.svg'); + this._fileLight = Gio.File.new_for_uri( + 'resource:///org/gnome/shell/theme/process-working-light.svg'); + super._init(this._fileDark, size); + + this.connect('style-changed', () => { + const themeNode = this.get_theme_node(); + const textColor = themeNode.get_foreground_color(); + const [, luminance] = textColor.to_hls(); + const file = luminance > 0.5 + ? this._fileDark + : this._fileLight; + if (file !== this._file) { + this._file = file; + this._loadFile(); + } + }); this.opacity = 0; this._animate = params.animate;