Use fancy focus lines for buttons

src/gui/Base/HButton.qml

@@ -50,6 +50,11 @@ Button {
     readonly property alias label: contentItem.label
 
     property color backgroundColor: theme.controls.button.background
+    property color focusLineColor:
+        Qt.colorEqual(icon.color, theme.icons.colorize) ?
+        theme.controls.button.focusedBorder :
+        icon.color
+
     property bool disableWhileLoading: true
     property bool loading: false
     property bool circle: false

src/gui/Base/HButtonBackground.qml

@@ -4,30 +4,41 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 
 Rectangle {
-    color: buttonTheme.background
-    opacity: loading ? theme.loadingElementsOpacity :
-             enabled ? 1 : theme.disabledElementsOpacity
-
-
     property var button
     property QtObject buttonTheme
+    property bool useFocusLine: true
+
+
+    color: buttonTheme.background
+    opacity:
+        loading ? theme.loadingElementsOpacity :
+        enabled ? 1 :
+        theme.disabledElementsOpacity
 
 
     Behavior on opacity { HNumberAnimation {} }
 
-
     Rectangle {
         anchors.fill: parent
         radius: parent.radius
-        color: button.checked ? buttonTheme.checkedOverlay :
+        color:
+            button.checked ? buttonTheme.checkedOverlay :
 
             button.enabled && button.pressed ? buttonTheme.pressedOverlay :
 
-               (button.enabled && button.hovered) || button.activeFocus ?
+            button.enabled && ! useFocusLine && button.activeFocus ?
             buttonTheme.hoveredOverlay :
 
+            button.enabled && button.hovered ? buttonTheme.hoveredOverlay :
+
             "transparent"
 
         Behavior on color { HColorAnimation { factor: 0.5 } }
     }
+
+    HBottomFocusLine {
+        show: useFocusLine && button.activeFocus
+        borderHeight: useFocusLine ? buttonTheme.focusedBorderWidth : 0
+        color: useFocusLine ? button.focusLineColor : "transparent"
+    }
 }

src/gui/Base/HButtonContent.qml

@@ -6,6 +6,7 @@ import QtQuick.Layouts 1.12
 
 HRowLayout {
     id: buttonContent
+    implicitHeight: theme.baseElementsHeight
     spacing: button.spacing
     opacity: loading ? theme.loadingElementsOpacity :
              enabled ? 1 : theme.disabledElementsOpacity

src/gui/Base/HMenuItem.qml

@@ -17,6 +17,7 @@ MenuItem {
     background: HButtonBackground {
         button: menuItem
         buttonTheme: theme.controls.menuItem
+        useFocusLine: false
     }
 
     contentItem: HButtonContent {

src/gui/Base/HTabButton.qml

@@ -35,6 +35,11 @@ TabButton {
         TabBar.index % 2 === 0 ?
         theme.controls.tab.background : theme.controls.tab.alternateBackground
 
+    property color focusLineColor:
+        Qt.colorEqual(icon.color, theme.icons.colorize) ?
+        theme.controls.tab.focusedBorder :
+        icon.color
+
     property bool loading: false
 
     property HToolTip toolTip: HToolTip {

src/themes/Glass.qpl

@@ -123,6 +123,8 @@ controls:
     button:
         color background:       colors.strongBackground
         color text:             colors.text
+        color focusedBorder:    colors.accentElement
+        int focusedBorderWidth: 1
 
         color hoveredOverlay: hsluv(0, 0, 50, 0.2)
         color pressedOverlay: hsluv(0, 0, 50, 0.5)
@@ -137,7 +139,10 @@ controls:
             colors.intensity * 4,
             Math.max(0.6, colors.opacity)
         )
+
         color bottomLine:       background
+        color focusedBorder:    colors.accentElement
+        int focusedBorderWidth: 1
 
         color hoveredOverlay: controls.button.hoveredOverlay
         color pressedOverlay: controls.button.pressedOverlay

src/themes/Midnight.qpl

@@ -126,6 +126,8 @@ controls:
     button:
         color background:       colors.strongBackground
         color text:             colors.text
+        color focusedBorder:    colors.accentElement
+        int focusedBorderWidth: 1
 
         color hoveredOverlay: hsluv(0, 0, 50, 0.2)
         color pressedOverlay: hsluv(0, 0, 50, 0.5)
@@ -140,7 +142,10 @@ controls:
             colors.intensity * 4,
             Math.max(0.6, colors.opacity)
         )
+
         color bottomLine:       background
+        color focusedBorder:    colors.accentElement
+        int focusedBorderWidth: 1
 
         color hoveredOverlay: controls.button.hoveredOverlay
         color pressedOverlay: controls.button.pressedOverlay