feat(StatusBaseButton)!: Converting to QQC2 Button

Closes #782
2022-07-18 16:13:32 +03:00 · 2022-07-18 16:13:32 +03:00 · f89b0a8c6f
parent b1025fabd7
commit f89b0a8c6f
7 changed files with 152 additions and 166 deletions
--- a/sandbox/controls/Buttons.qml
+++ b/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 {
--- a/sandbox/controls/Popups.qml
+++ b/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: ""
-                    icon.emojiSize: Emoji.size.middle
-                    icon.name: !emoji ? "filled-account": ""
+                    asset.emoji: !!emoji ? emoji: ""
+                    asset.emojiSize: Emoji.size.middle
+                    asset.name: !emoji ? "filled-account": ""
                    normalColor: "transparent"
                    highlighted: index === floatingHeader.currentIndex
                    onClicked: {
--- a/sandbox/demoapp/data/Models.qml
+++ b/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
--- a/src/StatusQ/Controls/StatusBaseButton.qml
+++ b/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 {
-    id: statusBaseButton
+Button {
+    id: root

    enum Size {
        Tiny,
@ -19,158 +22,109 @@ Rectangle {
        Primary
    }

-    property StatusAssetSettings icon: StatusAssetSettings {
-        width: 24
-        height: 24
-    }
+    property StatusAssetSettings asset: StatusAssetSettings { }

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

-    MouseArea {
-        id: sensor
-        anchors.fill: parent
-        cursorShape: loading ? Qt.ArrowCursor
-                             : Qt.PointingHandCursor
+    font.weight: Font.Medium
+    font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13

-        hoverEnabled: true
-        enabled: statusBaseButton.enabled
+    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: loading
+        active: root.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)
+    // 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 {
+        anchors.fill: parent
+        acceptedButtons: Qt.AllButtons
+        enabled: root.loading
+        hoverEnabled: enabled
+        onPressed: mouse.accepted = true
+        onWheel: wheel.accepted = true
    }
-        }
-
-        onClicked: {
-            if (!loading) {
-                statusBaseButton.clicked(mouse)
-            }
-        }
-
-        onPressAndHold: {
-            if (!loading) {
-                statusBaseButton.pressAndHold(mouse)
-            }
-        }
-    } // Sensor
 }
--- a/src/StatusQ/Controls/StatusButton.qml
+++ b/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
 }
--- a/src/StatusQ/Controls/StatusFlatButton.qml
+++ b/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
                                                      : 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
-    rightPadding: icon.name !== "" ? 18 : defaultRightPadding
-    leftPadding: icon.name !== "" ? 14 : defaultLeftPadding
 }
--- a/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml
+++ b/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml
@ -113,12 +113,11 @@ Row {
            implicitHeight: 32
            topPadding: 8
            bottomPadding: 0
-            defaultLeftPadding: 4
-            defaultRightPadding: 4
+            horizontalPadding: 4
            hoverColor: Theme.palette.statusFloatingButtonHighlight
            normalColor: Theme.palette.baseColor3
-            icon.name: "more"
-            icon.bgColor: "transparent"
+            asset.name: "more"
+            asset.bgColor: "transparent"
            onClicked: popupMenu.popup(parent.x, y + height + 8)
        }
    }