ProtonMail
/
proton-bridge
mirror of https://github.com/ProtonMail/proton-bridge
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

GODT-1502: Rebranding: color and radius.

This commit is contained in:
Jakub 2022-02-07 11:19:06 +01:00
parent 415d08b411
commit e353dc554d
19 changed files with 252 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
internal/frontend/qml/AccountDelegate.qml
View File

@ -27,7 +27,7 @@ Item {
property ColorScheme colorScheme
property var user
property var _spacing: 12
property var _spacing: 12 * ProtonStyle.px
property color usedSpaceColor : {
if (!root.enabled) return root.colorScheme.text_weak
@ -86,7 +86,7 @@ Item {
Layout.fillHeight: true
Layout.preferredWidth: height
radius: 4
radius: ProtonStyle.avatar_radius
color: root.colorScheme.background_avatar
@ -130,7 +130,7 @@ Item {
elide: Text.ElideMiddle
}
Item { implicitHeight: root.type == AccountDelegate.LargeView ? 6 : 0 }
Item { implicitHeight: root.type == AccountDelegate.LargeView ? 6 * ProtonStyle.px : 0 }
RowLayout {
spacing: 0
@ -161,14 +161,16 @@ Item {
Rectangle {
id: storage_bar
visible: root.user ? root.type == AccountDelegate.LargeView : false
width: 140
height: 4
radius: 3
width: 140 * ProtonStyle.px
height: 4 * ProtonStyle.px
radius: ProtonStyle.storage_bar_radius
color: root.colorScheme.border_weak
Rectangle {
radius: 3
id: storage_bar_filled
radius: ProtonStyle.storage_bar_radius
color: root.usedSpaceColor
visible: root.user ? parent.visible && root.user.loggedIn : false
anchors {

4
internal/frontend/qml/Banner.qml
View File

@ -73,7 +73,7 @@ Popup {
anchors.bottom: parent.bottom
anchors.left: parent.left
width: parent.width + 10
radius: 10
radius: ProtonStyle.banner_radius
color: {
if (!root.notification) {
return "transparent"
@ -180,7 +180,7 @@ Popup {
anchors.bottom: parent.bottom
anchors.right: parent.right
width: parent.width + 10
radius: 10
radius: ProtonStyle.banner_radius
color: {
if (!root.notification) {
return "transparent"

2
internal/frontend/qml/Configuration.qml
View File

@ -37,7 +37,7 @@ Rectangle {
implicitHeight: content.height + 2*root._margin
color: root.colorScheme.background_norm
radius: 9
radius: ProtonStyle.card_radius
property int _margin: 24

2
internal/frontend/qml/ContentWrapper.qml
View File

@ -159,7 +159,7 @@ Item {
highlight: Rectangle {
color: leftBar.colorScheme.interaction_default_active
radius: 4
radius: ProtonStyle.account_row_radius
}
model: root.backend.users

2
internal/frontend/qml/Proton/Button.qml
View File

@ -147,7 +147,7 @@ T.Button {
background: Rectangle {
implicitWidth: 36
implicitHeight: 36
radius: 4
radius: Style.button_radius
visible: true
color: {
if (!isIcon) {

10
internal/frontend/qml/Proton/CheckBox.qml
View File

@ -28,10 +28,10 @@ T.CheckBox {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
padding: 0
spacing: 8
@ -39,7 +39,7 @@ T.CheckBox {
indicator: Rectangle {
implicitWidth: 20
implicitHeight: 20
radius: 4
radius: Style.checkbox_radius
x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
y: control.topPadding + (control.availableHeight - height) / 2
@ -96,7 +96,7 @@ T.CheckBox {
// TODO: do we need PartiallyChecked state?
//Rectangle {
// Rectangle {
// x: (parent.width - width) / 2
// y: (parent.height - height) / 2
// width: 16

14
internal/frontend/qml/Proton/ComboBox.qml
View File

@ -27,10 +27,10 @@ T.ComboBox {
property ColorScheme colorScheme
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
leftPadding: 12 + (!root.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
rightPadding: 12 + (root.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
@ -64,7 +64,7 @@ T.ComboBox {
placeholderTextColor: root.enabled ? root.colorScheme.text_hint : root.colorScheme.text_disabled
background: Rectangle {
radius: 4
radius: Style.context_item_radius
visible: root.enabled && root.editable && !root.flat
border.color: {
if (root.activeFocus) {
@ -85,7 +85,7 @@ T.ComboBox {
background: Rectangle {
implicitWidth: 140
implicitHeight: 36
radius: 4
radius: Style.context_item_radius
color: {
if (root.down) {
return root.colorScheme.interaction_default_active
@ -142,7 +142,7 @@ T.ComboBox {
palette.highlightedText: selected ? root.colorScheme.text_invert : root.colorScheme.text_norm
background: PaddedRectangle {
radius: 4
radius: Style.context_item_radius
color: {
if (parent.down) {
return root.colorScheme.interaction_default_active
@ -187,7 +187,7 @@ T.ComboBox {
background: Rectangle {
color: root.colorScheme.background_norm
radius: 10
radius: Style.dialog_radius
border.color: root.colorScheme.border_weak
border.width: 1
}

14
internal/frontend/qml/Proton/Dialog.qml
View File

@ -53,19 +53,19 @@ T.Dialog {
anchors.centerIn: Overlay.overlay
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding,
implicitHeaderWidth,
implicitFooterWidth)
contentWidth + leftPadding + rightPadding,
implicitHeaderWidth,
implicitFooterWidth)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding
+ (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+ (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
contentHeight + topPadding + bottomPadding
+ (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0)
+ (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0))
padding: 24
background: Rectangle {
color: root.colorScheme.background_norm
radius: 10
radius: Style.dialog_radius
}
// TODO: Add DropShadow here

14
internal/frontend/qml/Proton/Menu.qml
View File

@ -27,10 +27,14 @@ T.Menu {
property ColorScheme colorScheme
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding)
implicitWidth: Math.max(
implicitBackgroundWidth + leftInset + rightInset,
contentWidth + leftPadding + rightPadding
)
implicitHeight: Math.max(
implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding
)
margins: 0
overlap: 1
@ -63,6 +67,6 @@ T.Menu {
color: colorScheme.background_norm
border.width: 1
border.color: colorScheme.border_weak
radius: 10
radius: Style.account_row_radius
}
}

8
internal/frontend/qml/Proton/MenuItem.qml
View File

@ -27,10 +27,10 @@ T.MenuItem {
property ColorScheme colorScheme
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
padding: 6
spacing: 6
@ -66,7 +66,7 @@ T.MenuItem {
background: Rectangle {
implicitWidth: 164
implicitHeight: 36
radius: 4
radius: Style.button_radius
color: control.down ? control.colorScheme.interaction_default_active : control.highlighted ? control.colorScheme.interaction_default_hover : control.colorScheme.interaction_default
}
}

331
internal/frontend/qml/Proton/Style.qml
View File

@ -25,6 +25,7 @@ import "./"
// http://imaginativethinking.ca/make-qml-component-singleton/
QtObject {
id: root
// TODO: Once we will use Qt >=5.15 this should be refactored with inline components as follows:
// https://doc.qt.io/qt-5/qtqml-documents-definetypes.html#inline-components
@ -39,69 +40,69 @@ QtObject {
prominent: lightProminentStyle
// Primary
primay_norm: "#657EE4"
primay_norm: "#6D4AFF"
// Interaction-norm
interaction_norm: "#657EE4"
interaction_norm_hover: "#5064B6"
interaction_norm_active: "#3C4B88"
interaction_norm: "#6D4AFF"
interaction_norm_hover: "#4D34B3"
interaction_norm_active: "#372580"
// Text
text_norm: "#262A33"
text_weak: "#696F7D"
text_hint: "#A4A9B5"
text_disabled: "#BABEC7"
text_norm: "#0C0C14"
text_weak: "#706D6B"
text_hint: "#8F8D8A"
text_disabled: "#C2BFBC"
text_invert: "#FFFFFF"
// Field
field_norm: "#BABEC7"
field_hover: "#A4A9B5"
field_disabled: "#D0D3DA"
field_norm: "#ADABA8"
field_hover: "#8F8D8A"
field_disabled: "#D1CFCD"
// Border
border_norm: "#D0D3DA"
border_weak: "#E7E9EC"
border_norm: "#D1CFCD"
border_weak: "#EAE7E4"
// Background
background_norm: "#FFFFFF"
background_weak: "#F3F4F6"
background_strong: "#E7E9EC"
background_avatar: "#A4A9B5"
background_weak: "#F5F4F2"
background_strong: "#EAE7E4"
background_avatar: "#C2BFBC"
// Interaction-weak
interaction_weak: "#D0D3DA"
interaction_weak_hover: "#BABEC7"
interaction_weak_active: "#A4A9B5"
interaction_weak: "#D1CFCD"
interaction_weak_hover: "#C2BFBC"
interaction_weak_active: "#A8A6A3"
// Interaction-default
interaction_default: "#00000000"
interaction_default_hover: "#33BABEC7"
interaction_default_active: "#4DBABEC7"
interaction_default: Qt.rgba(0,0,0,0)
interaction_default_hover: Qt.rgba(194./255., 191./255., 188./255., 0.2)
interaction_default_active: Qt.rgba(194./255., 191./255., 188./255., 0.4)
// Scrollbar
scrollbar_norm: "#D0D3DA"
scrollbar_hover: "#BABEC7"
scrollbar_norm: "#D1CFCD"
scrollbar_hover: "#C2BFBC"
// Signal
signal_danger: "#D42F34"
signal_danger_hover: "#C7262B"
signal_danger_active: "#BA1E23"
signal_warning: "#F5830A"
signal_warning_hover: "#F5740A"
signal_warning_active: "#F5640A"
signal_success: "#1B8561"
signal_success_hover: "#147857"
signal_success_active: "#0F6B4C"
signal_info: "#1578CF"
signal_info_hover: "#0E6DC2"
signal_info_active: "#0764B5"
signal_danger: "#DC3251"
signal_danger_hover: "#F74F6D"
signal_danger_active: "#B72346"
signal_warning: "#FF9900"
signal_warning_hover: "#FFB800"
signal_warning_active: "#FF851A"
signal_success: "#1EA885"
signal_success_hover: "#23C299"
signal_success_active: "#198F71"
signal_info: "#239ECE"
signal_info_hover: "#27B1E8"
signal_info_active: "#1F83B5"
// Shadows
shadow_norm: "#FFFFFF"
shadow_lifted: "#FFFFFF"
shadow_norm: Qt.rgba(0,0,0, 0.1) // #000000 10% x:0 y:1 blur:4
shadow_lifted: Qt.rgba(0,0,0, 0.16) // #000000 16% x:0 y:8 blur:24
// Backdrop
backdrop_norm: "#7A262A33"
backdrop_norm: Qt.rgba(12./255., 12./255., 20./255., 0.32)
// Images
welcome_img: "icons/img-welcome.png"
@ -113,69 +114,69 @@ QtObject {
prominent: this
// Primary
primay_norm: "#657EE4"
primay_norm: "#8A6EFF"
// Interaction-norm
interaction_norm: "#657EE4"
interaction_norm_hover: "#7D92E8"
interaction_norm_active: "#98A9EE"
interaction_norm: "#6D4AFF"
interaction_norm_hover: "#7C5CFF"
interaction_norm_active: "#8A6EFF"
// Text
text_norm: "#FFFFFF"
text_weak: "#949BB9"
text_hint: "#565F84"
text_disabled: "#444E72"
text_invert: "#1C223D"
text_weak: "#9282D4"
text_hint: "#544399"
text_disabled: "#4A398F"
text_invert: "#1B1340"
// Field
field_norm: "#565F84"
field_hover: "#949BB9"
field_disabled: "#353E60"
field_norm: "#9282D4"
field_hover: "#7C5CFF"
field_disabled: "#38277A"
// Border
border_norm: "#353E60"
border_weak: "#2D3657"
border_norm: "#413085"
border_weak: "#3C2B80"
// Background
background_norm: "#1C223D"
background_weak: "#272F4F"
background_strong: "#2D3657"
background_avatar: "#444E72"
background_norm: "#1B1340"
background_weak: "#271C57"
background_strong: "#38277A"
background_avatar: "#6D4AFF"
// Interaction-weak
interaction_weak: "#353E60"
interaction_weak_hover: "#444E72"
interaction_weak_active: "#565F84"
interaction_weak: "#4A398F"
interaction_weak_hover: "#6D4AFF"
interaction_weak_active: "#8A6EFF"
// Interaction-default
interaction_default: "#00000000"
interaction_default_hover: "#4D444E72"
interaction_default_active: "#66444E72"
interaction_default: Qt.rgba(0,0,0,0)
interaction_default_hover: Qt.rgba(68./255., 78./255., 114./255., 0.2)
interaction_default_active: Qt.rgba(68./255., 78./255., 114./255., 0.3)
// Scrollbar
scrollbar_norm: "#353E60"
scrollbar_hover: "#444E72"
scrollbar_norm: "#413085"
scrollbar_hover: "#4A398F"
// Signal
signal_danger: "#ED4C51"
signal_danger_hover: "#F7595E"
signal_danger_active: "#FF666B"
signal_warning: "#F5930A"
signal_warning_hover: "#F5A716"
signal_warning_active: "#F5B922"
signal_success: "#349172"
signal_success_hover: "#339C79"
signal_success_active: "#31A67F"
signal_danger: "#F5385A"
signal_danger_hover: "#FF5473"
signal_danger_active: "#DC3251"
signal_warning: "#FF9900"
signal_warning_hover: "#FFB800"
signal_warning_active: "#FF8419"
signal_success: "#1EA885"
signal_success_hover: "#23C299"
signal_success_active: "#198F71"
signal_info: "#2C89DB"
signal_info_hover: "#3491E3"
signal_info_active: "#3D99EB"
signal_info_active: "#1F83B5"
// Shadows
shadow_norm: "#1C223D"
shadow_lifted: "#1C223D"
shadow_norm: Qt.rgba(0,0,0, 0.32) // #000000 32% x:0 y:1 blur:4
shadow_lifted: Qt.rgba(0,0,0, 0.40) // #000000 40% x:0 y:8 blur:24
// Backdrop
backdrop_norm: "#52000000"
backdrop_norm: Qt.rgba(0,0,0, 0.32)
// Images
welcome_img: "icons/img-welcome-dark.png"
@ -187,69 +188,69 @@ QtObject {
prominent: darkProminentStyle
// Primary
primay_norm: "#657EE4"
primay_norm: "#8A6EFF"
// Interaction-norm
interaction_norm: "#657EE4"
interaction_norm_hover: "#7D92E8"
interaction_norm_active: "#98A9EE"
interaction_norm: "#6D4AFF"
interaction_norm_hover: "#7C5CFF"
interaction_norm_active: "#8A6EFF"
// Text
text_norm: "#FFFFFF"
text_weak: "#A4A9B5"
text_hint: "#696F7D"
text_disabled: "#575D6B"
text_invert: "#262A33"
text_weak: "#A7A4B5"
text_hint: "#6D697D"
text_disabled: "#5B576B"
text_invert: "#1C1B24"
// Field
field_norm: "#575D6B"
field_hover: "#696F7D"
field_disabled: "#464B58"
field_norm: "#5B576B"
field_hover: "#6D697D"
field_disabled: "#3F3B4C"
// Border
border_norm: "#464B58"
border_weak: "#363A46"
border_norm: "#4A4658"
border_weak: "#343140"
// Background
background_norm: "#262A33"
background_weak: "#2E323C"
background_strong: "#363A46"
background_avatar: "#575D6B"
background_norm: "#1C1B24"
background_weak: "#292733"
background_strong: "#3F3B4C"
background_avatar: "#6D4AFF"
// Interaction-weak
interaction_weak: "#464B58"
interaction_weak_hover: "#575D6B"
interaction_weak_active: "#696F7D"
interaction_weak: "#4A4658"
interaction_weak_hover: "#5B576B"
interaction_weak_active: "#6D697D"
// Interaction-default
interaction_default: "#00000000"
interaction_default_hover: "#33575D6B"
interaction_default_active: "#4D575D6B"
interaction_default_hover: Qt.rgba(91./255.,87./255.,107./255.,0.2)
interaction_default_active: Qt.rgba(91./255.,87./255.,107./255.,0.4)
// Scrollbar
scrollbar_norm: "#464B58"
scrollbar_hover: "#575D6B"
scrollbar_norm: "#4A4658"
scrollbar_hover: "#5B576B"
// Signal
signal_danger: "#ED4C51"
signal_danger_hover: "#F7595E"
signal_danger_active: "#FF666B"
signal_warning: "#F5930A"
signal_warning_hover: "#F5A716"
signal_warning_active: "#F5B922"
signal_success: "#349172"
signal_success_hover: "#339C79"
signal_success_active: "#31A67F"
signal_info: "#2C89DB"
signal_info_hover: "#3491E3"
signal_info_active: "#3D99EB"
signal_danger: "#F5385A"
signal_danger_hover: "#FF5473"
signal_danger_active: "#DC3251"
signal_warning: "#FF9900"
signal_warning_hover: "#FFB800"
signal_warning_active: "#FF8419"
signal_success: "#1EA885"
signal_success_hover: "#23C299"
signal_success_active: "#198F71"
signal_info: "#239ECE"
signal_info_hover: "#27B1E8"
signal_info_active: "#1F83B5"
// Shadows
shadow_norm: "#262A33" // #000000 32% x+0 y+1 blur:4
shadow_lifted: "#262A33" // #000000 40% x+0 y+8 blur:24
shadow_norm: Qt.rgba(0,0,0,0.4) // #000000 40% x+0 y+1 blur:4
shadow_lifted: Qt.rgba(0,0,0,0.48) // #000000 48% x+0 y+8 blur:24
// Backdrop
backdrop_norm: "#52000000"
backdrop_norm: Qt.rgba(0,0,0,0.32)
// Images
welcome_img: "icons/img-welcome-dark.png"
@ -261,69 +262,69 @@ QtObject {
prominent: this
// Primary
primay_norm: "#657EE4"
primay_norm: "#8A6EFF"
// Interaction-norm
interaction_norm: "#657EE4"
interaction_norm_hover: "#7D92E8"
interaction_norm_active: "#98A9EE"
interaction_norm: "#6D4AFF"
interaction_norm_hover: "#7C5CFF"
interaction_norm_active: "#8A6EFF"
// Text
text_norm: "#FFFFFF"
text_weak: "#A4A9B5"
text_hint: "#696F7D"
text_disabled: "#575D6B"
text_invert: "#262A33"
text_weak: "#A7A4B5"
text_hint: "#6D697D"
text_disabled: "#5B576B"
text_invert: "#1C1B24"
// Field
field_norm: "#575D6B"
field_hover: "#696F7D"
field_disabled: "#464B58"
field_norm: "#5B576B"
field_hover: "#6D697D"
field_disabled: "#3F3B4C"
// Border
border_norm: "#464B58"
border_weak: "#363A46"
border_norm: "#4A4658"
border_weak: "#343140"
// Background
background_norm: "#1A1D24"
background_weak: "#2E323C"
background_strong: "#363A46"
background_avatar: "#575D6B"
background_norm: "#16141c"
background_weak: "#292733"
background_strong: "#3F3B4C"
background_avatar: "#6D4AFF"
// Interaction-weak
interaction_weak: "#464B58"
interaction_weak_hover: "#575D6B"
interaction_weak_active: "#696F7D"
interaction_weak: "#4A4658"
interaction_weak_hover: "#5B576B"
interaction_weak_active: "#6D697D"
// Interaction-default
interaction_default: "#00000000"
interaction_default_hover: "#33575D6B"
interaction_default_active: "#4D575D6B"
interaction_default_hover: Qt.rgba(91./255.,87./255.,107./255.,0.2)
interaction_default_active: Qt.rgba(91./255.,87./255.,107./255.,0.4)
// Scrollbar
scrollbar_norm: "#464B58"
scrollbar_hover: "#575D6B"
scrollbar_norm: "#4A4658"
scrollbar_hover: "#5B576B"
// Signal
signal_danger: "#ED4C51"
signal_danger_hover: "#F7595E"
signal_danger_active: "#FF666B"
signal_warning: "#F5930A"
signal_warning_hover: "#F5A716"
signal_warning_active: "#F5B922"
signal_success: "#349172"
signal_success_hover: "#339C79"
signal_success_active: "#31A67F"
signal_info: "#2C89DB"
signal_info_hover: "#3491E3"
signal_info_active: "#3D99EB"
signal_danger: "#F5385A"
signal_danger_hover: "#FF5473"
signal_danger_active: "#DC3251"
signal_warning: "#FF9900"
signal_warning_hover: "#FFB800"
signal_warning_active: "#FF8419"
signal_success: "#1EA885"
signal_success_hover: "#23C299"
signal_success_active: "#198F71"
signal_info: "#239ECE"
signal_info_hover: "#27B1E8"
signal_info_active: "#1F83B5"
// Shadows
shadow_norm: "#262A33" // #000000 32% x+0 y+1 blur:4
shadow_lifted: "#262A33" // #000000 40% x+0 y+8 blur:24
shadow_norm: Qt.rgba(0,0,0,0.4) // #000000 40% x+0 y+1 blur:4
shadow_lifted: Qt.rgba(0,0,0,0.48) // #000000 48% x+0 y+8 blur:24
// Backdrop
backdrop_norm: "#52000000"
backdrop_norm: Qt.rgba(0,0,0,0.32)
// Images
welcome_img: "icons/img-welcome-dark.png"
@ -344,6 +345,22 @@ QtObject {
}
}
property real px : 1.00 // px
property real input_radius : 8 * root.px // px
property real button_radius : 8 * root.px // px
property real checkbox_radius : 4 * root.px // px
property real avatar_radius : 8 * root.px // px
property real big_avatar_radius : 12 * root.px // px
property real account_hover_radius : 12 * root.px // px
property real account_row_radius : 12 * root.px // px
property real context_item_radius : 8 * root.px // px
property real banner_radius : 12 * root.px // px
property real dialog_radius : 12 * root.px // px
property real card_radius : 12 * root.px // px
property real storage_bar_radius : 3 * root.px // px
property real tooltip_radius : 8 * root.px // px
property int heading_font_size: 28
property int heading_line_height: 36
@ -355,11 +372,11 @@ QtObject {
property int body_font_size: 14
property int body_line_height: 20
property real body_letter_spacing: 0.2
property real body_letter_spacing: 0.2 * root.px
property int caption_font_size: 12
property int caption_line_height: 16
property real caption_letter_spacing: 0.4
property real caption_letter_spacing: 0.4 * root.px
property int fontWeight_100: Font.Thin
property int fontWeight_200: Font.Light

10
internal/frontend/qml/Proton/Switch.qml
View File

@ -38,10 +38,10 @@ T.Switch {
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
implicitContentHeight + topPadding + bottomPadding,
implicitIndicatorHeight + topPadding + bottomPadding)
padding: 0
spacing: 7
@ -53,7 +53,7 @@ T.Switch {
x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
y: control.topPadding + (control.availableHeight - height) / 2
radius: 12
radius: height / 2.
color: control.enabled || control.loading ? control.colorScheme.background_norm : control.colorScheme.background_strong
border.width: control.enabled && !loading ? 1 : 0
border.color: control.hovered ? control.colorScheme.field_hover : control.colorScheme.field_norm
@ -63,7 +63,7 @@ T.Switch {
y: (parent.height - height) / 2
width: 24
height: 24
radius: 12
radius: parent.radius
visible: !loading

18
internal/frontend/qml/Proton/TextArea.qml
View File

@ -183,15 +183,15 @@ FocusScope {
id: control
implicitWidth: Math.max(
contentWidth + leftPadding + rightPadding,
implicitBackgroundWidth + leftInset + rightInset,
placeholder.implicitWidth + leftPadding + rightPadding
)
contentWidth + leftPadding + rightPadding,
implicitBackgroundWidth + leftInset + rightInset,
placeholder.implicitWidth + leftPadding + rightPadding
)
implicitHeight: Math.max(
contentHeight + topPadding + bottomPadding,
implicitBackgroundHeight + topInset + bottomInset,
placeholder.implicitHeight + topPadding + bottomPadding
)
contentHeight + topPadding + bottomPadding,
implicitBackgroundHeight + topInset + bottomInset,
placeholder.implicitHeight + topPadding + bottomPadding
)
topPadding: 8
bottomPadding: 8
@ -270,7 +270,7 @@ FocusScope {
background: Rectangle {
anchors.fill: parent
radius: 4
radius: Style.input_radius
visible: true
color: root.colorScheme.background_norm
border.color: {

8
internal/frontend/qml/Proton/TextField.qml
View File

@ -160,7 +160,7 @@ FocusScope {
Layout.fillHeight: true
Layout.fillWidth: true
radius: 4
radius: Style.input_radius
visible: true
color: root.colorScheme.background_norm
border.color: {
@ -198,10 +198,10 @@ FocusScope {
Layout.fillWidth: true
implicitWidth: implicitBackgroundWidth + leftInset + rightInset
|| Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
|| Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
contentHeight + topPadding + bottomPadding,
placeholder.implicitHeight + topPadding + bottomPadding)
contentHeight + topPadding + bottomPadding,
placeholder.implicitHeight + topPadding + bottomPadding)
topPadding: 8
bottomPadding: 8

4
internal/frontend/qml/Proton/Toggle.qml
View File

@ -39,7 +39,7 @@ Item {
implicitWidth: 40
implicitHeight: 24
radius: 20
radius: width/2
color: {
if (root.loading) return "transparent"
if (root._disabled) return root.colorScheme.background_strong
@ -56,7 +56,7 @@ Item {
anchors.leftMargin: root.checked ? 16 : 0
width: 24
height: 24
radius: 12
radius: width/2
color: {
if (root.loading) return "transparent"
if (root._disabled) return root.colorScheme.field_disabled

4
internal/frontend/qml/SetupGuide.qml
View File

@ -145,7 +145,7 @@ Item {
highlight: Rectangle {
color: root.colorScheme.interaction_default_active
radius: 4
radius: ProtonStyle.context_item_radius
}
delegate: Item {
@ -220,7 +220,7 @@ Item {
highlight: Rectangle {
color: root.colorScheme.interaction_default_active
radius: 4
radius: ProtonStyle.context_item_radius
}
delegate: Item {

4
internal/frontend/qml/StatusWindow.qml
View File

@ -67,7 +67,7 @@ Window {
anchors.left: parent.left
anchors.right: parent.right
height: parent.height * 2
radius: 10
radius: ProtonStyle.dialog_radius
color: {
if (!statusItem.activeNotification) {
@ -232,7 +232,7 @@ Window {
anchors.left: parent.left
anchors.right: parent.right
height: parent.height * 2
radius: 10
radius: ProtonStyle.dialog_radius
color: root.colorScheme.background_weak
}

BIN
internal/frontend/qml/icons/img-welcome-dark.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 67 KiB

16
internal/frontend/qml/icons/img-welcome-dark.svg
View File

@ -7,8 +7,8 @@
version="1.1"
id="svg90"
sodipodi:docname="img-welcome-dark.svg"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
inkscape:export-filename="/home/dev/gopath/src/github.com/ProtonMail/proton-bridge/internal/frontend/qml/icons/img-welcome.png"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
inkscape:export-filename="/home/dev/gopath/src/github.com/ProtonMail/proton-bridge/internal/frontend/qml/icons/img-welcome-dark.png"
inkscape:export-xdpi="400"
inkscape:export-ydpi="400"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
@ -27,15 +27,15 @@
inkscape:snap-page="true"
inkscape:zoom="4.3513514"
inkscape:cx="132.02795"
inkscape:cy="74.114907"
inkscape:window-width="2556"
inkscape:window-height="1404"
inkscape:window-x="0"
inkscape:window-y="16"
inkscape:cy="37.459627"
inkscape:window-width="1276"
inkscape:window-height="1401"
inkscape:window-x="1280"
inkscape:window-y="18"
inkscape:window-maximized="1"
inkscape:current-layer="svg90" />
<rect
style="fill:#262a33;stroke-width:1.88976;stroke-linecap:round;stroke-linejoin:round;fill-opacity:1"
style="fill:#1c1b24;stroke-width:1.88976;stroke-linecap:round;stroke-linejoin:round;fill-opacity:1"
id="rect931"
width="264"
height="148"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB