Update folder list look

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

src/mail/CMakeLists.txt

@@ -42,6 +42,7 @@ ecm_target_qml_sources(kalendar_mail_plugin SOURCES
 ecm_target_qml_sources(kalendar_mail_plugin
     PRIVATE PATH private SOURCES
     qml/private/AttachmentDelegate.qml
+    qml/private/MailDelegate.qml
 )
 
 ecm_target_qml_sources(kalendar_mail_plugin
@@ -60,7 +61,6 @@ ecm_target_qml_sources(kalendar_mail_plugin
     qml/mailboxselector/MailBoxListPage.qml
 )
 
-
 ecm_qt_declare_logging_category(kalendar_contact_plugin
     HEADER kalendar_mail_debug.h
     IDENTIFIER KALENDAR_MAIL_LOG

src/mail/qml/ConversationViewer.qml

@@ -46,7 +46,7 @@ Kirigami.ScrollablePage {
             text: props.title
             maximumLineCount: 2
             wrapMode: Text.Wrap
-            elide: Text.ElideRIght
+            elide: Text.ElideRight
 
             font.pointSize: Kirigami.Theme.defaultFont.pointSize * 1.2
         }
@@ -55,12 +55,12 @@ Kirigami.ScrollablePage {
         MailViewer {
             Layout.fillWidth: true
 
-            item: root.item
-            subject: props.title
-            from: props.from
-            to: props.to
-            sender: props.sender
-            dateTime: props.datetime
+            item: root.item ?? ''
+            subject: props.title ?? ''
+            from: props.from ?? ''
+            to: props.to ?? ''
+            sender: props.sender ?? ''
+            dateTime: props.datetime ?? ''
         }
     }
 }

src/mail/qml/FolderView.qml

@@ -7,8 +7,9 @@ import org.kde.kirigami 2.14 as Kirigami
 import QtQuick.Controls 2.15 as QQC2
 import org.kde.kalendar.mail 1.0
 import org.kde.kitemmodels 1.0 as KItemModels
+import './private'
 
- Kirigami.ScrollablePage {
+Kirigami.ScrollablePage {
     id: folderView
     title: MailManager.selectedFolderName
 
@@ -59,52 +60,48 @@ import org.kde.kitemmodels 1.0 as KItemModels
     ListView {
         id: mails
         model: MailManager.folderModel
+        currentIndex: -1
+
+        Connections {
+            target: MailManager
+
+            function onFolderModelChanged() {
+                mails.currentIndex = -1;
+            }
+        }
+
+        Kirigami.PlaceholderMessage {
+            id: mailboxSelected
+            anchors.centerIn: parent
+            visible: MailManager.selectedFolderName === ""
+            text: i18n("No mailbox selected")
+            explanation: i18n("Select a mailbox from the sidebar.")
+            icon.name: "mail-unread"
+        }
+
+        Kirigami.PlaceholderMessage {
+            anchors.centerIn: parent
+            visible: mails.count === 0 && !mailboxSelected.visible
+            text: i18n("Mailbox is empty")
+            icon.name: "mail-folder-inbox"
+        }
+
         section.delegate: Kirigami.ListSectionHeader {
             required property string section
             label: section
         }
         section.property: "date"
-        delegate: Kirigami.BasicListItem {
-            label: model.title
-            subtitle: model.from
-            labelItem.color: if (highlighted) {
-                return Kirigami.Theme.highlightedTextColor;
-            } else {
-                return !model.status || model.status.isRead ? Kirigami.Theme.textColor : Kirigami.Theme.linkColor;
-            }
 
-            TapHandler {
-                acceptedButtons: Qt.RightButton
-                onTapped: {
-                    const menu = contextMenu.createObject(folderView, {
-                        row: index,
-                        status: MailManager.folderModel.copyMessageStatus(model.status),
-                    });
-                    menu.popup();
-                }
-            }
+        delegate: MailDelegate {
+            showSeparator: model.index !== folderView.count - 1
 
+            datetime: model.datetime.toLocaleTimeString(Qt.locale(), Locale.ShortFormat) // TODO this is not showing date !
+            author: model.from
+            title: model.title
 
-            trailing: RowLayout {
-                QQC2.Label {
-                    text: model.datetime.toLocaleTimeString(Qt.locale(), Locale.ShortFormat)
-                    QQC2.ToolTip {
-                        text:  model.datetime.toLocaleString()
-                    }
-                }
-                QQC2.ToolButton {
-                    icon.name: status.isImportant ? 'starred-symbolic' : 'non-starred-symbolic'
-                    implicitHeight: Kirigami.Units.gridUnit
-                    implicitWidth: Kirigami.Units.gridUnit
-                    onClicked: {
-                        const status = MailManager.folderModel.copyMessageStatus(model.status);
-                        status.isImportant = !status.isImportant;
-                        MailManager.folderModel.updateMessageStatus(index, status)
-                    }
-                }
-            }
+            isRead: !model.status || model.status.isRead
 
-            onClicked: {
+            onOpenMailRequested: {
                 applicationWindow().pageStack.push(Qt.resolvedUrl('ConversationViewer.qml'), {
                     item: model.item,
                     props: model,
@@ -116,6 +113,20 @@ import org.kde.kitemmodels 1.0 as KItemModels
                     MailManager.folderModel.updateMessageStatus(index, status)
                 }
             }
+
+            onStarMailRequested: {
+                const status = MailManager.folderModel.copyMessageStatus(model.status);
+                status.isImportant = !status.isImportant;
+                MailManager.folderModel.updateMessageStatus(index, status)
+            }
+
+            onContextMenuRequested: {
+                const menu = contextMenu.createObject(folderView, {
+                    row: index,
+                    status: MailManager.folderModel.copyMessageStatus(model.status),
+                });
+                menu.popup();
+            }
         }
     }
 }

src/mail/qml/MailSidebar.qml

@@ -21,5 +21,18 @@ QQC2.ScrollView {
     contentWidth: availableWidth
     clip: true
 
-    contentItem: MailBoxList {}
+    contentItem: MailBoxList { }
+
+    property Kirigami.PagePool pagePool: Kirigami.PagePool {
+        id: pagePool
+    }
+
+    function getPage(name) {
+        switch (name) {
+        case "FolderView":
+            return pagePool.loadPage(Qt.resolvedUrl("./FolderView.qml"))
+        case "MailBoxListPage":
+            return pagePool.loadPage(Qt.resolvedUrl("./mailboxselector/MailBoxListPage.qml"))
+        }
+    }
 }

src/mail/qml/mailboxselector/MailBoxList.qml

@@ -19,26 +19,26 @@ ListView {
         id: foldersModel
         model: MailManager.foldersModel
     }
-    
+
     onModelChanged: currentIndex = -1
-    
+
     signal folderChosen()
 
     delegate: DelegateChooser {
         role: 'kDescendantExpandable'
-        
+
         DelegateChoice {
             roleValue: true
 
             ColumnLayout {
                 spacing: 0
                 width: ListView.view.width
-                
+
                 Item {
                     Layout.topMargin: Kirigami.Units.largeSpacing
                     visible: (model.kDescendantLevel === 1) && (model.index !== 0)
                 }
-                
+
                 QQC2.ItemDelegate {
                     id: categoryHeader
                     Layout.fillWidth: true
@@ -47,9 +47,9 @@ ListView {
                     leftPadding: Kirigami.Units.largeSpacing * (model.kDescendantLevel)
 
                     property string displayText: model.display
-                    
+
                     onClicked: mailList.model.toggleChildren(index)
-                    
+
                     contentItem: RowLayout {
                         Kirigami.Icon {
                             Layout.alignment: Qt.AlignVCenter
@@ -58,16 +58,16 @@ ListView {
                             Layout.preferredHeight: Kirigami.Units.iconSizes.small
                             Layout.preferredWidth: Layout.preferredHeight
                         }
-                        
+
                         QQC2.Label {
                             Layout.fillWidth: true
-                            
+
                             color: Kirigami.Theme.disabledTextColor
                             text: categoryHeader.displayText
                             font.weight: Font.DemiBold
                             elide: Text.ElideRight
                         }
-                        
+
                         Kirigami.Icon {
                             implicitWidth: Kirigami.Units.iconSizes.small
                             implicitHeight: Kirigami.Units.iconSizes.small
@@ -80,19 +80,19 @@ ListView {
 
         DelegateChoice {
             roleValue: false
-            
+
             QQC2.ItemDelegate {
                 id: controlRoot
                 text: model.display
                 width: ListView.view.width
                 padding: Kirigami.Units.largeSpacing
                 leftPadding: Kirigami.Units.largeSpacing * model.kDescendantLevel
-                
+
                 property bool chosen: false
-                
+
                 Connections {
                     target: mailList
-                    
+
                     function onFolderChosen() {
                         if (controlRoot.chosen) {
                             controlRoot.chosen = false;
@@ -102,12 +102,12 @@ ListView {
                         }
                     }
                 }
-                
-                property bool showSelected: (controlRoot.pressed || (controlRoot.highlighted && applicationWindow().isWidescreen))
-    
+
+                property bool showSelected: (controlRoot.pressed === true || (controlRoot.highlighted === true && applicationWindow().isWidescreen))
+
                 background: Rectangle {
                     color: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, controlRoot.showSelected ? 0.5 : hoverHandler.hovered ? 0.2 : 0)
-                    
+
                     // indicator rectangle
                     Rectangle {
                         anchors.left: parent.left
@@ -115,29 +115,29 @@ ListView {
                         anchors.topMargin: 1
                         anchors.bottom: parent.bottom
                         anchors.bottomMargin: 1
-                        
+
                         width: 4
                         visible: controlRoot.highlighted
                         color: Kirigami.Theme.highlightColor
                     }
-                    
+
                     HoverHandler {
                         id: hoverHandler
                         // disable hover input on mobile because touchscreens trigger hover feedback and do not "unhover" in Qt
                         enabled: !Kirigami.Settings.isMobile
                     }
                 }
-                
+
                 contentItem: RowLayout {
                     spacing: Kirigami.Units.smallSpacing
-                    
+
                     Kirigami.Icon {
                         Layout.alignment: Qt.AlignVCenter
                         source: model.decoration
                         Layout.preferredHeight: Kirigami.Units.iconSizes.small
                         Layout.preferredWidth: Layout.preferredHeight
                     }
-                    
+
                     QQC2.Label {
                         leftPadding: controlRoot.mirrored ? (controlRoot.indicator ? controlRoot.indicator.width : 0) + controlRoot.spacing : 0
                         rightPadding: !controlRoot.mirrored ? (controlRoot.indicator ? controlRoot.indicator.width : 0) + controlRoot.spacing : 0
@@ -157,14 +157,9 @@ ListView {
                 onClicked: {
                     model.checkState = model.checkState === 0 ? 2 : 0
                     MailManager.loadMailCollection(foldersModel.mapToSource(foldersModel.index(model.index, 0)));
-                    
+
                     controlRoot.chosen = true;
                     mailList.folderChosen();
-                    
-                    // push list page if in narrow mode
-                    if (!applicationWindow().isWidescreen) {
-                        applicationWindow().pageStack.push(applicationWindow().getPage("FolderView"));
-                    }
                 }
             }
         }

src/mail/qml/mailboxselector/MailBoxListSidebar.qml

+// SPDX-FileCopyrightText: 2022 Carl Schwan <carl@carlschwan.eu>
+// SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
+// SPDX-License-Identifier: LGPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import Qt.labs.qmlmodels 1.0
+
+import org.kde.kirigami 2.15 as Kirigami
+import org.kde.kitemmodels 1.0
+import org.kde.kalendar 1.0
+
+Kirigami.GlobalDrawer {
+    id: root
+    title: i18n("Mail")
+    modal: false
+    
+    Kirigami.Theme.colorSet: Kirigami.Theme.Window
+    Kirigami.Theme.inherit: false
+    
+    topPadding: 0
+    leftPadding: 0
+    rightPadding: 0
+    bottomPadding: 0
+    
+    contentItem: ColumnLayout {
+        spacing: 0
+        
+        QQC2.ToolBar {
+            Layout.fillWidth: true
+            implicitHeight: applicationWindow().pageStack.globalToolBar.preferredHeight
+
+            Item {
+                anchors.fill: parent
+                Kirigami.Heading {
+                    level: 1
+                    text: i18n("Mail")
+                    anchors.left: parent.left
+                    anchors.leftMargin: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+        }
+        
+        QQC2.ScrollView {
+            id: folderListView
+            implicitWidth: Kirigami.Units.gridUnit * 16
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
+            contentWidth: availableWidth
+            clip: true
+
+            contentItem: MailBoxList {}
+        }
+    }
+}

src/mail/qml/private/MailDelegate.qml

+// SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Layouts 1.15
+
+import org.kde.kirigami 2.12 as Kirigami
+
+Kirigami.AbstractListItem {
+    id: root
+
+    property bool showSeparator: false
+
+    property string datetime
+    property string author
+    property string title
+
+    property bool isRead
+
+    leftPadding: Kirigami.Units.gridUnit
+    rightPadding: Kirigami.Units.gridUnit
+    topPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+    bottomPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
+
+    hoverEnabled: true
+
+    signal openMailRequested()
+    signal starMailRequested()
+    signal contextMenuRequested()
+
+    property bool showSelected: (mouseArea.pressed === true || (root.highlighted === true && applicationWindow().isWidescreen))
+
+    background: Rectangle {
+        color: Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, root.showSelected ? 0.5 : hoverHandler.hovered ? 0.2 : 0)
+
+        // indicator rectangle
+        Rectangle {
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.topMargin: 1
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 1
+
+            width: 4
+            visible: !root.isRead
+            color: Kirigami.Theme.highlightColor
+        }
+
+        HoverHandler {
+            id: hoverHandler
+            // disable hover input on mobile because touchscreens trigger hover feedback and do not "unhover" in Qt
+            enabled: !Kirigami.Settings.isMobile
+        }
+
+        Kirigami.Separator {
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: root.leftPadding
+            anchors.rightMargin: root.rightPadding
+            visible: root.showSeparator && !root.showSelected
+            opacity: 0.5
+        }
+    }
+
+    onClicked: root.openMailRequested()
+
+    Item {
+        id: item
+        implicitHeight: rowLayout.implicitHeight
+
+        RowLayout {
+            id: rowLayout
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            ColumnLayout {
+                Layout.fillWidth: true
+                spacing: Kirigami.Units.smallSpacing
+
+                RowLayout {
+                    Layout.fillWidth: true
+                    QQC2.Label {
+                        Layout.fillWidth: true
+                        text: root.author
+                        elide: Text.ElideRight
+                        font.weight: root.isRead ? Font.Normal : Font.Bold
+                    }
+
+                    QQC2.Label {
+                        color: Kirigami.Theme.disabledTextColor
+                        text: root.datetime
+                    }
+                }
+                QQC2.Label {
+                    Layout.fillWidth: true
+                    text: root.title
+                    elide: Text.ElideRight
+                    font.weight: root.isRead ? Font.Normal : Font.Bold
+                }
+            }
+        }
+
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+
+            onClicked: {
+                if (mouse.button === Qt.RightButton) {
+                    root.contextMenuRequested();
+                } else if (mouse.button === Qt.LeftButton) {
+                    root.clicked();
+                }
+            }
+            onPressAndHold: root.contextMenuRequested();
+        }
+    }
+}