From f0b1ab55a216d02a77f4895e149afd3c1edfb234 Mon Sep 17 00:00:00 2001 From: Jakub Date: Mon, 6 Dec 2021 14:06:08 +0100 Subject: [PATCH] GODT-1455 Adding links to setup guide. --- .../frontend/qml/BridgeTest/UserControl.qml | 3 +- internal/frontend/qml/Bridge_test.qml | 15 +- internal/frontend/qml/MainWindow.qml | 8 + internal/frontend/qml/SetupGuide.qml | 303 ++++++++++++++---- 4 files changed, 256 insertions(+), 73 deletions(-) diff --git a/internal/frontend/qml/BridgeTest/UserControl.qml b/internal/frontend/qml/BridgeTest/UserControl.qml index 7dd8dd24..c64ce5e2 100644 --- a/internal/frontend/qml/BridgeTest/UserControl.qml +++ b/internal/frontend/qml/BridgeTest/UserControl.qml @@ -300,10 +300,11 @@ ColumnLayout { Button { colorScheme: root.colorScheme; text: "Toggle Finished"; onClicked: {user.toggleSplitModeFinished()}} } - TextArea { + TextArea { // TODO: this is causing binding loop on imlicitWidth colorScheme: root.colorScheme text: user && user.addresses ? user.addresses.join("\n") : "user@protonmail.com" Layout.fillWidth: true + onEditingFinished: { user.addresses = text.split("\n") } diff --git a/internal/frontend/qml/Bridge_test.qml b/internal/frontend/qml/Bridge_test.qml index 7cbcca98..5aa4e42e 100644 --- a/internal/frontend/qml/Bridge_test.qml +++ b/internal/frontend/qml/Bridge_test.qml @@ -38,7 +38,7 @@ Window { x: 10 y: 10 width: 800 - height: 600 + height: 800 property ColorScheme colorScheme: ProtonStyle.darkStyle @@ -126,7 +126,7 @@ Window { property string password: "SMj975NnEYYsqu55GGmlpv" property var addresses: [ - "janedoe@protonmail.com", + "jaanedoe@protonmail.com", "jane@pm.me", "jdoe@pm.me" ] @@ -363,6 +363,15 @@ Window { enabled: bridge === undefined || bridge === null onClicked: { bridge = bridgeComponent.createObject() + var showSetupGuide = false + if (showSetupGuide) { + var newUserObject = root.userComponent.createObject(root) + newUserObject.username = "LerooooyJenkins@protonmail.com" + newUserObject.loggedIn = true + newUserObject.setupGuideSeen = false + root.users.append( { object: newUserObject } ) + } + } } @@ -656,7 +665,7 @@ Window { property Bridge bridge - property string goos: "linux" + property string goos: "darwin" property bool showOnStartup: true // this actually needs to be false, but since we use Bridge_test for testing purpose - lets default this to true just for convenience property bool dockIconVisible: false diff --git a/internal/frontend/qml/MainWindow.qml b/internal/frontend/qml/MainWindow.qml index c46834fb..e94ad3ae 100644 --- a/internal/frontend/qml/MainWindow.qml +++ b/internal/frontend/qml/MainWindow.qml @@ -155,6 +155,13 @@ ApplicationWindow { onDismissed: { root.showSetup(null,"") } + + onFinished: { + // TODO: Do not close window. Trigger backend to check that + // there is a successfully connected client. Then backend + // should send another signal to close the setup guide. + root.showSetup(null,"") + } } } @@ -176,6 +183,7 @@ ApplicationWindow { function showSetup(user, address) { setupGuide.user = user setupGuide.address = address + setupGuide.reset() if (setupGuide.user) { contentLayout._showSetup = true } else { diff --git a/internal/frontend/qml/SetupGuide.qml b/internal/frontend/qml/SetupGuide.qml index b2e8e233..f7eb1729 100644 --- a/internal/frontend/qml/SetupGuide.qml +++ b/internal/frontend/qml/SetupGuide.qml @@ -23,7 +23,7 @@ import QtQuick.Controls.impl 2.12 import Proton 4.0 -Rectangle { +Item { id:root property ColorScheme colorScheme @@ -32,27 +32,85 @@ Rectangle { property string address signal dismissed() + signal finished() implicitHeight: children[0].implicitHeight implicitWidth: children[0].implicitWidth - color: root.colorScheme.background_norm - RowLayout { + ListModel { + id: clients + property string name : "Apple Mail" + property string iconSource : "./icons/ic-apple-mail.svg" + property bool haveAutoSetup: true + property string link: "https://protonmail.com/bridge/applemail" + + Component.onCompleted : { + if (root.backend.goos == "darwin") { + append({ + "name" : "Apple Mail", + "iconSource" : "./icons/ic-apple-mail.svg", + "haveAutoSetup" : true, + "link" : "https://protonmail.com/bridge/applemail" + }) + append({ + "name" : "Microsoft Outlook", + "iconSource" : "./icons/ic-microsoft-outlook.svg", + "haveAutoSetup" : false, + "link" : "https://protonmail.com/bridge/outlook2019-mac" + }) + } + if (root.backend.goos == "windows") { + append({ + "name" : "Microsoft Outlook", + "iconSource" : "./icons/ic-microsoft-outlook.svg", + "haveAutoSetup" : false, + "link" : "https://protonmail.com/bridge/outlook2019" + }) + } + + append({ + "name" : "Mozilla Thunderbird", + "iconSource" : "./icons/ic-mozilla-thunderbird.svg", + "haveAutoSetup" : false, + "link" : "https://protonmail.com/bridge/thunderbird" + }) + + append({ + "name" : "Other", + "iconSource" : "./icons/ic-other-mail-clients.svg", + "haveAutoSetup" : false, + "link" : "https://protonmail.com/bridge/clients" + }) + + } + } + + Rectangle { + anchors.fill: root + color: root.colorScheme.background_norm + } + + StackLayout { + id: guidePages anchors.fill: parent - spacing: 0 + anchors.leftMargin: 80 + anchors.rightMargin: 80 + anchors.topMargin: 30 + anchors.bottomMargin: 70 - ColumnLayout { + + ColumnLayout { // 0: Client selection + id: clientView Layout.fillHeight: true - Layout.leftMargin: 80 - Layout.rightMargin: 80 - Layout.topMargin: 30 - Layout.bottomMargin: 70 - spacing: 0 + + property int columnWidth: 268 + + spacing: 8 Label { colorScheme: root.colorScheme - text: qsTr("Set up email client") + text: qsTr("Setting up email client") type: Label.LabelType.Heading } @@ -63,71 +121,140 @@ Rectangle { type: Label.LabelType.Lead } - Label { - colorScheme: root.colorScheme - Layout.topMargin: 32 - text: qsTr("Choose an email client") - type: Label.LabelType.Body_semibold - } + RowLayout { + Layout.topMargin: 32-clientView.spacing + spacing: 24 - ListModel { - id: clients - ListElement{name : "Apple Mail" ; iconSource : "./icons/ic-apple-mail.svg" } - ListElement{name : "Microsoft Outlook" ; iconSource : "./icons/ic-microsoft-outlook.svg" } - ListElement{name : "Mozilla Thunderbird" ; iconSource : "./icons/ic-mozilla-thunderbird.svg" } - ListElement{name : "Other" ; iconSource : "./icons/ic-other-mail-clients.svg" } - } + ColumnLayout { + id: clientColumn + Layout.alignment: Qt.AlignTop - - Repeater { - model: clients - - Rectangle { - implicitWidth: clientRow.width - implicitHeight: clientRow.height - - ColumnLayout { - id: clientRow - - RowLayout { - Layout.topMargin: 12 - Layout.bottomMargin: 12 - Layout.leftMargin: 16 - Layout.rightMargin: 16 - - ColorImage { - source: model.iconSource - height: 36 - sourceSize.height: 36 - } - - Label { - colorScheme: root.colorScheme - Layout.leftMargin: 12 - text: model.name - type: Label.LabelType.Body - } - } - - Rectangle { - Layout.fillWidth: true - Layout.preferredHeight: 1 - color: root.colorScheme.border_weak - } + Label { + id: labelA + colorScheme: root.colorScheme + text: qsTr("Choose an email client") + type: Label.LabelType.Body_semibold } + ListView { + id: clientList + Layout.fillHeight: true + width: clientView.columnWidth - MouseArea { - anchors.fill: parent - onClicked: { - if (model.name != "Apple Mail") { - console.log(" TODO configure ", model.name) - return + model: clients + + highlight: Rectangle { + color: root.colorScheme.interaction_default_active + radius: 4 + } + + delegate: Item { + implicitWidth: clientRow.width + implicitHeight: clientRow.height + + ColumnLayout { + id: clientRow + width: clientList.width + + RowLayout { + Layout.topMargin: 12 + Layout.bottomMargin: 12 + Layout.leftMargin: 16 + Layout.rightMargin: 16 + + ColorImage { + source: model.iconSource + height: 36 + sourceSize.height: 36 + } + + Label { + colorScheme: root.colorScheme + Layout.leftMargin: 12 + text: model.name + type: Label.LabelType.Body + } + } + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 1 + color: root.colorScheme.border_weak + } } - if (user) { - root.user.configureAppleMail(root.address) + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + clientList.currentIndex = index + if (!model.haveAutoSetup) { + root.setupAction(1,index) + } + } + } + } + } + } + + ColumnLayout { + id: actionColumn + visible: clientList.currentIndex >= 0 && clients.get(clientList.currentIndex).haveAutoSetup + Layout.alignment: Qt.AlignTop + + Label { + colorScheme: root.colorScheme + text: qsTr("Choose configuration mode") + type: Label.LabelType.Body_semibold + } + + ListView { + id: actionList + Layout.fillHeight: true + width: clientView.columnWidth + + model: [ + qsTr("Configure automatically"), + qsTr("Configure manually"), + ] + + highlight: Rectangle { + color: root.colorScheme.interaction_default_active + radius: 4 + } + + delegate: Item { + implicitWidth: children[0].width + implicitHeight: children[0].height + + ColumnLayout { + width: actionList.width + + Label { + Layout.topMargin: 20 + Layout.bottomMargin: 20 + Layout.leftMargin: 16 + Layout.rightMargin: 16 + colorScheme: root.colorScheme + text: modelData + type: Label.LabelType.Body + } + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 1 + color: root.colorScheme.border_weak + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + actionList.currentIndex = index + root.setupAction(index,clientList.currentIndex) + } } - root.dismissed() } } } @@ -141,6 +268,7 @@ Rectangle { flat: true onClicked: { + root.setupAction(-1,-1) if (user) { user.setupGuideSeen = true } @@ -149,4 +277,41 @@ Rectangle { } } } + + function setupAction(actionID,clientID){ + if (user) { + user.setupGuideSeen = true + } + + switch (actionID) { + case -1: root.dismissed(); break; // dismiss + case 0: // automatic + if (user) { + switch (clientID) { + case 0: + root.user.configureAppleMail(root.address) + break; + } + } + root.finished() + break; + case 1: // manual + var clientObj = clients.get(clientID) + if (clientObj != undefined && clientObj.link != "" ) { + Qt.openUrlExternally(clientObj.link) + } else { + console.log("unexpected client index", actionID, clientID) + } + root.finished(); + break; + default: + console.log("unexpected client setup action", actionID, clientID) + } + } + + function reset(){ + guidePages.currentIndex = 0 + clientList.currentIndex = -1 + actionList.currentIndex = -1 + } }