wilderjds
/
peroxide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

GODT-1502: Rebranding: color and radius.

Browse Source
create-reload-action
Jakub 4 years ago
parent 415d08b411
commit e353dc554d
19 changed files with 252 additions and 229 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      internal/frontend/qml/AccountDelegate.qml
  2. 4
      internal/frontend/qml/Banner.qml
  3. 2
      internal/frontend/qml/Configuration.qml
  4. 2
      internal/frontend/qml/ContentWrapper.qml
  5. 2
      internal/frontend/qml/Proton/Button.qml
  6. 10
      internal/frontend/qml/Proton/CheckBox.qml
  7. 14
      internal/frontend/qml/Proton/ComboBox.qml
  8. 14
      internal/frontend/qml/Proton/Dialog.qml
  9. 14
      internal/frontend/qml/Proton/Menu.qml
  10. 8
      internal/frontend/qml/Proton/MenuItem.qml
  11. 331
      internal/frontend/qml/Proton/Style.qml
  12. 10
      internal/frontend/qml/Proton/Switch.qml
  13. 18
      internal/frontend/qml/Proton/TextArea.qml
  14. 8
      internal/frontend/qml/Proton/TextField.qml
  15. 4
      internal/frontend/qml/Proton/Toggle.qml
  16. 4
      internal/frontend/qml/SetupGuide.qml
  17. 4
      internal/frontend/qml/StatusWindow.qml
  18. BIN
      internal/frontend/qml/icons/img-welcome-dark.png
  19. 16
      internal/frontend/qml/icons/img-welcome-dark.svg

16
internal/frontend/qml/AccountDelegate.qml
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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

Write Preview
Loading…
Cancel
Save