Refactor HButton

TODO.md

@@ -6,8 +6,8 @@
     - Make the icon blue in EditAccount when hovering and no avatar set
 
   - HButton
-    - Control: hovered, visualFocus, enabled
+    - visualFocus
-    - Border and pressed color in theme / checkbox theming
+  - Checkbox theming
 
   - `^property type name$`
   - Use [Animators](https://doc.qt.io/qt-5/qml-qtquick-animator.html)

src/qml/Base/HBaseButton.qml

@@ -1,71 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
-
-Button {
-    property bool circle: false
-
-    property color backgroundColor: theme.controls.button.background
-    property alias overlayOpacity: buttonBackgroundOverlay.opacity
-    property bool checkedLightens: false
-
-    signal canceled
-    signal clicked
-    signal doubleClicked
-    signal entered
-    signal exited
-    signal pressAndHold
-    signal pressed
-    signal released
-
-    id: button
-
-    background: Rectangle {
-        id: buttonBackground
-        color:
-            enabled ?
-            (checked ?
-             theme.controls.button.checkedBackground : backgroundColor) :
-            theme.controls.button.disabledBackground
-        radius: circle ? height : 0
-
-        Behavior on color { HColorAnimation { factor: 0.5 } }
-
-        Rectangle {
-            id: buttonBackgroundOverlay
-            anchors.fill: parent
-            radius: parent.radius
-            color: theme.controls.button.hoveredOverlay
-            opacity: 0
-
-            Behavior on opacity { HNumberAnimation { factor: 0.5 } }
-        }
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        hoverEnabled: true
-
-        onCanceled: button.canceled()
-        onClicked: button.clicked()
-        onDoubleClicked: button.doubleClicked()
-        onEntered: {
-            overlayOpacity = checked ? 0 : 0.15
-            button.entered()
-        }
-        onExited: {
-            overlayOpacity = 0
-            button.exited()
-        }
-        onPressAndHold: button.pressAndHold()
-        onPressed: {
-            overlayOpacity += 0.15
-            button.pressed()
-        }
-        onReleased: {
-            if (checkable) { checked = ! checked }
-            overlayOpacity = checked ? 0 : 0.15
-            button.released()
-        }
-    }
-}

src/qml/Base/HButton.qml

@@ -0,0 +1,63 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+Button {
+    id: button
+    opacity: enabled ? 1 : theme.controls.button.disabledOpacity
+    onVisibleChanged: if (! visible) loading = false
+
+
+    readonly property alias ico: ico
+    readonly property alias label: label
+
+    property string iconName: ""
+    property color backgroundColor: theme.controls.button.background
+    property bool loading: false
+    property bool circle: false
+
+
+    background: HRectangle {
+        radius: circle ? height : 0
+        color: backgroundColor
+
+        HRectangle {
+            anchors.fill: parent
+            radius: parent.radius
+            color: button.checked ?
+                   theme.controls.button.checkedOverlay :
+
+                   button.enabled && button.pressed ?
+                   theme.controls.button.pressedOverlay :
+
+                   button.enabled && button.hovered ?
+                   theme.controls.button.hoveredOverlay :
+
+                   "transparent"
+
+            Behavior on color { HColorAnimation { factor: 0.5 } }
+        }
+    }
+
+    contentItem: HRowLayout {
+        spacing: button.spacing
+
+        HIcon {
+            id: ico
+            x: button.leftPadding
+            y: button.topPadding + button.availableHeight / 2 - height / 2
+            svgName: loading ? "hourglass" : iconName
+        }
+
+        HLabel {
+            id: label
+            text: button.text
+            visible: Boolean(text)
+            color: theme.controls.button.text
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+
+            Layout.fillWidth: true
+        }
+    }
+}

src/qml/Base/HIcon.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.12
 
 HImage {
+    visible: Boolean(svgName)
+
     property string svgName: ""
     property int dimension: 20
 

src/qml/Base/HInterfaceBox.qml

@@ -68,13 +68,13 @@ HRectangle {
                 id: interfaceButtonsRepeater
                 model: []
 
-                HUIButton {
+                HButton {
                     property string name: modelData.name
 
                     id: button
                     text: modelData.text
                     iconName: modelData.iconName || ""
-                    enabled: modelData.enabled === false ? false : true
+                    enabled: modelData.enabled
                     onClicked: buttonCallbacks[modelData.name](button)
 
                     Layout.fillWidth: true

src/qml/Base/HUIButton.qml

@@ -1,74 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-import QtQuick.Layouts 1.12
-import QtGraphicalEffects 1.12
-
-HBaseButton {
-    property int contentWidth: 0
-    property int horizontalMargin: 0
-    property int verticalMargin: 0
-    property int fontSize: theme.fontSize.normal
-
-    property string iconName: ""
-    property var iconDimension: null
-    property var iconTransform: null
-
-    property bool loading: false
-
-    readonly property alias visibility: button.visible
-    onVisibilityChanged: if (! visibility) { loading = false }
-
-    id: button
-
-    Component {
-        id: buttonContent
-
-        HRowLayout {
-            id: contentLayout
-            spacing: button.text && iconName ? theme.spacing : 0
-            Component.onCompleted: contentWidth = implicitWidth
-
-            HIcon {
-                svgName: loading ? "hourglass" : iconName
-                dimension: iconDimension || contentLayout.height
-                transform: iconTransform
-                opacity: button.enabled ? 1 : 0.7
-                Behavior on opacity { HNumberAnimation {} }
-
-                Layout.topMargin: verticalMargin
-                Layout.bottomMargin: verticalMargin
-                Layout.leftMargin: horizontalMargin
-                Layout.rightMargin: horizontalMargin
-            }
-
-            HLabel {
-                visible: Boolean(text)
-                text: button.text
-                font.pixelSize: fontSize
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                color: button.enabled ?
-                       theme.controls.button.text :
-                       theme.controls.button.disabledText
-
-                Layout.fillWidth: true
-            }
-        }
-    }
-
-    Component {
-        id: loadingOverlay
-        HRowLayout {
-            HIcon {
-                svgName: "hourglass"
-                Layout.preferredWidth: contentWidth || -1
-                Layout.alignment: Qt.AlignCenter
-            }
-        }
-    }
-
-    contentItem: HLoader {
-        sourceComponent:
-            loading && ! iconName ? loadingOverlay : buttonContent
-    }
-}

src/qml/Chat/Banners/Banner.qml

@@ -68,7 +68,7 @@ HRectangle {
                     id: bannerRepeater
                     model: []
 
-                    HUIButton {
+                    HButton {
                         id: button
                         text: modelData.text
                         iconName: modelData.iconName

src/qml/Chat/RoomHeader.qml

@@ -73,14 +73,15 @@ HRectangle {
                 model: [
                     "members", "files", "notifications", "history", "settings"
                 ]
-                HUIButton {
+                HButton {
-                    backgroundColor: theme.chat.selectViewBar.background
+                    backgroundColor: "transparent"
                     iconName: "room-view-" + modelData
-                    iconDimension: 22
+                    ico.dimension: 22
+                    height: parent.height
                     autoExclusive: true
                     checked: activeButton == modelData
-                    onClicked: activeButton = activeButton == modelData ?
+                    onClicked: activeButton =
-                                              null : modelData
+                        activeButton == modelData ?  null : modelData
                 }
             }
 
@@ -90,16 +91,16 @@ HRectangle {
         }
     }
 
-    HUIButton {
+    HButton {
         id: expandButton
         z: 1
-        width: theme.controls.avatar.size
+        width: height
-        height: width
+        height: parent.height
         anchors.right: parent.right
         opacity: collapseButtons ? 1 : 0
         visible: opacity > 0
 
-        backgroundColor: theme.chat.selectViewBar.background
+        backgroundColor: "transparent"
         iconName: "reduced-room-buttons"
 
         Behavior on opacity {

src/qml/Pages/EditAccount/Encryption.qml

@@ -31,7 +31,7 @@ HColumnLayout {
     }
 
     HRowLayout {
-        HUIButton {
+        HButton {
             id: exportButton
             iconName: "export-keys"
             text: qsTr("Export")
@@ -41,7 +41,7 @@ HColumnLayout {
             Layout.alignment: Qt.AlignBottom
         }
 
-        HUIButton {
+        HButton {
             id: importButton
             iconName: "import-keys"
             text: qsTr("Import")

src/qml/Pages/EditAccount/Profile.qml

@@ -173,7 +173,7 @@ HGridLayout {
         HRowLayout {
             Layout.alignment: Qt.AlignBottom
 
-            HUIButton {
+            HButton {
                 property bool nameChangeRunning: false
                 property bool avatarChangeRunning: false
 
@@ -183,22 +183,20 @@ HGridLayout {
                 loading: nameChangeRunning || avatarChangeRunning
                 enabled:
                     nameField.changed || aliasField.changed || avatar.changed
+                onClicked: applyChanges()
 
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignBottom
-
-                onClicked: applyChanges()
             }
 
-            HUIButton {
+            HButton {
                 iconName: "cancel"
                 text: qsTr("Cancel")
                 enabled: saveButton.enabled && ! saveButton.loading
+                onClicked: cancelChanges()
 
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignBottom
-
-                onClicked: cancelChanges()
             }
         }
     }

src/qml/Pages/SignIn.qml

@@ -62,13 +62,12 @@ HPage {
             Repeater {
                 model: ["username", "email", "phone"]
 
-                HUIButton {
+                HButton {
                     iconName: modelData
                     circle: true
                     checked: loginWith == modelData
                     enabled: modelData == "username"
                     autoExclusive: true
-                    checkedLightens: true
                     onClicked: loginWith = modelData
                 }
             }

src/qml/SidePane/DelegateAccount.qml

@@ -102,10 +102,10 @@ HInteractiveRectangle {
             Layout.fillHeight: true
         }
 
-        HUIButton {
+        HButton {
             id: expandButton
             iconName: "expand"
-            iconDimension: 16
+            ico.dimension: 16
             backgroundColor: "transparent"
             leftPadding: sidePane.currentSpacing
             rightPadding: leftPadding
@@ -118,9 +118,9 @@ HInteractiveRectangle {
                 1
             Behavior on opacity { HNumberAnimation {} }
 
-            iconTransform: Rotation {
+            ico.transform: Rotation {
-                origin.x: expandButton.iconDimension / 2
+                origin.x: expandButton.ico.dimension / 2
-                origin.y: expandButton.iconDimension / 2
+                origin.y: expandButton.ico.dimension / 2
 
                 angle: collapsed ? 180 : 90
                 Behavior on angle { HNumberAnimation {} }

src/qml/SidePane/PaneToolBar.qml

@@ -11,12 +11,12 @@ HRowLayout {
     Layout.fillWidth: true
     Layout.preferredHeight: theme.baseElementsHeight
 
-    HUIButton {
+    HButton {
         iconName: "add-account"
         backgroundColor: theme.sidePane.settingsButton.background
-        Layout.preferredHeight: parent.height
-
         onClicked: pageLoader.showPage("SignIn")
+
+        Layout.preferredHeight: parent.height
     }
 
     HTextField {

src/themes/Default.qpl

@@ -89,13 +89,12 @@ controls:
 
     button:
         color background:     colors.inputBackground
-        color checkedBackground: colors.accentBackground
-        color disabledBackground:
-            hsluv(0, 0, colors.intensity * 2, Math.min(0.6, opacity))
-
-        color hoveredOverlay: hsluv(0, 0, 100)
         color text:           colors.text
-        color disabledText:   colors.dimmerText
+        real disabledOpacity: 0.3
+
+        color hoveredOverlay: hsluv(0, 0, 50, 0.3)
+        color pressedOverlay: hsluv(0, 0, 50, 0.6)
+        color checkedOverlay: colors.accentBackground
 
     interactiveRectangle:
         color background: "transparent"
@@ -191,9 +190,6 @@ chat:
     roomSidePane:
         color background: colors.mediumBackground
 
-    selectViewBar:
-        color background: chat.roomHeader.background
-
     eventList:
         int ownEventsOnRightUnderWidth: 768
         color background:               "transparent"