From 5d5bb33a9d5768d359325a3f00b746018e9033da Mon Sep 17 00:00:00 2001 From: Christian Mollekopf Date: Tue, 25 Jul 2017 06:27:30 +0200 Subject: Use the ListDelegate for the MailListView delegate --- framework/qml/MailListView.qml | 294 +++++++++++++++++------------------------ 1 file changed, 119 insertions(+), 175 deletions(-) (limited to 'framework/qml/MailListView.qml') diff --git a/framework/qml/MailListView.qml b/framework/qml/MailListView.qml index 73caef72..efc86a77 100644 --- a/framework/qml/MailListView.qml +++ b/framework/qml/MailListView.qml @@ -102,210 +102,154 @@ FocusScope { parentFolder: root.parentFolder } - delegate: Item { - id: origin + delegate: Kube.ListDelegate { + id: delegateRoot + //Required for D&D + property var mail: model.mail - property variant currentData: model + onClicked: ListView.view.currentIndex = index - width: delegateRoot.width - height: delegateRoot.height + width: scrollbar.visible ? listView.width - scrollbar.width : listView.width + height: Kube.Units.gridUnit * 5 - Item { - id: delegateRoot - - property variant mail : model.domainObject - - width: scrollbar.visible ? listView.width - scrollbar.width : listView.width - height: Kube.Units.gridUnit * 5 - - states: [ - State { - name: "dnd" - when: mouseArea.drag.active - - PropertyChanges {target: mouseArea; cursorShape: Qt.ClosedHandCursor} - PropertyChanges {target: delegateRoot; x: x; y:y} - PropertyChanges {target: delegateRoot; parent: root} - - PropertyChanges {target: delegateRoot; opacity: 0.7} - PropertyChanges {target: background; color: Kube.Colors.highlightColor} - PropertyChanges {target: subject; color: Kube.Colors.highlightedTextColor} - PropertyChanges {target: sender; color: Kube.Colors.highlightedTextColor} - PropertyChanges {target: date; color: Kube.Colors.highlightedTextColor} - PropertyChanges {target: threadCounter; color: Kube.Colors.highlightedTextColor} - }, - State { - name: "selected" - when: listView.currentIndex == index && !mouseArea.drag.active - - PropertyChanges {target: background; color: Kube.Colors.highlightColor} - PropertyChanges {target: subject; color: Kube.Colors.highlightedTextColor; font.underline: listView.activeFocus} - PropertyChanges {target: sender; color: Kube.Colors.highlightedTextColor} - PropertyChanges {target: threadCounter; color: Kube.Colors.highlightedTextColor} - PropertyChanges {target: date; visible: false} - PropertyChanges {target: buttons; visible: true} - }, - State { - name: "hovered" - when: ( mouseArea.containsMouse || buttons.containsMouse ) && !mouseArea.drag.active - - PropertyChanges {target: background; color: Kube.Colors.highlightColor; opacity: 0.6} - PropertyChanges {target: subject; color: Kube.Colors.highlightedTextColor} - PropertyChanges {target: sender; color: Kube.Colors.highlightedTextColor} - PropertyChanges {target: date; visible: false} - PropertyChanges {target: threadCounter; color: Kube.Colors.highlightedTextColor} - PropertyChanges {target: buttons; visible: true} - } - ] - - Drag.active: mouseArea.drag.active - Drag.hotSpot.x: mouseArea.mouseX - Drag.hotSpot.y: mouseArea.mouseY - Drag.source: delegateRoot - - MouseArea { - id: mouseArea - - anchors.fill: parent + color: Kube.Colors.viewBackgroundColor + border.color: Kube.Colors.backgroundColor + border.width: 1 - hoverEnabled: true - drag.target: parent + states: [ + State { + name: "dnd" + when: mouseArea.drag.active - onClicked: { - listView.currentIndex = index - } - onReleased: parent.Drag.drop() - } - - Rectangle { - id: background - - anchors.fill: parent + PropertyChanges {target: mouseArea; cursorShape: Qt.ClosedHandCursor} + PropertyChanges {target: delegateRoot; x: x; y: y} + PropertyChanges {target: delegateRoot; parent: root} + PropertyChanges {target: delegateRoot; opacity: 0.7} + } + ] + + Drag.active: mouseArea.drag.active + Drag.hotSpot.x: mouseArea.mouseX + Drag.hotSpot.y: mouseArea.mouseY + Drag.source: delegateRoot + + MouseArea { + id: mouseArea + anchors.fill: parent + drag.target: parent + onReleased: parent.Drag.drop() + } - color: Kube.Colors.viewBackgroundColor + Item { + id: content - border.color: Kube.Colors.backgroundColor - border.width: 1 + anchors { + fill: parent + margins: Kube.Units.smallSpacing } + property color unreadColor: (model.unread && !delegateRoot.ListView.isCurrentItem) ? Kube.Colors.highlightColor : delegateRoot.textColor - Item { - id: content - + Column { anchors { - top: parent.top - bottom: parent.bottom + verticalCenter: parent.verticalCenter left: parent.left - right: parent.right - margins: Kube.Units.smallSpacing + leftMargin: Kube.Units.largeSpacing } - Column { - anchors { - verticalCenter: parent.verticalCenter - left: parent.left - leftMargin: Kube.Units.largeSpacing - } - - Kube.Label{ - id: subject - - width: content.width - Kube.Units.gridUnit * 3 - - text: model.subject - color: model.unread ? Kube.Colors.highlightColor : Kube.Colors.textColor - maximumLineCount: 2 - wrapMode: Text.WordWrap - elide: Text.ElideRight - } - - Kube.Label { - id: sender - - text: model.senderName - font.italic: true - width: delegateRoot.width - Kube.Units.gridUnit * 3 - elide: Text.ElideRight - } + Kube.Label{ + id: subject + width: content.width - Kube.Units.gridUnit * 3 + text: model.subject + color: content.unreadColor + maximumLineCount: 2 + wrapMode: Text.WordWrap + elide: Text.ElideRight } Kube.Label { - id: date - - anchors { - right: parent.right - bottom: parent.bottom - } - text: Qt.formatDateTime(model.date, "dd MMM yyyy") + id: sender + text: model.senderName + color: delegateRoot.textColor font.italic: true - color: Kube.Colors.disabledTextColor - font.pointSize: Kube.Units.tinyFontSize - } - - Kube.Label { - id: threadCounter - - anchors { - right: parent.right - } - text: model.threadSize - color: model.unread ? Kube.Colors.highlightColor : Kube.Colors.disabledTextColor - visible: model.threadSize > 1 + width: delegateRoot.width - Kube.Units.gridUnit * 3 + elide: Text.ElideRight } } - Row { - id: buttons - - property bool containsMouse: importantButton.hovered || deleteButton.hovered || unreadButton.hovered || readButton.hovered - + Kube.Label { + id: date anchors { right: parent.right bottom: parent.bottom - margins: Kube.Units.smallSpacing } + visible: !delegateRoot.hovered + text: Qt.formatDateTime(model.date, "dd MMM yyyy") + font.italic: true + color: Kube.Colors.disabledTextColor + font.pointSize: Kube.Units.tinyFontSize + } - visible: false - spacing: Kube.Units.smallSpacing - opacity: 0.7 + Kube.Label { + id: threadCounter + anchors.right: parent.right + text: model.threadSize + color: content.unreadColor + visible: model.threadSize > 1 + } + } - Kube.IconButton { - id: readButton - iconName: Kube.Icons.markAsRead - visible: enabled - enabled: model.unread - onClicked: Kube.Fabric.postMessage(Kube.Messages.markAsRead, {"mail": model.mail}) - } - Kube.IconButton { - id: unreadButton - iconName: Kube.Icons.markAsUnread - visible: enabled - enabled: !model.unread - onClicked: Kube.Fabric.postMessage(Kube.Messages.markAsUnread, {"mail": model.mail}) - } + Row { + id: buttons - Kube.IconButton { - id: importantButton - iconName: Kube.Icons.markImportant - visible: enabled - enabled: !!model.mail - onClicked: Kube.Fabric.postMessage(Kube.Messages.toggleImportant, {"mail": model.mail, "important": model.important}) - } + anchors { + right: parent.right + bottom: parent.bottom + margins: Kube.Units.smallSpacing + } - Kube.IconButton { - id: deleteButton - iconName: Kube.Icons.moveToTrash - visible: enabled - enabled: !!model.mail - onClicked: Kube.Fabric.postMessage(Kube.Messages.moveToTrash, {"mail": model.mail}) - } + visible: delegateRoot.hovered - Kube.IconButton { - id: restoreButton - iconName: Kube.Icons.undo - visible: enabled - enabled: !!model.trash - onClicked: Kube.Fabric.postMessage(Kube.Messages.restoreFromTrash, {"mail": model.mail}) - } + spacing: Kube.Units.smallSpacing + opacity: 0.7 + + Kube.IconButton { + id: readButton + iconName: Kube.Icons.markAsRead + //FIXME workaround for invisble icon + color: Kube.Colors.highlightColor + visible: model.unread + onClicked: Kube.Fabric.postMessage(Kube.Messages.markAsRead, {"mail": model.mail}) + } + Kube.IconButton { + id: unreadButton + iconName: Kube.Icons.markAsUnread + //FIXME workaround for invisble icon + color: Kube.Colors.highlightColor + visible: !model.unread + onClicked: Kube.Fabric.postMessage(Kube.Messages.markAsUnread, {"mail": model.mail}) + } + + Kube.IconButton { + id: importantButton + iconName: Kube.Icons.markImportant + //FIXME workaround for invisble icon + color: Kube.Colors.highlightColor + visible: !!model.mail + onClicked: Kube.Fabric.postMessage(Kube.Messages.toggleImportant, {"mail": model.mail, "important": model.important}) + } + + Kube.IconButton { + id: deleteButton + iconName: Kube.Icons.moveToTrash + visible: !!model.mail + onClicked: Kube.Fabric.postMessage(Kube.Messages.moveToTrash, {"mail": model.mail}) + } + + Kube.IconButton { + id: restoreButton + iconName: Kube.Icons.undo + visible: !!model.trash + onClicked: Kube.Fabric.postMessage(Kube.Messages.restoreFromTrash, {"mail": model.mail}) } } } -- cgit v1.2.3