vpn order creation forms are ready

[*] DapCreateVPNOrderPanel.qml; DapNoOrdersPanel.qml; DapTextButton.qml;
DapVPNServiceTopPanel.qml
[+] DapDoubleSpinBox.qml; DapRightPanelElement.qml; DapSpinBox.qml

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>

CellFrameDashboardGUI/screen/desktop/VPNService/DapCreateVPNOrderPanel.qml

 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);
+            }
+        }
+
+    }
 
 }

CellFrameDashboardGUI/screen/desktop/VPNService/DapDoubleSpinBox.qml

+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
+    }
+}

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()

CellFrameDashboardGUI/screen/desktop/VPNService/DapRightPanelElement.qml

+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
+        }
+    }
+
+}

CellFrameDashboardGUI/screen/desktop/VPNService/DapSpinBox.qml

+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
+    }
+
+}

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

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()