Merge lp:~rpadovani/reminders-app/new-notes-design into lp:~notes-app-dev/reminders-app/new-design

[Riccardo Padovani]

Implement notesDelegate according to new design

Implement notesDelegate according to new design: https://docs.google.com/a/canonical.com/document/d/1EAokX1bXN5HG6B1MxxuYWiGbf3pjNdy7-h7aERBFk5k/edit#

[Michael Zanetti (mzanetti)]

Screenshot: http://i.imgur.com/bVfOSo0.png

* The delegate height is too small
* The color bar at the top is too thick
* The Note title is too big
* The text color doesn't seem to match (not sure if the spec is a bit buggy there. I had issues too in the notebook delegate)
* The left/right margins are too small
* The chevron interferes with the text
* Can you try adding the gradient?

Please also align color values, font sizes etc with the notebookdelegates where they look the same in the spec

review: Needs Fixing

[Michael Zanetti (mzanetti)]

60 + anchors.fill: parent

You should not use anchors.fill on items inside a layout. As the parent is a RowLayout, just use "Layout.fillHeight: true" to make it span the whole height, and use "Layout.fillWidth: true" on the cell you want to use all the available space after placing other items in the row.

Same for all the other items. You should not use anchors inside layouts. Only use absolute width/height values or, better, use Layout.fillWidth: true in a smart way to let the layout do the job for you.

===

104 + source: Qt.resolvedUrl('../images/arrowRight.png') // TODO: Improve this image. Seriously. It's horrible.

lol. I agree.

review: Needs Fixing

[lp:~rpadovani/reminders-app/new-notes-design]

98. By Riccardo Padovani on 2014-05-06

Fixed some sizes

99. By Riccardo Padovani on 2014-05-07

Fixed layout and anchors

100. By Riccardo Padovani on 2014-05-07

Added gradient

[Michael Zanetti (mzanetti)]

77 + anchors { top: colorRectangle.bottom; bottom: parent.bottom }

Theres still anchors inside a columnLayout :)

===

I would try it like this (pseudo-code - might not work as is)

ColumnLayout {
   anchors { fill: parent; leftMargin: units.gu(1.5); rightMargin: units.gu(1.5) }

    Rectangle {
        Layout.fillWidth: true
        height: units.gu(3)
        color: colorForNotebook(note.notebookGui)
    }
    Label {
        Layout.fillWidth: true
        text: note.title
    }
    Label {
        Layout.fillWidth: true
        Layout.fillHeight: true
        text: note.plaintextContent
        fontSize: "small"
        maximumLineCount: 2
    }
    Label {
        Layout.fillWidth: true
        text: note.date
        fontSize: "small"
        horizontalAlignment: Text.AlignRight
    }
}

and that's it.

for the arrow, use "Base" instead of "Empty" and set "progression: true"

[Michael Zanetti (mzanetti)]

Forgot about the gradient:

For that, put a Rectangle on top with anchors.fill: parent and set a gradient similar to this:

Gradient {
    GradientStop{ position: 0.9; color: "white" }
    GradientStop{ position: 1.0; color: "#d9d9d9" }
}

[David Planella (dpm)]

Wow, this is starting to look really nice!

http://i.imgur.com/Gyfu0FK.png

A couple of notes having compared the original design with the implementation:

http://i.imgur.com/DVSQ86L.png

- The left and right margins between note entry and edges need to be slightly smaller
- There needs to be a top margin (perhaps this will be solved when grouping the notes by month?)
- The shadow gradient looks much softer in the original designs
- The shadow gradient should not cover image previews
- The date format should be Dayname, time
- The Notes tab should be dark gray, not white

Apart from this, it looks really cool, thanks!

review: Needs Fixing

[lp:~rpadovani/reminders-app/new-notes-design]

101. By Riccardo Padovani on 2014-05-07

Rewrite ALL! :D

[Michael Zanetti (mzanetti)]

lookin' goooood!

Especially the code. For the visual, I think there are some margins and spacings wrong still at top and bottom. Also clicking seems to be broken. I think you need to forward the clicked signal from the inner ListItem to the outer.

=== modified file 'src/app/qml/components/NotesDelegate.qml'
--- src/app/qml/components/NotesDelegate.qml	2014-05-05 17:46:10 +0000
+++ src/app/qml/components/NotesDelegate.qml	2014-05-07 17:16:59 +0000
@@ -17,51 +17,91 @@
  */
 
 import QtQuick 2.0
+import QtQuick.Layouts 1.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1
 
 Empty {
     id: root
-    height: units.gu(9)
+    height: units.gu(12)
 
     property string title
     property date creationDate
     property string content
     property string resource
-    property color notebookColor
-
-    Column {
-        id: contentColumn
-        spacing: units.gu(1)
-        anchors {
-            top: parent.top
-            topMargin: units.gu(1)
-            left: parent.left
-            leftMargin: units.gu(2)
-            right: resourceImage.left
-            rightMargin: units.gu(2)
-        }
-        Label {
-            anchors { left: parent.left; right: parent.right }
-            text: root.title
-            font.bold: true
-            elide: Text.ElideRight
+    property string notebookColor: preferences.colorForNotebook(model.guid)
+
+    showDivider: false;
+
+    ColumnLayout {
+        anchors { fill: parent; leftMargin: units.gu(1); rightMargin: units.gu(1) }
+        spacing: 0
+
+        Rectangle {
+            Layout.fillWidth: true
+            height: units.gu(0.4)
             color: root.notebookColor
         }
-        Label {
-            anchors { left: parent.left; right: parent.right }
-            text: "<font color=\"#dd4814\">"+ Qt.formatDate(root.creationDate) + "</font>  " + root.content
-            wrapMode: Text.WordWrap
-            textFormat: Text.StyledText
-            maximumLineCount: 2
-            fontSize: "small"
+
+        Rectangle {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            color: "white"
+
+            RowLayout {
+                anchors.fill: parent
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    gradient: Gradient {
+                        GradientStop{ position: 0.9; color: "transparent" }
+                        GradientStop{ position: 1; color: "#d9d9d9" }
+                    }
+
+                    Base {
+                        anchors.fill: parent
+                        progression: true
+
+                        ColumnLayout {
+                            anchors { fill: parent; bottomMargin: units.gu(0.5) }
+
+                            Label {
+                                Layout.fillWidth: true
+                                text: root.title
+                                font.weight: Font.Light
+                                elide: Text.ElideRight
+                                color: root.notebookColor
+                            } 
+
+                            Label {
+                                Layout.fillWidth: true
+                                Layout.fillHeight: true
+                                text: root.content
+                                wrapMode: Text.WordWrap
+                                textFormat: Text.StyledText
+                                maximumLineCount: 2
+                                fontSize: "small"
+                                color: "black"
+                            }
+
+                            Label {
+                                Layout.fillWidth: true
+                                text: Qt.formatDate(root.creationDate)
+                                color: "#b3b3b3"
+                                fontSize: "small"
+                                horizontalAlignment: Text.AlignRight
+                            }
+                        }
+                    }
+                }
+
+                Image {
+                    source: root.resource
+                    sourceSize.height: units.gu(11.6)
+                }
+            }
         }
     }
-
-    Image {
-        id: resourceImage
-        anchors { top: parent.top; right: parent.right; bottom: parent.bottom }
-        source: root.resource
-        sourceSize.height: height
-    }
 }

=== added file 'src/app/qml/images/arrowRight.png'
Binary files src/app/qml/images/arrowRight.png	1970-01-01 00:00:00 +0000 and src/app/qml/images/arrowRight.png	2014-05-07 17:16:59 +0000 differ