Michael Zanetti has proposed merging lp:~mzanetti/reminders-app/edit-note-improvements into lp:reminders-app.
Requested reviews: Ubuntu Reminders app developers (reminders-app-dev) Related bugs: Bug #1431459 in Ubuntu Reminders app: "Implicit save when editing" https://bugs.launchpad.net/reminders-app/+bug/1431459 For more details, see: https://code.launchpad.net/~mzanetti/reminders-app/edit-note-improvements/+merge/253010 Further improve edit dialog. More space for the actual content, implicitly save the note. -- Your team Ubuntu Reminders app developers is requested to review the proposed merge of lp:~mzanetti/reminders-app/edit-note-improvements into lp:reminders-app.
=== modified file 'src/app/qml/components/RtfButton.qml' --- src/app/qml/components/RtfButton.qml 2014-11-10 23:31:45 +0000 +++ src/app/qml/components/RtfButton.qml 2015-03-16 00:46:37 +0000 @@ -17,14 +17,17 @@ */ import QtQuick 2.3 +import QtQuick.Layouts 1.1 import Ubuntu.Components 1.1 Item { id: root + implicitWidth: Math.max(height, contentRow.width + units.gu(1)) property alias text: textField.text property alias iconName: icon.name property alias iconSource: icon.source property string color: "transparent" + property alias iconColor: icon.color property alias horizontalAlignment: textField.horizontalAlignment property alias font: textField.font @@ -36,6 +39,7 @@ opacity: enabled ? 1 : 0.5 MouseArea { + id: mouseArea anchors.fill: parent onClicked: root.clicked() } @@ -43,22 +47,27 @@ Rectangle { anchors.fill: parent color: UbuntuColors.darkGrey - opacity: root.active ? 0.2 : 0 - } - - Label { - id: textField - anchors { top: parent.top; bottom: parent.bottom; left: parent.left } - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - width: parent.width - elide: Text.ElideRight - } - - Icon { - id: icon - anchors.fill: parent - anchors.margins: units.gu(0.5) + opacity: root.active || mouseArea.pressed ? 0.2 : 0 + } + + Row { + id: contentRow + anchors { top: parent.top; bottom: parent.bottom; left: parent.left; leftMargin: units.gu(0.5) } + spacing: units.gu(0.5) + Icon { + id: icon + anchors { top: parent.top; bottom: parent.bottom; margins: units.gu(0.5) } + width: height + visible: source.toString().length > 0 + } + Label { + id: textField + anchors { top: parent.top; bottom: parent.bottom; margins: units.gu(0.5) } + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + elide: Text.ElideRight + width: Math.min(implicitWidth, root.width) + } } UbuntuShape { === modified file 'src/app/qml/ui/EditNotePage.qml' --- src/app/qml/ui/EditNotePage.qml 2014-09-23 12:39:27 +0000 +++ src/app/qml/ui/EditNotePage.qml 2015-03-16 00:46:37 +0000 @@ -25,7 +25,6 @@ Page { id: root property alias note: editNoteView.note - property alias isBottomEdge: editNoteView.isBottomEdge signal exitEditMode(var note) === modified file 'src/app/qml/ui/EditNoteView.qml' --- src/app/qml/ui/EditNoteView.qml 2015-03-05 18:23:25 +0000 +++ src/app/qml/ui/EditNoteView.qml 2015-03-16 00:46:37 +0000 @@ -30,7 +30,6 @@ Item { id: root property var note - property bool isBottomEdge: false onNoteChanged: { for (var i = 0; i < notebookSelector.values.count; i++) { @@ -81,62 +80,17 @@ } } - Binding { - target: note - property: "renderWidth" - value: noteTextArea.width - noteTextArea.textMargin * 2 + Connections { + target: noteTextArea + onWidthChanged: { + note.richTextContent = noteTextArea.text; + note.renderWidth = noteTextArea.width - noteTextArea.textMargin + } } Column { anchors { left: parent.left; top: parent.top; right: parent.right; bottom: toolbox.top } - Row { - visible: !root.isBottomEdge - anchors { left: parent.left; right: parent.right; margins: units.gu(1) } - height: units.gu(7) - spacing: units.gu(2) - AbstractButton { - id: backIcon - height: units.gu(3) - width: height - anchors.verticalCenter: parent.verticalCenter - Icon { - name: "back" - anchors.fill: parent - } - onClicked: { - root.exitEditMode(root.note); - } - } - - TextField { - id: titleTextField - text: root.note ? root.note.title : "" - placeholderText: i18n.tr("Untitled") - height: units.gu(4) - width: parent.width - (backIcon.width + parent.spacing) * 2 - anchors.verticalCenter: parent.verticalCenter - } - AbstractButton { - height: units.gu(3) - width: height - anchors.verticalCenter: parent.verticalCenter - Icon { - name: "save" - anchors.fill: parent - } - onClicked: { - saveNote(); - root.exitEditMode(root.note); - } - } - } - - Divider { - visible: !root.isBottomEdge - height: units.gu(2) - } - Rectangle { anchors { left: parent.left; right: parent.right } height: parent.height - y @@ -152,14 +106,16 @@ function ensureVisible(r) { + var staticHeight = titleTextField.height + notebookSelector.height if (contentX >= r.x) contentX = r.x; - else if (contentX+width <= r.x+r.width) + else if (contentX +width <= r.x+r.width) contentX = r.x+r.width-width; if (contentY >= r.y) contentY = r.y; - else if (contentY+height-notebookSelector.height <= r.y+r.height) - contentY = r.y+r.height-height+notebookSelector.height; + else if (contentY + height <= r.y + staticHeight + r.height) { + contentY = r.y + r.height - staticHeight; + } } Column { @@ -167,17 +123,84 @@ width: parent.width height: childrenRect.height + TextField { + id: titleTextField + height: units.gu(6) + width: parent.width + text: root.note ? root.note.title : "" + placeholderText: i18n.tr("Untitled") + font.pixelSize: units.gu(4) + style: TextFieldStyle { + background: null + } + } + + ThinDivider {} + ValueSelector { id: notebookSelector + width: parent.width text: values.notebook(selectedIndex).name property string selectedGuid: values.notebook(selectedIndex) ? values.notebook(selectedIndex).guid : "" values: Notebooks {} + + // The ValueSelector is not customizable enough, yet we wanna use the expanstion it provides. Let's just paint on top of it + + Rectangle { + anchors { left: parent.left; right: parent.right; top: parent.top } + height: units.gu(6) + color: "white" + + RowLayout { + anchors.fill: parent + anchors.margins: units.gu(1) + + Item { + height: parent.height + width: height + Icon { + anchors.fill: parent + anchors.margins: units.gu(0.5) + name: "notebook" + color: preferences.colorForNotebook(notebookSelector.values.notebook(notebookSelector.selectedIndex).guid) + } + } + + Label { + text: notebookSelector.values.notebook(notebookSelector.selectedIndex).name + Layout.fillWidth: true + color: preferences.colorForNotebook(notebookSelector.values.notebook(notebookSelector.selectedIndex).guid) + } + RtfButton { + iconName: root.note && root.note.reminder ? "reminder" : "reminder-new" + height: parent.height + width: height + iconColor: root.note && note.reminder ? UbuntuColors.blue : Qt.rgba(0.0, 0.0, 0.0, 0.0) + onClicked: { + Qt.inputMethod.hide(); + pageStack.push(Qt.resolvedUrl("SetReminderPage.qml"), { note: root.note}); + } + } + RtfButton { + id: tagsButton + iconSource: "../images/tags.svg" + height: parent.height + width: height + onClicked: { + Qt.inputMethod.hide(); + PopupUtils.open(tagsDialog) + } + } + } + } } + ThinDivider {} + TextEdit { id: noteTextArea width: flick.width - height: Math.max(flick.height - notebookSelector.height, paintedHeight) + height: Math.max(flick.height - notebookSelector.height - titleTextField.height, paintedHeight) focus: true wrapMode: TextEdit.Wrap textFormat: TextEdit.RichText @@ -193,7 +216,6 @@ Timer { id: setFocusTimer interval: 1 - running: !root.isBottomEdge repeat: false onTriggered: { noteTextArea.cursorPosition = noteTextArea.length; @@ -390,7 +412,6 @@ property bool charFormatExpanded: false property bool blockFormatExpanded: false - property bool tagsRowExpanded: false Behavior on height { UbuntuNumberAnimation {} } @@ -429,6 +450,7 @@ horizontalAlignment: Text.AlignLeft Layout.fillWidth: true onClicked: { + Qt.inputMethod.hide(); PopupUtils.open(fontPopoverComponent, fontButton, {selectionStart: noteTextArea.selectionStart, selectionEnd: noteTextArea.selectionEnd}) } } @@ -439,6 +461,7 @@ height: parent.height width: height onClicked: { + Qt.inputMethod.hide(); PopupUtils.open(fontSizePopoverComponent, fontSizeButton, {selectionStart: noteTextArea.selectionStart, selectionEnd: noteTextArea.selectionEnd}) } } @@ -448,6 +471,7 @@ width: height color: formattingHelper.color onClicked: { + Qt.inputMethod.hide(); PopupUtils.open(colorPopoverComponent, colorButton, {selectionStart: noteTextArea.selectionStart, selectionEnd: noteTextArea.selectionEnd}) } } @@ -587,56 +611,9 @@ formattingHelper.alignment = Qt.AlignRight } } - } - - Row { - anchors { left: parent.left; right: parent.right; rightMargin: units.gu(1) } - height: units.gu(4) - visible: toolbox.tagsRowExpanded - spacing: units.gu(1) - - Rectangle { - z: 100 - color: "#efefef" - height: parent.height - width: height + units.gu(1) - RtfButton { - id: editTagsButton - iconName: "edit" - height: parent.height - width: height - anchors.horizontalCenter: parent.horizontalCenter - onClicked: { - PopupUtils.open(tagsDialog) - } - } - } - - ListView { - width: parent.width - editTagsButton.width - units.gu(1) - height: units.gu(4) - - model: root.note ? root.note.tagGuids.length : undefined - orientation: ListView.Horizontal - spacing: units.gu(1) - - - delegate: Rectangle { - id: rectangle - radius: units.gu(1) - color: "white" - border.color: preferences.colorForNotebook(root.note.notebookGuid) - anchors.verticalCenter: parent.verticalCenter - Text { - text: NotesStore.tag(root.note.tagGuids[index]).name - color: preferences.colorForNotebook(root.note.notebookGuid) - Component.onCompleted: { - rectangle.width = width + units.gu(2) - rectangle.height = height + units.gu(1) - anchors.centerIn = parent - } - } - } + Item { + Layout.fillWidth: true + Layout.fillHeight: true } } @@ -646,6 +623,20 @@ height: units.gu(4) RtfButton { + iconName: "tick" + // TRANSLATORS: Button to close the edit mode + text: i18n.tr("Done") + height: parent.height + iconColor: UbuntuColors.green + onClicked: { + saveNote(); + root.exitEditMode(root.note); + } + } + + RtfSeparator { } + + RtfButton { iconName: "undo" height: parent.height width: height @@ -670,6 +661,8 @@ Layout.fillWidth: true } + RtfSeparator {} + RtfButton { iconName: "select" height: parent.height @@ -681,15 +674,6 @@ } } - RtfButton { - iconName: note.reminder ? "reminder" : "reminder-new" - height: parent.height - width: height - onClicked: { - pageStack.push(Qt.resolvedUrl("SetReminderPage.qml"), { note: root.note}); - } - } - // TextEdit can't display horizontal lines yet :/ // https://bugreports.qt-project.org/browse/QTBUG-42545 // RtfButton { @@ -709,18 +693,7 @@ priv.insertPosition = noteTextArea.cursorPosition; note.richTextContent = noteTextArea.text; importPicker.visible = true; - } - } - - RtfSeparator {} - - RtfButton { - iconSource: "../images/tags.svg" - height: parent.height - width: height - active: toolbox.tagsRowExpanded - onClicked: { - toolbox.tagsRowExpanded = !toolbox.tagsRowExpanded + Qt.inputMethod.hide(); } } @@ -736,8 +709,6 @@ } } - RtfSeparator {} - RtfButton { iconName: "edit-select-all" height: parent.height === modified file 'src/app/qml/ui/NotesPage.qml' --- src/app/qml/ui/NotesPage.qml 2015-03-08 18:47:51 +0000 +++ src/app/qml/ui/NotesPage.qml 2015-03-16 00:46:37 +0000 @@ -41,8 +41,6 @@ bottomEdgeLabelVisible: narrowMode && (!notes.filterNotebookGuid || !notes.loading) bottomEdgeTitle: i18n.tr("Add note") bottomEdgePageComponent: EditNotePage { - isBottomEdge: true; - MouseArea { anchors.fill: parent }
-- Mailing list: https://launchpad.net/~ubuntu-touch-coreapps-reviewers Post to : ubuntu-touch-coreapps-reviewers@lists.launchpad.net Unsubscribe : https://launchpad.net/~ubuntu-touch-coreapps-reviewers More help : https://help.launchpad.net/ListHelp