New dark mode design && lots of new items

1 files changed, 530 insertions, 70 deletions

diff --git a/main.qml b/main.qml
index aebaa6d..abd189c 100644
--- a/main.qml
+++ b/main.qml
@@ -2,40 +2,118 @@ import QtQuick 2.9
 import QtQuick.Window 2.2
 import QtQuick.Extras 1.4
 import QtQuick.Controls 2.3
+import QtQuick.Dialogs 1.1
+import QtQuick.Controls.Material 2.0
 
+ApplicationWindow {
+    Material.theme: Material.Dark
+    Material.accent: Material.Blue
 
-Window {
-    width: 400
-    height: 125
+    property int normal_width: 700
+    property int normal_height: 400
+
+    width: normal_width
+    height: normal_height
 
     // Make window not resizeable
-    maximumHeight: height
-    maximumWidth: width
+    maximumWidth: normal_width * 1.25
+    maximumHeight: normal_height * 1.25
 
     // Make window not resizeable
-    minimumHeight: height
-    minimumWidth: width
+    minimumWidth: 500
+    minimumHeight: 300
 
     id: window
     visible: true
-    opacity: 1
     title: qsTr("Remote Support for your Desktop")
 
-    Text {
+    onClosing: {
+        mainqmladaptor.onCloseHandler();
+        console.log("Cleanup done, can close!");
+    }
+
+    Button {
+        id: start_support_button
+        objectName: "start_support_button"
+        text: qsTr("Start remote support session")
+        anchors.topMargin: parent.height * 0.025
+        anchors.left: pin_group.left
+        anchors.leftMargin: 0
+        anchors.top: pin_group.bottom
+        checkable: true
+
+        onClicked: session.handleConnectButtonClick(checked);
+    }
+
+    MessageDialog {
+        id: message_dialog
+        objectName: "message_dialog"
+        title: qsTr("Remote Support for your Desktop")
+        text: qsTr("You are not supposed to see this message.\nThis is a bug.")
+        icon: StandardIcon.Critical
+    }
+
+    Connections {
+        target: mainqmladaptor
+        onShowMessageDialogChanged: {
+            message_dialog.visible = show
+        }
+    }
+
+    Connections {
+        target: mainqmladaptor
+        onMessageDialogTextChanged: {
+            message_dialog.text = text
+        }
+    }
+
+    Connections {
+        target: mainqmladaptor
+        onMessageDialogTitleChanged: {
+            console.log("title: "+title);
+            message_dialog.title = title
+        }
+    }
+
+    Connections {
+        target: mainqmladaptor
+        onMessageDialogIconChanged: {
+            message_dialog.icon = iconindex
+        }
+    }
+
+    Label {
+        id: explain_function_label
+        y: 115
+        width: window.width * 0.4
+        height: window.height/2
+        text: qsTr("Please tell your partner your PIN and the Support URL to connect to this computer")
+        font.family: "Verdana"
+        font.pointSize: 12
+        visible: true
+        enabled: false
+        anchors.left: parent.left
+        anchors.leftMargin: 15
+        wrapMode: Text.WordWrap
+        anchors.verticalCenterOffset: 0
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Label {
         id: dbus_api_status_text
-        y: 89
+        objectName: "dbus_api_status_text"
         text: qsTr("Unknown state of service")
         font.family: "Verdana"
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: 5
+        anchors.bottomMargin: 15
         anchors.left: parent.left
-        anchors.leftMargin: 5
+        anchors.leftMargin: 15
         font.pixelSize: 12
     }
 
     StatusIndicator {
         id: dbus_api_status_indicator
-        y: 110
+        objectName: "dbus_api_status_indicator"
         width: 15
         height: 15
         color: "#73d216"
@@ -47,67 +125,449 @@ Window {
         active: false
     }
 
-    DelayButton {
-        id: start_support_button
-        x: 5
-        width: 350
-        height: 30
-        text: qsTr("Allow remote desktop support")
-        anchors.top: pin_text.bottom
-        anchors.topMargin: 5
-        anchors.horizontalCenterOffset: 0
-        anchors.horizontalCenter: pin_text.horizontalCenter
-        wheelEnabled: false
-        font.wordSpacing: 0
-        spacing: 0
-        font.weight: Font.Normal
-        antialiasing: false
-        font.bold: true
-        font.family: "Verdana"
-        checkable: true
-        autoRepeat: true
-        autoExclusive: false
-        display: AbstractButton.TextBesideIcon
-        checked: false
+    Item {
+        id: url_group
+        objectName: "url_group"
+        x: 301
+        y: 154
+        width: parent.width / 2
+        height: parent.height * 0.25
+        anchors.verticalCenterOffset: -height/2
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+
+        Rectangle {
+            id: your_url_seperator
+            x: 47
+            y: 39
+            width: 320
+            height: 1
+            color: "#00000000"
+            visible: false
+            border.color: "#e6e6e6"
+        }
+
+        Button {
+            id: copy_url_to_clipboard_button
+            x: 460
+            y: 2
+            width: copy_url_to_clipboard_image.width + 6
+            height: copy_url_to_clipboard_image.height + 6 + 10
+            anchors.verticalCenter: url_text.verticalCenter
+            flat: true
+            display: AbstractButton.IconOnly
+            anchors.leftMargin: 5
+            highlighted: false
+            anchors.left: url_text.right
+
+            Image {
+                id: copy_url_to_clipboard_image
+                x: -230
+                y: -2
+                opacity: 0.65
+                fillMode: Image.PreserveAspectFit
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                //visible: false
+                source: "images/into-clipboard.svg"
+            }
+
+            onClicked: {
+                mainqmladaptor.handleCopyToClipboardButtonClick(url_text.text);
+            }
+
+            ToolTip.text: qsTr("Copy the URL into the clipboard")
+            hoverEnabled: true
+
+            ToolTip.delay: 1000
+            ToolTip.timeout: 5000
+            ToolTip.visible: hovered
+        }
+
+        Label {
+            id: url_text
+            y: 0
+            width: parent.width - copy_url_to_clipboard_button.width - 5
+            height: parent.height/2
+            text: session.url
+            font.bold: true
+            font.pointSize: 14
+            fontSizeMode: Text.Fit
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            anchors.topMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            anchors.top: your_url_text.bottom
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignRight
+            anchors.bottom: pin_text.top
+            anchors.bottomMargin: 5
+        }
+
+        Label {
+            id: your_url_text
+            y: 0
+            width: parent.width
+            height: parent.height/2
+            text: qsTr("Remote Support URL")
+            font.pointSize: 14
+            fontSizeMode: Text.Fit
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            anchors.top: parent.top
+            anchors.topMargin: 0
+            anchors.bottom: your_pin_text.top
+            verticalAlignment: Text.AlignBottom
+            anchors.bottomMargin: 5
+            clip: false
+            horizontalAlignment: Text.AlignLeft
+        }
     }
 
-    Text {
-        id: your_pin_text
-        width: 210
-        height: 15
-        text: qsTr("Access pin to this computer")
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-        anchors.horizontalCenterOffset: 0
-        anchors.horizontalCenter: parent.horizontalCenter
-        clip: false
+    Item {
+        id: pin_group
+        x: 379
+        y: 183
+        width: parent.width/2
+        objectName: "pin_group"
+        height: parent.height * 0.25
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.verticalCenterOffset: height/2
+        anchors.verticalCenter: parent.verticalCenter
+
+        Button {
+            id: copy_pin_to_clipboard_button
+            x: 460
+            y: 97
+            width: copy_pin_to_clipboard_image.width + 6
+            height: copy_pin_to_clipboard_image.height + 6 + 10
+            anchors.verticalCenterOffset: 0
+            anchors.verticalCenter: pin_text.verticalCenter
+            flat: true
+            display: AbstractButton.IconOnly
+            anchors.left: pin_text.right
+            anchors.leftMargin: 5
+
+            Image {
+                id: copy_pin_to_clipboard_image
+                x: -230
+                y: -2
+                opacity: 0.65
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                source: "images/into-clipboard.svg"
+                fillMode: Image.PreserveAspectFit
+            }
+
+            onClicked: {
+                mainqmladaptor.handleCopyToClipboardButtonClick(pin_text.text);
+            }
+
+            ToolTip.text: qsTr("Copy the pin into the clipboard")
+            hoverEnabled: true
+
+            ToolTip.delay: 1000
+            ToolTip.timeout: 5000
+            ToolTip.visible: hovered
+        }
+
+        Label {
+            objectName: "pin_text"
+            id: pin_text
+            width: parent.width - 5 - copy_pin_to_clipboard_button.width
+            height: parent.height/2
+            text: session.pin
+            font.bold: true
+            font.pointSize: 20
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            anchors.top: your_pin_text.bottom
+            anchors.topMargin: 0
+            font.letterSpacing: 10
+            horizontalAlignment: Text.AlignRight
+            verticalAlignment: Text.AlignVCenter
+            fontSizeMode: Text.VerticalFit
+        }
+
+        Label {
+            id: your_pin_text
+            x: 15
+            width: parent.width
+            height: parent.height/2
+            text: qsTr("Access pin to this computer")
+            font.pointSize: 14
+            anchors.top: parent.top
+            anchors.topMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            verticalAlignment: Text.AlignBottom
+            horizontalAlignment: Text.AlignLeft
+            clip: false
+            fontSizeMode: Text.Fit
+        }
+
+        Rectangle {
+            id: your_pin_seperator
+            x: 46
+            y: 76
+            width: 320
+            height: 1
+            color: "#00000000"
+            visible: false
+            border.color: "#e6e6e6"
+        }
+    }
+
+    Rectangle {
+        id: top_menu_bar_rect
+        width: parent.width
+        height: parent.height * 0.10
+        color: "#0d5eaf"
+        anchors.left: parent.left
+        anchors.leftMargin: 0
         anchors.top: parent.top
-        anchors.topMargin: 15
-        font.family: "Verdana"
-        fontSizeMode: Text.Fit
-        font.pixelSize: 16
+        anchors.topMargin: 0
+
+        Label {
+            id: header_text
+            y: 19
+            width: parent.width * 0.90
+            height: parent.height
+            text: qsTr("Allow Remote Control")
+            padding: 5
+            font.family: "Verdana"
+            font.pointSize: 20
+            fontSizeMode: Text.Fit
+            verticalAlignment: Text.AlignVCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 5
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignRight
+        }
+
+        Button {
+            id: sidemenu_open_button
+            width: sidemenu_open_image.width
+            height: parent.height + 10
+            text: ""
+            hoverEnabled: true
+            display: AbstractButton.IconOnly
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            anchors.top: parent.top
+            anchors.topMargin: -5
+            flat: true
+
+            onClicked: page.visible = page.visible ? false : true, checked = false
+
+            Image {
+                id: sidemenu_open_image
+                x: -5
+                y: -4
+                width: 40
+                height: 40
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                source: "images/menubar.png"
+                fillMode: Image.PreserveAspectFit
+            }
+        }
     }
 
-    Text {
-        objectName: "pin_text"
-        id: pin_text
-        x: 235
+    Page {
+        id: page
+        x: 0
+        y: 0
         width: 210
-        height: 28
-        // ':' translation info
-        //: Do not translate!
-        //: The supporter needs to authenticate in the remote web app (django) frontend with this pin
-        text: qsTr("%1").arg(pin)
-        property string pin: "-----"
-        font.letterSpacing: 10
-        anchors.horizontalCenterOffset: 0
-        font.pixelSize: 26
-        anchors.horizontalCenter: your_pin_text.horizontalCenter
-        anchors.top: your_pin_text.bottom
-        anchors.topMargin: 5
-        font.family: "Verdana"
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        fontSizeMode: Text.Fit
-    }
+        height: 400
+        visible: false
+
+        Image {
+            id: logo_image
+            x: 640
+            y: 17
+            width: 50
+            height: 50
+            visible: true
+            anchors.left: parent.left
+            anchors.leftMargin: 14
+            clip: false
+            anchors.top: parent.top
+            anchors.topMargin: 11
+            source: "images/logo.png"
+            fillMode: Image.PreserveAspectFit
+        }
+
+        Text {
+            id: element2
+            x: 14
+            y: 85
+            width: 180
+            height: 27
+            text: qsTr("Remote Control")
+            fontSizeMode: Text.FixedSize
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignLeft
+        }
+
+        Text {
+            id: element3
+            x: 14
+            y: 118
+            width: 180
+            height: 27
+            text: qsTr("Remote View")
+            font.pointSize: 12
+            verticalAlignment: Text.AlignVCenter
+            fontSizeMode: Text.FixedSize
+            horizontalAlignment: Text.AlignLeft
+        }
+
+        Text {
+            id: element4
+            x: 14
+            y: 151
+            width: 181
+            height: 31
+            text: qsTr("Settings")
+            fontSizeMode: Text.FixedSize
+            verticalAlignment: Text.AlignVCenter
+            font.pointSize: 12
+        }
+
+        Button {
+            id: button1
+            x: 171
+            y: 0
+            width: 40
+            height: 40
+            text: qsTr("x")
+            checkable: true
+            flat: true
+
+            onClicked: page.visible = page.visible ? false : true, checked = false
+        }
+        }
+
+        }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*##^## Designer {
+    D{i:1;anchors_x:0;anchors_y:339}D{i:5;anchors_x:0}D{i:7;anchors_x:15;anchors_y:115}
+D{i:14;anchors_x:47}D{i:10;anchors_y:154}D{i:19;anchors_height:35;anchors_x:73;anchors_y:35}
+D{i:20;anchors_y:0}D{i:16;anchors_height:35;anchors_width:350;anchors_x:379;anchors_y:183}
+D{i:24;anchors_x:15;anchors_y:17}D{i:22;anchors_x:0;anchors_y:0}
 }
+ ##^##*/