1 files changed, 100 insertions, 79 deletions

diff --git a/components/package/contents/ui/SingleMailView.qml b/components/package/contents/ui/SingleMailView.qml
index 7ccbdb19..5872d4b5 100644
--- a/components/package/contents/ui/SingleMailView.qml
+++ b/components/package/contents/ui/SingleMailView.qml
@@ -119,112 +119,121 @@ Item {
 
                 color: Kirigami.Theme.viewBackgroundColor
 
-                //TODO bookmark
-                /*
-                 *                    Contorls1.ToolButton {
-                 *                        iconName: "bookmark-new"
-                 *
-            }
-            */
                 //BEGIN header
                 Item {
                     id: header
 
-                    height: Kirigami.Units.gridUnit * 5
-                    width: parent.width
+                    anchors {
+                        top: parent.top
+                        left: parent.left
+                        right: parent.right
+                        margins: Kirigami.Units.largeSpacing
+                    }
+
+                    height: from.height + to.height + Kirigami.Units.gridUnit + Kirigami.Units.smallSpacing
+
+                    Avatar {
+                        id: avatar
 
-                    Row {
-                        id: headerContent
                         anchors {
-                            left: seperator.left
-                            bottom: seperator.top
-                            bottomMargin: height * 0.25
+                            top: parent.top
+                            topMargin: Kirigami.Units.smallSpacing
                         }
 
-                        spacing: Kirigami.Units.largeSpacing / 2
+                        height: Kirigami.Units.gridUnit * 2.5
+                        width: height
 
-                        Avatar {
-                            id: avatar
+                        name: model.senderName
+                    }
 
-                            height: Kirigami.Units.gridUnit * 2.5
-                            width: height
+                    Row{
+                        id: from
 
-                            name: model.senderName
+                        anchors {
+                            top: avatar.top
+                            left: avatar.right
+                            leftMargin: Kirigami.Units.smallSpacing * 2
+                            topMargin: Kirigami.Units.smallSpacing
                         }
 
-                        ColumnLayout {
-
-                            RowLayout {
-
-                                Text {
-                                    text: model.senderName
-
-                                    font.weight: Font.DemiBold
-                                    color: Kirigami.Theme.textColor
-                                    opacity: 0.75
-                                }
-
-                                Text {
-                                    text: model.sender
-
-                                    color: Kirigami.Theme.textColor
-                                    opacity: 0.75
-                                }
-                            }
-
-                            RowLayout {
-                                Kirigami.Label {
-                                    text: "To:"
-                                }
-                                Text {
-                                    text: model.to
-
-                                    color: Kirigami.Theme.textColor
-                                    opacity: 0.75
-                                }
-                                Text {
-                                    text: model.cc
-
-                                    color: Kirigami.Theme.textColor
-                                    opacity: 0.75
-                                }
-                                Text {
-                                    text: model.bcc
-
-                                    color: Kirigami.Theme.textColor
-                                    opacity: 0.75
-                                }
-                            }
+                        width: parent.width - avatar.width - Kirigami.Units.largeSpacing * 3
+
+                        spacing: Kirigami.Units.smallSpacing
+                        clip: true
+
+                        Text {
+                            id: senderName
+
+                            text: model.senderName
+
+                            font.weight: Font.DemiBold
+                            color: Kirigami.Theme.textColor
+                            opacity: 0.75
+                        }
+
+                        Text {
+
+                            width: parent.width - senderName.width - Kirigami.Units.smallSpacing
+
+                            text: model.sender
+
+                            color: Kirigami.Theme.textColor
+                            opacity: 0.75
+
+                            elide: Text.ElideRight
                         }
                     }
 
                     Text {
+                        id: to_label
 
                         anchors {
-                            right: seperator.right
-                            bottom: headerContent.top
+                            top: from.bottom
+                            left: avatar.right
+                            leftMargin: Kirigami.Units.smallSpacing * 2
+                            topMargin: Kirigami.Units.smallSpacing * 0.5
                         }
 
-                        text: Qt.formatDateTime(model.date, "dd MMM yyyy hh:mm")
+                        text: "to:"
 
-                        font.pointSize: Kirigami.Theme.defaultFont.pointSize * 0.7
                         color: Kirigami.Theme.textColor
                         opacity: 0.75
                     }
 
-                    Rectangle {
-                        id: seperator
+                    Text {
+                        id: to
 
                         anchors {
-                            bottom: parent.bottom
-                            horizontalCenter: parent.horizontalCenter
+                            top: to_label.top
+                            left: to_label.right
+                            leftMargin: Kirigami.Units.smallSpacing
                         }
 
-                        width: parent.width - Kirigami.Units.gridUnit * 2
-                        height: 1
+                        width: parent.width - avatar.width  - to_label.width - Kirigami.Units.largeSpacing * 2
+
+                        text: model.to + " "  + model.cc + " " +  model.bcc
+
+                        maximumLineCount: 3
+                        wrapMode: Text.WrapAnywhere
+                        elide: Text.ElideRight
 
                         color: Kirigami.Theme.textColor
-                        opacity: 0.5
+                        opacity: 0.75
+                        clip: true
+                    }
+
+                    Text {
+
+                        anchors {
+                            right: seperator.right
+                            bottom: headerContent.top
+                        }
+
+                        text: Qt.formatDateTime(model.date, "dd MMM yyyy hh:mm")
+
+                        font.pointSize: Kirigami.Theme.defaultFont.pointSize * 0.7
+                        color: Kirigami.Theme.textColor
+                        opacity: 0.75
                     }
 
                     Rectangle {
@@ -236,16 +245,28 @@ Item {
                         height: Kirigami.Units.gridUnit
                         width: height
 
-                        color: Kirigami.Theme.textColor
-                        opacity: 0.5
+                        color: Kirigami.Theme.backgroundColor
 
                         Controls1.ToolButton {
                             anchors.fill: parent
 
-                            onClicked: {
-                                console.error(model.mimeMessage)
-                            }
+                            iconName: "go-down"
+                        }
+                    }
+
+                    Rectangle {
+                        id: seperator
+
+                        anchors {
+                            left: parent.left
+                            right: parent.right
+                            bottom: parent.bottom
                         }
+
+                        height: 1
+
+                        color: Kirigami.Theme.textColor
+                        opacity: 0.5
                     }
                 }
                 //END header