isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

theme: Add message close button styling

Browse Source 
Since the notification message close button had no border, or mouse
over effect, there was no way to determine whether the mouse cursor
were over the button.

Improve this by adding a message-close-button class for the close
button, and a styling for its hovered state, based on media control
button styling.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/855
This commit is contained in:
Joonas Henriksson 2019-11-19 19:40:09 +02:00 committed by Florian Müllner
parent a9fa4cc49e
commit 4b89314813
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
data/theme/gnome-shell-sass/_common.scss
View File

@ -1153,6 +1153,11 @@ StScrollBar {
padding: 10px; padding: 10px;
} }
.message-close-button {
color: lighten($fg_color, 15%);
&:hover { color: darken($fg_color, 10%); }
}
.message-media-control { .message-media-control {
padding: 12px; padding: 12px;
color: lighten($fg_color, 15%); color: lighten($fg_color, 15%);

5
js/ui/messageList.js
View File

@ -333,7 +333,10 @@ var Message = class Message {
let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic', let closeIcon = new St.Icon({ icon_name: 'window-close-symbolic',
icon_size: 16 }); icon_size: 16 });
this._closeButton = new St.Button({ child: closeIcon, opacity: 0 }); this._closeButton = new St.Button({
style_class: 'message-close-button',
child: closeIcon, opacity: 0,
});
titleBox.add_actor(this._closeButton); titleBox.add_actor(this._closeButton);
this._bodyStack = new St.Widget({ x_expand: true }); this._bodyStack = new St.Widget({ x_expand: true });