From a8ef1de12905b20bd26e95499ce174c4ae2023f4 Mon Sep 17 00:00:00 2001
From: "aleksandr.ledyaev" <aleksandr.ledyaev@demlabs.net>
Date: Thu, 29 Oct 2020 01:14:24 +0300
Subject: [PATCH] vpn order creation forms are ready
[*] DapCreateVPNOrderPanel.qml; DapNoOrdersPanel.qml; DapTextButton.qml;
DapVPNServiceTopPanel.qml
[+] DapDoubleSpinBox.qml; DapRightPanelElement.qml; DapSpinBox.qml
---
CellFrameDashboardGUI/qml.qrc | 3 +
.../VPNService/DapCreateVPNOrderPanel.qml | 243 +++++++++++++++++-
.../desktop/VPNService/DapDoubleSpinBox.qml | 49 ++++
.../desktop/VPNService/DapNoOrdersPanel.qml | 8 -
.../VPNService/DapRightPanelElement.qml | 55 ++++
.../screen/desktop/VPNService/DapSpinBox.qml | 43 ++++
.../desktop/VPNService/DapTextButton.qml | 12 +-
.../VPNService/DapVPNServiceTopPanel.qml | 4 -
8 files changed, 398 insertions(+), 19 deletions(-)
create mode 100644 CellFrameDashboardGUI/screen/desktop/VPNService/DapDoubleSpinBox.qml
create mode 100644 CellFrameDashboardGUI/screen/desktop/VPNService/DapRightPanelElement.qml
create mode 100644 CellFrameDashboardGUI/screen/desktop/VPNService/DapSpinBox.qml
diff --git a/CellFrameDashboardGUI/qml.qrc b/CellFrameDashboardGUI/qml.qrc
index d0d6a58..777faa4 100755
--- a/CellFrameDashboardGUI/qml.qrc
+++ b/CellFrameDashboardGUI/qml.qrc
@@ -198,5 +198,8 @@
<file>screen/desktop/VPNService/DapTextButton.qml</file>
<file>screen/desktop/VPNService/DapCreateVPNOrderPanel.qml</file>
<file>resources/illustrations/illustration_vpn-service.svg</file>
+ <file>screen/desktop/VPNService/DapRightPanelElement.qml</file>
+ <file>screen/desktop/VPNService/DapSpinBox.qml</file>
+ <file>screen/desktop/VPNService/DapDoubleSpinBox.qml</file>
</qresource>
</RCC>
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapCreateVPNOrderPanel.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapCreateVPNOrderPanel.qml
index 8b71a0e..8cd148d 100644
--- a/CellFrameDashboardGUI/screen/desktop/VPNService/DapCreateVPNOrderPanel.qml
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapCreateVPNOrderPanel.qml
@@ -1,7 +1,246 @@
import QtQuick 2.7
+import QtQuick.Controls 2.2
+import "qrc:/widgets"
-Rectangle {
+Item {
+ id: control
- color: "green"
+ Column {
+
+ DapRightPanelElement {
+ width: control.width
+ name: qsTr("Name")
+
+ contentItem: TextField {
+ id: textName
+
+ implicitWidth: parent.width
+
+ font: quicksandFonts.medium16
+ color: "#070023"
+ selectByMouse: true
+ placeholderText: qsTr("Tittle, only you can see")
+
+ background: Item {
+ Rectangle {
+ y: parent.height - height
+ width: parent.width
+ height: pt
+ color: "#C7C6CE"
+ }
+ }
+ }
+ }
+
+ DapRightPanelElement {
+ width: control.width
+ name: qsTr("Region")
+
+ contentItem: Item {
+ implicitHeight: comboBoxRegion.heightComboBoxNormal
+ implicitWidth: parent.width
+
+ DapComboBox {
+ id: comboBoxRegion
+
+ comboBoxTextRole: ["region"]
+ anchors.centerIn: parent
+ indicatorImageNormal: "qrc:/resources/icons/ic_arrow_drop_down_dark.png"
+ indicatorImageActive: "qrc:/resources/icons/ic_arrow_drop_up.png"
+ sidePaddingNormal: 0 * pt
+ sidePaddingActive: 20 * pt
+ normalColorText: "#070023"
+ hilightColorText: "#FFFFFF"
+ normalColorTopText: "#070023"
+ hilightColorTopText: "#070023"
+ hilightColor: "#330F54"
+ normalTopColor: "transparent"
+ widthPopupComboBoxNormal: 278 * pt
+ widthPopupComboBoxActive: 318 * pt
+ heightComboBoxNormal: 24 * pt
+ heightComboBoxActive: 44 * pt
+ bottomIntervalListElement: 8 * pt
+ topEffect: false
+ normalColor: "#FFFFFF"
+ hilightTopColor: normalColor
+ paddingTopItemDelegate: 8 * pt
+ heightListElement: 32 * pt
+ intervalListElement: 10 * pt
+ indicatorWidth: 20 * pt
+ indicatorHeight: indicatorWidth
+ indicatorLeftInterval: 20 * pt
+ colorTopNormalDropShadow: "#00000000"
+ colorDropShadow: "#40ABABAB"
+ fontComboBox: [quicksandFonts.medium18]
+ colorMainTextComboBox: [["#070023", "#070023"]]
+ colorTextComboBox: [["#070023", "#FFFFFF"]]
+
+ // TODO откуда брать ÑпиÑок регионов
+ model: ListModel {
+ ListElement { region: qsTr("Europe, France") }
+ ListElement { region: qsTr("123123") }
+ ListElement { region: qsTr("123123123") }
+ }
+ }
+ }
+ }
+
+ DapRightPanelElement {
+ width: control.width
+ name: qsTr("Units")
+
+ contentItem: Item {
+ implicitWidth: parent.width
+ implicitHeight: Math.max(spinBoxUnit.implicitHeight, comboBoxUnit.heightComboBoxNormal)
+
+ DapSpinBox {
+ id: spinBoxUnit
+
+ anchors.verticalCenter: parent.verticalCenter
+ height: Math.min(implicitHeight, parent.height)
+ from: 0
+ to: 2147483647
+ }
+
+ Item {
+ anchors.right: parent.right
+ width: comboBoxUnit.widthPopupComboBoxNormal
+ height: parent.height
+
+ DapComboBox {
+ id: comboBoxUnit
+
+ comboBoxTextRole: ["unit"]
+ anchors.centerIn: parent
+ indicatorImageNormal: "qrc:/resources/icons/ic_arrow_drop_down_dark.png"
+ indicatorImageActive: "qrc:/resources/icons/ic_arrow_drop_up.png"
+ sidePaddingNormal: 0 * pt
+ sidePaddingActive: 20 * pt
+ normalColorText: "#070023"
+ hilightColorText: "#FFFFFF"
+ normalColorTopText: "#070023"
+ hilightColorTopText: "#070023"
+ hilightColor: "#330F54"
+ normalTopColor: "transparent"
+ widthPopupComboBoxNormal: 94 * pt
+ widthPopupComboBoxActive: 134 * pt
+ heightComboBoxNormal: 24 * pt
+ heightComboBoxActive: 44 * pt
+ bottomIntervalListElement: 8 * pt
+ topEffect: false
+ normalColor: "#FFFFFF"
+ hilightTopColor: normalColor
+ paddingTopItemDelegate: 8 * pt
+ heightListElement: 32 * pt
+ intervalListElement: 10 * pt
+ indicatorWidth: 20 * pt
+ indicatorHeight: indicatorWidth
+ indicatorLeftInterval: 20 * pt
+ colorTopNormalDropShadow: "#00000000"
+ colorDropShadow: "#40ABABAB"
+ fontComboBox: [quicksandFonts.medium18]
+ colorMainTextComboBox: [["#070023", "#070023"]]
+ colorTextComboBox: [["#070023", "#FFFFFF"]]
+
+ // TODO откуда брать ÑпиÑок
+ model: ListModel {
+ ListElement { unit: qsTr("hours") }
+ ListElement { unit: qsTr("days") }
+ }
+ }
+ }
+ }
+ }
+
+ DapRightPanelElement {
+ width: control.width
+ name: qsTr("Price")
+
+ contentItem: Item {
+ implicitWidth: parent.width
+ implicitHeight: Math.max(spinBoxPrice.implicitHeight, comboBoxPrice.heightComboBoxNormal)
+
+ DapDoubleSpinBox {
+ id: spinBoxPrice
+
+ anchors.verticalCenter: parent.verticalCenter
+ height: Math.min(implicitHeight, parent.height)
+ from: 0
+ to: 9999999999
+ decimals: unitsModel.get(comboBoxPrice.currentIndex).decimals
+ }
+
+ Item {
+ anchors.right: parent.right
+ width: comboBoxPrice.widthPopupComboBoxNormal
+ height: parent.height
+
+ DapComboBox {
+ id: comboBoxPrice
+
+ comboBoxTextRole: ["name"]
+ anchors.centerIn: parent
+ indicatorImageNormal: "qrc:/resources/icons/ic_arrow_drop_down_dark.png"
+ indicatorImageActive: "qrc:/resources/icons/ic_arrow_drop_up.png"
+ sidePaddingNormal: 0 * pt
+ sidePaddingActive: 20 * pt
+ normalColorText: "#070023"
+ hilightColorText: "#FFFFFF"
+ normalColorTopText: "#070023"
+ hilightColorTopText: "#070023"
+ hilightColor: "#330F54"
+ normalTopColor: "transparent"
+ widthPopupComboBoxNormal: 94 * pt
+ widthPopupComboBoxActive: 134 * pt
+ heightComboBoxNormal: 24 * pt
+ heightComboBoxActive: 44 * pt
+ bottomIntervalListElement: 8 * pt
+ topEffect: false
+ normalColor: "#FFFFFF"
+ hilightTopColor: normalColor
+ paddingTopItemDelegate: 8 * pt
+ heightListElement: 32 * pt
+ intervalListElement: 10 * pt
+ indicatorWidth: 20 * pt
+ indicatorHeight: indicatorWidth
+ indicatorLeftInterval: 20 * pt
+ colorTopNormalDropShadow: "#00000000"
+ colorDropShadow: "#40ABABAB"
+ fontComboBox: [quicksandFonts.medium18]
+ colorMainTextComboBox: [["#070023", "#070023"]]
+ colorTextComboBox: [["#070023", "#FFFFFF"]]
+
+ // TODO откуда брать ÑпиÑок
+ model: ListModel {
+ id: unitsModel
+
+ ListElement { name: "KLVN"; decimals: 7 }
+ ListElement { name: "BTC"; decimals: 2 }
+ ListElement { name: "ETH"; decimals: 4 }
+ }
+ }
+ }
+ }
+ }
+
+ Item {
+ width: 1
+ height: 36 * pt
+ }
+
+ DapTextButton {
+ anchors.horizontalCenter: parent.horizontalCenter
+ width: 132 * pt
+ height: 36 * pt
+ text: qsTr("Create")
+
+ // TODO
+ onClicked: {
+ console.log("CRATE ORDER CLICKED. name: " + textName.text + "; region: " + comboBoxRegion.currentText + "; Units: "
+ + comboBoxUnit.currentText + " " + spinBoxUnit.value + "; Price: " + comboBoxPrice.currentText + " " + spinBoxPrice.value);
+ }
+ }
+
+ }
}
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapDoubleSpinBox.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapDoubleSpinBox.qml
new file mode 100644
index 0000000..9c916ad
--- /dev/null
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapDoubleSpinBox.qml
@@ -0,0 +1,49 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+
+Control {
+ id: control
+
+ property int decimals: 2
+ property double from: 0.0
+ property double to: 100.0
+ property double value: 0.0
+ property int inputMethodHints: Qt.ImhFormattedNumbersOnly
+
+ property var validator: DoubleValidator {
+ locale: control.locale.name
+ bottom: control.from
+ top: control.to
+ decimals: control.decimals
+ notation: DoubleValidator.StandardNotation
+ }
+
+ property var textFromValue: function(value, locale) { return Number(value).toLocaleString(locale, 'f', control.decimals) }
+ property var valueFromText: function(text, locale) { return Number.fromLocaleString(locale, text) }
+
+ padding: 4 * pt
+ font: quicksandFonts.medium16
+
+ contentItem: TextInput {
+ text: control.textFromValue(control.value, control.locale)
+
+ font: control.font
+ color: "#3E3853"
+ horizontalAlignment: Qt.AlignRight
+ verticalAlignment: Qt.AlignVCenter
+
+ validator: control.validator
+ inputMethodHints: control.inputMethodHints
+ selectByMouse: true
+
+ onEditingFinished: control.value = control.valueFromText(text, control.locale)
+ }
+
+ background: Rectangle {
+ implicitWidth: 140 * pt
+ color: "#00000000"
+ border.width: pt
+ border.color: "#B4B1BD"
+ radius: 4 * pt
+ }
+}
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapNoOrdersPanel.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapNoOrdersPanel.qml
index 85ea163..54d0aea 100644
--- a/CellFrameDashboardGUI/screen/desktop/VPNService/DapNoOrdersPanel.qml
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapNoOrdersPanel.qml
@@ -25,14 +25,6 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
width: 163 * pt
height: 36 * pt
-
- textColor: "#FFFFFF"
- textColorHover: "#FFFFFF"
- backgroundColor: "#271C4E"
- backgroundColorHover: "#D51F5D"
-
- backgroudRadius: 4 * pt
- font: quicksandFonts.medium14
text: qsTr("New VPN order")
onClicked: control.newVPNOrder()
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapRightPanelElement.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapRightPanelElement.qml
new file mode 100644
index 0000000..ad34129
--- /dev/null
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapRightPanelElement.qml
@@ -0,0 +1,55 @@
+import QtQuick 2.7
+
+Item {
+ id: control
+
+ property string name
+
+ property int horizontalAlignment: Qt.AlignLeft
+ property Item contentItem
+
+ property real leftMargin: 36 * pt
+ property real topMargin: 22 * pt
+ property real rightMargin: 36 * pt
+ property real bottomMargin: 22 * pt
+
+ implicitWidth: Math.max(contentItem.implicitWidth + leftMargin + rightMargin, textName.implicitWidth + textName.x)
+ implicitHeight: nameBackground.height + contentItem.implicitHeight + topMargin + bottomMargin
+
+ onContentItemChanged: {
+ contentItem.parent = control;
+ contentItem.width = Qt.binding(function(){ return Math.min(contentItem.implicitWidth, control.width - control.leftMargin - control.rightMargin) });
+ contentItem.height = Qt.binding(function(){ return Math.min(contentItem.implicitHeight, control.height - control.topMargin - control.bottomMargin) });
+ contentItem.x = Qt.binding(function(){
+ if (control.horizontalAlignment & Qt.AlignHCenter) {
+ return control.leftMargin + (control.width - control.leftMargin - control.rightMargin - contentItem.width) / 2;
+ } else /*if (control.horizontalAlignment & Qt.AlignLeft)*/ {
+ return control.leftMargin;
+ }
+ });
+ contentItem.y = Qt.binding(function(){
+ return nameBackground.height + control.topMargin + (control.height - nameBackground.height - control.topMargin - control.bottomMargin - contentItem.height) / 2;
+ });
+ }
+
+ Rectangle {
+ id: nameBackground
+
+ width: parent.width
+ height: 30 * pt
+
+ color: "#3E3853"
+
+ Text {
+ id: textName
+
+ x: 15 * pt
+ anchors.verticalCenter: parent.verticalCenter
+ font: quicksandFonts.medium12
+ elide: Text.ElideRight
+ color: "#FFFFFF"
+ text: control.name
+ }
+ }
+
+}
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapSpinBox.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapSpinBox.qml
new file mode 100644
index 0000000..1f6ebce
--- /dev/null
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapSpinBox.qml
@@ -0,0 +1,43 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+
+SpinBox {
+ id: control
+
+ padding: 4 * pt
+ font: quicksandFonts.medium16
+ editable: true
+ inputMethodHints: Qt.ImhFormattedNumbersOnly
+
+ validator: IntValidator {
+ locale: control.locale.name
+ top: control.to
+ bottom: control.from
+ }
+
+ contentItem: TextInput {
+ text: control.textFromValue(control.value, control.locale)
+
+ font: control.font
+ color: "#3E3853"
+ horizontalAlignment: Qt.AlignRight
+ verticalAlignment: Qt.AlignVCenter
+
+ readOnly: !control.editable
+ validator: control.validator
+ inputMethodHints: control.inputMethodHints
+ selectByMouse: true
+ }
+
+ up.indicator: null
+ down.indicator: null
+
+ background: Rectangle {
+ implicitWidth: 140 * pt
+ color: "#00000000"
+ border.width: pt
+ border.color: "#B4B1BD"
+ radius: 4 * pt
+ }
+
+}
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapTextButton.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapTextButton.qml
index 9d22991..b381219 100644
--- a/CellFrameDashboardGUI/screen/desktop/VPNService/DapTextButton.qml
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapTextButton.qml
@@ -4,14 +4,16 @@ import QtQuick.Controls 2.2
Button {
id: control
- property color textColor
- property color textColorHover
- property color backgroundColor
- property color backgroundColorHover
- property real backgroudRadius: 0
+ property color textColor: "#FFFFFF"
+ property color textColorHover: "#FFFFFF"
+ property color backgroundColor: "#271C4E"
+ property color backgroundColorHover: "#D51F5D"
+ property real backgroudRadius: 4 * pt
property int borderWidth: 0
property color borderColor
+ font: quicksandFonts.medium14
+
contentItem: Text {
font: control.font
elide: Text.ElideRight
diff --git a/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTopPanel.qml b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTopPanel.qml
index 1516c97..11c3631 100644
--- a/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTopPanel.qml
+++ b/CellFrameDashboardGUI/screen/desktop/VPNService/DapVPNServiceTopPanel.qml
@@ -17,15 +17,11 @@ DapTopPanel {
width: 163 * pt
height: 36 * pt
- textColor: "#FFFFFF"
- textColorHover: "#FFFFFF"
backgroundColor: "#00000000"
backgroundColorHover: "#D51F5D"
- backgroudRadius: 4 * pt
borderWidth: hovered ? 0 : pt
borderColor: "#FFFFFF"
- font: quicksandFonts.medium14
text: qsTr("New VPN order")
onClicked: control.newVPNOrder()
--
GitLab