From 86cd2437aaaebcc9bf6b5fe022237ee250f497a9 Mon Sep 17 00:00:00 2001 From: Xavier Michelon Date: Mon, 28 Aug 2023 17:45:06 +0200 Subject: [PATCH] feat(GODT-2772): misc tweaks. - Step description box tweaks and text color changes. - Factored out some constants (margins and dimensions. - Removed the ProtonStyle.px scaling which was useless as it was not applied everywhere. --- .../bridge-gui/qml/AccountDelegate.qml | 10 +-- .../bridge-gui/bridge-gui/qml/MainWindow.qml | 9 ++- .../bridge-gui/qml/Proton/Style.qml | 60 +++++++++++------- .../qml/SetupWizard/ClientConfigAppleMail.qml | 17 +++-- .../qml/SetupWizard/ClientConfigEnd.qml | 4 +- .../SetupWizard/ClientConfigParameters.qml | 18 +++--- .../qml/SetupWizard/ClientConfigSelector.qml | 4 +- .../qml/SetupWizard/ClientListItem.qml | 6 +- .../bridge-gui/qml/SetupWizard/HelpButton.qml | 10 +-- .../bridge-gui/qml/SetupWizard/LeftPane.qml | 2 +- .../bridge-gui/qml/SetupWizard/Login.qml | 12 ++-- .../bridge-gui/qml/SetupWizard/Onboarding.qml | 2 +- .../qml/SetupWizard/SetupWizard.qml | 24 +++---- .../qml/SetupWizard/StepDescriptionBox.qml | 63 +++++++++---------- 14 files changed, 124 insertions(+), 117 deletions(-) diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/AccountDelegate.qml b/internal/frontend/bridge-gui/bridge-gui/qml/AccountDelegate.qml index 3f4bdfea..3b14bca6 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/AccountDelegate.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/AccountDelegate.qml @@ -22,7 +22,7 @@ Item { LargeView } - property var _spacing: 12 * ProtonStyle.px + property var _spacing: 12 property ColorScheme colorScheme property color progressColor: { if (!root.enabled) @@ -154,7 +154,7 @@ Item { } } Item { - implicitHeight: root.type === AccountDelegate.LargeView ? 6 * ProtonStyle.px : 0 + implicitHeight: root.type === AccountDelegate.LargeView ? 6 : 0 } RowLayout { spacing: 0 @@ -222,15 +222,15 @@ Item { } } Item { - implicitHeight: root.type === AccountDelegate.LargeView ? 3 * ProtonStyle.px : 0 + implicitHeight: root.type === AccountDelegate.LargeView ? 3 : 0 } Rectangle { id: progress_bar color: root.colorScheme.border_weak - height: 4 * ProtonStyle.px + height: 4 radius: ProtonStyle.progress_bar_radius visible: root.user ? root.type === AccountDelegate.LargeView : false - width: 140 * ProtonStyle.px + width: 140 Rectangle { id: progress_bar_filled diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml b/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml index 274425cf..bd1451b4 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml @@ -22,8 +22,6 @@ import "SetupWizard" ApplicationWindow { id: root - property int _defaultHeight: 780 - property int _defaultWidth: 1080 property var notifications function layoutForUserCount(userCount) { @@ -75,10 +73,11 @@ ApplicationWindow { } colorScheme: ProtonStyle.currentStyle - height: _defaultHeight - minimumWidth: _defaultWidth + height: ProtonStyle.window_default_height + minimumHeight:ProtonStyle.window_minimum_height + minimumWidth: ProtonStyle.window_minimum_width visible: true - width: _defaultWidth + width: ProtonStyle.window_default_width Component.onCompleted: { layoutForUserCount(Backend.users.count); diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml index bf1561ce..504bfdad 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml @@ -20,21 +20,21 @@ import "." QtObject { id: root - property real account_hover_radius: 12 * root.px // px - property real account_row_radius: 12 * root.px // px - property real avatar_radius: 8 * root.px // px - property real banner_radius: 12 * root.px // px - property real big_avatar_radius: 12 * root.px // px + property int account_hover_radius: 12 + property int account_row_radius: 12 + property int avatar_radius: 8 + property int banner_radius: 12 + property int big_avatar_radius: 12 property int body_font_size: 14 - property real body_letter_spacing: 0.2 * root.px + property real body_letter_spacing: 0.2 property int body_line_height: 20 - property real button_radius: 8 * root.px // px + property int button_radius: 8 property int caption_font_size: 12 - property real caption_letter_spacing: 0.4 * root.px + property real caption_letter_spacing: 0.4 property int caption_line_height: 16 - property real card_radius: 12 * root.px // px - property real checkbox_radius: 4 * root.px // px - property real context_item_radius: 8 * root.px // px + property int card_radius: 12 + property int checkbox_radius: 4 + property int context_item_radius: 8 property ColorScheme currentStyle: lightStyle property ColorScheme darkProminentStyle: ColorScheme { id: _darkProminentStyle @@ -178,7 +178,7 @@ QtObject { text_norm: "#FFFFFF" text_weak: "#A7A4B5" } - property real dialog_radius: 12 * root.px // px + property int dialog_radius: 12 property int fontWeight_100: Font.Thin property int fontWeight_200: Font.Light property int fontWeight_300: Font.ExtraLight @@ -202,7 +202,7 @@ QtObject { } property int heading_font_size: 28 property int heading_line_height: 36 - property real input_radius: 8 * root.px // px + property int input_radius: 8 property int lead_font_size: 18 property int lead_line_height: 26 property ColorScheme lightProminentStyle: ColorScheme { @@ -354,19 +354,33 @@ QtObject { text_norm: "#0C0C14" text_weak: "#706D6B" } - property real progress_bar_radius: 3 * root.px // px - property real px: 1.00 // px + property int progress_bar_radius: 3 property int title_font_size: 20 property int title_line_height: 24 - property real tooltip_radius: 8 * root.px // px + property int tooltip_radius: 8 // WebView overlay styling - property real web_view_button_width: 320 * root.px - property real web_view_corner_radius: 10 * root.px - property real web_view_overlay_button_vertical_margin: 10 * root.px - property real web_view_overlay_horizontal_margin: 10 * root.px - property real web_view_overlay_margin: 50 * root.px + property int web_view_button_width: 320 + property int web_view_corner_radius: 10 + property int web_view_overlay_button_vertical_margin: 10 + property int web_view_overlay_horizontal_margin: 10 + property int web_view_overlay_margin: 50 property real web_view_overlay_opacity: 0.6 - property real web_view_overlay_vertical_margin: web_view_corner_radius - property real web_view_overley_border_width: 1 * root.px + property int web_view_overlay_vertical_margin: web_view_corner_radius + property int web_view_overley_border_width: 1 + + property int window_default_height: 780 + property int window_default_width: 1080 + property int window_minimum_height: 650 + property int window_minimum_width: window_default_width + + // setup wizard constant + property int wizard_pane_bottomMargin: 92 + property int wizard_pane_width: 364 + property int wizard_window_margin: 40 + property int wizard_spacing_extra_large: 32 + property int wizard_spacing_extra_small: 4 + property int wizard_spacing_large: 24 + property int wizard_spacing_medium: 16 + property int wizard_spacing_small: 8 } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml index 48a42e0f..4ffacf34 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml @@ -73,7 +73,7 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 24 + spacing: ProtonStyle.wizard_spacing_large Connections { function onCertificateInstallCanceled() { @@ -95,7 +95,7 @@ Item { } ColumnLayout { Layout.fillWidth: true - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium Label { Layout.alignment: Qt.AlignHCenter @@ -126,7 +126,7 @@ Item { } ColumnLayout { Layout.fillWidth: true - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium Button { Layout.fillWidth: true @@ -154,11 +154,11 @@ Item { } ColumnLayout { Layout.fillWidth: true - spacing: 8 + spacing: ProtonStyle.wizard_spacing_small RowLayout { Layout.fillWidth: true - spacing: 4 + spacing: ProtonStyle.wizard_spacing_extra_small ColorImage { color: wizard.colorScheme.signal_danger @@ -199,11 +199,11 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 24 + spacing: ProtonStyle.wizard_spacing_large ColumnLayout { Layout.fillWidth: true - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium Label { Layout.alignment: Qt.AlignHCenter @@ -228,13 +228,12 @@ Item { Image { Layout.alignment: Qt.AlignHCenter height: 102 - opacity: certificateInstall.waitingForCert ? 0.3 : 1.0 source: "/qml/icons/img-macos-profile-screenshot.png" width: 364 } ColumnLayout { Layout.fillWidth: true - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium Button { Layout.fillWidth: true diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigEnd.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigEnd.qml index 3893f7e4..7302fb6f 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigEnd.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigEnd.qml @@ -32,13 +32,13 @@ Rectangle { anchors.top: parent.top anchors.topMargin: 32 clip: true - width: 364 + width: ProtonStyle.wizard_pane_width ColumnLayout { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium Image { Layout.alignment: Qt.AlignHCenter diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml index 704248fb..30c65227 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml @@ -37,7 +37,7 @@ Rectangle { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium Label { Layout.alignment: Qt.AlignHCenter @@ -53,15 +53,15 @@ Rectangle { border.color: colorScheme.border_norm border.width: 1 color: "transparent" - height: childrenRect.height + 2 * 16 + height: childrenRect.height + 2 * ProtonStyle.wizard_spacing_medium radius: 12 RowLayout { anchors.left: parent.left - anchors.margins: 16 + anchors.margins: ProtonStyle.wizard_spacing_medium anchors.right: parent.right anchors.top: parent.top - spacing: 8 + spacing: ProtonStyle.wizard_spacing_small Label { Layout.fillHeight: true @@ -89,15 +89,15 @@ Rectangle { border.color: colorScheme.signal_warning border.width: 1 color: "transparent" - height: childrenRect.height + 2 * 16 - radius: 12 + height: childrenRect.height + 2 * ProtonStyle.wizard_spacing_medium + radius: ProtonStyle.banner_radius RowLayout { anchors.left: parent.left - anchors.margins: 16 + anchors.margins: ProtonStyle.wizard_spacing_medium anchors.right: parent.right anchors.top: parent.top - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium ColorImage { id: image @@ -122,7 +122,7 @@ Rectangle { RowLayout { id: configuration Layout.fillWidth: true - spacing: 32 + spacing: ProtonStyle.wizard_spacing_extra_large Configuration { Layout.fillWidth: true diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml index fcb5ddf6..de062f35 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml @@ -26,12 +26,12 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium Label { Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true - Layout.topMargin: 16 + Layout.topMargin: ProtonStyle.wizard_spacing_medium colorScheme: wizard.colorScheme horizontalAlignment: Qt.AlignHCenter text: qsTr("Select your email client") diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml index 8a133605..1ffe6157 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml @@ -36,14 +36,14 @@ Rectangle { return colorScheme.background_norm; } height: 68 - radius: 12 + radius: ProtonStyle.banner_radius RowLayout { anchors.fill: parent - anchors.margins: 16 + anchors.margins: ProtonStyle.wizard_spacing_medium ColorImage { - height: 36 + height: sourceSize.height source: iconSource sourceSize.height: 36 } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml index 6370a8e8..7dcf4e80 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml @@ -19,17 +19,19 @@ Button { id: root property var wizard + readonly property int _iconPadding: 8 // The SVG image we use has internal padding that we need to compensate for alignment. + readonly property int _iconSize: 24 anchors.bottom: parent.bottom - anchors.bottomMargin: 32 + anchors.bottomMargin: ProtonStyle.wizard_window_margin - _iconPadding anchors.right: parent.right - anchors.rightMargin: 32 + anchors.rightMargin: ProtonStyle.wizard_window_margin - _iconPadding colorScheme: wizard.colorScheme horizontalPadding: 0 icon.color: wizard.colorScheme.text_weak - icon.height: 24 + icon.height: _iconSize icon.source: "/qml/icons/ic-question-circle.svg" - icon.width: 24 + icon.width: _iconSize verticalPadding: 0 onClicked: { diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml index 20ee1aa2..38dbba1f 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml @@ -87,7 +87,7 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium Image { id: icon diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml index 797a9863..d6a67121 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml @@ -151,11 +151,11 @@ FocusScope { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium ColumnLayout { Layout.fillWidth: true - spacing: 8 + spacing: ProtonStyle.wizard_spacing_small Label { Layout.alignment: Qt.AlignHCenter @@ -287,11 +287,11 @@ FocusScope { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium ColumnLayout { Layout.fillWidth: true - spacing: 8 + spacing: ProtonStyle.wizard_spacing_small Label { Layout.alignment: Qt.AlignHCenter @@ -388,11 +388,11 @@ FocusScope { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 16 + spacing: ProtonStyle.wizard_spacing_medium ColumnLayout { Layout.fillWidth: true - spacing: 8 + spacing: ProtonStyle.wizard_spacing_small Label { Layout.alignment: Qt.AlignHCenter diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml index 22bf5008..e3ea88ae 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml @@ -24,7 +24,7 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - spacing: 24 + spacing: ProtonStyle.wizard_spacing_large StepDescriptionBox { colorScheme: wizard.colorScheme diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml index d0085230..3248184a 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml @@ -168,12 +168,12 @@ Item { LeftPane { id: leftContent anchors.bottom: parent.bottom - anchors.bottomMargin: 92 + anchors.bottomMargin: ProtonStyle.wizard_pane_bottomMargin anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top - anchors.topMargin: 40 + anchors.topMargin: ProtonStyle.wizard_window_margin clip: true - width: 364 + width: ProtonStyle.wizard_pane_width wizard: root Connections { @@ -190,13 +190,13 @@ Item { Image { id: mailLogoWithWordmark anchors.bottom: parent.bottom - anchors.bottomMargin: 40 + anchors.bottomMargin: ProtonStyle.wizard_window_margin anchors.horizontalCenter: parent.horizontalCenter - height: 36 + height: sourceSize.height source: root.colorScheme.mail_logo_with_wordmark sourceSize.height: 36 sourceSize.width: 134 - width: 134 + width: sourceSize.width } } Rectangle { @@ -208,13 +208,13 @@ Item { StackLayout { id: rightContent anchors.bottom: parent.bottom - anchors.bottomMargin: 92 + anchors.bottomMargin: ProtonStyle.wizard_pane_bottomMargin anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top - anchors.topMargin: 40 + anchors.topMargin: ProtonStyle.wizard_window_margin clip: true currentIndex: 0 - width: 364 + width: ProtonStyle.wizard_pane_width // rightContent stack index 0 Onboarding { @@ -267,15 +267,15 @@ Item { Button { id: backButton anchors.left: parent.left - anchors.leftMargin: 40 + anchors.leftMargin: ProtonStyle.wizard_window_margin anchors.top: parent.top - anchors.topMargin: 40 + anchors.topMargin: ProtonStyle.wizard_window_margin colorScheme: root.colorScheme icon.source: "/qml/icons/ic-chevron-left.svg" iconOnTheLeft: true secondary: true secondaryIsOpaque: true - spacing: 8 + spacing: ProtonStyle.wizard_spacing_small text: qsTr("Back") visible: backAction != null diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml index 74e8c02d..375a279f 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml @@ -15,7 +15,7 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls -Item { +RowLayout { id: root property ColorScheme colorScheme @@ -24,43 +24,36 @@ Item { property int iconSize: 64 property string title - implicitHeight: children[0].implicitHeight - implicitWidth: children[0].implicitWidth + spacing: ProtonStyle.wizard_spacing_large - RowLayout { - anchors.fill: parent - spacing: 24 + Image { + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.preferredHeight: iconSize + Layout.preferredWidth: iconSize + mipmap: true + source: root.icon + } + ColumnLayout { + Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter + Layout.fillWidth: true + spacing: ProtonStyle.wizard_spacing_small - Image { - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Layout.preferredHeight: iconSize - Layout.preferredWidth: iconSize - mipmap: true - source: root.icon - } - ColumnLayout { - Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter + Label { + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillHeight: false Layout.fillWidth: true - spacing: 8 - - Label { - Layout.alignment: Qt.AlignLeft | Qt.AlignTop - Layout.fillHeight: false - Layout.fillWidth: true - colorScheme: root.colorScheme - text: root.title - type: Label.LabelType.Body_bold - } - Label { - Layout.alignment: Qt.AlignLeft | Qt.AlignTop - Layout.fillHeight: true - Layout.fillWidth: true - color: root.colorScheme.text_weak - colorScheme: root.colorScheme - text: root.description - type: Label.LabelType.Body - verticalAlignment: Text.AlignTop - } + colorScheme: root.colorScheme + text: root.title + type: Label.LabelType.Body_bold + } + Label { + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillHeight: true + Layout.fillWidth: true + colorScheme: root.colorScheme + text: root.description + type: Label.LabelType.Body + verticalAlignment: Text.AlignTop } } }