composer/qml/EditorPage.qml

0001 /*
0002  *  Copyright (C) 2017 Michael Bohlender, <michael.bohlender@kdemail.net>
0003  *  Copyright (C) 2017 Christian Mollekopf, <mollekopf@kolabsys.com>
0004  *
0005  *  This program is free software; you can redistribute it and/or modify
0006  *  it under the terms of the GNU General Public License as published by
0007  *  the Free Software Foundation; either version 2 of the License, or
0008  *  (at your option) any later version.
0009  *
0010  *  This program is distributed in the hope that it will be useful,
0011  *  but WITHOUT ANY WARRANTY; without even the implied warranty of
0012  *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
0013  *  GNU General Public License for more details.
0014  *
0015  *  You should have received a copy of the GNU General Public License along
0016  *  with this program; if not, write to the Free Software Foundation, Inc.,
0017  *  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
0018  */
0019
0020
0021 import QtQuick 2.7
0022 import QtQuick.Layouts 1.1
0023 import QtQuick.Dialogs 1.0 as Dialogs
0024
0025 import org.kube.framework 1.0 as Kube
0026
0027 FocusScope {
0028     id: root
0029
0030     property alias initialText: textEditor.initialText
0031     property var controller
0032
0033     signal done()
0034     signal focusChange()
0035
0036     function focusBody() {
0037         textEditor.forceActiveFocus()
0038     }
0039
0040     Rectangle {
0041         anchors.fill: parent
0042         color: Kube.Colors.paperWhite
0043
0044         ColumnLayout {
0045             anchors {
0046                 top: parent.top
0047                 bottom: parent.bottom
0048                 margins: Kube.Units.largeSpacing
0049                 horizontalCenter: parent.horizontalCenter
0050             }
0051             property var preferredWidth: Kube.Units.gridUnit * 24
0052             property var minimumWidth: root.width - (Kube.Units.largeSpacing + Kube.Units.gridUnit * 2) * 2
0053             width: Math.min(minimumWidth, preferredWidth)
0054
0055             spacing: Kube.Units.smallSpacing
0056
0057             Flow {
0058                 id: attachments
0059
0060                 Layout.fillWidth: true
0061                 layoutDirection: Qt.RightToLeft
0062                 spacing: Kube.Units.smallSpacing
0063                 clip: true
0064
0065                 Repeater {
0066                     model: controller.attachments.model
0067                     delegate: Kube.AttachmentDelegate {
0068                         name: model.filename ? model.filename : ""
0069                         icon: model.iconname ? model.iconname : ""
0070                         clip: true
0071                         actionIcon: Kube.Icons.remove
0072                         onExecute: controller.attachments.remove(model.id)
0073                     }
0074                 }
0075             }
0076
0077             RowLayout {
0078
0079                 spacing: Kube.Units.largeSpacing
0080
0081                 Row {
0082                     spacing: 1
0083
0084                     Kube.IconButton {
0085                         iconName: Kube.Icons.bold
0086                         checkable: true
0087                         checked: textEditor.bold
0088                         onClicked: textEditor.bold = !textEditor.bold
0089                         focusPolicy: Qt.TabFocus
0090                         focus: false
0091                         opacity: activeFocus || hovered ? 1 : 0.6
0092                     }
0093                     Kube.IconButton {
0094                         iconName: Kube.Icons.italic
0095                         checkable: true
0096                         checked: textEditor.italic
0097                         onClicked: textEditor.italic = !textEditor.italic
0098                         focusPolicy: Qt.TabFocus
0099                         focus: false
0100                         opacity: activeFocus || hovered ? 1 : 0.6
0101                     }
0102                     Kube.IconButton {
0103                         iconName: Kube.Icons.underline
0104                         checkable: true
0105                         checked: textEditor.underline
0106                         onClicked: textEditor.underline = !textEditor.underline
0107                         focusPolicy: Qt.TabFocus
0108                         focus: false
0109                         opacity: activeFocus || hovered ? 1 : 0.6
0110                     }
0111                     Kube.TextButton {
0112                         id: deleteButton
0113                         text: qsTr("Remove Formatting")
0114                         visible: textEditor.htmlEnabled
0115                         onClicked: textEditor.clearFormatting()
0116                         opacity: activeFocus || hovered ? 1 : 0.6
0117                     }
0118                 }
0119
0120                 Item {
0121                     height: 1
0122                     Layout.fillWidth: true
0123                 }
0124
0125                 Kube.Button {
0126                     text: qsTr("Attach file")
0127
0128                     onClicked: {
0129                         fileDialog.open()
0130                     }
0131                     opacity: activeFocus || hovered ? 1 : 0.6
0132
0133                     Dialogs.FileDialog {
0134                         id: fileDialog
0135                         title: qsTr("Choose a file to attach")
0136                         folder: shortcuts.home
0137                         selectFolder: false
0138                         selectExisting: true
0139                         selectMultiple: true
0140                         onAccepted: {
0141                             for (var i = 0; i < fileDialog.fileUrls.length; ++i) {
0142                                 controller.attachments.add({url: fileDialog.fileUrls[i]})
0143                             }
0144                         }
0145                     }
0146                 }
0147             }
0148
0149             Kube.HeaderField {
0150                 id: subject
0151                 objectName: "subject"
0152                 Layout.fillWidth: true
0153                 activeFocusOnTab: true
0154                 focus: true
0155
0156                 placeholderText: qsTr("Subject")
0157                 text: controller.subject
0158                 onTextChanged: controller.subject = text;
0159                 onActiveFocusChanged: {
0160                     if (activeFocus) {
0161                         root.focusChange()
0162                     }
0163                 }
0164                 onAccepted: textEditor.forceActiveFocus(Qt.TabFocusReason)
0165             }
0166
0167             Kube.TextEditor {
0168                 id: textEditor
0169                 objectName: "textEditor"
0170                 activeFocusOnTab: true
0171                 placeholderText: qsTr("Body")
0172
0173                 Layout.fillWidth: true
0174                 Layout.fillHeight: true
0175
0176                 border.width: 0
0177
0178                 onHtmlEnabledChanged: {
0179                     controller.htmlBody = htmlEnabled;
0180                 }
0181
0182                 onActiveFocusChanged: root.focusChange()
0183                 Keys.onEscapePressed: root.done()
0184                 onTextChanged: {
0185                     controller.body = text;
0186                 }
0187             }
0188         }
0189     }
0190 }