mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-22 03:28:52 +00:00
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:
parent
b61a8c45da
commit
bb3fb252d0
26
ui/StatusQ/sandbox/StatusChatCommandButtonPage.qml
Normal file
26
ui/StatusQ/sandbox/StatusChatCommandButtonPage.qml
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
@ -143,6 +143,11 @@ StatusWindow {
|
|||||||
selected: page.sourceComponent == statusTabSwitchesComponent
|
selected: page.sourceComponent == statusTabSwitchesComponent
|
||||||
onClicked: page.sourceComponent = statusTabSwitchesComponent
|
onClicked: page.sourceComponent = statusTabSwitchesComponent
|
||||||
}
|
}
|
||||||
|
StatusNavigationListItem {
|
||||||
|
title: "StatusChatCommandButton"
|
||||||
|
selected: page.sourceComponent == statusChatCommandButtonPageComponent
|
||||||
|
onClicked: page.sourceComponent = statusChatCommandButtonPageComponent
|
||||||
|
}
|
||||||
StatusNavigationListItem {
|
StatusNavigationListItem {
|
||||||
title: "Controls"
|
title: "Controls"
|
||||||
selected: page.sourceComponent == controlsComponent
|
selected: page.sourceComponent == controlsComponent
|
||||||
@ -336,6 +341,11 @@ StatusWindow {
|
|||||||
Buttons {}
|
Buttons {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: statusChatCommandButtonPageComponent
|
||||||
|
StatusChatCommandButtonPage {}
|
||||||
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: popupMenuComponent
|
id: popupMenuComponent
|
||||||
StatusPopupMenuPage {}
|
StatusPopupMenuPage {}
|
||||||
|
71
ui/StatusQ/src/StatusQ/Controls/StatusChatCommandButton.qml
Normal file
71
ui/StatusQ/src/StatusQ/Controls/StatusChatCommandButton.qml
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -2,6 +2,7 @@ module StatusQ.Controls
|
|||||||
|
|
||||||
StatusAccountSelector 0.1 StatusAccountSelector.qml
|
StatusAccountSelector 0.1 StatusAccountSelector.qml
|
||||||
StatusAssetSelector 0.1 StatusAssetSelector.qml
|
StatusAssetSelector 0.1 StatusAssetSelector.qml
|
||||||
|
StatusChatCommandButton 0.1 StatusChatCommandButton.qml
|
||||||
StatusChatInfoButton 0.1 StatusChatInfoButton.qml
|
StatusChatInfoButton 0.1 StatusChatInfoButton.qml
|
||||||
StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
|
StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
|
||||||
StatusColorSelector 0.1 StatusColorSelector.qml
|
StatusColorSelector 0.1 StatusColorSelector.qml
|
||||||
|
Loading…
x
Reference in New Issue
Block a user