implement qml UI

client/ui/qml/PageSites.qml

@@ -0,0 +1,157 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "./"
+import Qt.labs.qmlmodels 1.0
+Item {
+    id: root
+    width: GC.screenWidth
+    height: GC.screenHeight
+    Text {
+        font.family: "Lato"
+        font.styleName: "normal"
+        font.pixelSize: 16
+        color: "#333333"
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        text: qsTr("Web site/Hostname/IP address/Subnet")
+        x: 20
+        y: 110
+        width: 311
+        height: 21
+    }
+    Text {
+        font.family: "Lato"
+        font.styleName: "normal"
+        font.pixelSize: 20
+        color: "#100A44"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignTop
+        text: qsTr("These sites will be opened using VPN")
+        x: 20
+        y: 40
+        width: 340
+        height: 60
+    }
+    TextFieldType {
+        x: 20
+        y: 140
+        width: 231
+        height: 31
+        placeholderText: qsTr("yousite.com or IP address")
+    }
+    ImageButtonType {
+        id: back
+        x: 10
+        y: 10
+        width: 26
+        height: 20
+        icon.source: "qrc:/images/arrow_left.png"
+        onClicked: {
+            UiLogic.closePage()
+        }
+    }
+    BlueButtonType {
+        id: sites_add
+        x: 260
+        y: 140
+        width: 51
+        height: 31
+        font.pixelSize: 24
+        text: "+"
+    }
+    BlueButtonType {
+        id: sites_delete
+        x: 80
+        y: 589
+        width: 231
+        height: 31
+        font.pixelSize: 16
+        text: qsTr("Delete selected")
+    }
+
+    BasicButtonType {
+        id: sites_import
+        x: 320
+        y: 140
+        width: 51
+        height: 31
+        background: Rectangle {
+            anchors.fill: parent
+            radius: 4
+            color: parent.containsMouse ? "#211966" : "#100A44"
+        }
+        font.pixelSize: 16
+        contentItem: Item {
+            anchors.fill: parent
+            Image {
+                anchors.centerIn: parent
+                width: 20
+                height: 20
+                source: "qrc:/images/folder.png"
+                fillMode: Image.Stretch
+            }
+        }
+        antialiasing: true
+    }
+    TableView {
+        id: tb
+        x: 20
+        y: 200
+        width: 341
+        height: 371
+        rowSpacing: 1
+        clip: true
+        property int currentRow: -1
+        columnSpacing: 0
+        model: TableModel {
+            TableModelColumn { display: "name" }
+            TableModelColumn { display: "color" }
+
+            rows: [
+                {
+                    "name": "cat",
+                    "color": "black"
+                },
+                {
+                    "name": "dog",
+                    "color": "brown"
+                },
+                {
+                    "name": "bird",
+                    "color": "white"
+                }
+            ]
+        }
+
+        delegate: Item {
+            implicitWidth: 170
+            implicitHeight: 30
+            Rectangle {
+                anchors.top: parent.top
+                width: parent.width
+                height: 1
+                color: "lightgray"
+                visible: row !== tb.currentRow
+            }
+            Rectangle {
+                anchors.fill: parent
+                color: "#63B4FB"
+                visible: row === tb.currentRow
+
+            }
+
+            Text {
+                text: display
+                anchors.fill: parent
+                leftPadding: 10
+                verticalAlignment: Text.AlignVCenter
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    tb.currentRow = row
+                }
+            }
+        }
+    }
+}