theme: Add focus indication for dnd switch in message list controls

It currently is difficult to see what's being focused in the messages list
currently because of that.

Fixes #2447

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1920>
This commit is contained in:
vanadiae 2021-07-20 14:13:40 +02:00
parent 7dd7714fd2
commit 25ece58538
2 changed files with 16 additions and 0 deletions

View File

@ -25,6 +25,20 @@
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_margin;
spacing: $base_spacing * 2;
.dnd-button {
// We need this because the focus outline isn't inset like for the buttons
// so the dnd button would grow when it gets focus if we didn't change only
// its color when focusing.
border-width: 2px;
border-color: transparent;
border-radius: 99px;
border-style: solid;
&:focus {
border-color: transparentize($selected_bg_color, 0.4);
}
}
}
// message bubbles

View File

@ -954,10 +954,12 @@ class CalendarMessageList extends St.Widget {
this._dndSwitch = new DoNotDisturbSwitch();
this._dndButton = new St.Button({
style_class: 'dnd-button',
can_focus: true,
toggle_mode: true,
child: this._dndSwitch,
label_actor: dndLabel,
y_align: Clutter.ActorAlign.CENTER,
});
this._dndSwitch.bind_property('state',
this._dndButton, 'checked',