From 25ece5853850683a2a29d514641a1a76d3504224 Mon Sep 17 00:00:00 2001 From: vanadiae Date: Tue, 20 Jul 2021 14:13:40 +0200 Subject: [PATCH] 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: --- .../gnome-shell-sass/widgets/_message-list.scss | 14 ++++++++++++++ js/ui/calendar.js | 2 ++ 2 files changed, 16 insertions(+) diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index 02d122b91..bb9239f49 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -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 diff --git a/js/ui/calendar.js b/js/ui/calendar.js index 710efbac4..8ccc73d70 100644 --- a/js/ui/calendar.js +++ b/js/ui/calendar.js @@ -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',