brl/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
parent c255b4d14e
commit 18421e8aed
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

@ -1152,6 +1152,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

@ -357,7 +357,10 @@ var Message = GObject.registerClass({
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 });