GODT-1346: GODT-1340 GODT-1315 QML changes

GODT-1365: Create ComboBox component GODT-1338: GODT-1343 Help view buttons GODT-1340: Not crashing, user list updating in main thread. GODT-1345: adding panic handlers
2025-12-22 18:16:43 +00:00 · 2021-09-28 12:45:47 +00:00
parent 2c8feff97a
commit d11cf57879
46 changed files with 1267 additions and 727 deletions
--- a/internal/frontend/qml/Proton/ApplicationWindow.qml
+++ b/internal/frontend/qml/Proton/ApplicationWindow.qml
@ -22,8 +22,6 @@ import QtQuick.Controls 2.12
 import QtQuick.Controls.impl 2.12
 import QtQuick.Templates 2.12 as T

-import "."
-
 T.ApplicationWindow {
    id: root

--- a/internal/frontend/qml/Proton/Button.qml
+++ b/internal/frontend/qml/Proton/Button.qml
@ -19,7 +19,8 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Controls.impl 2.12
 import QtQuick.Templates 2.12 as T
-import "."
+
+import "." as Proton

 T.Button {
    property ColorScheme colorScheme
@ -32,7 +33,7 @@ T.Button {

    property bool borderless: false

-    property int labelType: Label.LabelType.Body
+    property int labelType: Proton.Label.LabelType.Body

    // TODO: store previous enabled state and restore it?
    // For now assuming that only enabled buttons could have loading state
@ -104,7 +105,7 @@ T.Button {
                return control.display === AbstractButton.TextUnderIcon ? textImplicitHeight + iconImplicitHeight + spacing : Math.max(textImplicitHeight, iconImplicitHeight)
            }

-            Label {
+            Proton.Label {
                colorScheme: root.colorScheme
                id: label
                anchors.left: labelIcon.left
--- a/internal/frontend/qml/Proton/ComboBox.qml
+++ b/internal/frontend/qml/Proton/ComboBox.qml
@ -0,0 +1,184 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail Bridge is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// ProtonMail Bridge is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.12
+import QtQuick.Window 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+import QtQuick.Templates 2.12 as T
+
+T.ComboBox {
+    id: root
+
+    property ColorScheme colorScheme
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             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)
+
+    topPadding: 5
+    bottomPadding: 5
+
+    spacing: 8
+
+    font.family: Style.font_family
+    font.weight: Style.fontWeight_400
+    font.pixelSize: Style.body_font_size
+    font.letterSpacing: Style.body_letter_spacing
+
+    contentItem: T.TextField {
+        padding: 5
+
+        text: root.editable ? root.editText : root.displayText
+        font: root.font
+
+        enabled: root.editable
+        autoScroll: root.editable
+        readOnly: root.down
+        inputMethodHints: root.inputMethodHints
+        validator: root.validator
+        verticalAlignment: TextInput.AlignVCenter
+
+        color: root.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled
+        selectionColor: root.colorScheme.interaction_norm
+        selectedTextColor: root.colorScheme.text_invert
+        placeholderTextColor: root.enabled ? root.colorScheme.text_hint : root.colorScheme.text_disabled
+
+        background: Rectangle {
+            radius: 4
+            visible: root.enabled && root.editable && !root.flat
+            border.color: {
+                if (root.activeFocus) {
+                    return root.colorScheme.interaction_norm
+                }
+
+                if (root.hovered) {
+                    return root.colorScheme.field_hover
+                }
+
+                return root.colorScheme.field_norm
+            }
+            border.width: 1
+            color: root.colorScheme.background_norm
+        }
+    }
+
+    background: Rectangle {
+        implicitWidth: 140
+        implicitHeight: 36
+        radius: 4
+        color: {
+            if (root.down) {
+                return root.colorScheme.interaction_default_active
+            }
+
+            if (root.enabled && root.hovered) {
+                return root.colorScheme.interaction_default_hover
+            }
+
+            if (!root.enabled) {
+                return root.colorScheme.interaction_default
+            }
+
+            return root.colorScheme.background_norm
+        }
+
+        border.color: root.colorScheme.border_norm
+        border.width: 1
+    }
+
+    indicator: ColorImage {
+        x: root.mirrored ? 12 : root.width - width - 12
+        y: root.topPadding + (root.availableHeight - height) / 2
+        color: root.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled
+        source: popup.visible ? "../icons/ic-chevron-up.svg" : "../icons/ic-chevron-down.svg"
+
+        sourceSize.width: 16
+        sourceSize.height: 16
+    }
+
+
+    delegate: ItemDelegate {
+        width: parent.width
+        text: root.textRole ? (Array.isArray(root.model) ? modelData[root.textRole] : model[root.textRole]) : modelData
+
+        palette.text: root.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled
+        font: root.font
+
+        hoverEnabled: root.hoverEnabled
+
+        // we use highlighted to indicate currently selected delegate
+        highlighted: root.currentIndex === index
+        palette.highlightedText: root.enabled ? root.colorScheme.text_invert : root.colorScheme.text_disabled
+
+        background: PaddedRectangle {
+            radius: 4
+            color: {
+                if (parent.down) {
+                    return root.colorScheme.interaction_default_active
+                }
+
+                if (parent.highlighted) {
+                    return root.colorScheme.interaction_norm
+                }
+
+                if (parent.hovered) {
+                    return root.colorScheme.interaction_default_hover
+                }
+
+                return root.colorScheme.interaction_default
+            }
+        }
+    }
+
+    popup: T.Popup {
+        y: root.height
+        width: root.width
+        height: Math.min(contentItem.implicitHeight, root.Window.height - topMargin - bottomMargin)
+        topMargin: 8
+        bottomMargin: 8
+
+        contentItem: Item {
+            implicitHeight: children[0].implicitHeight + children[0].anchors.topMargin + children[0].anchors.bottomMargin
+            implicitWidth: children[0].implicitWidth + children[0].anchors.leftMargin + children[0].anchors.rightMargin
+
+            ListView {
+                anchors.fill: parent
+                anchors.margins: 8
+
+                implicitHeight: contentHeight
+                model: root.delegateModel
+                currentIndex: root.highlightedIndex
+                spacing: 4
+
+                T.ScrollIndicator.vertical: ScrollIndicator { }
+            }
+        }
+
+        background: Rectangle {
+            color: root.colorScheme.background_norm
+            radius: 10
+            border.color: root.colorScheme.border_weak
+            border.width: 1
+        }
+    }
+}
--- a/internal/frontend/qml/Proton/Dialog.qml
+++ b/internal/frontend/qml/Proton/Dialog.qml
@ -21,8 +21,6 @@ import QtQuick.Templates 2.12 as T
 import QtQuick.Controls 2.12
 import QtQuick.Controls.impl 2.12

-import "."
-
 T.Dialog {
    id: root
    property ColorScheme colorScheme
--- a/internal/frontend/qml/Proton/Label.qml
+++ b/internal/frontend/qml/Proton/Label.qml
@ -19,7 +19,8 @@ import QtQuick 2.13
 import QtQuick.Controls 2.12
 import QtQuick.Controls.impl 2.12
 import QtQuick.Templates 2.12 as T
-import "."
+
+import "." as Proton

 T.Label {
    id: root
@ -46,7 +47,7 @@ T.Label {
        // weight 700, size 12, height 16, spacing 0.4
        Caption_bold
    }
-    property int type: Label.LabelType.Body
+    property int type: Proton.Label.LabelType.Body

    color: root.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled
    palette.link: root.colorScheme.interaction_norm
@ -56,78 +57,78 @@ T.Label {

    font.weight: {
        switch (root.type) {
-        case Label.LabelType.Heading:
+        case Proton.Label.LabelType.Heading:
            return Style.fontWeight_700
-        case Label.LabelType.Title:
+        case Proton.Label.LabelType.Title:
            return Style.fontWeight_700
-        case Label.LabelType.Lead:
+        case Proton.Label.LabelType.Lead:
            return Style.fontWeight_400
-        case Label.LabelType.Body:
+        case Proton.Label.LabelType.Body:
            return Style.fontWeight_400
-        case Label.LabelType.Body_semibold:
+        case Proton.Label.LabelType.Body_semibold:
            return Style.fontWeight_600
-        case Label.LabelType.Body_bold:
+        case Proton.Label.LabelType.Body_bold:
            return Style.fontWeight_700
-        case Label.LabelType.Caption:
+        case Proton.Label.LabelType.Caption:
            return Style.fontWeight_400
-        case Label.LabelType.Caption_semibold:
+        case Proton.Label.LabelType.Caption_semibold:
            return Style.fontWeight_600
-        case Label.LabelType.Caption_bold:
+        case Proton.Label.LabelType.Caption_bold:
            return Style.fontWeight_700
        }
    }

    font.pixelSize: {
        switch (root.type) {
-        case Label.LabelType.Heading:
+        case Proton.Label.LabelType.Heading:
            return Style.heading_font_size
-        case Label.LabelType.Title:
+        case Proton.Label.LabelType.Title:
            return Style.title_font_size
-        case Label.LabelType.Lead:
+        case Proton.Label.LabelType.Lead:
            return Style.lead_font_size
-        case Label.LabelType.Body:
-        case Label.LabelType.Body_semibold:
-        case Label.LabelType.Body_bold:
+        case Proton.Label.LabelType.Body:
+        case Proton.Label.LabelType.Body_semibold:
+        case Proton.Label.LabelType.Body_bold:
            return Style.body_font_size
-        case Label.LabelType.Caption:
-        case Label.LabelType.Caption_semibold:
-        case Label.LabelType.Caption_bold:
+        case Proton.Label.LabelType.Caption:
+        case Proton.Label.LabelType.Caption_semibold:
+        case Proton.Label.LabelType.Caption_bold:
            return Style.caption_font_size
        }
    }

    lineHeight: {
        switch (root.type) {
-        case Label.LabelType.Heading:
+        case Proton.Label.LabelType.Heading:
            return Style.heading_line_height
-        case Label.LabelType.Title:
+        case Proton.Label.LabelType.Title:
            return Style.title_line_height
-        case Label.LabelType.Lead:
+        case Proton.Label.LabelType.Lead:
            return Style.lead_line_height
-        case Label.LabelType.Body:
-        case Label.LabelType.Body_semibold:
-        case Label.LabelType.Body_bold:
+        case Proton.Label.LabelType.Body:
+        case Proton.Label.LabelType.Body_semibold:
+        case Proton.Label.LabelType.Body_bold:
            return Style.body_line_height
-        case Label.LabelType.Caption:
-        case Label.LabelType.Caption_semibold:
-        case Label.LabelType.Caption_bold:
+        case Proton.Label.LabelType.Caption:
+        case Proton.Label.LabelType.Caption_semibold:
+        case Proton.Label.LabelType.Caption_bold:
            return Style.caption_line_height
        }
    }

    font.letterSpacing: {
        switch (root.type) {
-        case Label.LabelType.Heading:
-        case Label.LabelType.Title:
-        case Label.LabelType.Lead:
+        case Proton.Label.LabelType.Heading:
+        case Proton.Label.LabelType.Title:
+        case Proton.Label.LabelType.Lead:
            return 0
-        case Label.LabelType.Body:
-        case Label.LabelType.Body_semibold:
-        case Label.LabelType.Body_bold:
+        case Proton.Label.LabelType.Body:
+        case Proton.Label.LabelType.Body_semibold:
+        case Proton.Label.LabelType.Body_bold:
            return Style.body_letter_spacing
-        case Label.LabelType.Caption:
-        case Label.LabelType.Caption_semibold:
-        case Label.LabelType.Caption_bold:
+        case Proton.Label.LabelType.Caption:
+        case Proton.Label.LabelType.Caption_semibold:
+        case Proton.Label.LabelType.Caption_bold:
            return Style.caption_letter_spacing
        }
    }
--- a/internal/frontend/qml/Proton/TextArea.qml
+++ b/internal/frontend/qml/Proton/TextArea.qml
@ -20,7 +20,8 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Controls.impl 2.12
 import QtQuick.Templates 2.12 as T
-import "."
+
+import "." as Proton

 Item {
    id: root
@ -131,7 +132,7 @@ Item {
        border.width: 1
    }

-    Label {
+    Proton.Label {
        colorScheme: root.colorScheme
        id: label

@ -141,10 +142,10 @@ Item {

        color: root.enabled ? root.colorScheme.text_norm : root.colorScheme.text_disabled

-        type: Label.LabelType.Body_semibold
+        type: Proton.Label.LabelType.Body_semibold
    }

-    Label {
+    Proton.Label {
        colorScheme: root.colorScheme
        id: hint

@ -154,7 +155,7 @@ Item {

        color: root.enabled ? root.colorScheme.text_weak : root.colorScheme.text_disabled

-        type: Label.LabelType.Caption
+        type: Proton.Label.LabelType.Caption
    }

    ColorImage {
@ -168,7 +169,7 @@ Item {
        color: root.colorScheme.signal_danger
    }

-    Label {
+    Proton.Label {
        colorScheme: root.colorScheme
        id: assistiveText

@ -189,7 +190,7 @@ Item {
            return root.colorScheme.text_weak
        }

-        type: root.error ? Label.LabelType.Caption_semibold : Label.LabelType.Caption
+        type: root.error ? Proton.Label.LabelType.Caption_semibold : Proton.Label.LabelType.Caption
    }

    ScrollView {
--- a/internal/frontend/qml/Proton/TextField.qml
+++ b/internal/frontend/qml/Proton/TextField.qml
@ -21,7 +21,8 @@ import QtQuick.Controls 2.12
 import QtQuick.Controls.impl 2.12
 import QtQuick.Templates 2.12 as T
 import QtQuick.Layouts 1.12
-import "."
+
+import "." as Proton

 Item {
    id: root
@ -128,22 +129,22 @@ Item {
            Layout.fillWidth: true
            spacing: 0

-            Label {
+            Proton.Label {
                colorScheme: root.colorScheme
                id: label
                Layout.fillHeight: true
                Layout.fillWidth: true
-                type: Label.LabelType.Body_semibold
+                type: Proton.Label.LabelType.Body_semibold
            }

-            Label {
+            Proton.Label {
                colorScheme: root.colorScheme
                id: hint
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: root.enabled ? root.colorScheme.text_weak : root.colorScheme.text_disabled
                horizontalAlignment: Text.AlignRight
-                type: Label.LabelType.Caption
+                type: Proton.Label.LabelType.Caption
            }
        }

@ -270,7 +271,7 @@ Item {
                    }
                }

-                Button {
+                Proton.Button {
                    colorScheme: root.colorScheme
                    id: eyeButton

@ -299,7 +300,7 @@ Item {
                sourceSize.height: assistiveText.height
            }

-            Label {
+            Proton.Label {
                colorScheme: root.colorScheme
                id: assistiveText

@ -319,7 +320,7 @@ Item {
                    return root.colorScheme.text_weak
                }

-                type: root.error ? Label.LabelType.Caption_semibold : Label.LabelType.Caption
+                type: root.error ? Proton.Label.LabelType.Caption_semibold : Proton.Label.LabelType.Caption
            }
        }
    }
--- a/internal/frontend/qml/Proton/Toggle.qml
+++ b/internal/frontend/qml/Proton/Toggle.qml
@ -20,16 +20,20 @@ import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.13
 import QtQuick.Controls.impl 2.13

-RowLayout{
+Item {
    id: root
    property var colorScheme
    property bool checked
-    property bool disabled
    property bool hovered
    property bool loading

    signal clicked

+    property bool _disabled: !enabled
+
+    implicitHeight: children[0].implicitHeight
+    implicitWidth: children[0].implicitWidth
+
    Rectangle {
        id: indicator
        implicitWidth: 40
@ -38,12 +42,12 @@ RowLayout{
        radius: 20
        color: {
            if (root.loading) return "transparent"
-            if (root.disabled) return root.colorScheme.background_strong
+            if (root._disabled) return root.colorScheme.background_strong
            return root.colorScheme.background_norm
        }
        border {
            width: 1
-            color: (root.disabled || root.loading) ? "transparent" : colorScheme.field_norm
+            color: (root._disabled || root.loading) ? "transparent" : colorScheme.field_norm
        }

        Rectangle {
@ -55,7 +59,7 @@ RowLayout{
            radius: 12
            color: {
                if (root.loading) return "transparent"
-                if (root.disabled) return root.colorScheme.field_disabled
+                if (root._disabled) return root.colorScheme.field_disabled

                if (root.checked) {
                    if (root.hovered) return root.colorScheme.interaction_norm_hover
@ -101,7 +105,7 @@ RowLayout{
            hoverEnabled: true
            onEntered: {root.hovered = true }
            onExited: {root.hovered = false }
-            onClicked: { root.clicked();}
+            onClicked: { if (root.enabled) root.clicked();}
            onPressed: {root.hovered = true }
            onReleased: { root.hovered = containsMouse }
        }
--- a/internal/frontend/qml/Proton/qmldir
+++ b/internal/frontend/qml/Proton/qmldir
@ -24,6 +24,7 @@ ColorScheme 4.0 ColorScheme.qml
 ApplicationWindow 4.0 ApplicationWindow.qml
 Button 4.0 Button.qml
 CheckBox 4.0 CheckBox.qml
+ComboBox 4.0 ComboBox.qml
 Dialog 4.0 Dialog.qml
 Label 4.0 Label.qml
 Menu 4.0 Menu.qml