mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-23 03:58:49 +00:00
feat(general/ui): status fee option added to statusq controls
- A new control added to statusq - A new story book page added for this control
This commit is contained in:
Sale Djenic
parent
6b5d78f87d
commit
ed8564d228
169
storybook/pages/StatusFeeOptionPage.qml
Normal file
169
storybook/pages/StatusFeeOptionPage.qml
Normal file
@ -0,0 +1,169 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuick.Controls 2.15
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import Storybook 1.0
|
||||
|
||||
SplitView {
|
||||
orientation: Qt.Horizontal
|
||||
|
||||
Logs { id: logs }
|
||||
|
||||
Pane {
|
||||
SplitView.fillWidth: true
|
||||
SplitView.fillHeight: true
|
||||
|
||||
background: Rectangle {
|
||||
color: Theme.palette.baseColor4
|
||||
}
|
||||
|
||||
StatusFeeOption {
|
||||
id: feeOption
|
||||
anchors.centerIn: parent
|
||||
|
||||
onClicked: {
|
||||
console.warn("control clicked...")
|
||||
selected = !selected
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LogsAndControlsPanel {
|
||||
SplitView.fillHeight: true
|
||||
SplitView.preferredWidth: 300
|
||||
|
||||
logsView.logText: logs.logText
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
|
||||
ComboBox {
|
||||
model: [
|
||||
{testCase: StatusFeeOption.Type.Normal, name: "Normal"},
|
||||
{testCase: StatusFeeOption.Type.Fast, name: "Fast"},
|
||||
{testCase: StatusFeeOption.Type.Urgent, name: "Urgent"},
|
||||
{testCase: StatusFeeOption.Type.Custom, name: "Custom"}
|
||||
]
|
||||
|
||||
textRole: "name"
|
||||
valueRole: "testCase"
|
||||
onCurrentValueChanged: {
|
||||
console.warn("valueRole: ", currentValue)
|
||||
feeOption.type = currentValue
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
TextField {
|
||||
id: price
|
||||
Layout.preferredWidth: 130
|
||||
text: "1.45 EUR"
|
||||
inputMethodHints: Qt.ImhFormattedNumbersOnly
|
||||
|
||||
Component.onCompleted: feeOption.subText = price.text
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Set price"
|
||||
onClicked: {
|
||||
feeOption.subText = price.text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
TextField {
|
||||
id: time
|
||||
Layout.preferredWidth: 130
|
||||
text: "~60s"
|
||||
|
||||
Component.onCompleted: feeOption.additionalText = time.text
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Set time"
|
||||
onClicked: {
|
||||
feeOption.additionalText = time.text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
TextField {
|
||||
id: unselectedText
|
||||
Layout.preferredWidth: 130
|
||||
text: "Set your own fees & nonce"
|
||||
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Set unselected text"
|
||||
onClicked: {
|
||||
feeOption.unselectedText = unselectedText.text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
text: "Show subtext"
|
||||
checked: true
|
||||
|
||||
onCheckStateChanged: {
|
||||
feeOption.showSubText = checked
|
||||
}
|
||||
|
||||
Component.onCompleted: feeOption.showSubText = checked
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
text: "Show additional text"
|
||||
checked: true
|
||||
|
||||
onCheckStateChanged: {
|
||||
feeOption.showAdditionalText = checked
|
||||
}
|
||||
|
||||
Component.onCompleted: feeOption.showAdditionalText = checked
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
text: "Show unselected text"
|
||||
checked: false
|
||||
|
||||
onCheckStateChanged: {
|
||||
if (checked) {
|
||||
feeOption.unselectedText = unselectedText.text
|
||||
return
|
||||
}
|
||||
feeOption.unselectedText = ""
|
||||
}
|
||||
|
||||
Component.onCompleted: feeOption.unselectedText = ""
|
||||
}
|
||||
|
||||
CheckBox {
|
||||
id: loading
|
||||
text: "Set loading state"
|
||||
checked: false
|
||||
|
||||
onCheckStateChanged: {
|
||||
if (checked) {
|
||||
feeOption.subText = ""
|
||||
feeOption.additionalText = ""
|
||||
return
|
||||
}
|
||||
|
||||
feeOption.subText = price.text
|
||||
feeOption.additionalText = time.text
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.fillHeight: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// category: Controls
|
||||
226
ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
Normal file
226
ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml
Normal file
@ -0,0 +1,226 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
/*!
|
||||
\qmltype StatusFeeOption
|
||||
\inherits Control
|
||||
\inqmlmodule StatusQ.Controls
|
||||
\since StatusQ.Controls 0.1
|
||||
\brief Displays a clickable option which content is fully customizable
|
||||
|
||||
By design appearance of subText and additionalText as well as their values should be set from outside.
|
||||
If any of those two need to be displayed a component that has an empty value will be rendering a loading state.
|
||||
The control renders based on the selected property.
|
||||
When control is clicked clicked signal will be emitted.
|
||||
|
||||
Example of how to use it:
|
||||
|
||||
\qml
|
||||
StatusFeeOption {
|
||||
subText: "1.65 EUR"
|
||||
showSubText: true
|
||||
|
||||
additionalText: "~40s"
|
||||
showAdditionalText: true
|
||||
|
||||
onSelectedChanged: {
|
||||
// this option is selected/unselected
|
||||
}
|
||||
}
|
||||
\endqml
|
||||
|
||||
For a list of components available see StatusQ.
|
||||
*/
|
||||
|
||||
Control {
|
||||
id: root
|
||||
|
||||
enum Type {
|
||||
Normal,
|
||||
Fast,
|
||||
Urgent,
|
||||
Custom
|
||||
}
|
||||
|
||||
property int type: StatusFeeOption.Type.Normal
|
||||
|
||||
property bool selected: false
|
||||
|
||||
property string mainText: {
|
||||
switch(type) {
|
||||
case StatusFeeOption.Type.Fast:
|
||||
return qsTr("Fast")
|
||||
case StatusFeeOption.Type.Urgent:
|
||||
return qsTr("Urgent")
|
||||
case StatusFeeOption.Type.Custom:
|
||||
return qsTr("Custom")
|
||||
case StatusFeeOption.Type.Normal:
|
||||
default:
|
||||
return qsTr("Normal")
|
||||
}
|
||||
}
|
||||
|
||||
property string subText
|
||||
property bool showSubText
|
||||
|
||||
property string additionalText
|
||||
property bool showAdditionalText
|
||||
|
||||
property string unselectedText
|
||||
|
||||
property string icon: {
|
||||
switch(type) {
|
||||
case StatusFeeOption.Type.Fast:
|
||||
return Theme.png("wallet/car")
|
||||
case StatusFeeOption.Type.Urgent:
|
||||
return Theme.png("wallet/rocket")
|
||||
case StatusFeeOption.Type.Custom:
|
||||
return Theme.png("wallet/handwrite")
|
||||
case StatusFeeOption.Type.Normal:
|
||||
default:
|
||||
return Theme.png("wallet/clock")
|
||||
}
|
||||
}
|
||||
|
||||
signal clicked()
|
||||
|
||||
font.family: Theme.baseFont.name
|
||||
font.pixelSize: Theme.tertiaryTextFontSize
|
||||
|
||||
horizontalPadding: 8
|
||||
verticalPadding: 8
|
||||
|
||||
component AnimatedText: StatusBaseText {
|
||||
id: animatedText
|
||||
verticalAlignment: Qt.AlignVCenter
|
||||
font: root.font
|
||||
wrapMode: Text.WordWrap
|
||||
elide: Text.ElideRight
|
||||
|
||||
onTextChanged: {
|
||||
if (text === "") {
|
||||
return
|
||||
}
|
||||
animate.restart()
|
||||
}
|
||||
|
||||
|
||||
StatusColorAnimation {
|
||||
id: animate
|
||||
target: animatedText
|
||||
fromColor: animatedText.color
|
||||
}
|
||||
}
|
||||
|
||||
property Component subTextComponent: AnimatedText {
|
||||
text: root.subText
|
||||
}
|
||||
|
||||
property Component additionalTextComponent: AnimatedText {
|
||||
text: root.additionalText
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
|
||||
property Component unselectedTextComponent: StatusBaseText {
|
||||
verticalAlignment: Qt.AlignVCenter
|
||||
text: root.unselectedText
|
||||
color: Theme.palette.baseColor1
|
||||
font.family: root.font.family
|
||||
font.pixelSize: root.font.pixelSize
|
||||
wrapMode: Text.WordWrap
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
property Component loaderComponent: LoadingComponent {
|
||||
radius: 4
|
||||
height: root.font.pixelSize
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
id: background
|
||||
implicitHeight: 84
|
||||
implicitWidth: 101
|
||||
radius: Theme.radius
|
||||
border.width: 1
|
||||
border.color: root.selected? Theme.palette.primaryColor1 : Theme.palette.baseColor2
|
||||
color: {
|
||||
if (root.hovered) {
|
||||
return Theme.palette.baseColor2
|
||||
}
|
||||
|
||||
if (root.selected) {
|
||||
return Theme.palette.alphaColor(Theme.palette.baseColor2, 0.1)
|
||||
}
|
||||
|
||||
return Theme.palette.statusAppLayout.backgroundColor
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: ColumnLayout {
|
||||
spacing: 4
|
||||
|
||||
RowLayout {
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: Math.max(mText.height, image.height)
|
||||
|
||||
spacing: 4
|
||||
|
||||
StatusBaseText {
|
||||
id: mText
|
||||
Layout.fillWidth: true
|
||||
verticalAlignment: Qt.AlignVCenter
|
||||
text: root.mainText
|
||||
font.family: root.font.family
|
||||
font.pixelSize: root.font.pixelSize
|
||||
wrapMode: Text.WordWrap
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
StatusImage {
|
||||
id: image
|
||||
visible: root.selected || root.hovered
|
||||
width: 22
|
||||
height: 22
|
||||
source: root.icon
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: spacer
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 8 + (unselectedTextLoader.visible? parent.spacing : 0)
|
||||
}
|
||||
|
||||
Loader {
|
||||
visible: root.showSubText
|
||||
Layout.preferredWidth: parent.width
|
||||
sourceComponent: !!root.subText? subTextComponent : loaderComponent
|
||||
}
|
||||
|
||||
Loader {
|
||||
visible: root.showAdditionalText
|
||||
Layout.preferredWidth: parent.width
|
||||
sourceComponent: !!root.additionalText? additionalTextComponent : loaderComponent
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: unselectedTextLoader
|
||||
visible: !root.selected && !!root.unselectedText
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.fillHeight: true
|
||||
sourceComponent: visible? unselectedTextComponent : loaderComponent
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: root.hovered? Qt.PointingHandCursor : undefined
|
||||
onClicked: root.clicked()
|
||||
}
|
||||
}
|
||||
@ -21,6 +21,7 @@ StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml
|
||||
StatusComboBox 0.1 StatusComboBox.qml
|
||||
StatusCommunityTag 0.1 StatusCommunityTag.qml
|
||||
StatusDropdown 0.1 StatusDropdown.qml
|
||||
StatusFeeOption 0.1 StatusFeeOption.qml
|
||||
StatusFlatButton 0.1 StatusFlatButton.qml
|
||||
StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
|
||||
StatusIconSwitch 0.1 StatusIconSwitch.qml
|
||||
|
||||
@ -8996,8 +8996,12 @@
|
||||
<file>assets/png/traffic_lights/maximize_pressed.png</file>
|
||||
<file>assets/png/traffic_lights/minimise.png</file>
|
||||
<file>assets/png/traffic_lights/minimise_pressed.png</file>
|
||||
<file>assets/png/wallet/wallet-green.png</file>
|
||||
<file>assets/png/wallet/car.png</file>
|
||||
<file>assets/png/wallet/clock.png</file>
|
||||
<file>assets/png/wallet/flying-coin.png</file>
|
||||
<file>assets/png/wallet/handwrite.png</file>
|
||||
<file>assets/png/wallet/rocket.png</file>
|
||||
<file>assets/png/wallet/wallet-green.png</file>
|
||||
<file>assets/png/status-gradient-dot.png</file>
|
||||
<file>assets/png/appearance-dark.png</file>
|
||||
<file>assets/png/appearance-light.png</file>
|
||||
|
||||
BIN
ui/StatusQ/src/assets/png/wallet/car.png
Normal file
BIN
ui/StatusQ/src/assets/png/wallet/car.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 978 B |
BIN
ui/StatusQ/src/assets/png/wallet/clock.png
Normal file
BIN
ui/StatusQ/src/assets/png/wallet/clock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
ui/StatusQ/src/assets/png/wallet/handwrite.png
Normal file
BIN
ui/StatusQ/src/assets/png/wallet/handwrite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 925 B |
BIN
ui/StatusQ/src/assets/png/wallet/rocket.png
Normal file
BIN
ui/StatusQ/src/assets/png/wallet/rocket.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@ -112,6 +112,7 @@
|
||||
<file>StatusQ/Controls/StatusComboBox.qml</file>
|
||||
<file>StatusQ/Controls/StatusCommunityTag.qml</file>
|
||||
<file>StatusQ/Controls/StatusDropdown.qml</file>
|
||||
<file>StatusQ/Controls/StatusFeeOption.qml</file>
|
||||
<file>StatusQ/Controls/StatusFlatButton.qml</file>
|
||||
<file>StatusQ/Controls/StatusFlatRoundButton.qml</file>
|
||||
<file>StatusQ/Controls/StatusIconSwitch.qml</file>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user