feat(StatusBaseButton)!: Converting to QQC2 Button

Closes #782

sandbox/controls/Buttons.qml

@@ -21,18 +21,31 @@ Column {
         StatusButton {
             text: "Button"
             type: StatusBaseButton.Type.Primary
+
+            StatusToolTip {
+                visible: parent.hovered
+                text: "Look I'm a tooltip on a button!"
+            }
+            onClicked: console.warn("Primary button clicked")
         }
 
         StatusButton {
             text: "Button"
             enabled: false
             type: StatusBaseButton.Type.Primary
+            onClicked: console.warn("Primary disabled button clicked, this should not happen !!!")
         }
 
         StatusButton {
             text: "Button"
             loading: true
             type: StatusBaseButton.Type.Primary
+
+            StatusToolTip {
+                visible: parent.hovered
+                text: "Look I'm a tooltip on a loading button!"
+            }
+            onClicked: console.warn("Primary loading button clicked, this should not happen !!!")
         }
 
         // Large
@@ -50,6 +63,25 @@ Column {
             loading: true
         }
 
+        // Large + Icon
+        StatusButton {
+            text: "Button"
+            icon.name: "info"
+        }
+
+        StatusButton {
+            text: "Button"
+            enabled: false
+            icon.name: "info"
+        }
+
+        StatusButton {
+            text: "Button"
+            loading: true
+            icon.name: "info"
+        }
+
+        // Danger
         StatusButton {
             text: "Button"
             type: StatusBaseButton.Type.Danger
@@ -67,6 +99,7 @@ Column {
             type: StatusBaseButton.Type.Danger
         }
 
+        // Flat
         StatusFlatButton {
             text: "Button"
         }
@@ -74,7 +107,6 @@ Column {
         StatusFlatButton {
             text: "Button"
             enabled: false
-
         }
 
         StatusFlatButton {
@@ -82,6 +114,7 @@ Column {
             loading: true
         }
 
+        // Flat + Danger
         StatusFlatButton {
             text: "Button"
             type: StatusBaseButton.Type.Danger
@@ -117,6 +150,7 @@ Column {
             loading: true
         }
 
+        // Small + danger
         StatusButton {
             text: "Button"
             type: StatusBaseButton.Type.Danger
@@ -137,6 +171,7 @@ Column {
             loading: true
         }
 
+        // Flat + small
         StatusFlatButton {
             text: "Button"
             size: StatusBaseButton.Size.Small
@@ -359,7 +394,7 @@ Column {
     // Button with emoji
     StatusButton {
         text: "Button with Emoji"
-        icon.emoji: "🖼️️"
+        asset.emoji: "🖼️️"
     }
 
     RowLayout {

sandbox/controls/Popups.qml

@@ -419,11 +419,11 @@ Column {
                     topPadding: 8
                     bottomPadding: 0
                     implicitHeight: 32
-                    defaultLeftPadding: 4
+                    leftPadding: 4
                     text: name
-                    icon.emoji: !!emoji ? emoji: ""
+                    asset.emoji: !!emoji ? emoji: ""
-                    icon.emojiSize: Emoji.size.middle
+                    asset.emojiSize: Emoji.size.middle
-                    icon.name: !emoji ? "filled-account": ""
+                    asset.name: !emoji ? "filled-account": ""
                     normalColor: "transparent"
                     highlighted: index === floatingHeader.currentIndex
                     onClicked: {

sandbox/demoapp/data/Models.qml

@@ -1103,6 +1103,7 @@ QtObject {
             isVerified: true
             isUntrustworthy: false
             isContact: true
+            isImage: true
             onlineStatus: 1
             icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                           nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
@@ -1115,6 +1116,7 @@ QtObject {
             isVerified: false
             isUntrustworthy: true
             isContact: false
+            isImage: false
             onlineStatus: 0
             icon: ""
             isAdmin: false
@@ -1126,6 +1128,7 @@ QtObject {
             isVerified: false
             isUntrustworthy: false
             isContact: false
+            isImage: true
             onlineStatus: 1
             isAdmin: false
             icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
@@ -1138,6 +1141,7 @@ QtObject {
             isVerified: false
             isUntrustworthy: true
             isContact: true
+            isImage: false
             onlineStatus: 0
             icon: ""
             isAdmin: false

src/StatusQ/Controls/StatusBaseButton.qml

@@ -1,11 +1,14 @@
 import QtQuick 2.14
+import QtQuick.Layouts 1.14
+import QtQuick.Controls 2.14
+
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core.Utils 0.1
 
-Rectangle {
+Button {
-    id: statusBaseButton
+    id: root
 
     enum Size {
         Tiny,
@@ -19,158 +22,109 @@ Rectangle {
         Primary
     }
 
-    property StatusAssetSettings icon: StatusAssetSettings {
+    property StatusAssetSettings asset: StatusAssetSettings { }
-        width: 24
-        height: 24
-    }
 
-    property bool loading: false
+    property bool loading
 
-    property alias hovered: sensor.containsMouse
+    property color normalColor
+    property color hoverColor
+    property color disabledColor
+
+    property color textColor
+    property color disabledTextColor
+    property color borderColor: "transparent"
 
     property int size: StatusBaseButton.Size.Large
     property int type: StatusBaseButton.Type.Normal
 
-    property alias text: label.text
-    property alias font: label.font
-
-    property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultTopPadding: {
-        switch (size) {
-            case StatusBaseButton.Size.Tiny:
-              return 5
-            case StatusBaseButton.Size.Small:
-              return 10
-            case StatusBaseButton.Size.Large:
-            default:
-              return 11
-        }
-    }
-    property real defaultBottomPadding: {
-        switch (size) {
-            case StatusBaseButton.Size.Tiny:
-              return 5
-            case StatusBaseButton.Size.Small:
-              return 10
-            case StatusBaseButton.Size.Large:
-            default:
-              return 11
-        }
-    }
-
-
-    property real leftPadding: defaultLeftPadding
-    property real rightPadding: defaultRightPadding
-    property real topPadding: defaultTopPadding
-    property real bottomPadding: defaultBottomPadding
-
-    property color normalColor
-    property color hoverColor
-    property color disaledColor
-
-    property color textColor
-    property color disabledTextColor
-
-    signal pressed(var mouse)
-    signal released(var mouse)
-    signal clicked(var mouse)
-    signal pressAndHold(var mouse)
-
-    property bool highlighted: false
-
-
-    /// Implementation
-    implicitWidth: layout.width + statusBaseButton.leftPadding + statusBaseButton.rightPadding
-    implicitHeight: layout.height + statusBaseButton.topPadding + statusBaseButton.bottomPadding
-
-
-    radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
-
-    color: {
-        if (statusBaseButton.enabled)
-            return !statusBaseButton.loading && (sensor.containsMouse || highlighted) ? hoverColor
-                                                       : normalColor;
-        return disaledColor
-    }
-
     QtObject {
         id: d
-        readonly property color textColor: statusBaseButton.enabled ? statusBaseButton.textColor : statusBaseButton.disabledTextColor
+        readonly property color textColor: root.enabled || root.loading ? root.textColor : root.disabledTextColor
     }
 
+    font.weight: Font.Medium
+    font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13
+
+    horizontalPadding: {
+        if (root.icon.name) {
+            return size === StatusBaseButton.Size.Large ? 18 : 16
+        }
+        return size === StatusBaseButton.Size.Large ? 24 : 12
+    }
+    verticalPadding: {
+        switch (size) {
+        case StatusBaseButton.Size.Tiny:
+            return 5
+        case StatusBaseButton.Size.Small:
+            return 10
+        case StatusBaseButton.Size.Large:
+        default:
+            return 11
+        }
+    }
+
+    icon.height: 24
+    icon.width: 24
+
+    background: Rectangle {
+        radius: root.size === StatusBaseButton.Size.Tiny ? 6 : 8
+        border.color: root.borderColor
+        color: {
+            if (root.enabled)
+                return !root.loading && (root.hovered || root.highlighted) ? hoverColor : normalColor;
+            return disabledColor;
+        }
+        MouseArea {
+            anchors.fill: parent
+            enabled: root.enabled
+            acceptedButtons: Qt.NoButton
+            cursorShape: root.loading ? Qt.ArrowCursor : Qt.PointingHandCursor
+        }
+    }
+
+    contentItem: RowLayout {
+        spacing: root.size === StatusBaseButton.Size.Large ? 6 : 4
+        StatusIcon {
+            Layout.preferredWidth: visible ? root.icon.width : 0
+            Layout.preferredHeight: visible ? root.icon.height : 0
+            icon: root.icon.name
+            rotation: root.asset.rotation
+            opacity: !loading && root.icon.name !== ""
+            visible: root.icon.name !== ""
+            color: d.textColor
+        }
+        StatusEmoji {
+            Layout.preferredWidth: visible ? root.icon.width : 0
+            Layout.preferredHeight: visible ? root.icon.height : 0
+            visible: root.asset.emoji
+            emojiId: Emoji.iconId(root.asset.emoji, root.asset.emojiSize) || ""
+        }
+        StatusBaseText {
+            Layout.alignment: Qt.AlignVCenter
+            opacity: !loading
+            font: root.font
+            text: root.text
+            color: d.textColor
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+
+    Loader {
+        anchors.centerIn: parent
+        active: root.loading
+        sourceComponent: StatusLoadingIndicator {
+            color: d.textColor
+        }
+    }
+
+    // stop the mouse clicks in the "loading" state w/o disabling the whole button
+    // as this would make it impossible to have hover events or a tooltip
     MouseArea {
-        id: sensor
         anchors.fill: parent
-        cursorShape: loading ? Qt.ArrowCursor
+        acceptedButtons: Qt.AllButtons
-                             : Qt.PointingHandCursor
+        enabled: root.loading
-
+        hoverEnabled: enabled
-        hoverEnabled: true
+        onPressed: mouse.accepted = true
-        enabled: statusBaseButton.enabled
+        onWheel: wheel.accepted = true
-
+    }
-        Loader {
-            anchors.centerIn: parent
-            active: loading
-            sourceComponent: StatusLoadingIndicator {
-                color: d.textColor
-            } // Indicator
-        } // Loader
-
-        Row {
-            id: layout
-            anchors.centerIn: parent
-            spacing: 4
-            StatusIcon {
-                id: statusIcon
-                width: statusBaseButton.icon.width
-                height: statusBaseButton.icon.height
-                icon: statusBaseButton.icon.name
-                rotation: statusBaseButton.icon.rotation
-                anchors.verticalCenter: parent.verticalCenter
-                opacity: !loading && statusBaseButton.icon.name !== ""
-                visible: statusBaseButton.icon.name !== ""
-                color: d.textColor
-            } // Icon
-            StatusEmoji {
-                width: statusBaseButton.icon.width
-                height: statusBaseButton.icon.height
-                anchors.verticalCenter: parent.verticalCenter
-                visible: statusBaseButton.icon.emoji
-                emojiId: Emoji.iconId(statusBaseButton.icon.emoji, statusBaseButton.icon.emojiSize) || ""
-            } // Emoji
-            StatusBaseText {
-                id: label
-                opacity: !loading
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design
-
-                color: d.textColor
-            } // Text
-        } // Row
-
-
-        onPressed: {
-            if (!loading) {
-                statusBaseButton.pressed(mouse)
-            }
-        }
-
-        onReleased: {
-            if (!loading) {
-                statusBaseButton.released(mouse)
-            }
-        }
-
-        onClicked: {
-            if (!loading) {
-                statusBaseButton.clicked(mouse)
-            }
-        }
-
-        onPressAndHold: {
-            if (!loading) {
-                statusBaseButton.pressAndHold(mouse)
-            }
-        }
-    } // Sensor
 }

src/StatusQ/Controls/StatusButton.qml

@@ -11,12 +11,10 @@ StatusBaseButton {
     hoverColor: type === StatusBaseButton.Type.Primary ? Theme.palette.hoverColor(normalColor) :
                                                          type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor2
                                                                                                : Theme.palette.dangerColor2
-    disaledColor: Theme.palette.baseColor2
+    disabledColor: Theme.palette.baseColor2
 
     textColor: type === StatusBaseButton.Type.Primary ? Theme.palette.white :
                                                         type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
                                                                                               : Theme.palette.dangerColor1
     disabledTextColor: Theme.palette.baseColor1
-
-    font.weight: type === StatusBaseButton.Type.Primary ? Font.Medium : Font.Normal
 }

src/StatusQ/Controls/StatusFlatButton.qml

@@ -3,19 +3,15 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 StatusBaseButton {
-    id: statusFlatButton
-
     normalColor: "transparent"
-    hoverColor:  type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
+    hoverColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
-                                                       : Theme.palette.dangerColor3
+                                                      : Theme.palette.dangerColor3
-    disaledColor: "transparent"
+    disabledColor: "transparent"
 
     textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
                                                      : Theme.palette.dangerColor1
     disabledTextColor: Theme.palette.baseColor1
 
-    border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent"
+    borderColor: (type === StatusBaseButton.Type.Normal || hovered) && !loading ? "transparent"
-                                                          : Theme.palette.baseColor2
+                                                                                : Theme.palette.baseColor2
-    rightPadding: icon.name !== "" ? 18 : defaultRightPadding
-    leftPadding: icon.name !== "" ? 14 : defaultLeftPadding
 }

src/StatusQ/Controls/StatusFloatingButtonsSelector.qml

@@ -113,12 +113,11 @@ Row {
             implicitHeight: 32
             topPadding: 8
             bottomPadding: 0
-            defaultLeftPadding: 4
+            horizontalPadding: 4
-            defaultRightPadding: 4
             hoverColor: Theme.palette.statusFloatingButtonHighlight
             normalColor: Theme.palette.baseColor3
-            icon.name: "more"
+            asset.name: "more"
-            icon.bgColor: "transparent"
+            asset.bgColor: "transparent"
             onClicked: popupMenu.popup(parent.x, y + height + 8)
         }
     }