Silverfish/proton-bridge
1
0
Fork 1
mirror of https://github.com/ProtonMail/proton-bridge.git synced 2025-12-11 05:06:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(GODT-2772): new client selector design.

Browse Source
This commit is contained in:
Xavier Michelon
2023-08-21 17:46:06 +02:00
parent 6e86c95640
commit 272f9cf59b
8 changed files with 113 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
internal/frontend/bridge-gui/bridge-gui/Resources.qrc
View File

@ -49,6 +49,7 @@
<file>qml/icons/ic-success.svg</file>
<file>qml/icons/ic-three-dots-vertical.svg</file>
<file>qml/icons/ic-trash.svg</file>
<file>qml/icons/img-client-config-selector.svg</file>
<file>qml/icons/img-mail-clients.svg</file>
<file>qml/icons/img-mail-logo-wordmark-dark.svg</file>
<file>qml/icons/img-mail-logo-wordmark.svg</file>

5
internal/frontend/bridge-gui/bridge-gui/qml/Proton/Button.qml
View File

@ -30,6 +30,7 @@ T.Button {
property alias secondary: control.flat
property alias textHorizontalAlignment: label.horizontalAlignment
property alias textVerticalAlignment: label.verticalAlignment
property bool secondaryIsOpaque: false;
font: label.font
horizontalPadding: 16
@ -77,7 +78,7 @@ T.Button {
if (control.loading) {
return control.colorScheme.interaction_default_hover;
}
return control.colorScheme.interaction_default;
return secondaryIsOpaque ? control.colorScheme.background_norm: control.colorScheme.interaction_default;
}
} else {
if (primary) {
@ -103,7 +104,7 @@ T.Button {
if (control.loading) {
return control.colorScheme.interaction_default_hover;
}
return control.colorScheme.interaction_default;
return secondaryIsOpaque ? control.colorScheme.background_norm : control.colorScheme.interaction_default;
}
}
}

21
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml
View File

@ -27,18 +27,18 @@ Item {
ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
spacing: 0
anchors.verticalCenter: parent.verticalCenter
spacing: 16
Label {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.topMargin: 16
colorScheme: wizard.colorScheme
text: qsTr("Select your email application")
type: Label.LabelType.Heading
}
Item {
Layout.preferredHeight: 72
horizontalAlignment: Qt.AlignHCenter
text: qsTr("Select your email client")
type: Label.LabelType.Title
wrapMode: Text.WordWrap
}
ClientListItem {
Layout.fillWidth: true
@ -86,14 +86,13 @@ Item {
wizard.showClientParams();
}
}
Item {
Layout.preferredHeight: 72
}
Button {
Layout.fillWidth: true
Layout.topMargin: 20
colorScheme: wizard.colorScheme
secondary: true
text: qsTr("Cancel")
secondaryIsOpaque: true
text: qsTr("Setup later")
onClicked: {
root.wizard.closeWizard();

63
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml
View File

@ -17,7 +17,7 @@ import QtQuick.Controls
import QtQuick.Controls.impl
import Proton
Item {
Rectangle {
id: root
property ColorScheme colorScheme
@ -26,41 +26,44 @@ Item {
signal clicked
implicitHeight: clientRow.height
ColumnLayout {
id: clientRow
anchors.left: parent.left
anchors.right: parent.right
spacing: 0
RowLayout {
Layout.bottomMargin: 12
Layout.leftMargin: 16
Layout.rightMargin: 16
Layout.topMargin: 12
ColorImage {
height: 36
source: iconSource
sourceSize.height: 36
}
Label {
Layout.leftMargin: 12
colorScheme: root.colorScheme
text: root.text
type: Label.LabelType.Body
}
border.color: colorScheme.border_norm
border.width: 1
color: {
if (mouseArea.pressed) {
return colorScheme.interaction_default_active;
}
Rectangle {
if (mouseArea.containsMouse) {
return colorScheme.interaction_default_hover
}
return colorScheme.background_norm;
}
height: 68
radius: 12
RowLayout {
anchors.fill: parent
anchors.margins: 16
ColorImage {
height: 36
source: iconSource
sourceSize.height: 36
}
Label {
Layout.fillWidth: true
Layout.preferredHeight: 1
color: root.colorScheme.border_weak
Layout.leftMargin: 12
colorScheme: root.colorScheme
horizontalAlignment: Text.AlignLeft
text: root.text
type: Label.LabelType.Body
verticalAlignment: Text.AlignVCenter
}
}
MouseArea {
id: mouseArea
acceptedButtons: Qt.LeftButton
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: {
root.clicked();

1
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml
View File

@ -31,6 +31,7 @@ Button {
icon.source: "/qml/icons/ic-question-circle.svg"
icon.height: 24
icon.width: 24
icon.color: wizard.colorScheme.text_weak
verticalPadding: 0
onClicked: {

37
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml
View File

@ -22,27 +22,28 @@ Item {
id: root
property var wizard
property int iconHeight
property int iconWidth
property string iconSource
function showClientConfigCommon() {
const clientName = wizard.clientName();
titleLabel.text = qsTr("Configure %1").arg(clientName);
descriptionLabel.text = qsTr("We will now guide you through the process of setting up your Proton account in %1.").arg(clientName);
icon.source = wizard.clientIconSource();
icon.sourceSize.height = 128;
icon.sourceSize.width = 128;
icon.sourceSize.height = 264;
icon.sourceSize.width = 263;
Layout.preferredHeight = 72;
Layout.preferredWidth = 72;
}
function showClientConfigWarning() {
showClientConfigCommon();
linkLabel1.setLink("https://proton.me/support/bridge", qsTr("Why can't I use my Proton password in my email client?"));
}
function showClientSelector() {
titleLabel.text = qsTr("Configure your email client");
titleLabel.text = "";
descriptionLabel.text = qsTr("Bridge is now connected to Proton, and has already started downloading your messages. Let’s now connect your email client to Bridge.");
linkLabel1.clear();
linkLabel2.clear();
icon.source = "/qml/icons/img-mail-clients.svg";
iconSource = "/qml/icons/img-client-config-selector.svg";
iconHeight = 222;
iconWidth = 264;
}
function showLogin() {
showOnboarding()
@ -58,11 +59,9 @@ Item {
descriptionLabel.text = qsTr("Bridge is the gateway between your Proton account and your email client. It runs in the background and encrypts and decrypts your messages seamlessly. ");
linkLabel1.setLink("https://proton.me/support/bridge", qsTr("Why do I need Bridge?"));
linkLabel2.clear();
icon.Layout.preferredHeight = 148;
icon.Layout.preferredWidth = 265;
icon.source = "/qml/icons/img-welcome.svg";
icon.sourceSize.height = 148;
icon.sourceSize.width = 265;
iconSource = "/qml/icons/img-welcome.svg"
iconHeight= 148;
iconWidth = 265;
}
Connections {
@ -84,12 +83,11 @@ Item {
Image {
id: icon
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.preferredHeight: 72
Layout.preferredWidth: 72
fillMode: Image.PreserveAspectFit
source: ""
sourceSize.height: 72
sourceSize.width: 72
Layout.preferredHeight: iconHeight
Layout.preferredWidth: iconWidth
source: iconSource
sourceSize.height: iconHeight
sourceSize.width: iconWidth
}
Label {
id: titleLabel
@ -100,6 +98,7 @@ Item {
text: ""
type: Label.LabelType.Heading
wrapMode: Text.WordWrap
visible: text.length !== 0
}
Label {
id: descriptionLabel

8
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml
View File

@ -182,16 +182,12 @@ Item {
// rightContent stack index 0
Onboarding {
Layout.fillHeight: true
Layout.fillWidth: true
wizard: root
}
// rightContent tack index 1
Login {
id: login
Layout.fillHeight: true
Layout.fillWidth: true
wizard: root
onLoginAbort: {
@ -202,15 +198,11 @@ Item {
// rightContent stack index 2
ClientConfigSelector {
id: clientConfigSelector
Layout.fillHeight: true
Layout.fillWidth: true
wizard: root
}
// rightContent stack index 3
ClientConfigAppleMail {
id: clientConfigAppleMail
Layout.fillHeight: true
Layout.fillWidth: true
wizard: root
}
}

47
internal/frontend/bridge-gui/bridge-gui/qml/icons/img-client-config-selector.svg Normal file
View File

@ -0,0 +1,47 @@
<svg width="264" height="222" viewBox="0 0 264 222" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M185.274 107H78.7723C75.0151 107 72 103.907 72 100.158L72 33.8426C72 30.0934 75.0614 27.0002 78.7723 27.0002H185.227C188.984 27.0002 191.999 30.0934 191.999 33.8426L191.999 100.158C192.046 103.954 188.984 107 185.274 107Z" fill="url(#paint0_linear_4031_15861)"/>
<path d="M127.627 73.0628C130.143 75.1377 133.823 75.1377 136.339 73.0628L190.102 28.7982C188.89 27.6916 187.26 27 185.489 27H78.5233C76.7529 27 75.1224 27.6916 73.9111 28.7982L127.627 73.0628Z" fill="url(#paint1_linear_4031_15861)"/>
<path d="M229.242 26.6212C229.242 13.0233 218.219 2 204.621 2C191.023 2 180 13.0233 180 26.6212V51.2425H204.621C218.219 51.2425 229.242 40.2192 229.242 26.6212Z" fill="url(#paint2_linear_4031_15861)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M193.919 29.0652L195.595 29.5969C195.892 29.6909 196.123 29.9202 196.243 30.207C196.364 30.4957 196.362 30.8238 196.218 31.1014L195.404 32.6673C195.283 32.8995 195.326 33.1832 195.511 33.3683L197.629 35.487C197.814 35.6724 198.098 35.7161 198.33 35.5951L199.895 34.7802C200.172 34.6358 200.5 34.6346 200.789 34.7552C200.815 34.7662 200.841 34.7782 200.866 34.7911L201.425 35.4894L201.929 37.0812C202.008 37.3305 202.239 37.5 202.501 37.5H205.486C205.747 37.5 205.979 37.3305 206.058 37.0812L206.59 35.402C206.683 35.1062 206.912 34.8749 207.198 34.7552C207.487 34.6346 207.815 34.6358 208.092 34.7802L209.656 35.5951C209.889 35.7161 210.173 35.6724 210.358 35.487L212.475 33.3683C212.66 33.1832 212.704 32.8995 212.583 32.6673L211.767 31.0983C211.624 30.8226 211.623 30.4969 211.742 30.2102C211.862 29.9235 212.095 29.6949 212.392 29.6029L214.078 29.0803C214.329 29.0024 214.5 28.7701 214.5 28.5072V25.5199C214.5 25.2584 214.331 25.0271 214.081 24.948L212.405 24.4162C212.108 24.3223 211.877 24.093 211.757 23.8062C211.636 23.5174 211.638 23.1894 211.782 22.9118L212.596 21.3459C212.717 21.1137 212.674 20.83 212.489 20.6449L210.371 18.5261C210.186 18.3408 209.902 18.2971 209.67 18.4181L208.104 19.2333C207.827 19.3775 207.5 19.3788 207.212 19.2583C206.926 19.1386 206.697 18.9071 206.604 18.6112L206.071 16.9197C205.993 16.6699 205.761 16.5 205.499 16.5H202.514C202.253 16.5 202.021 16.6695 201.942 16.9188L201.41 18.598C201.317 18.8938 201.088 19.1251 200.802 19.2448C200.513 19.3655 200.185 19.3642 199.908 19.2198L198.344 18.4051C198.112 18.2844 197.829 18.3275 197.644 18.5117L195.513 20.63C195.327 20.815 195.282 21.0995 195.403 21.3323L196.218 22.8986C196.362 23.1762 196.364 23.5043 196.243 23.793C196.123 24.0798 195.892 24.3091 195.595 24.4031L193.919 24.9348C193.669 25.0139 193.5 25.2453 193.5 25.5068V28.4932C193.5 28.7547 193.669 28.9861 193.919 29.0652ZM198.235 20.0394L198.244 20.0445L198.214 20.0595L198.235 20.0394ZM213 27.8439L212.985 27.8486L213 27.8334V27.8439ZM204 24C202.343 24 201 25.3431 201 27C201 28.6569 202.343 30 204 30C205.657 30 207 28.6569 207 27C207 25.3431 205.657 24 204 24Z" fill="white"/>
<path d="M132.4 160C121.858 160 113.312 168.545 113.312 179.087V198.301C113.312 200.344 114.968 202 117.011 202H148.184C150.008 202 151.487 200.52 151.487 198.696V179.087C151.487 168.546 142.942 160 132.4 160ZM143.387 178.981L135.044 186.01C133.538 187.279 131.336 187.279 129.83 186.01L121.487 178.981C121.487 173.017 126.323 168.182 132.287 168.182H132.587C138.551 168.182 143.387 173.017 143.387 178.981Z" fill="#6D4AFF"/>
<path d="M132.4 160C121.858 160 113.312 168.545 113.312 179.087V198.301C113.312 200.344 114.968 202 117.011 202H148.184C150.008 202 151.487 200.52 151.487 198.696V179.087C151.487 168.546 142.942 160 132.4 160ZM143.387 178.981L135.044 186.01C133.538 187.279 131.336 187.279 129.83 186.01L121.487 178.981C121.487 173.017 126.323 168.182 132.287 168.182H132.587C138.551 168.182 143.387 173.017 143.387 178.981Z" fill="url(#paint3_linear_4031_15861)"/>
<g filter="url(#filter0_i_4031_15861)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M135.057 186.095C134.188 186.799 131.926 187.785 129.838 186.095C127.751 184.405 123.418 180.669 121.513 179.012H121.524L121.487 178.981C121.487 173.017 126.323 168.182 132.287 168.182H132.587C138.551 168.182 143.387 173.017 143.387 178.981L143.351 179.012H143.383V202H148.184C150.008 202 151.487 200.52 151.487 198.696V179.087C151.487 168.546 142.942 160 132.4 160C121.858 160 113.312 168.545 113.312 179.087V180.295L125.117 190.444C125.986 191.272 128.273 192.432 130.46 190.444C132.647 188.456 134.436 186.716 135.057 186.095Z" fill="url(#paint4_radial_4031_15861)"/>
</g>
<circle cx="132" cy="120" r="2" transform="rotate(90 132 120)" fill="#B0D4E5"/>
<circle cx="132" cy="128" r="2" transform="rotate(90 132 128)" fill="#B0D4E5"/>
<circle cx="132" cy="136" r="2" transform="rotate(90 132 136)" fill="#B0D4E5"/>
<circle cx="132" cy="144" r="2" transform="rotate(90 132 144)" fill="#B0D4E5"/>
<defs>
<filter id="filter0_i_4031_15861" x="112.72" y="160" width="38.7676" height="43.6537" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-0.592742" dy="1.65375"/>
<feGaussianBlur stdDeviation="4.44556"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.462745 0 0 0 0 0.337255 0 0 0 0 1 0 0 0 0.24 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_4031_15861"/>
</filter>
<linearGradient id="paint0_linear_4031_15861" x1="132" y1="27.0002" x2="132" y2="89.8573" gradientUnits="userSpaceOnUse">
<stop stop-color="#C1DEF8"/>
<stop offset="1" stop-color="#ECFAFF"/>
</linearGradient>
<linearGradient id="paint1_linear_4031_15861" x1="132.006" y1="7.00003" x2="132.006" y2="62.238" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEEBF7"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint2_linear_4031_15861" x1="188.996" y1="13.3637" x2="224.981" y2="58.3448" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFD66C"/>
<stop offset="1" stop-color="#FF8E4F"/>
</linearGradient>
<linearGradient id="paint3_linear_4031_15861" x1="114.679" y1="206.846" x2="120.395" y2="190.692" gradientUnits="userSpaceOnUse">
<stop stop-color="#28B0E8"/>
<stop offset="1" stop-color="#C5B7FF" stop-opacity="0"/>
</linearGradient>
<radialGradient id="paint4_radial_4031_15861" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(149.237 205.479) rotate(-138.034) scale(48.3148 39.5031)">
<stop stop-color="#E2DBFF"/>
<stop offset="1" stop-color="#6D4AFF"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB