From 0079da41e5738a2af28feb958a14c5b4d8f4ebf5 Mon Sep 17 00:00:00 2001 From: Michael Bohlender Date: Sun, 11 Dec 2016 14:14:10 +0100 Subject: rework header in email view. wordwrap and elide text, change header size accordingly --- components/package/contents/ui/SingleMailView.qml | 179 ++++++++++++---------- 1 file changed, 100 insertions(+), 79 deletions(-) (limited to 'components/package/contents/ui') 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 -- cgit v1.2.3