From a42428dc90ae1be8121015d9b5a7515d5491b46a Mon Sep 17 00:00:00 2001 From: Daniel Teichmann Date: Mon, 27 Jul 2020 17:10:31 +0200 Subject: New dark mode design && lots of new items --- main.qml | 600 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file 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} } + ##^##*/ -- cgit v1.2.3