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

storybook/pages/StatusFeeOptionPage.qml

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

ui/StatusQ/src/StatusQ/Controls/StatusFeeOption.qml

@@ -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()
+    }
+}

ui/StatusQ/src/StatusQ/Controls/qmldir

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

ui/StatusQ/src/assets.qrc

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

ui/StatusQ/src/statusq.qrc

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