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 label: label
+    readonly property alias iconItem: contentItem.icon
+    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: HRectangle {
+    background: HButtonBackground {
+        button: button
+        buttonTheme: theme.controls.button
         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 {
-        spacing: button.spacing
-
-        HIcon {
-            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
-        }
+    contentItem: HButtonContent {
+        id: contentItem
+        button: button
+        buttonTheme: theme.controls.button
     }
 }

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
+    }
 }