feat(StatusQ.Controls): introduce StatusChatCommandButton

Usage:

```qml
StatusChatCommandButton {
    icon.name: "send"
    icon.color: Theme.palette.miscColor2
    text: "Send transaction"
}
```

Closes #429
This commit is contained in:
Pascal Precht 2021-10-25 14:54:00 +02:00 committed by r4bbit.eth
parent 4bcd89b38a
commit 4cc0d2bbca
4 changed files with 108 additions and 0 deletions

View File

@ -0,0 +1,26 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import Sandbox 0.1
Column {
spacing: 8
StatusChatCommandButton {
icon.name: "send"
icon.color: Theme.palette.miscColor2
text: "Send transaction"
}
StatusChatCommandButton {
icon.name: "send"
icon.rotation: 180
icon.color: Theme.palette.miscColor8
text: "Receive transaction"
}
}

View File

@ -143,6 +143,11 @@ StatusWindow {
selected: page.sourceComponent == statusTabSwitchesComponent
onClicked: page.sourceComponent = statusTabSwitchesComponent
}
StatusNavigationListItem {
title: "StatusChatCommandButton"
selected: page.sourceComponent == statusChatCommandButtonPageComponent
onClicked: page.sourceComponent = statusChatCommandButtonPageComponent
}
StatusNavigationListItem {
title: "Controls"
selected: page.sourceComponent == controlsComponent
@ -336,6 +341,11 @@ StatusWindow {
Buttons {}
}
Component {
id: statusChatCommandButtonPageComponent
StatusChatCommandButtonPage {}
}
Component {
id: popupMenuComponent
StatusPopupMenuPage {}

View File

@ -0,0 +1,71 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
Rectangle {
id: root
implicitWidth: 168
implicitHeight: 95
property string text: ""
property bool highlighted: false
property bool enabled: true
signal clicked(var mouse)
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
background: StatusIconBackgroundSettings {}
}
color: {
let actualColor = Qt.darker(root.icon.color, 1)
actualColor.a = sensor.containsMouse && enabled ? 0.3 : 0.2
return actualColor
}
radius: 16
MouseArea {
id: sensor
cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
anchors.fill: parent
hoverEnabled: true
onClicked: function (mouse) {
root.clicked(mouse)
}
StatusRoundIcon {
icon.name: root.icon.name
icon.width: root.icon.width
icon.height: root.icon.height
icon.rotation: root.icon.rotation
icon.color: Theme.palette.white
icon.background.width: 40
icon.background.height: 40
icon.background.color: root.icon.color
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 8
}
StatusBaseText {
text: root.text
anchors.left: parent.left
anchors.leftMargin: 8
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
font.pixelSize: 13
font.weight: Font.Medium
color: Theme.palette.white
}
}
}

View File

@ -2,6 +2,7 @@ module StatusQ.Controls
StatusAccountSelector 0.1 StatusAccountSelector.qml
StatusAssetSelector 0.1 StatusAssetSelector.qml
StatusChatCommandButton 0.1 StatusChatCommandButton.qml
StatusChatInfoButton 0.1 StatusChatInfoButton.qml
StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
StatusColorSelector 0.1 StatusColorSelector.qml