Merge lp:~unity-team/unity8/new-scopes-title-alignment into lp:~unity-team/unity8/new-scopes

[Michał Karnicki]

Title alignment.

Are there any related MPs required for this MP to build/function as expected? Please list.
 * The prerequisite.
Did you perform an exploratory manual test run of your code change and any related functionality?
 * Yes, used unity-scope-tool and tryCardTool. Tests pass.
If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
 * N/A
If you changed the UI, has there been a design review?
 * Yes, worked on this with Katie and updated spec.

[Michał Karnicki (karni)]

make test fails with:
20/20 Test #20: timeformattertest ....................***Failed 0.02 sec

[Michał Karnicki (karni)]

LC_ALL=C make -C builddir test
100% pass

[Michał Sawicz (saviq)]

This is not just about title, after all price and rating alone should be centered, too?

review: Needs Fixing

[Michał Karnicki (karni)]

Title was critical for us, I'm happy to continue work in another branch if we can get this merged asap.

[Michał Sawicz (saviq)]

s/titleHorizontalAlignment/headerAlignment/, so that we don't have to rename it later when we apply it to other components.

=====

43 + verticalAlignment: Text.AlignVCenter

The Label has no height defined, so this doesn't do anything.

=====

55 + property var titleHorizontalAlignment: card.titleHorizontalAlignment
56 +
57 Card {
58 id: card
59 template: cardTool.template
60 @@ -110,6 +112,19 @@
61 width: cardTool.cardWidth || implicitWidth
62 height: cardTool.cardHeight || implicitHeight
63
64 + property var titleHorizontalAlignment: {
65 + var subtitle = components["subtitle"];
66 + var price = components["price"];
67 +
68 + var hasSubtitle = subtitle && (typeof subtitle === "string" || subtitle["field"])
69 + var hasPrice = price && (typeof price === "string" || subtitle["field"]);
70 +
71 + var isOnlyTextComponent = !hasSubtitle && !hasPrice;
72 + if (!isOnlyTextComponent) return Text.AlignLeft;
73 +
74 + return (template["card-layout"] === "horizontal") ? Text.AlignHCenter : Text.AlignLeft;
75 + }
76 +

Make it readonly, and just put the whole binding under CardTool, don't move it under Card.

=====

You also need to take summary into account.

review: Needs Fixing

[lp:~unity-team/unity8/new-scopes-title-alignment]

595. By Michał Karnicki on 2014-02-06

/s/titleHorizontalAlignment/titleAlignment

596. By Michał Karnicki on 2014-02-06

Move titleAlignment from within card to CardTool.

597. By Michał Karnicki on 2014-02-06

Make titleAlignment readonly.

598. By Michał Karnicki on 2014-02-06

Merge prerequisite.

599. By Michał Karnicki on 2014-02-06

Merge new-scopes.

600. By Michał Karnicki on 2014-02-06

s/titleAlignment/headerAlignment

601. By Michał Karnicki on 2014-02-06

Fix CardTool tests.

[Michał Karnicki (karni)]

Card tests occasionally fail in test_card_size. Check out this paste:
http://paste.ubuntu.com/6888056/
uncomment red rectangle and see how implicitHeight does not shrink when Card size shrinks.

[Michał Karnicki (karni)]

What paste suggests appears in unity8-card-overlay so we'll get it in.

[lp:~unity-team/unity8/new-scopes-title-alignment]

602. By Michał Sawicz on 2014-02-07

Merge trunk header-alignment.

Unmerged revisions

=== modified file 'qml/Dash/Card.qml'
--- qml/Dash/Card.qml	2014-02-04 18:14:07 +0000
+++ qml/Dash/Card.qml	2014-02-07 11:08:41 +0000
@@ -23,8 +23,14 @@
     property var components
     property var cardData
 
+    property alias fontScale: header.fontScale
+    property alias headerAlignment: header.headerAlignment
+    readonly property alias headerHeight: header.height
+
+    property bool showHeader: true
+
     implicitWidth: childrenRect.width
-    implicitHeight: childrenRect.height
+    implicitHeight: summary.y + summary.height
 
     UbuntuShape {
         id: artShape
@@ -58,21 +64,77 @@
         }
     }
 
+    ShaderEffect {
+        id: overlay
+        anchors {
+            left: artShape.left
+            right: artShape.right
+            bottom: artShape.bottom
+        }
+
+        height: header.height
+        opacity: header.opacity * 0.6
+        visible: template && template["overlay"] && artShape.visible && artShape.image.status === Image.Ready || false
+
+        property var source: ShaderEffectSource {
+            id: shaderSource
+            sourceItem: artShape
+            onVisibleChanged: if (visible) scheduleUpdate()
+            live: false
+            sourceRect: Qt.rect(0, artShape.height - overlay.height, artShape.width, overlay.height)
+        }
+
+        vertexShader: "
+            uniform highp mat4 qt_Matrix;
+            attribute highp vec4 qt_Vertex;
+            attribute highp vec2 qt_MultiTexCoord0;
+            varying highp vec2 coord;
+            void main() {
+                coord = qt_MultiTexCoord0;
+                gl_Position = qt_Matrix * qt_Vertex;
+            }"
+
+        fragmentShader: "
+            varying highp vec2 coord;
+            uniform sampler2D source;
+            uniform lowp float qt_Opacity;
+            void main() {
+                lowp vec4 tex = texture2D(source, coord);
+                gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity;
+            }"
+    }
+
     CardHeader {
         id: header
         objectName: "cardHeader"
         anchors {
-            top: template && template["card-layout"] === "horizontal" ? artShape.top : artShape.bottom
-            left: template && template["card-layout"] === "horizontal" ? artShape.right : parent.left
+            top: {
+                if (template) {
+                    if (template["overlay"]) return overlay.top;
+                    if (template["card-layout"] === "horizontal") return artShape.top;
+                }
+                return artShape.bottom;
+            }
+            left: {
+                if (template) {
+                    if (!template["overlay"] && template["card-layout"] === "horizontal") return artShape.right;
+                }
+                return parent.left;
+            }
             right: parent.right
         }
 
         mascot: cardData && cardData["mascot"] || ""
         title: cardData && cardData["title"] || ""
         subtitle: cardData && cardData["subtitle"] || ""
+
+        opacity: showHeader ? 1 : 0
+
+        Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
     }
 
     Label {
+        id: summary
         objectName: "summaryLabel"
         anchors { top: header.visible ? header.bottom : artShape.bottom; left: parent.left; right: parent.right }
         wrapMode: Text.Wrap

=== modified file 'qml/Dash/CardFilterGrid.qml'
--- qml/Dash/CardFilterGrid.qml	2014-01-31 17:02:29 +0000
+++ qml/Dash/CardFilterGrid.qml	2014-02-07 11:08:41 +0000
@@ -45,6 +45,8 @@
             template: genericFilterGrid.template
             components: genericFilterGrid.components
 
+            headerAlignment: cardTool.headerAlignment
+
             onClicked: genericFilterGrid.clicked(index, card.y)
             onPressAndHold: genericFilterGrid.pressAndHold(index, card.y)
         }

=== modified file 'qml/Dash/CardHeader.qml'
--- qml/Dash/CardHeader.qml	2014-02-04 18:14:07 +0000
+++ qml/Dash/CardHeader.qml	2014-02-07 11:08:41 +0000
@@ -26,6 +26,11 @@
     property alias oldPrice: oldPriceLabel.text
     property alias altPrice: altPriceLabel.text
 
+    // FIXME: Saviq, used to scale fonts down in Carousel
+    property real fontScale: 1.0
+
+    property alias headerAlignment: titleLabel.horizontalAlignment
+
     visible: mascotImage.status === Image.Ready || title || price
     height: row.height > 0 ? row.height + row.margins * 2 : 0
 
@@ -41,7 +46,7 @@
             leftMargin: spacing
             rightMargin: spacing
         }
-        spacing: mascotShape.visible ? margins : 0
+        spacing: mascotShape.visible || (template && template["overlay"]) ? margins : 0
 
         UbuntuShape {
             id: mascotShape
@@ -77,6 +82,8 @@
                 wrapMode: Text.Wrap
                 maximumLineCount: 2
                 fontSize: "small"
+                font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
+                color: template["overlay"] === true ? "white" : Theme.palette.selected.backgroundText
             }
 
             Label {
@@ -87,6 +94,8 @@
                 font.weight: Font.Light
                 visible: titleLabel.text && text
                 fontSize: "x-small"
+                font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale)
+                color: template["overlay"] === true ? "white" : Theme.palette.selected.backgroundText
             }
 
             Row {

=== modified file 'qml/Dash/CardTool.qml'
--- qml/Dash/CardTool.qml	2014-02-03 09:41:39 +0000
+++ qml/Dash/CardTool.qml	2014-02-07 11:08:41 +0000
@@ -100,10 +100,32 @@
         }
     }
 
-    readonly property QtObject priv: card
+    /*!
+     type:real \brief Height of the card's header.
+    */
+    readonly property alias headerHeight: card.headerHeight
+
+    /*!
+     \brief Desired alignment of header components.
+     */
+    readonly property int headerAlignment: {
+        var subtitle = components["subtitle"];
+        var price = components["price"];
+        var summary = components["summary"];
+
+        var hasSubtitle = subtitle && (typeof subtitle === "string" || subtitle["field"])
+        var hasPrice = price && (typeof price === "string" || subtitle["field"]);
+        var hasSummary = summary && (typeof summary === "string" || summary["field"])
+
+        var isOnlyTextComponent = !hasSubtitle && !hasPrice && !hasSummary;
+        if (!isOnlyTextComponent) return Text.AlignLeft;
+
+        return (template["card-layout"] === "horizontal") ? Text.AlignHCenter : Text.AlignLeft;
+    }
 
     Card {
         id: card
+        objectName: "card"
         template: cardTool.template
         components: cardTool.components
 

=== modified file 'tests/qmltests/Dash/tst_Card.qml'
--- tests/qmltests/Dash/tst_Card.qml	2014-02-04 18:14:07 +0000
+++ tests/qmltests/Dash/tst_Card.qml	2014-02-07 11:08:41 +0000
@@ -74,6 +74,11 @@
             "name": "Header title only",
             "layout": { "components": { "title": "title" } }
         },
+        {
+            "name": "Art, header, summary - overlaid",
+            "layout": { "template": { "overlay": true },
+                        "components": JSON.parse(Helpers.fullMapping) }
+        },
     ]
 
     CardTool {
@@ -224,6 +229,7 @@
         }
 
         function test_card_size(data) {
+            waitForRendering(card);
             selector.selectedIndex = data.index;
 
             if (data.hasOwnProperty("size")) {
@@ -314,6 +320,8 @@
                   left: function() { return art.x }, index: 0 },
                 { tag: "Horizontal", top: function() { return art.y },
                   left: function() { return art.x + art.width }, index: 5 },
+                { tag: "Overlay", top: function() { return art.y + art.height - header.height },
+                  left: function() { return art.x }, index: 9 },
             ]
         }
 

=== modified file 'tests/qmltests/Dash/tst_CardTool.qml'
--- tests/qmltests/Dash/tst_CardTool.qml	2014-01-31 16:23:32 +0000
+++ tests/qmltests/Dash/tst_CardTool.qml	2014-02-07 11:08:41 +0000
@@ -72,6 +72,22 @@
             "name": "Art, header - portrait",
             "layout": { "components": Helpers.update(JSON.parse(Helpers.fullMapping), { "art": {"aspect-ratio": 0.5, "summary": undefined }}) }
         },
+        {
+            "name": "Title - vertical",
+            "layout": { "template": { "card-layout": "vertical" }, "components": { "title": "title" } }
+        },
+        {
+            "name": "Title - horizontal",
+            "layout": { "template": { "card-layout": "horizontal" }, "components": { "title": "title" } }
+        },
+        {
+            "name": "Title, subtitle - vertical",
+            "layout": { "template": { "card-layout": "vertical" }, "components": { "title": "title", "subtitle": "subtitle" } }
+        },
+        {
+            "name": "Title, price - horizontal",
+            "layout": { "template": { "card-layout": "horizontal" }, "components": { "title": "title", "price": "price" } }
+        },
     ]
 
     CardTool {
@@ -121,6 +137,7 @@
             height: cardTool.cardHeight || implicitHeight
 
             clip: true
+            headerAlignment: cardTool.headerAlignment
 
             Rectangle {
                 anchors.fill: parent
@@ -209,7 +226,7 @@
                 id: dataArea
                 anchors { left: parent.left; right: parent.right }
                 height: units.gu(25)
-                text: JSON.stringify(cardTool.priv.cardData, undefined, 2)
+                text: JSON.stringify(testCase.internalCard.cardData, undefined, 2)
             }
 
             Label {
@@ -239,8 +256,14 @@
         id: testCase
         name: "Card"
 
+        property Card internalCard: findChild(cardTool, "card")
+
         when: windowShown
 
+        function init() {
+            verify(typeof testCase.internalCard === "object", "Couldn't find internal card object.");
+        }
+
         function cleanup() {
             selector.selectedIndex = -1;
             layoutSelector.selectedIndex = -1;
@@ -296,5 +319,29 @@
                 } else tryCompare(cardTool, "cardHeight", data.height);
             }
         }
+
+        function test_card_header_component_alignment_data() {
+            return [
+                { tag: "Title - vertical", component: "titleLabel", property: "headerAlignment",
+                  value: Text.AlignLeft, index: 11, layout_index: 0 },
+                { tag: "Title - horizontal", component: "titleLabel", property: "headerAlignment",
+                  value: Text.AlignHCenter, index: 12, layout_index: 0},
+                { tag: "Title, subtitle - vertical", component: "titleLabel", property: "headerAlignment",
+                  value: Text.AlignLeft, index: 13, layout_index: 0},
+                { tag: "Title, price - horizontal", component: "titleLabel", property: "headerAlignment",
+                  value: Text.AlignLeft, index: 14, layout_index: 0},
+            ]
+        }
+
+        function test_card_header_component_alignment(data) {
+            selector.selectedIndex = data.index;
+            if (data.hasOwnProperty("layout_index")) {
+                layoutSelector.selectedIndex = data.layout_index;
+            }
+
+            if (data.hasOwnProperty("property")) {
+                tryCompare(cardTool, data.property, data.value);
+            }
+        }
     }
 }