From f89b0a8c6fdcb93e64b6731d2a178fb89f203c87 Mon Sep 17 00:00:00 2001 From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com> Date: Mon, 18 Jul 2022 16:13:32 +0300 Subject: [PATCH] feat(StatusBaseButton)!: Converting to QQC2 Button Closes #782 --- sandbox/controls/Buttons.qml | 39 ++- sandbox/controls/Popups.qml | 8 +- sandbox/demoapp/data/Models.qml | 4 + src/StatusQ/Controls/StatusBaseButton.qml | 242 +++++++----------- src/StatusQ/Controls/StatusButton.qml | 4 +- src/StatusQ/Controls/StatusFlatButton.qml | 14 +- .../StatusFloatingButtonsSelector.qml | 7 +- 7 files changed, 152 insertions(+), 166 deletions(-) diff --git a/sandbox/controls/Buttons.qml b/sandbox/controls/Buttons.qml index daae58f1..d827ff20 100644 --- 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 { diff --git a/sandbox/controls/Popups.qml b/sandbox/controls/Popups.qml index 2d019ca6..99b033cd 100644 --- 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: { diff --git a/sandbox/demoapp/data/Models.qml b/sandbox/demoapp/data/Models.qml index a837e28d..8a241860 100644 --- 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 diff --git a/src/StatusQ/Controls/StatusBaseButton.qml b/src/StatusQ/Controls/StatusBaseButton.qml index 9d9369ba..3c0e9761 100644 --- 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 } + 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 - : Qt.PointingHandCursor - - hoverEnabled: true - enabled: statusBaseButton.enabled - - 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 + acceptedButtons: Qt.AllButtons + enabled: root.loading + hoverEnabled: enabled + onPressed: mouse.accepted = true + onWheel: wheel.accepted = true + } } diff --git a/src/StatusQ/Controls/StatusButton.qml b/src/StatusQ/Controls/StatusButton.qml index 094ed380..95c08ef0 100644 --- 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 } diff --git a/src/StatusQ/Controls/StatusFlatButton.qml b/src/StatusQ/Controls/StatusFlatButton.qml index 4a64713a..a8d9e446 100644 --- 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" + hoverColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3 + : Theme.palette.dangerColor3 + 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" - : Theme.palette.baseColor2 - rightPadding: icon.name !== "" ? 18 : defaultRightPadding - leftPadding: icon.name !== "" ? 14 : defaultLeftPadding + borderColor: (type === StatusBaseButton.Type.Normal || hovered) && !loading ? "transparent" + : Theme.palette.baseColor2 } diff --git a/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml b/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml index df056f4c..58e0b498 100644 --- 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) } }