Fix focus indicator

This improve considerably the keyboard navigation in the SystemTray.
But this is still not as good as the golden standard that is recommended
by this article: https://www.sarasoueidan.com/blog/focus-indicators/

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

diff --git a/src/gui/tray/HeaderButton.qml b/src/gui/tray/HeaderButton.qml
index a299532073647846d845dac84ed3483d4d0aca2c..7df075ff000ae3b27eadf509274a3673dda49418 100644 (file)
--- a/src/gui/tray/HeaderButton.qml
+++ b/src/gui/tray/HeaderButton.qml
@@ -25,7 +25,7 @@ Button {
     Layout.preferredHeight: Style.trayWindowHeaderHeight
 
     background: Rectangle {
-        color: root.hovered ? "white" : "transparent"
+        color: root.hovered || root.visualFocus ? "white" : "transparent"
         opacity: 0.2
     }
 }

diff --git a/src/gui/tray/Window.qml b/src/gui/tray/Window.qml
index eab74c981bfe15ecee8f1e9894978cbc647df2a7..7728ef8f4331a12a2efd95d6d20464a91952e3e9 100644 (file)
--- a/src/gui/tray/Window.qml
+++ b/src/gui/tray/Window.qml
@@ -142,187 +142,180 @@ Window {
                     Accessible.name: qsTr("Current account")\r
                     Accessible.onPressAction: currentAccountButton.clicked()\r
 \r
-                    MouseArea {\r
-                        id: accountBtnMouseArea\r
-\r
-                        anchors.fill:   parent\r
-                        hoverEnabled:   Style.hoverEffectsEnabled\r
-\r
-                        // We call open() instead of popup() because we want to position it\r
-                        // exactly below the dropdown button, not the mouse\r
-                        onClicked: {\r
-                            syncPauseButton.text = Systray.syncIsPaused() ? qsTr("Resume sync for all") : qsTr("Pause sync for all")\r
-                            if (accountMenu.visible) {\r
-                                accountMenu.close()\r
-                            } else {\r
-                                accountMenu.open()\r
-                            }\r
+                    // We call open() instead of popup() because we want to position it\r
+                    // exactly below the dropdown button, not the mouse\r
+                    onClicked: {\r
+                        syncPauseButton.text = Systray.syncIsPaused() ? qsTr("Resume sync for all") : qsTr("Pause sync for all")\r
+                        if (accountMenu.visible) {\r
+                            accountMenu.close()\r
+                        } else {\r
+                            accountMenu.open()\r
                         }\r
+                    }\r
 \r
-                        Loader {\r
-                            id: userStatusSelectorDialogLoader\r
-                        }\r
+                    Loader {\r
+                        id: userStatusSelectorDialogLoader\r
+                    }\r
 \r
-                        Menu {\r
-                            id: accountMenu\r
+                    Menu {\r
+                        id: accountMenu\r
 \r
-                            // x coordinate grows towards the right\r
-                            // y coordinate grows towards the bottom\r
-                            x: (currentAccountButton.x + 2)\r
-                            y: (currentAccountButton.y + Style.trayWindowHeaderHeight + 2)\r
+                        // x coordinate grows towards the right\r
+                        // y coordinate grows towards the bottom\r
+                        x: (currentAccountButton.x + 2)\r
+                        y: (currentAccountButton.y + Style.trayWindowHeaderHeight + 2)\r
 \r
-                            width: (Style.currentAccountButtonWidth - 2)\r
-                            height: Math.min(implicitHeight, maxMenuHeight)\r
-                            closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape\r
+                        width: (Style.currentAccountButtonWidth - 2)\r
+                        height: Math.min(implicitHeight, maxMenuHeight)\r
+                        closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape\r
 \r
-                            background: Rectangle {\r
-                                border.color: Style.menuBorder\r
-                                radius: Style.currentAccountButtonRadius\r
-                            }\r
+                        background: Rectangle {\r
+                            border.color: Style.menuBorder\r
+                            radius: Style.currentAccountButtonRadius\r
+                        }\r
 \r
-                            onClosed: {\r
-                                // HACK: reload account Instantiator immediately by restting it - could be done better I guess\r
-                                // see also onVisibleChanged above\r
-                                userLineInstantiator.active = false;\r
-                                userLineInstantiator.active = true;\r
-                            }\r
+                        onClosed: {\r
+                            // HACK: reload account Instantiator immediately by restting it - could be done better I guess\r
+                            // see also onVisibleChanged above\r
+                            userLineInstantiator.active = false;\r
+                            userLineInstantiator.active = true;\r
+                        }\r
 \r
-                            Instantiator {\r
-                                id: userLineInstantiator\r
-                                model: UserModel\r
-                                delegate: UserLine {\r
-                                    onShowUserStatusSelectorDialog: {\r
-                                        userStatusSelectorDialogLoader.source = "qrc:/qml/src/gui/UserStatusSelectorDialog.qml"\r
-                                        userStatusSelectorDialogLoader.item.title = qsTr("Set user status")\r
-                                        userStatusSelectorDialogLoader.item.model.load(index)\r
-                                        userStatusSelectorDialogLoader.item.show()\r
-                                    }\r
+                        Instantiator {\r
+                            id: userLineInstantiator\r
+                            model: UserModel\r
+                            delegate: UserLine {\r
+                                onShowUserStatusSelectorDialog: {\r
+                                    userStatusSelectorDialogLoader.source = "qrc:/qml/src/gui/UserStatusSelectorDialog.qml"\r
+                                    userStatusSelectorDialogLoader.item.title = qsTr("Set user status")\r
+                                    userStatusSelectorDialogLoader.item.model.load(index)\r
+                                    userStatusSelectorDialogLoader.item.show()\r
                                 }\r
-                                onObjectAdded: accountMenu.insertItem(index, object)\r
-                                onObjectRemoved: accountMenu.removeItem(object)\r
                             }\r
+                            onObjectAdded: accountMenu.insertItem(index, object)\r
+                            onObjectRemoved: accountMenu.removeItem(object)\r
+                        }\r
 \r
-                            MenuItem {\r
-                                id: addAccountButton\r
-                                height: Style.addAccountButtonHeight\r
-                                hoverEnabled: true\r
-\r
-                                background: Item {\r
-                                    height: parent.height\r
-                                    width: parent.menu.width\r
-                                    Rectangle {\r
-                                        anchors.fill: parent\r
-                                        anchors.margins: 1\r
-                                        color: parent.parent.hovered ? Style.lightHover : "transparent"\r
-                                    }\r
-                                }\r
+                        MenuItem {\r
+                            id: addAccountButton\r
+                            height: Style.addAccountButtonHeight\r
+                            hoverEnabled: true\r
 \r
-                                RowLayout {\r
+                            background: Item {\r
+                                height: parent.height\r
+                                width: parent.menu.width\r
+                                Rectangle {\r
                                     anchors.fill: parent\r
-                                    spacing: 0\r
-\r
-                                    Image {\r
-                                        Layout.leftMargin: 12\r
-                                        verticalAlignment: Qt.AlignCenter\r
-                                        source: "qrc:///client/theme/black/add.svg"\r
-                                        sourceSize.width: Style.headerButtonIconSize\r
-                                        sourceSize.height: Style.headerButtonIconSize\r
-                                    }\r
-                                    Label {\r
-                                        Layout.leftMargin: 14\r
-                                        text: qsTr("Add account")\r
-                                        color: "black"\r
-                                        font.pixelSize: Style.topLinePixelSize\r
-                                    }\r
-                                    // Filler on the right\r
-                                    Item {\r
-                                        Layout.fillWidth: true\r
-                                        Layout.fillHeight: true\r
-                                    }\r
+                                    anchors.margins: 1\r
+                                    color: parent.parent.hovered || parent.parent.visualFocus ? Style.lightHover : "transparent"\r
                                 }\r
-                                onClicked: UserModel.addAccount()\r
-\r
-                                Accessible.role: Accessible.MenuItem\r
-                                Accessible.name: qsTr("Add new account")\r
-                                Accessible.onPressAction: addAccountButton.clicked()\r
                             }\r
 \r
-                            MenuSeparator {\r
-                                contentItem: Rectangle {\r
-                                    implicitHeight: 1\r
-                                    color: Style.menuBorder\r
+                            RowLayout {\r
+                                anchors.fill: parent\r
+                                spacing: 0\r
+\r
+                                Image {\r
+                                    Layout.leftMargin: 12\r
+                                    verticalAlignment: Qt.AlignCenter\r
+                                    source: "qrc:///client/theme/black/add.svg"\r
+                                    sourceSize.width: Style.headerButtonIconSize\r
+                                    sourceSize.height: Style.headerButtonIconSize\r
+                                }\r
+                                Label {\r
+                                    Layout.leftMargin: 14\r
+                                    text: qsTr("Add account")\r
+                                    color: "black"\r
+                                    font.pixelSize: Style.topLinePixelSize\r
+                                }\r
+                                // Filler on the right\r
+                                Item {\r
+                                    Layout.fillWidth: true\r
+                                    Layout.fillHeight: true\r
                                 }\r
                             }\r
+                            onClicked: UserModel.addAccount()\r
 \r
-                            MenuItem {\r
-                                id: syncPauseButton\r
-                                font.pixelSize: Style.topLinePixelSize\r
-                                hoverEnabled: true\r
-                                onClicked: Systray.pauseResumeSync()\r
-\r
-                                background: Item {\r
-                                    height: parent.height\r
-                                    width: parent.menu.width\r
-                                    Rectangle {\r
-                                        anchors.fill: parent\r
-                                        anchors.margins: 1\r
-                                        color: parent.parent.hovered ? Style.lightHover : "transparent"\r
-                                    }\r
-                                }\r
+                            Accessible.role: Accessible.MenuItem\r
+                            Accessible.name: qsTr("Add new account")\r
+                            Accessible.onPressAction: addAccountButton.clicked()\r
+                        }\r
 \r
-                                Accessible.role: Accessible.MenuItem\r
-                                Accessible.name: Systray.syncIsPaused() ? qsTr("Resume sync for all") : qsTr("Pause sync for all")\r
-                                Accessible.onPressAction: syncPauseButton.clicked()\r
+                        MenuSeparator {\r
+                            contentItem: Rectangle {\r
+                                implicitHeight: 1\r
+                                color: Style.menuBorder\r
                             }\r
+                        }\r
 \r
-                            MenuItem {\r
-                                id: settingsButton\r
-                                text: qsTr("Settings")\r
-                                font.pixelSize: Style.topLinePixelSize\r
-                                hoverEnabled: true\r
-                                onClicked: Systray.openSettings()\r
-\r
-                                background: Item {\r
-                                    height: parent.height\r
-                                    width: parent.menu.width\r
-                                    Rectangle {\r
-                                        anchors.fill: parent\r
-                                        anchors.margins: 1\r
-                                        color: parent.parent.hovered ? Style.lightHover : "transparent"\r
-                                    }\r
-                                }\r
+                        MenuItem {\r
+                            id: syncPauseButton\r
+                            font.pixelSize: Style.topLinePixelSize\r
+                            hoverEnabled: true\r
+                            onClicked: Systray.pauseResumeSync()\r
 \r
-                                Accessible.role: Accessible.MenuItem\r
-                                Accessible.name: text\r
-                                Accessible.onPressAction: settingsButton.clicked()\r
+                            background: Item {\r
+                                height: parent.height\r
+                                width: parent.menu.width\r
+                                Rectangle {\r
+                                    anchors.fill: parent\r
+                                    anchors.margins: 1\r
+                                    color: parent.parent.hovered || parent.parent.visualFocus ? Style.lightHover : "transparent"\r
+                                }\r
                             }\r
 \r
-                            MenuItem {\r
-                                id: exitButton\r
-                                text: qsTr("Exit");\r
-                                font.pixelSize: Style.topLinePixelSize\r
-                                hoverEnabled: true\r
-                                onClicked: Systray.shutdown()\r
-\r
-                                background: Item {\r
-                                    height: parent.height\r
-                                    width: parent.menu.width\r
-                                    Rectangle {\r
-                                        anchors.fill: parent\r
-                                        anchors.margins: 1\r
-                                        color: parent.parent.hovered ? Style.lightHover : "transparent"\r
-                                    }\r
+                            Accessible.role: Accessible.MenuItem\r
+                            Accessible.name: Systray.syncIsPaused() ? qsTr("Resume sync for all") : qsTr("Pause sync for all")\r
+                            Accessible.onPressAction: syncPauseButton.clicked()\r
+                        }\r
+\r
+                        MenuItem {\r
+                            id: settingsButton\r
+                            text: qsTr("Settings")\r
+                            font.pixelSize: Style.topLinePixelSize\r
+                            hoverEnabled: true\r
+                            onClicked: Systray.openSettings()\r
+\r
+                            background: Item {\r
+                                height: parent.height\r
+                                width: parent.menu.width\r
+                                Rectangle {\r
+                                    anchors.fill: parent\r
+                                    anchors.margins: 1\r
+                                    color: parent.parent.hovered || parent.parent.visualFocus ? Style.lightHover : "transparent"\r
                                 }\r
+                            }\r
 \r
-                                Accessible.role: Accessible.MenuItem\r
-                                Accessible.name: text\r
-                                Accessible.onPressAction: exitButton.clicked()\r
+                            Accessible.role: Accessible.MenuItem\r
+                            Accessible.name: text\r
+                            Accessible.onPressAction: settingsButton.clicked()\r
+                        }\r
+\r
+                        MenuItem {\r
+                            id: exitButton\r
+                            text: qsTr("Exit");\r
+                            font.pixelSize: Style.topLinePixelSize\r
+                            hoverEnabled: true\r
+                            onClicked: Systray.shutdown()\r
+\r
+                            background: Item {\r
+                                height: parent.height\r
+                                width: parent.menu.width\r
+                                Rectangle {\r
+                                    anchors.fill: parent\r
+                                    anchors.margins: 1\r
+                                    color: parent.parent.hovered || parent.parent.visualFocus ? Style.lightHover : "transparent"\r
+                                }\r
                             }\r
+\r
+                            Accessible.role: Accessible.MenuItem\r
+                            Accessible.name: text\r
+                            Accessible.onPressAction: exitButton.clicked()\r
                         }\r
                     }\r
 \r
                     background: Rectangle {\r
-                        color: accountBtnMouseArea.containsMouse ? "white" : "transparent"\r
+                        color: parent.hovered || parent.visualFocus ? "white" : "transparent"\r
                         opacity: 0.2\r
                     }\r
 \r