A new composer based on Kube.View

Kube.View is a sort of split-view that always only shows a fixed number
of splits (and doesn't support manual resizing).

2 files changed, 347 insertions, 14 deletions

diff --git a/components/kube/contents/ui/ComposerView.qml b/components/kube/contents/ui/ComposerView.qml
index d1bc2ea5..f6bd8396 100644
--- a/components/kube/contents/ui/ComposerView.qml
+++ b/components/kube/contents/ui/ComposerView.qml
@@ -19,20 +19,347 @@
 
 
 import QtQuick 2.7
+import QtQuick.Controls 1.3
+import QtQuick.Controls 2.0 as Controls2
+import QtQuick.Layouts 1.1
+
 import org.kube.framework 1.0 as Kube
 
-Item {
-    id:root
-    signal done
-    property alias message: composer.message
-    property alias loadAsDraft: composer.loadAsDraft
+Kube.View {
+    id: root
+
+    property bool loadAsDraft: false
+    property variant message: {}
+
+    //FIXME mean hack to unfuck hiding
+    property variant _composerController: Kube.ComposerController {
+        id: composerController
+        onDone: Kube.Fabric.postMessage(Kube.Messages.componentDone, {})
+    }
+
+    //actions
+    property variant sendAction: composerController.sendAction
+    property variant saveAsDraftAction: composerController.saveAsDraftAction
+
+    Component.onCompleted: loadMessage(root.message, root.loadAsDraft)
+
+    function loadMessage(message, loadAsDraft) {
+        if (message) {
+            composerController.loadMessage(message, loadAsDraft)
+        }
+    }
+
+    function closeFirstSplitIfNecessary() {
+        //Move the view forward
+        if (root.currentIndex == 0) {
+            root.incrementCurrentIndex()
+        }
+    }
+
+    //Drafts
+    Rectangle {
+        width: Kube.Units.gridUnit * 20
+        Layout.minimumWidth: Kube.Units.gridUnit * 5
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
+
+        color: Kube.Colors.textColor
+        focus: true
+
+        ColumnLayout {
+            anchors {
+                fill: parent
+                margins: Kube.Units.largeSpacing
+            }
+            spacing: Kube.Units.smallSpacing
+
+            Kube.PositiveButton {
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    margins: Kube.Units.largeSpacing
+                }
+                focus: true
+                text: qsTr("New Mail")
+                onClicked: {
+                    composerController.clear()
+                    subject.forceActiveFocus()
+                }
+            }
+            Kube.Label{
+                text: qsTr("Drafts")
+                color: Kube.Colors.highlightedTextColor
+            }
+            ListView {
+                id: listView
+                Layout.fillHeight: true
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                }
+
+                clip: true
+
+                // Controls2.ScrollBar.vertical: Controls2.ScrollBar {
+                //     id: scrollbar
+                // }
+
+                //BEGIN keyboard nav
+                onActiveFocusChanged: {
+                    if (activeFocus && currentIndex < 0) {
+                        currentIndex = 0
+                    }
+                }
+
+                Keys.onDownPressed: {
+                    listView.incrementCurrentIndex()
+                }
+                Keys.onUpPressed: {
+                    listView.decrementCurrentIndex()
+                }
+                //END keyboard nav
+
+                onCurrentItemChanged: {
+                    root.loadMessage(currentItem.currentData.domainObject, true)
+                }
+
+                model: Kube.MailListModel {
+                    id: mailListModel
+                    showDrafts: true
+                }
+
+                delegate: Item {
+                    property variant currentData: model
+
+                    width: delegateRoot.width
+                    height: delegateRoot.height
+
+                    Item {
+                        id: delegateRoot
+
+                        property variant mail : model.domainObject
+
+                        // width: scrollbar.visible ? listView.width - scrollbar.width : listView.width
+                        width: listView.width
+                        height: Kube.Units.gridUnit * 4
+
+                        states: [
+                        State {
+                            name: "selected"
+                            when: listView.currentIndex == index
+
+                            PropertyChanges {target: background; color: Kube.Colors.highlightColor}
+                            PropertyChanges {target: subject; color: Kube.Colors.highlightedTextColor}
+                        },
+                        State {
+                            name: "hovered"
+                            when: ( mouseArea.containsMouse || buttons.containsMouse )
+
+                            PropertyChanges {target: background; color: Kube.Colors.highlightColor; opacity: 0.6}
+                            PropertyChanges {target: subject; color: Kube.Colors.highlightedTextColor}
+                        }
+                        ]
 
-    Kube.FocusComposer {
-        id: composer
+                        MouseArea {
+                            id: mouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            onClicked: listView.currentIndex = index
+                        }
+
+                        Rectangle {
+                            id: background
+                            anchors.fill: parent
+                            color: Kube.Colors.textColor
+                        }
+
+                        Item {
+                            id: content
+
+                            anchors {
+                                top: parent.top
+                                bottom: parent.bottom
+                                left: parent.left
+                                right: parent.right
+                                margins: Kube.Units.smallSpacing
+                            }
+
+                            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: Kube.Colors.highlightedTextColor
+                                    maximumLineCount: 2
+                                    wrapMode: Text.WrapAnywhere
+                                    elide: Text.ElideRight
+                                }
+                            }
+
+                            Kube.Label {
+                                id: date
+
+                                anchors {
+                                    right: parent.right
+                                    bottom: parent.bottom
+                                }
+                                text: Qt.formatDateTime(model.date, "dd MMM yyyy")
+                                font.italic: true
+                                color: Kube.Colors.disabledTextColor
+                                font.pointSize: 9
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    //Content
+    Rectangle {
+        Layout.fillWidth: true
+        Layout.minimumWidth: Kube.Units.gridUnit * 5
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
+        color: Kube.Colors.backgroundColor
+
+        ColumnLayout {
+            anchors {
+                fill: parent
+                margins: Kube.Units.largeSpacing
+                leftMargin: Kube.Units.largeSpacing + Kube.Units.gridUnit * 2
+                rightMargin: Kube.Units.largeSpacing + Kube.Units.gridUnit * 2
+            }
+            Kube.TextField {
+                id: subject
+                Layout.fillWidth: true
+
+                placeholderText: "Enter Subject..."
+                text: composerController.subject
+                onTextChanged: composerController.subject = text;
+                onActiveFocusChanged: closeFirstSplitIfNecessary()
+            }
+
+            Controls2.TextArea {
+                id: content
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                text: composerController.body
+                onTextChanged: composerController.body = text;
+                onActiveFocusChanged: closeFirstSplitIfNecessary()
+            }
+        }
+    }
+
+    //Recepients
+    Rectangle {
+        width: Kube.Units.gridUnit * 20
+        Layout.minimumWidth: Kube.Units.gridUnit * 5
         anchors {
-            fill: parent
-            margins: Kube.Units.smallSpacing
+            top: parent.top
+            bottom: parent.bottom
+        }
+        color: Kube.Colors.backgroundColor
+        ColumnLayout {
+            anchors {
+                fill: parent
+                margins: Kube.Units.largeSpacing
+            }
+            width: parent.width
+
+            Kube.Label {
+                text: "Sending Email to"
+            }
+            Kube.AutocompleteLineEdit {
+                id: to
+                Layout.fillWidth: true
+                text: composerController.to
+                onTextChanged: composerController.to = text
+                model: composerController.recipientCompleter.model
+                onSearchTermChanged: composerController.recipientCompleter.searchString = searchTerm
+            }
+
+            Kube.Label {
+                text: "Sending Copy to (CC)"
+            }
+            Kube.AutocompleteLineEdit {
+                id: cc
+                Layout.fillWidth: true
+                text: composerController.cc
+                onTextChanged: composerController.cc = text
+                model: composerController.recipientCompleter.model
+                onSearchTermChanged: composerController.recipientCompleter.searchString = searchTerm
+            }
+
+            Kube.Label {
+                text: "Sending Secret Copy to (Bcc)"
+            }
+            Kube.AutocompleteLineEdit {
+                id: bcc
+                Layout.fillWidth: true
+                text: composerController.bcc
+                onTextChanged: composerController.bcc = text;
+                model: composerController.recipientCompleter.model
+                onSearchTermChanged: composerController.recipientCompleter.searchString = searchTerm
+            }
+
+            Item {
+                Layout.fillHeight: true
+            }
+
+
+            Item {
+                Layout.fillHeight: true
+            }
+
+
+            Kube.Button {
+                id: saveDraftButton
+
+                text: "Save as Draft"
+                //TODO enabled: saveAsDraftAction.enabled
+                onClicked: {
+                    saveAsDraftAction.execute()
+                }
+            }
+            Kube.Button {
+                text: "Discard"
+                onClicked: Kube.Fabric.postMessage(Kube.Messages.componentDone, {})
+            }
+
+            Kube.Label {
+                text: "You are sending this from:"
+            }
+            Kube.ComboBox {
+                id: identityCombo
+                model: composerController.identitySelector.model
+                textRole: "displayName"
+                Layout.fillWidth: true
+                onCurrentIndexChanged: {
+                    composerController.identitySelector.currentIndex = currentIndex
+                }
+            }
+
+            Kube.PositiveButton {
+                width: saveDraftButton.width
+
+                text: "Send"
+                enabled: sendAction.enabled
+                onClicked: {
+                    sendAction.execute()
+                }
+            }
         }
-        onDone: root.done()
     }
 }
diff --git a/components/kube/contents/ui/Kube.qml b/components/kube/contents/ui/Kube.qml
index 115123b7..21c6f4fd 100644
--- a/components/kube/contents/ui/Kube.qml
+++ b/components/kube/contents/ui/Kube.qml
@@ -117,10 +117,12 @@ Controls2.ApplicationWindow {
 
                 Kube.IconButton {
                     iconName: Kube.Icons.search_inverted
+                    onClicked: search.open()
+                }
 
-                    onClicked: {
-                        search.open()
-                    }
+                Kube.IconButton {
+                    iconName: Kube.Icons.edit_inverted
+                    onClicked: kubeViews.openComposer()
                 }
 
                 Kube.IconButton {
@@ -166,6 +168,11 @@ Controls2.ApplicationWindow {
             Layout.fillWidth: true
             initialItem: mailView
 
+            Kube.Listener {
+                filter: Kube.Messages.componentDone
+                onMessageReceived: kubeViews.pop({immediate: true})
+            }
+
             function setPeopleView() {
                 //TODO replacing here while a composer is open is destructive
                 kubeViews.push({item: peopleView, replace: true, immediate: true})
@@ -202,7 +209,6 @@ Controls2.ApplicationWindow {
             Component {
                 id: composerView
                 ComposerView {
-                    onDone: kubeViews.pop({immediate: true})
                 }
             }
             Component {