yesBad/proton-bridge
1
0
Fork 0
forked from Silverfish/proton-bridge
Code Actions Activity

feat(GODT-2772): misc tweaks.

Browse Source 
- 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.
This commit is contained in:
Xavier Michelon
2023-08-28 17:45:06 +02:00
parent 53f5f9aa43
commit 86cd2437aa
14 changed files with 124 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
internal/frontend/bridge-gui/bridge-gui/qml/AccountDelegate.qml
View File

@ -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

9
internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml
View File

@ -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);

60
internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml
View File

@ -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
}

17
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml
View File

@ -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

4
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigEnd.qml
View File

@ -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

18
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml
View File

@ -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

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

@ -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")

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

@ -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
}

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

@ -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: {

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

@ -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

12
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml
View File

@ -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

2
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml
View File

@ -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

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

@ -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

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

@ -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
}
}
}