Split HButton components, add HMenu/HMenuItem

src/qml/Base/HButton.qml

@@ -9,65 +9,29 @@ Button {
     rightPadding: spacing / 1.5
     topPadding: spacing / 2
     bottomPadding: spacing / 2
-    opacity: enabled ? 1 : theme.disabledElementsOpacity
+    iconItem.svgName: loading ? "hourglass" : icon.name
+
     onVisibleChanged: if (! visible) loading = false
 
 
-    readonly property alias ico: ico
+    readonly property alias iconItem: contentItem.icon
-    readonly property alias label: label
+    readonly property alias label: contentItem.label
 
-    property string iconName: ""
     property color backgroundColor: theme.controls.button.background
     property bool loading: false
     property bool circle: false
 
 
-    Behavior on opacity { HNumberAnimation {} }
+    background: HButtonBackground {
-
+        button: button
-
+        buttonTheme: theme.controls.button
-    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) || button.visualFocus ?
-                   theme.controls.button.hoveredOverlay :
-
-                   "transparent"
-
-            Behavior on color { HColorAnimation { factor: 0.5 } }
-        }
     }
 
-    contentItem: HRowLayout {
+    contentItem: HButtonContent {
-        spacing: button.spacing
+        id: contentItem
-
+        button: button
-        HIcon {
+        buttonTheme: theme.controls.button
-            id: ico
-            svgName: loading ? "hourglass" : iconName
-
-            Layout.fillHeight: true
-            Layout.alignment: Qt.AlignCenter
-        }
-
-        HLabel {
-            id: label
-            text: button.text
-            visible: Boolean(text)
-            color: theme.controls.button.text
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-        }
     }
 }

src/qml/Base/HButtonBackground.qml

@@ -0,0 +1,29 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+HRectangle {
+    opacity: enabled ? 1 : theme.disabledElementsOpacity
+
+
+    property AbstractButton button
+    property QtObject buttonTheme
+
+
+    Behavior on opacity { HNumberAnimation {} }
+
+
+    HRectangle {
+        anchors.fill: parent
+        radius: parent.radius
+        color: button.checked ? buttonTheme.checkedOverlay :
+
+               button.enabled && button.pressed ? buttonTheme.pressedOverlay :
+
+               (button.enabled && button.hovered) || button.visualFocus ?
+               buttonTheme.hoveredOverlay :
+
+               "transparent"
+
+        Behavior on color { HColorAnimation { factor: 0.5 } }
+    }
+}

src/qml/Base/HButtonContent.qml

@@ -0,0 +1,41 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+HRowLayout {
+    spacing: button.spacing
+    opacity: enabled ? 1 : theme.disabledElementsOpacity
+
+
+    property AbstractButton button
+    property QtObject buttonTheme
+
+    readonly property alias icon: icon
+    readonly property alias label: label
+
+
+    Behavior on opacity { HNumberAnimation {} }
+
+
+    HIcon {
+        id: icon
+        svgName: button.icon.name
+        colorize: button.icon.color
+        cache: button.icon.cache
+
+        Layout.fillHeight: true
+        Layout.alignment: Qt.AlignCenter
+    }
+
+    HLabel {
+        id: label
+        text: button.text
+        visible: Boolean(text)
+        color: buttonTheme.text
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+    }
+}

src/qml/Base/HInterfaceBox.qml

@@ -73,7 +73,7 @@ HRectangle {
 
                     id: button
                     text: modelData.text
-                    iconName: modelData.iconName || ""
+                    icon.name: modelData.iconName || ""
                     enabled: modelData.enabled
                     onClicked: buttonCallbacks[modelData.name](button)
 

src/qml/Base/HMenuItem.qml

@@ -2,4 +2,26 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 
 MenuItem {
+    id: menuItem
+    spacing: theme.spacing
+    leftPadding: spacing / 1.5
+    rightPadding: spacing / 1.5
+    topPadding: spacing / 2
+    bottomPadding: spacing / 2
+
+
+    readonly property alias iconItem: contentItem.icon
+    readonly property alias label: contentItem.label
+
+
+    background: HButtonBackground {
+        button: menuItem
+        buttonTheme: theme.controls.menuItem
+    }
+
+    contentItem: HButtonContent {
+        id: contentItem
+        button: menuItem
+        buttonTheme: theme.controls.menuItem
+    }
 }

src/qml/Chat/Banners/Banner.qml

@@ -71,7 +71,7 @@ HRectangle {
                     HButton {
                         id: button
                         text: modelData.text
-                        iconName: modelData.iconName
+                        icon.name: modelData.iconName
                         onClicked: buttonCallbacks[modelData.name](button)
 
                         Layout.preferredHeight: theme.baseElementsHeight

src/qml/Chat/RoomHeader.qml

@@ -75,8 +75,8 @@ HRectangle {
                 ]
                 HButton {
                     backgroundColor: "transparent"
-                    iconName: "room-view-" + modelData
+                    icon.name: "room-view-" + modelData
-                    ico.dimension: 22
+                    iconItem.dimension: 22
                     height: parent.height
                     autoExclusive: true
                     checked: activeButton == modelData
@@ -101,7 +101,7 @@ HRectangle {
         visible: opacity > 0
 
         backgroundColor: "transparent"
-        iconName: "reduced-room-buttons"
+        icon.name: "reduced-room-buttons"
 
         Behavior on opacity {
             HNumberAnimation { duration: buttonsAnimation.duration * 2 }

src/qml/Pages/EditAccount/Encryption.qml

@@ -33,7 +33,7 @@ HColumnLayout {
     HRowLayout {
         HButton {
             id: exportButton
-            iconName: "export-keys"
+            icon.name: "export-keys"
             text: qsTr("Export")
             enabled: false
 
@@ -43,7 +43,7 @@ HColumnLayout {
 
         HButton {
             id: importButton
-            iconName: "import-keys"
+            icon.name: "import-keys"
             text: qsTr("Import")
 
             Layout.fillWidth: true

src/qml/Pages/EditAccount/Profile.qml

@@ -178,7 +178,7 @@ HGridLayout {
                 property bool avatarChangeRunning: false
 
                 id: saveButton
-                iconName: "apply"
+                icon.name: "apply"
                 text: qsTr("Apply")
                 loading: nameChangeRunning || avatarChangeRunning
                 enabled:
@@ -190,7 +190,7 @@ HGridLayout {
             }
 
             HButton {
-                iconName: "cancel"
+                icon.name: "cancel"
                 text: qsTr("Cancel")
                 enabled: saveButton.enabled && ! saveButton.loading
                 onClicked: cancelChanges()

src/qml/Pages/SignIn.qml

@@ -63,8 +63,8 @@ HPage {
                 model: ["username", "email", "phone"]
 
                 HButton {
-                    iconName: modelData
+                    icon.name: modelData
-                    ico.dimension: 24
+                    iconItem.dimension: 24
                     circle: true
                     checked: loginWith == modelData
                     enabled: modelData == "username"

src/qml/SidePane/DelegateAccount.qml

@@ -51,7 +51,7 @@ HTileDelegate {
 
     HButton {
         id: expand
-        iconName: "expand"
+        icon.name: "expand"
         backgroundColor: "transparent"
         padding: sidePane.currentSpacing / 1.5
         rightPadding: leftPadding
@@ -60,9 +60,9 @@ HTileDelegate {
         visible: opacity > 0
         opacity: accountDelegate.forceExpand ? 0 : 1
 
-        ico.transform: Rotation {
+        iconItem.transform: Rotation {
-            origin.x: expand.ico.dimension / 2
+            origin.x: expand.iconItem.dimension / 2
-            origin.y: expand.ico.dimension / 2
+            origin.y: expand.iconItem.dimension / 2
 
             angle: collapsed ? 180 : 90
             Behavior on angle { HNumberAnimation {} }

src/qml/SidePane/PaneToolBar.qml

@@ -12,7 +12,7 @@ HRowLayout {
     Layout.preferredHeight: theme.baseElementsHeight
 
     HButton {
-        iconName: "add-account"
+        icon.name: "add-account"
         backgroundColor: theme.sidePane.settingsButton.background
         onClicked: pageLoader.showPage("SignIn")
 

src/themes/Default.qpl

@@ -96,15 +96,23 @@ controls:
         color pressedOverlay: hsluv(0, 0, 50, 0.6)
         color checkedOverlay: colors.accentBackground
 
+    menuItem:
+        color background: controls.button.background
+        color text:       controls.button.text
+
+        color hoveredOverlay: controls.button.hoveredOverlay
+        color pressedOverlay: controls.button.hoveredOverlay
+        color checkedOverlay: controls.button.hoveredOverlay
+
     checkBox:
         color checkIconColor: colors.strongAccentBackground
-        color boxBackground:  colors.inputBackground
+        color boxBackground:  controls.button.background
 
         color boxBorder:        hsluv(0, 0, 50, 0.3)
         color boxHoveredBorder: colors.accentBackground
         color boxPressedBorder: colors.strongAccentBackground
 
-        color text:             colors.text
+        color text: controls.button.text
 
     listView:
         color highlight: hsluv(0, 0, 50, 0.3)