From 579f590fb1700b662a3379fa8ae13e1687aa960b Mon Sep 17 00:00:00 2001 From: Sarah Jamie Lewis Date: Thu, 11 Jun 2015 23:22:59 -0700 Subject: [PATCH] Making the Initial Setup Nicer This commit makes some updates to the initial setup UI with the aim of making it a nicer experience for new users. ![image](https://cloud.githubusercontent.com/assets/106626/8145951/f8befc76-11d2-11e5-98b1-dfbdaa2849fc.png) The initial setup is the first thing a new user of Ricochet sees when they start up the software - it should be a place where we a) reassure them that the software is working b) help them perform intiial setup which we can't figure out and c) help the user form a connection to the software so we are better able to present intuitive messages to the user when we do need their input e.g. if the software discovers something which needs the users attention like their connection to the Tor network is blocked. Presenting complex topics, like proxies and bridges, to a first time user can be daunting and so the idea behind this initial setup is to dress up the initial dialogue and present the user with a sane default "Press Connect". There are still issues with this initial setup - in particular when there is additional configuration needed - we need to refine ways to work with the user and, where we can, offer suggestions in a safe and secure manner. Image copyright information: The images in this commit were created by me with the exception of the "police officer icon at the center of the censored icon which is from the Symbola font package http://users.teilar.gr/~g1951d/ which carries the following licensing terms: "Fonts and documents in this site are not pieces of property or merchandise items; they carry no trademark, copyright, license or other market tags; they are free for any use." --- icons/connection_censored.svg | 165 ++++++++++++++++++++++++++++++ icons/connection_ok.svg | 161 +++++++++++++++++++++++++++++ icons/icons.qrc | 2 + src/ui/qml/NetworkSetupWizard.qml | 127 +++++++++++++++++------ 4 files changed, 425 insertions(+), 30 deletions(-) create mode 100644 icons/connection_censored.svg create mode 100644 icons/connection_ok.svg diff --git a/icons/connection_censored.svg b/icons/connection_censored.svg new file mode 100644 index 00000000..34075f00 --- /dev/null +++ b/icons/connection_censored.svg @@ -0,0 +1,165 @@ + + + + + Ricochet Connection Censored + + + + + + image/svg+xml + + + Ricochet Connection Censored + 2015/06/13 + + + Sarah Jamie Lewis + + + + + Policeman image from the Symbola Font Package: http://users.teilar.gr/~g1951d/ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icons/connection_ok.svg b/icons/connection_ok.svg new file mode 100644 index 00000000..3fd89e8e --- /dev/null +++ b/icons/connection_ok.svg @@ -0,0 +1,161 @@ + + + + + Ricochet Connection OK + + + + + + image/svg+xml + + Ricochet Connection OK + + + Sarah Jamie Lewis + + + + + + + + 2015/06/13 + + + + + + + + + + + + + + + + ✓ + + + + + + + + + + + + diff --git a/icons/icons.qrc b/icons/icons.qrc index b0548c12..3c956901 100644 --- a/icons/icons.qrc +++ b/icons/icons.qrc @@ -2,5 +2,7 @@ ricochet.svg ricochet_icons.ttf + connection_ok.svg + connection_censored.svg diff --git a/src/ui/qml/NetworkSetupWizard.qml b/src/ui/qml/NetworkSetupWizard.qml index 024e67d6..861ddfdf 100644 --- a/src/ui/qml/NetworkSetupWizard.qml +++ b/src/ui/qml/NetworkSetupWizard.qml @@ -6,9 +6,9 @@ ApplicationWindow { id: window width: minimumWidth height: minimumHeight - minimumWidth: 400 + minimumWidth: 600 maximumWidth: minimumWidth - minimumHeight: visibleItem.height + 16 + minimumHeight: visibleItem.height + 32 maximumHeight: minimumHeight title: "Ricochet" @@ -93,43 +93,110 @@ ApplicationWindow { id: firstPage Column { - spacing: 8 + width: parent.width + spacing: 20 + anchors { + left: parent.left + right: parent.right + margins: parent.width/10 + } + - Label { + Column { width: parent.width - text: qsTr("This computer's Internet connection is free of obstacles. I would like to connect directly to the Tor network.") - wrapMode: Text.Wrap - horizontalAlignment: Qt.AlignHCenter - } + spacing: 10 - Button { - anchors.horizontalCenter: parent.horizontalCenter - text: qsTr("Connect") - isDefault: true - onClicked: { - // Reset to defaults and proceed to bootstrap page - configPage.reset() - configPage.save() + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: "../icons/ricochet.svg" + sourceSize.width: parent.width / 10 + sourceSize.height: 60 } - } - Rectangle { - height: 1 - width: parent.width - color: palette.mid + Label { + width: parent.width + horizontalAlignment: Qt.AlignHCenter + text: qsTr("Welcome to Ricochet. Before we start, we need to know about your connection to the Internet.") + wrapMode: Text.Wrap + } + + Label { + width: parent.width + horizontalAlignment: Qt.AlignHCenter + text: qsTr("Please try Connect first if you do not require bridges or special network settings.") + wrapMode: Text.Wrap + } } - Label { + Row { width: parent.width - text: qsTr("This computer's Internet connection is censored, filtered, or proxied. I need to configure network settings.") - wrapMode: Text.Wrap - horizontalAlignment: Qt.AlignHCenter - } + spacing: 10 + + Column { + width: parent.width/2.5 + spacing: 10 + + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: "../icons/connection_ok.svg" + sourceSize.width: parent.width + sourceSize.height: 50 + } + + Button { + anchors.horizontalCenter: parent.horizontalCenter + text: qsTr("Connect") + isDefault: true + onClicked: { + // Reset to defaults and proceed to bootstrap page + configPage.reset() + configPage.save() + } + } + + Label { + width: parent.width + text: qsTr("This computer can freely access the Internet") + wrapMode: Text.Wrap + horizontalAlignment: Qt.AlignHCenter + } + } - Button { - anchors.horizontalCenter: parent.horizontalCenter - text: qsTr("Configure") - onClicked: window.openConfig() + Column { + width: parent.width/5 + + // We need something in this column such that the + // width will be rendered. + Label { + width: parent.width + } + } + + + Column { + width: parent.width/2.5 + spacing: 10 + + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: "../icons/connection_censored.svg" + sourceSize.width: parent.width + sourceSize.height: 50 + } + + Button { + anchors.horizontalCenter: parent.horizontalCenter + text: qsTr("Configure") + onClicked: window.openConfig() + } + + Label { + width: parent.width + text: qsTr("My connection is censored, filtered, or requires a proxy.") + wrapMode: Text.Wrap + horizontalAlignment: Qt.AlignHCenter + } + } } } }