Complete new more responsive layout; introducing session_id

8 files changed, 673 insertions, 410 deletions

diff --git a/images/menubar.png b/images/menubar.png
deleted file mode 100644
index ae9b91a..0000000
--- a/images/menubar.png
+++ /dev/null
diff --git a/locales/de_DE.ts b/locales/de_DE.ts
index b725504..319b334 100644
--- a/locales/de_DE.ts
+++ b/locales/de_DE.ts
@@ -165,7 +165,7 @@ Ist der Dienst vielleicht nicht an?</translation>
     </message>
     <message>
         <source>Settings</source>
-        <translation type="vanished">Einstellungen</translation>
+        <translation>Einstellungen</translation>
     </message>
     <message>
         <source>You are not supposed to see this message.
@@ -202,7 +202,19 @@ This is a bug.</source>
     </message>
     <message>
         <source>Personal Access-PIN</source>
-        <translation>Persönliche Zugangs-PIN</translation>
+        <translation type="vanished">Persönliche Zugangs-PIN</translation>
+    </message>
+    <message>
+        <source>Title %1</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <source>Dark theme</source>
+        <translation>Dunkelmodus</translation>
+    </message>
+    <message>
+        <source>Access-PIN</source>
+        <translation>Zugangs-PIN</translation>
     </message>
 </context>
 </TS>
diff --git a/main.qml b/main.qml
index 56f148d..bdb4159 100644
--- a/main.qml
+++ b/main.qml
@@ -27,28 +27,26 @@
 import QtQuick 2.9
 import QtQuick.Window 2.2
 import QtQuick.Extras 1.4
-import QtQuick.Controls 2.0
+import QtQuick.Controls 2.2
 import QtQuick.Dialogs 1.2
 import QtQuick.Controls.Material 2.3
 
 ApplicationWindow {
-    property int normal_width: 700
-    property int normal_height: 400
-
-    ToastManager {
-        id: toast
-    }
-
-    width: normal_width
-    height: normal_height
+    readonly property int normal_width: 650
+    readonly property int normal_height: 500
+    readonly property bool inPortrait: window.width < window.height
 
+    /*
     // Make window not resizeable
     maximumWidth: normal_width * 1.25
-    maximumHeight: normal_height * 1.25
+    maximumHeight: normal_height * 1.25*/
 
     // Make window not resizeable
-    minimumWidth: 500
-    minimumHeight: 300
+    minimumWidth: 400
+    minimumHeight: 460
+
+    width: normal_width
+    height: normal_height
 
     id: window
     visible: true
@@ -68,19 +66,6 @@ ApplicationWindow {
         console.log("Opening window now...");
     }
 
-    Button {
-        id: start_support_button
-        objectName: "start_support_button"
-        text: qsTr("Start remote support session")
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 15
-        anchors.right: parent.right
-        anchors.rightMargin: 15
-        checkable: true
-
-        onClicked: mainqmladaptor.handleConnectButtonClick(checked);
-    }
-
     MessageDialog {
         id: message_dialog
         objectName: "message_dialog"
@@ -103,6 +88,369 @@ ApplicationWindow {
         }
     }
 
+
+    Item {
+        id: main_content
+        anchors.leftMargin: 0
+        anchors.top: top_menu_bar_frame.bottom
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.topMargin: 0
+
+        StackView {
+            id: main_content_view
+
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 0
+            anchors.leftMargin: !inPortrait ? (window.width * 0.25) : 0
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.topMargin: 0
+
+            Label {
+                id: dbus_api_status_text
+                text: "Unknown state of Service"
+                anchors.leftMargin: 10 + 5 + dbus_api_status_indicator.width
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 10
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                verticalAlignment: Text.AlignVCenter
+                font.pointSize: 11
+                fontSizeMode: Text.Fit
+                objectName: "dbus_api_status_text"
+                anchors.left: parent.left
+
+                StatusIndicator {
+                    id: dbus_api_status_indicator
+                    width: height
+                    height: parent.height
+                    objectName: "dbus_api_status_indicator"
+                    color: "#73d216"
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.right: parent.left
+                    anchors.rightMargin: 5
+                    active: false
+                }
+            }
+
+            Label {
+                id: explain_function_label
+                text: qsTr("Please tell your remote support partner your access address and your access-PIN to let your partner connect to this computer.")
+                font.pixelSize: 18
+                fontSizeMode: Text.VerticalFit
+                wrapMode: Text.WordWrap
+                anchors.left: parent.left
+                anchors.leftMargin: 10
+                anchors.top: parent.top
+                anchors.topMargin: 10
+                anchors.right: parent.right
+                anchors.rightMargin: 10
+                horizontalAlignment: Text.AlignLeft
+                enabled: false
+
+                color: Material.theme == Material.Light ? "#000000" : "#FFFFFF"
+            }
+
+            Rectangle {
+                id: dbus_api_status_line
+                y: 379
+                height: 1
+                radius: 1
+                anchors.right: parent.right
+                anchors.rightMargin: 10
+                anchors.bottom: dbus_api_status_text.top
+                anchors.bottomMargin: 10
+                opacity: 0.3
+                gradient: Gradient {
+                    GradientStop {
+                        position: 0.391
+                        color: "#ffffff"
+                    }
+
+                    GradientStop {
+                        position: 0.975
+                        color: "#8b8b8b"
+                    }
+                }
+                border.width: 1
+                border.color: "#00000000"
+                anchors.left: parent.left
+                anchors.leftMargin: 10
+            }
+
+            Column {
+                id: column
+                spacing: 5
+                anchors.right: parent.right
+                anchors.rightMargin: 10
+                anchors.left: parent.left
+                anchors.leftMargin: 10
+                anchors.bottom: dbus_api_status_line.top
+                anchors.bottomMargin: 10
+                anchors.top: explain_function_label.bottom
+                anchors.topMargin: 10
+
+                Column {
+                    id: url_group
+                    width: parent.width
+                    height: parent.height * 0.25
+                    spacing: 5
+
+                    Label {
+                        id: your_url_text
+                        height: parent.height/2
+                        text: qsTr("Remote Support Address")
+                        verticalAlignment: Text.AlignBottom
+                        horizontalAlignment: Text.AlignLeft
+                        font.pointSize: 14
+                        fontSizeMode: Text.Fit
+                    }
+
+                    TextEdit {
+                        id: url_text
+                        height: parent.height/2
+                        text: mainqmladaptor.url
+                        anchors.rightMargin: 10 + copy_url_to_clipboard_button.width
+                        anchors.right: parent.right
+                        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                        anchors.leftMargin: 10
+                        verticalAlignment: Text.AlignVCenter
+                        horizontalAlignment: Text.AlignLeft
+                        font.pointSize: 15
+                        /*fontSizeMode: Text.Fit
+
+                        background: Rectangle {
+                            color: Material.theme == Material.Light ? "#F0F0F0" : "#383838"
+                            radius: 5
+                        }*/
+                        readOnly: true
+                        color: Material.foreground
+                        //wrapMode: Text.WordWrap
+                        selectByMouse: true
+                        font.bold: true
+                        anchors.left: parent.left
+
+                        Button {
+                            id: copy_url_to_clipboard_button
+                            width: copy_url_to_clipboard_image.width + 6
+                            height: copy_url_to_clipboard_image.height + 6 + 10
+                            anchors.verticalCenter: parent.verticalCenter
+                            display: AbstractButton.IconOnly
+                            anchors.leftMargin: 5
+                            anchors.left: url_text.right
+                            highlighted: false
+                            flat: true
+
+                            Image {
+                                id: copy_url_to_clipboard_image
+                                x: 0
+                                y: -26
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                anchors.verticalCenter: parent.verticalCenter
+                                source: "images/into-clipboard.svg"
+                                opacity: 0.65
+                            }
+
+                            onClicked: {
+                                mainqmladaptor.handleCopyToClipboardButtonClick(url_text.text);
+                                toast.show(qsTr("Copied access address into clipboard!"), "1000");
+                            }
+
+                            ToolTip.text: qsTr("Copy the access address into the clipboard")
+                            hoverEnabled: true
+
+                            ToolTip.delay: 1000
+                            ToolTip.timeout: 5000
+                            ToolTip.visible: hovered
+                        }
+                    }
+                }
+
+                Column {
+                    id: pin_group
+                    width: parent.width
+                    height: parent.height * 0.25
+                    spacing: 5
+
+                    Label {
+                        id: your_pin_text
+                        height: parent.height/2
+                        text: qsTr("Access-PIN")
+                        anchors.right: parent.right
+                        anchors.rightMargin: 0
+                        anchors.left: parent.left
+                        anchors.leftMargin: 0
+                        font.pointSize: 14
+                        verticalAlignment: Text.AlignBottom
+                        horizontalAlignment: Text.AlignLeft
+                    }
+
+                    TextEdit {
+                        objectName: "pin_text"
+                        id: pin_text
+                        height: parent.height/2
+                        text: mainqmladaptor.pin
+                        font.weight: Font.Bold
+                        font.bold: true
+                        anchors.rightMargin: 10 + copy_pin_to_clipboard_button.width
+                        anchors.right: parent.right
+                        font.pointSize: 20
+                        anchors.left: parent.left
+                        anchors.leftMargin: 10
+                        font.letterSpacing: 10
+                        horizontalAlignment: Text.AlignLeft
+                        verticalAlignment: Text.AlignVCenter
+                        /*fontSizeMode: Text.Fit
+
+                        background: Rectangle {
+                            color: Material.theme == Material.Light ? "#F0F0F0" : "#383838"
+                            radius: 5
+                        }*/
+                        readOnly: true
+                        color: Material.foreground
+                        wrapMode: Text.WordWrap
+                        selectByMouse: true
+
+                        Button {
+                            id: copy_pin_to_clipboard_button
+                            width: copy_pin_to_clipboard_image.width + 6
+                            height: copy_pin_to_clipboard_image.height + 6 + 10
+                            anchors.verticalCenter: parent.verticalCenter
+                            flat: true
+                            display: AbstractButton.IconOnly
+                            anchors.left: pin_text.right
+                            anchors.leftMargin: 5
+
+                            Image {
+                                id: copy_pin_to_clipboard_image
+                                anchors.verticalCenter: parent.verticalCenter
+                                opacity: 0.65
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                source: "images/into-clipboard.svg"
+                                fillMode: Image.PreserveAspectFit
+                            }
+
+                            onClicked: {
+                                mainqmladaptor.handleCopyToClipboardButtonClick(pin_text.text);
+                                toast.show(qsTr("Copied PIN into clipboard!"), "1000");
+                            }
+
+                            ToolTip.text: qsTr("Copy the pin into the clipboard")
+                            hoverEnabled: true
+
+                            ToolTip.delay: 1000
+                            ToolTip.timeout: 5000
+                            ToolTip.visible: hovered
+                        }
+                    }
+                }
+
+                Column {
+                    id: session_id_group
+                    width: parent.width
+                    height: parent.height * 0.25
+                    spacing: 5
+
+                    Label {
+                        id: your_session_id_text
+                        height: parent.height/2
+                        text: qsTr("Session-ID")
+                        anchors.right: parent.right
+                        anchors.rightMargin: 0
+                        anchors.left: parent.left
+                        anchors.leftMargin: 0
+                        font.pointSize: 14
+                        verticalAlignment: Text.AlignBottom
+                        horizontalAlignment: Text.AlignLeft
+                        fontSizeMode: Text.Fit
+                    }
+
+                    TextEdit {
+                        objectName: "session_id_text"
+                        id: session_id_text
+                        height: parent.height/2
+                        text: mainqmladaptor.session_id
+                        font.weight: Font.Bold
+                        font.bold: true
+                        font.letterSpacing: 10
+                        anchors.rightMargin: 10 + copy_session_id_to_clipboard_button.width
+                        anchors.right: parent.right
+                        font.pointSize: 20
+                        anchors.left: parent.left
+                        anchors.leftMargin: 10
+                        horizontalAlignment: Text.AlignLeft
+                        verticalAlignment: Text.AlignVCenter
+                        /*fontSizeMode: Text.Fit
+
+                        background: Rectangle {
+                            color: Material.theme == Material.Light ? "#F0F0F0" : "#383838"
+                            radius: 5
+                        }*/
+                        readOnly: true
+                        color: Material.foreground
+                        wrapMode: Text.WordWrap
+                        selectByMouse: true
+
+                        Button {
+                            id: copy_session_id_to_clipboard_button
+                            width: copy_session_id_to_clipboard_image.width + 6
+                            height: copy_session_id_to_clipboard_image.height + 6 + 10
+                            anchors.verticalCenter: parent.verticalCenter
+                            flat: true
+                            display: AbstractButton.IconOnly
+                            anchors.left: session_id_text.right
+                            anchors.leftMargin: 5
+
+                            Image {
+                                id: copy_session_id_to_clipboard_image
+                                opacity: 0.65
+                                anchors.verticalCenter: parent.verticalCenter
+                                source: "images/into-clipboard.svg"
+                                fillMode: Image.PreserveAspectFit
+                            }
+
+                            onClicked: {
+                                mainqmladaptor.handleCopyToClipboardButtonClick(pin_text.text);
+                                toast.show(qsTr("Copied session-ID into clipboard!"), "1000");
+                            }
+
+                            ToolTip.text: qsTr("Copy the session-ID into the clipboard")
+                            hoverEnabled: true
+
+                            ToolTip.delay: 1000
+                            ToolTip.timeout: 5000
+                            ToolTip.visible: hovered
+                        }
+                    }
+                }
+
+                Button {
+                    id: start_support_button
+                    height: Math.min(70, parent.height * 0.222)
+                    objectName: "start_support_button"
+                    text: qsTr("Start remote support session")
+                    anchors.right: parent.right
+                    anchors.rightMargin: 0
+                    checkable: true
+
+                    onClicked: mainqmladaptor.handleConnectButtonClick(checked);
+                }
+            }
+        }
+    }
+
+    ToastManager {
+        id: toast
+        anchors.leftMargin: inPortrait ? 0 : parent.width * 0.25
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.top: parent.top
+    }
+
     Connections {
         target: mainqmladaptor
         onMessageDialogTextChanged: {
@@ -110,6 +458,7 @@ ApplicationWindow {
         }
     }
 
+
     Connections {
         target: mainqmladaptor
         onMessageDialogTitleChanged: {
@@ -124,227 +473,90 @@ ApplicationWindow {
         }
     }
 
-    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.WrapAtWordBoundaryOrAnywhere
-        anchors.verticalCenterOffset: 0
-        anchors.verticalCenter: parent.verticalCenter
-    }
-
-    Label {
-        id: dbus_api_status_text
-        y: 350
-        width: parent.width / 2
-        height: 22
-        text: "Unknown state of Service"
-        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-        verticalAlignment: Text.AlignVCenter
-        font.pointSize: 11
-        fontSizeMode: Text.Fit
-        anchors.leftMargin: 15 + dbus_api_status_indicator.width + 5
-        objectName: "dbus_api_status_text"
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 15
-        anchors.left: parent.left
-
-        StatusIndicator {
-            id: dbus_api_status_indicator
-            width: height
-            height: parent.height
-            objectName: "dbus_api_status_indicator"
-            color: "#73d216"
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.right: parent.left
-            anchors.rightMargin: 5
-            active: 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
-
-        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"
+    Drawer {
+        id: sidebar_drawer
+        y: top_menu_bar_frame.height
+
+        width: !inPortrait ? (window.width * 0.25) : (window.width * 0.5)
+        height: window.height - top_menu_bar_frame.height
+
+        modal: inPortrait
+        interactive: inPortrait
+        position: inPortrait ? 0 : 1
+        dragMargin: 1
+        margins: -2
+        visible: !inPortrait
+
+        ListView {
+            id: sidebar_listview
+            boundsBehavior: Flickable.StopAtBounds
+            interactive: true
+            clip: true
+            anchors.fill: parent
+
+            footer: ItemDelegate {
+                id: footer
+                text: "  " + qsTr("Settings")
+                width: parent.width
+
+                onClicked: {
+                    if (inPortrait) {
+                        sidebar_drawer.close()
+                    }
+                }
+
+                MenuSeparator {
+                    parent: footer
+                    width: parent.width
+                    anchors.verticalCenter: parent.top
+                }
             }
 
-            onClicked: {
-                mainqmladaptor.handleCopyToClipboardButtonClick(url_text.text);
-                toast.show(qsTr("Copied URL into clipboard!"), "1000");
+            model: 5
+            delegate: ItemDelegate {
+                text: qsTr("Title %1").arg(index + 1)
+                width: parent.width
+                onClicked: {
+                    if (inPortrait) {
+                        sidebar_drawer.close()
+                    }
+                }
             }
 
-            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: mainqmladaptor.url
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignRight
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 0
-            anchors.left: parent.left
-            anchors.leftMargin: 0
-            font.bold: true
-            font.pointSize: 13
-            fontSizeMode: Text.Fit
-            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-        }
-
-        Label {
-            id: your_url_text
-            y: 0
-            width: parent.width
-            height: parent.height/2
-            text: qsTr("Remote Support URL")
-            font.pointSize: 14
-            anchors.left: parent.left
-            anchors.leftMargin: 0
-            fontSizeMode: Text.Fit
-            anchors.top: parent.top
-            anchors.topMargin: 0
-            verticalAlignment: Text.AlignBottom
-            anchors.bottomMargin: 5
-            clip: false
-            horizontalAlignment: Text.AlignLeft
+            ScrollIndicator.vertical: ScrollIndicator { }
         }
     }
 
-    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);
-                toast.show(qsTr("Copied PIN into clipboard!"), "1000");
-            }
-
-            ToolTip.text: qsTr("Copy the pin into the clipboard")
-            hoverEnabled: true
+    /*Rectangle {
+        id: side_menu
+        width: parent.width * 0.333
+        color: "#ffffff"
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.top: top_menu_bar_frame.bottom
+        anchors.topMargin: 0
 
-            ToolTip.delay: 1000
-            ToolTip.timeout: 5000
-            ToolTip.visible: hovered
+        visible: !inPortrait
+
+        Drawer {
+            x: side_menu.x
+            y: side_menu.y
+            width: side_menu.width
+            height: side_menu.height
+            modal: inPortrait
+            interactive: inPortrait
+            position: inPortrait ? 0 : 1
+            //visible: true
+            visible: !inPortrait
         }
+    }*/
 
-        Label {
-            objectName: "pin_text"
-            id: pin_text
-            width: parent.width - 5 - copy_pin_to_clipboard_button.width
-            height: parent.height/2
-            text: mainqmladaptor.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
-        }
-    }
 
     Material.theme: theme.position < 1 ? Material.Light : Material.Dark
 
-    Control {
+    ToolBar {
         id: top_menu_bar_frame
         width: parent.width
         height: parent.height * 0.10
@@ -363,20 +575,29 @@ ApplicationWindow {
 
         Switch {
             id: theme
+            width: 150
+            implicitWidth: 100
+            visible: !inPortrait
+
             height: parent.height
             anchors.margins: 10
-            text: "Dark theme"
-            anchors.left: sidemenu_open_button.right
-            anchors.leftMargin: 15
+            text: qsTr("Dark theme")
+            anchors.left: parent.left
+            anchors.verticalCenterOffset: 0
+            anchors.leftMargin: 0
             anchors.verticalCenter: parent.verticalCenter
             checked: true
         }
 
         Label {
             id: header_text
+            width: 1
             height: parent.height
             color: "#ffffff"
             text: qsTr("Allow Remote Control")
+            anchors.left: theme.right
+            anchors.leftMargin: 5
+            horizontalAlignment: Text.AlignRight
             padding: 5
             font.family: "Verdana"
             font.pointSize: 20
@@ -385,150 +606,88 @@ ApplicationWindow {
             anchors.right: parent.right
             anchors.rightMargin: 5
             anchors.verticalCenter: parent.verticalCenter
-            horizontalAlignment: Text.AlignRight
         }
 
         Button {
-            id: sidemenu_open_button
-            width: sidemenu_open_image.width
+            id: burger_button
+            width: 50
             height: parent.height + 10
-            text: ""
-            hoverEnabled: true
-            display: AbstractButton.IconOnly
+            visible: inPortrait
+
+
+            text: "≡"
+            checkable: false
+            font.pointSize: 24
+            flat: true
             anchors.left: parent.left
             anchors.leftMargin: 0
-            anchors.top: parent.top
-            anchors.topMargin: -5
-            flat: true
+            anchors.verticalCenter: parent.verticalCenter
+            enabled: !sidebar_drawer.opened
 
-            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
+            onClicked: {
+                sidebar_drawer.open()
+                enabled: false
             }
         }
 
     }
 
-    Page {
-        id: page
-        x: 0
-        y: 0
-        width: 210
-        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
-        }
-        }
-        }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
+    /*    TabBar {
+        id: side_menu
+        width: parent.width * 0.3333
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.top: top_menu_bar_frame.bottom
+        anchors.topMargin: 0
 
+        TabButton {
+            id: firstBtn
+            text: "Erster Knopf"
 
+            width: side_menu.width
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            anchors.top: parent.top
+            anchors.topMargin: 0
 
+            onClicked: {
 
+            }
+        }
 
+        TabButton {
+            id: secondBtn
+            text: "Zweiter Knopf"
 
+            width: side_menu.width
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            anchors.top: firstBtn.bottom
+            anchors.topMargin: 0
+        }
 
+        TabButton {
+            id: thirdBtn
+            text: "Dritter Knopf"
 
+            width: side_menu.width
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            anchors.top: secondBtn.bottom
+            anchors.topMargin: 0
+        }
 
+        visible: true
 
+        background: Rectangle {
+            color: Material.theme == Material.Light ? "#e5f1fd" : "#0b4a8a"
+            anchors.fill: parent
+        }
+    }
+*/
 
-/*##^## 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:11;anchors_height:20;anchors_width:20}D{i:10;anchors_y:154}D{i:14;anchors_x:47;anchors_y:0}
-D{i:15;anchors_height:50}D{i:16;anchors_height:35;anchors_width:350;anchors_x:379;anchors_y:183}
-D{i:19;anchors_height:35;anchors_x:73;anchors_y:35}D{i:18;anchors_height:35;anchors_x:73;anchors_y:35}
-D{i:20;anchors_y:0}D{i:21;anchors_x:0;anchors_y:0}D{i:23;anchors_x:15;anchors_y:17}
-D{i:24;anchors_height:20;anchors_width:200;anchors_x:15;anchors_y:10}
 }
- ##^##*/
diff --git a/src/main.cpp b/src/main.cpp
index 3d88c0c..381bc9c 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -39,7 +39,11 @@
 #include "RWADBusAdaptor.cpp"
 #include "session.h"
 
+#define BUILD_TIME __DATE__ " "  __TIME__
+
 int main(int argc, char *argv[]) {
+    qDebug() << "This app was built on: " << BUILD_TIME;
+
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
     QApplication app(argc, argv);
 
diff --git a/src/main_qmladaptor.cpp b/src/main_qmladaptor.cpp
index c768623..2416266 100644
--- a/src/main_qmladaptor.cpp
+++ b/src/main_qmladaptor.cpp
@@ -143,12 +143,19 @@ void MainQMLAdaptor::setURL(QString URL) {
     _url = URL;
     emit urlChanged(URL);
 }
+void MainQMLAdaptor::setSessionID(QString session_id) {
+    _session_id = session_id;
+    emit sessionIDChanged(session_id);
+}
 QString MainQMLAdaptor::getURL() {
     return _url;
 }
 QString MainQMLAdaptor::getPin() {
     return _pin;
 }
+QString MainQMLAdaptor::getSessionID() {
+    return _session_id;
+}
 
 void MainQMLAdaptor::onCloseHandler() {
     // Do cleanup things here...
diff --git a/src/main_qmladaptor.h b/src/main_qmladaptor.h
index 212c9fa..4619968 100644
--- a/src/main_qmladaptor.h
+++ b/src/main_qmladaptor.h
@@ -36,12 +36,21 @@
 class MainQMLAdaptor : public QObject
 {
     Q_OBJECT
-    Q_PROPERTY(QString url READ getURL WRITE setURL NOTIFY urlChanged) // this makes url available as a QML property
-    Q_PROPERTY(QString pin READ getPin WRITE setPin NOTIFY pinChanged) // this makes pin available as a QML property
-    Q_PROPERTY(bool     showMessageDialog  READ getShowMessageDialog  NOTIFY showMessageDialogChanged)  // this makes showMessageDialog available as a QML property
-    Q_PROPERTY(QString _messageDialogTitle READ getMessageDialogTitle NOTIFY messageDialogTitleChanged) // this makes showMessageDialogTitle available as a QML property
-    Q_PROPERTY(QString _messageDialogText  READ getMessageDialogText  NOTIFY messageDialogTextChanged)  // this makes showMessageDialogText available as a QML property
-    Q_PROPERTY(QMessageBox::Icon _messageDialogIcon READ getMessageDialogIcon NOTIFY messageDialogIconChanged)  // this makes showMessageDialogIcon available as a QML property
+    // this makes url available as a QML property
+    Q_PROPERTY(QString url READ getURL WRITE setURL NOTIFY urlChanged)
+    // this makes pin available as a QML property
+    Q_PROPERTY(QString pin READ getPin WRITE setPin NOTIFY pinChanged)
+    // this makes session_id available as a QML property
+    Q_PROPERTY(QString session_id READ getSessionID WRITE setSessionID NOTIFY sessionIDChanged)
+    // this makes showMessageDialog available as a QML property
+    Q_PROPERTY(bool showMessageDialog READ getShowMessageDialog NOTIFY showMessageDialogChanged)
+    // this makes showMessageDialogTitle available as a QML property
+    Q_PROPERTY(QString _messageDialogTitle READ getMessageDialogTitle NOTIFY messageDialogTitleChanged)
+    // this makes showMessageDialogText available as a QML property
+    Q_PROPERTY(QString _messageDialogText READ getMessageDialogText NOTIFY messageDialogTextChanged)
+    // this makes showMessageDialogIcon available as a QML property
+    Q_PROPERTY(QMessageBox::Icon _messageDialogIcon READ getMessageDialogIcon NOTIFY messageDialogIconChanged)
+
 public:
     explicit MainQMLAdaptor(QObject *parent, QQmlApplicationEngine *engine = nullptr);
 
@@ -71,6 +80,7 @@ signals:
 
     void pinChanged(QString pin);
     void urlChanged(QString URL);
+    void sessionIDChanged(QString session_id);
 
     void onCloseSignal();
 
@@ -79,6 +89,7 @@ signals:
 protected:
     QString _url;
     QString _pin;
+    QString _session_id;
 private:
     QQmlApplicationEngine* _engine;
 
@@ -93,8 +104,10 @@ public slots:
 
     void setPin(QString pin);
     void setURL(QString URL);
+    void setSessionID(QString session_id);
     QString getURL();
     QString getPin();
+    QString getSessionID();
 
     void onCloseHandler();
 
diff --git a/src/session.cpp b/src/session.cpp
index d48de39..e4d3c95 100644
--- a/src/session.cpp
+++ b/src/session.cpp
@@ -47,6 +47,11 @@ Session::Session(QObject *parent, MainQMLAdaptor* main_gui) : QObject(parent) {
                          SIGNAL(urlChanged(QString)),
                          main_gui,
                          SLOT(setURL(QString)));
+    // session::setSessionID --sessionIDChanged--> MainQMLAdaptor::setSessionID --sessionIDChanged--> QML
+    QObject::connect(this,
+                         SIGNAL(sessionIDChanged(QString)),
+                         main_gui,
+                         SLOT(setSessionID(QString)));
 
     // QML -> MainQMLAdaptor::onCloseHandler --onCloseSignal--> session::onCloseHandler
     QObject::connect(main_gui,
@@ -64,7 +69,8 @@ void Session::statusTimerEvent() {
 
 void Session::init_vars() {
     setPin("-----");
-    setId(-1);
+    setSessionID("-----");
+    setId("-----");
     setURL(tr("Not available yet"));
     setStatus("unknown");
 
@@ -83,8 +89,12 @@ QString Session::getURL() {
     return _url;
 }
 
-int Session::getId() {
-    return _id;
+QString Session::getId() {
+    return QString(_id);
+}
+
+QString Session::getSessionID() {
+    return QString(_session_id);
 }
 
 QString Session::getPin() {
@@ -187,18 +197,25 @@ void Session::setURL(QString url) {
     emit urlChanged(url);
 }
 
-void Session::setId(int id) {
+void Session::setId(QString id) {
     _id = id;
     emit idChanged(id);
 }
 
+void Session::setSessionID(QString session_id) {
+    _session_id = session_id;
+    emit sessionIDChanged(session_id);
+}
+
 void Session::setPin(QString pin) {
     _pin = pin;
     emit pinChanged(pin);
 }
 
 void Session::handleConnectButtonClick(bool checked) {
-    qDebug() << "-----Connect button handler-----\nCurrent session #" << this->getId();
+    qDebug() << "-----Connect button handler-----" <<
+                "\nCurrent service-session #" << this->getId() <<
+                "\nCurrent support-session #" << this->getSessionID();
 
     // Stopping even if nothing is running
     this->stop_request_dbus(this->getId());
@@ -281,38 +298,68 @@ void Session::start_dbus_replied(QDBusPendingCallWatcher *call) {
         return;
     }
 
-    // Session ID == PID
-    int sessionid = mainMap["id"].toInt();
-    this->setId(sessionid);
+    // Service ID == PID
+    bool ok;
+    long long service_id = mainMap["id"].toLongLong(&ok);
+    this->setId(QString::number(service_id));
+    // Sanity Check
+    if(ok == false){
+        qErrnoWarning("Unable to parse <service_id> out of dbus answer!");
+        init_vars();
+        return;
+    }
 
     // URL of remote web app frontend
     QString url = mainMap["url"].toString();
     this->setURL(url);
 
     // PIN
-    QString pin = mainMap["pin"].toString();
-    this->setPin(pin);
+    long long pin = mainMap["pin"].toLongLong();
+    this->setPin(QString::number(pin));
+    // Sanity Check
+    if(ok == false){
+        qErrnoWarning("Unable to parse <pin> out of dbus answer!");
+        init_vars();
+        return;
+    }
 
-    qDebug() << "Got session id:" << sessionid;
-    qDebug() << "Got url:" << url;
-    qDebug() << "Got pin:" << pin;
+    // session_id = remote support id from the rwa-server
+    long long session_id = mainMap["session_id"].toLongLong();
+    this->setSessionID(QString::number(session_id));
+    // Sanity Check
+    if(ok == false){
+        qErrnoWarning("Unable to parse <pin> out of dbus answer!");
+        init_vars();
+        return;
+    }
 
-    emit pinChanged(pin);
+    qDebug() << "Got service_id:" << service_id <<
+                "\nGot session_id:" << session_id <<
+                "\nGot url:" << url <<
+                "\nGot pin:" << pin;
+
+    emit pinChanged(QString::number(pin));
     emit urlChanged(url);
-    emit idChanged(sessionid);
+    emit idChanged(QString::number(service_id));
+    emit sessionIDChanged(QString::number(session_id));
 }
 
-void Session::stop_request_dbus(int pid) {
-    if (pid <= 0 ){
-        qDebug() << "Won't send a request to D-Bus service to stop a session when session ID <= 0";
+void Session::stop_request_dbus(QString id) {
+    bool ok;
+    if (id.toLongLong(&ok) == 0 ){
+        qDebug() << "Won't send a request to D-Bus service to stop a session when session ID == 0";
+        return;
+    }
+    if(ok == false){
+        qErrnoWarning("Unable to convert <QString> id to <long long>");
         return;
     }
 
     // Stopping now.
-    qDebug() << "Requesting D-Bus session service to stop session #" << pid;
+    qDebug() << "Requesting D-Bus session service to stop session #" << id;
 
     // Make an asynchrous 'stop' call (Response will be sent to 'stop_dbus_replied')
-    QDBusPendingCall async = _dbus_rwa->asyncCall("stop", pid);
+    QDBusPendingCall async = _dbus_rwa->asyncCall("stop", id);
     QDBusPendingCallWatcher *watcher = new QDBusPendingCallWatcher(async, this);
 
     QObject::connect(watcher, SIGNAL(finished(QDBusPendingCallWatcher*)),
@@ -359,34 +406,44 @@ void Session::stop_dbus_replied(QDBusPendingCallWatcher *call) {
     this->setStatus(new_status);
 }
 
-void Session::status_request_dbus(int pid) {
-    if (pid <= 0 ){
-        qDebug() << "Won't send a request to D-Bus service of a session's status when session ID <= 0";
+void Session::status_request_dbus(QString id) {
+    bool ok;
+    if (id.toLongLong(&ok) == 0 ){
+        qDebug() << "Won't send a request to D-Bus service of a session's status when session ID == 0";
+        return;
+    }
+    if(ok == false){
+        qErrnoWarning("Unable to convert <QString> id to <long long>");
         return;
     }
 
     // Requesting status now.
-    qDebug() << "Requesting status for session #" << pid;
+    qDebug() << "Requesting status for session #" << id;
 
     // Make an asynchrous 'status' call (Response will be sent to 'status_dbus_replied')
-    QDBusPendingCall async = _dbus_rwa->asyncCall("status", pid);
+    QDBusPendingCall async = _dbus_rwa->asyncCall("status", id);
     QDBusPendingCallWatcher *watcher = new QDBusPendingCallWatcher(async, this);
 
     QObject::connect(watcher, SIGNAL(finished(QDBusPendingCallWatcher*)),
                      this, SLOT(stop_dbus_replied(QDBusPendingCallWatcher*)));
 }
 
-void Session::refresh_status_request_dbus(int pid) {
-    if (pid <= 0 ){
-        qDebug() << "Won't send a request to D-Bus service to refresh the status of a session when session ID <= 0";
+void Session::refresh_status_request_dbus(QString id) {
+    bool ok;
+    if (id.toLongLong(&ok) == 0){
+        qDebug() << "Won't send a request to D-Bus service to refresh the status of a session when session ID == 0";
+        return;
+    }
+    if(ok == false){
+        qErrnoWarning("Unable to convert <QString> id to <long long>");
         return;
     }
 
     // Refreshing status
-    qDebug() << "Requesting status refresh for session #" << pid;
+    qDebug() << "Requesting status refresh for session #" << id;
 
     // Make an asynchrous 'refresh_status' call (Response will be sent to 'status_dbus_replied')
-    QDBusPendingCall async = _dbus_rwa->asyncCall("refresh_status", pid);
+    QDBusPendingCall async = _dbus_rwa->asyncCall("refresh_status", id);
     QDBusPendingCallWatcher *watcher = new QDBusPendingCallWatcher(async, this);
 
     QObject::connect(watcher, SIGNAL(finished(QDBusPendingCallWatcher*)),
diff --git a/src/session.h b/src/session.h
index 07a85d9..ad1b140 100644
--- a/src/session.h
+++ b/src/session.h
@@ -39,31 +39,40 @@
 class Session : public QObject
 {
     Q_OBJECT
-    Q_PROPERTY(QString status READ getStatus NOTIFY statusChanged) // this makes status available as a QML property
-    Q_PROPERTY(int     id     READ getId     NOTIFY idChanged    ) // this makes id     available as a QML property
-    Q_PROPERTY(QString url    READ getURL    NOTIFY urlChanged   ) // this makes url    available as a QML property
-    Q_PROPERTY(QString pin    READ getPin    NOTIFY pinChanged   ) // this makes pin    available as a QML property
+    // this makes status available as a QML property
+    Q_PROPERTY(QString status READ getStatus NOTIFY statusChanged)
+    // this makes service id available as a QML property
+    Q_PROPERTY(QString id READ getId NOTIFY idChanged)
+    // this makes session_id available as a QML property
+    Q_PROPERTY(QString session_id READ getSessionID NOTIFY sessionIDChanged)
+    // this makes url available as a QML property
+    Q_PROPERTY(QString url READ getURL NOTIFY urlChanged)
+    // this makes pin available as a QML property
+    Q_PROPERTY(QString pin READ getPin NOTIFY pinChanged)
+
 public:
     explicit Session(QObject *parent, MainQMLAdaptor *main_gui = nullptr);
 
     QString getStatus();
     QString getURL();
-    int getId();
+    QString getId();
+    QString getSessionID();
     QString getPin();
 
     void setStatus(QString status);
     void setURL(QString url);
-    void setId(int id);
+    void setId(QString id);
+    void setSessionID(QString session_id);
     void setPin(QString pin);
 
     // Starts a VNC Session
     void start_request_dbus();
     // Refreshes a VNC Session's status
-    void refresh_status_request_dbus(int pid);
+    void refresh_status_request_dbus(QString id);
     // Stop the Session
-    void stop_request_dbus(int pid);
+    void stop_request_dbus(QString id);
     // Gets a VNC Session's status
-    void status_request_dbus(int pid);
+    void status_request_dbus(QString id);
     // Returns true if Session is somewhat usable (Running, Alive, etc..)
     bool isSessionAliveOrRunning(QString status);
 
@@ -74,7 +83,8 @@ protected:
 
 private:
     MainQMLAdaptor* _main_gui;
-    int _id;
+    QString _id;
+    QString _session_id;
     QString _url;
     QString _pin;
     OrgArcticaProjectRWAInterface* _dbus_rwa;
@@ -85,10 +95,11 @@ private:
 
 signals:
     void finished();
-    void statusChanged(QString status);
-    void idChanged(int id);
-    void urlChanged(QString URL);
-    void pinChanged(QString pin);
+    void statusChanged(QString);
+    void idChanged(QString);
+    void sessionIDChanged(QString);
+    void urlChanged(QString);
+    void pinChanged(QString);
 
 public slots:
     void handleConnectButtonClick(bool checked);