From ffaec5615ac439a25ebc285f5e5e97703991d24c Mon Sep 17 00:00:00 2001 From: Julian Sparber Date: Tue, 20 Feb 2024 17:03:57 +0100 Subject: [PATCH] messageList: Directly take an GioIcon as image for a message There is pretty much no value gained by allowing to use any actor to display an image, so just don't allow it since it simplifies the code and CSS. Part-of: --- .../widgets/_message-list.scss | 45 ++++++++----------- js/ui/calendar.js | 15 +------ js/ui/messageList.js | 18 +++++--- js/ui/mpris.js | 13 ++---- 4 files changed, 37 insertions(+), 54 deletions(-) diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index ed4d5356c..f32419a14 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -127,23 +127,21 @@ margin-top: 0; spacing: $base_padding; - // icon container - .message-icon-bin { - &:ltr { padding-right:$base_padding;} - &:rtl { padding-left:$base_padding;} + // icon of the message + .message-icon { + &:ltr { margin-right:$base_padding;} + &:rtl { margin-left:$base_padding;} // icon size and color - > StIcon { - icon-size: $base_icon_size * 3; // 48px - -st-icon-style: symbolic; + icon-size: $base_icon_size * 3; // 48px + -st-icon-style: symbolic; - .message-themed-icon { - border-radius: $forced_circular_radius; // is circular - background-color: transparentize($fg_color, 0.8); - icon-size: $base_icon_size; - min-width: $base_icon_size * 3; - min-height: $base_icon_size * 3; - } + &.message-themed-icon { + border-radius: $forced_circular_radius; // is circular + background-color: transparentize($fg_color, 0.8); + icon-size: $base_icon_size; + min-width: $base_icon_size * 3; + min-height: $base_icon_size * 3; } } @@ -203,18 +201,13 @@ & StIcon { icon-size: $base_icon_size; } } -// album-art -.media-message-cover-icon { - icon-size: $base_icon_size * 3 !important; // 48px - border-radius: $base_border_radius; +.media-message { + // album-art + .message-icon { + border-radius: $base_border_radius !important; - // when there is no artwork - &.fallback { - color: darken($fg_color, 17%); - background-color: $bg_color; - border: 1px solid transparent; - border-radius: $base_border_radius; - icon-size: $large_icon_size !important; // 32px - padding: ($base_padding * 2 + 2); // 16px + &.message-themed-icon { + icon-size: $large_icon_size !important; // 32px + } } } diff --git a/js/ui/calendar.js b/js/ui/calendar.js index dcf860651..1d92b3578 100644 --- a/js/ui/calendar.js +++ b/js/ui/calendar.js @@ -774,7 +774,7 @@ class NotificationMessage extends MessageList.Message { this.notification = notification; this.datetime = notification.datetime; - this.setIcon(this._getIcon()); + this.setIcon(notification.gicon); this.connect('close', () => { this._closed = true; @@ -798,20 +798,9 @@ class NotificationMessage extends MessageList.Message { }); } - _getIcon() { - const {gicon} = this.notification; - if (gicon) { - const styleClass = - gicon instanceof Gio.ThemedIcon ? 'message-themed-icon' : ''; - return new St.Icon({gicon, styleClass}); - } else { - return null; - } - } - _onUpdated(n, _clear) { this.datetime = n.datetime; - this.setIcon(this._getIcon()); + this.setIcon(n.gicon); this.setTitle(n.title); this.setBody(n.body); this.setUseBodyMarkup(n.useBodyMarkup); diff --git a/js/ui/messageList.js b/js/ui/messageList.js index 37254f72e..1e8b26762 100644 --- a/js/ui/messageList.js +++ b/js/ui/messageList.js @@ -475,13 +475,13 @@ export const Message = GObject.registerClass({ }); vbox.add_child(this._actionBin); - this._iconBin = new St.Bin({ - style_class: 'message-icon-bin', + this._icon = new St.Icon({ + style_class: 'message-icon', y_expand: true, y_align: Clutter.ActorAlign.START, visible: false, }); - hbox.add_child(this._iconBin); + hbox.add_child(this._icon); const contentBox = new St.BoxLayout({ style_class: 'message-content', @@ -523,9 +523,15 @@ export const Message = GObject.registerClass({ this.emit('close'); } - setIcon(actor) { - this._iconBin.child = actor; - this._iconBin.visible = actor != null; + setIcon(icon) { + this._icon.gicon = icon; + + if (icon instanceof Gio.ThemedIcon) + this._icon.add_style_class_name('message-themed-icon'); + else + this._icon.remove_style_class_name('message-themed-icon'); + + this._icon.visible = !!icon; } get datetime() { diff --git a/js/ui/mpris.js b/js/ui/mpris.js index 80b6af8fa..55f6a97aa 100644 --- a/js/ui/mpris.js +++ b/js/ui/mpris.js @@ -1,7 +1,6 @@ import Gio from 'gi://Gio'; import GObject from 'gi://GObject'; import Shell from 'gi://Shell'; -import St from 'gi://St'; import * as Signals from '../misc/signals.js'; import * as Main from './main.js'; @@ -24,12 +23,10 @@ export const MediaMessage = GObject.registerClass( class MediaMessage extends MessageList.Message { _init(player) { super._init(player.source, '', ''); + this.add_style_class_name('media-message'); this._player = player; - this._icon = new St.Icon({style_class: 'media-message-cover-icon'}); - this.setIcon(this._icon); - this._prevButton = this.addMediaControl('media-skip-backward-symbolic', () => { this._player.previous(); @@ -65,12 +62,10 @@ class MediaMessage extends MessageList.Message { this.setBody(this._player.trackArtists.join(', ')); if (this._player.trackCoverUrl) { - let file = Gio.File.new_for_uri(this._player.trackCoverUrl); - this._icon.gicon = new Gio.FileIcon({file}); - this._icon.remove_style_class_name('fallback'); + const file = Gio.File.new_for_uri(this._player.trackCoverUrl); + this.setIcon(new Gio.FileIcon({file})); } else { - this._icon.icon_name = 'audio-x-generic-symbolic'; - this._icon.add_style_class_name('fallback'); + this.setIcon(new Gio.ThemedIcon({name: 'audio-x-generic-symbolic'})); } let isPlaying = this._player.status === 'Playing';