Merge lp:~saviq/unity8/dash-header-style into lp:unity8

[Michał Sawicz]

Add dash PageHeader styling.

* Are there any related MPs required for this MP to build/function as expected? Please list.
prerequisite:
https://code.launchpad.net/~saviq/unity8/drop-filtergrid/+merge/226415

 * Did you perform an exploratory manual test run of your code change and any related functionality?
Yes.

 * Did you make sure that your branch does not contain spurious tags?
Yes.

 * 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?
N/A

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1063
http://jenkins.qa.ubuntu.com/job/unity8-ci/3493/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/2223
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/495
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/587
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/587
        deb: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/587/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/587
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/2433
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/3404
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/3404/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/10124

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3493/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1064
http://jenkins.qa.ubuntu.com/job/unity8-ci/3495/
Executed test runs:
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/2228
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/497
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/589
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/589
        deb: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/589/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/589
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/2436
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/3410
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/3410/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/10129

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3495/rebuild

review: Needs Fixing (continuous-integration)

[Albert Astals Cid (aacid)]

 * Did you perform an exploratory manual test run of the code change and any related functionality?
Yes

 * Did CI run pass? If not, please explain why.
No, but the failing tests are known to fail/be unstable so that's fine.

review: Approve

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1064
http://jenkins.qa.ubuntu.com/job/unity8-ci/3521/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/2278/console
    UNSTABLE: http://jenkins.qa.ubuntu.com/job/unity-phablet-qmluitests-utopic/522
    FAILURE: http://jenkins.qa.ubuntu.com/job/unity8-utopic-amd64-ci/615/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/unity8-utopic-armhf-ci/615/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/unity8-utopic-i386-ci/615/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/3472/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/3521/rebuild

review: Needs Fixing (continuous-integration)

=== modified file 'plugins/Dash/ScopeStyle.qml'
--- plugins/Dash/ScopeStyle.qml	2014-07-08 08:30:46 +0000
+++ plugins/Dash/ScopeStyle.qml	2014-07-21 23:39:16 +0000
@@ -70,6 +70,12 @@
     /// Source of the logo image for the header
     readonly property url headerLogo: "logo" in d.headerStyle ? d.headerStyle["logo"] : ""
 
+    /// Background style for the header
+    readonly property url headerBackground: "background" in d.headerStyle ? d.headerStyle["background"] : ""
+
+    /// Foreground color for the header
+    readonly property color headerForeground: "foreground-color" in d.headerStyle ? d.headerStyle["foreground-color"] : foreground
+
     //! @cond
     property var d: QtObject {
         readonly property real foregroundLuminance: luminance(foreground)

=== added file 'qml/Components/Background.qml'
--- qml/Components/Background.qml	1970-01-01 00:00:00 +0000
+++ qml/Components/Background.qml	2014-07-21 23:39:16 +0000
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2014 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+
+Loader {
+    id: root
+    anchors.fill: parent
+
+    property url style
+    readonly property var parsedStyle: String(style)
+        .match(/^(color|gradient):\/\/\/(?:(#(?:[0-9a-f]{3,4}){1,2}|[a-z]{3,}))(?:\/(#(?:[0-9a-f]{3,4}){1,2}|[a-z]{3,}))?\/?$/i)
+
+    sourceComponent: {
+        if (style == "") return null;
+        if (!parsedStyle) return image;
+        if (parsedStyle[1] === "color") return solid
+        if (parsedStyle[1] === "gradient") return gradient
+    }
+
+    onLoaded: if (item.hasOwnProperty("parsedStyle")) {
+        item.parsedStyle = Qt.binding(function() { return root.parsedStyle } );
+    }
+
+    Component {
+        id: solid
+
+        Rectangle {
+            objectName: "solid"
+
+            property var parsedStyle
+
+            color: parsedStyle ? parsedStyle[2] : "#ffffff"
+        }
+    }
+
+    Component {
+        id: gradient
+
+        Rectangle {
+            objectName: "gradient"
+
+            property var parsedStyle
+
+            gradient: Gradient {
+                GradientStop { position: 0; color: parsedStyle ? parsedStyle[2] : "#000000" }
+                GradientStop { position: 1; color: parsedStyle ? parsedStyle[3] : "#000000" }
+            }
+        }
+    }
+
+    Component {
+        id: image
+
+        Image {
+            objectName: "image"
+
+            source: width > 0 && height > 0 && root.style
+
+            sourceSize.width: width
+            sourceSize.height: height
+        }
+    }
+}

=== modified file 'qml/Components/PageHeader.qml'
--- qml/Components/PageHeader.qml	2014-07-09 19:44:02 +0000
+++ qml/Components/PageHeader.qml	2014-07-21 23:39:16 +0000
@@ -127,6 +127,11 @@
         property bool showSearch: false
         property var popover: null
 
+        Background {
+            objectName: "headerBackground"
+            style: scopeStyle.headerBackground
+        }
+
         Behavior on contentY {
             UbuntuNumberAnimation {
                 id: openSearchAnimation
@@ -225,7 +230,7 @@
                 height: headerContainer.height
                 contentHeight: height
                 separatorSource: ""
-                textColor: root.scopeStyle ? root.scopeStyle.foreground : "grey"
+                textColor: root.scopeStyle ? root.scopeStyle.headerForeground : "grey"
                 property var styledItem: header
                 property string title: root.title
                 property var config: PageHeadConfiguration {

=== modified file 'tests/mocks/Unity/fake_scope.cpp'
--- tests/mocks/Unity/fake_scope.cpp	2014-07-21 23:39:16 +0000
+++ tests/mocks/Unity/fake_scope.cpp	2014-07-21 23:39:16 +0000
@@ -182,14 +182,16 @@
 
 QVariantMap Scope::customizations() const
 {
-    QVariantMap m;
+    QVariantMap m, h;
     if (m_id == "clickscope") {
+        h["foreground-color"] = "yellow";
         m["background-color"] = "red";
         m["foreground-color"] = "blue";
+        m["page-header"] = h;
     } else if (m_id == "MockScope5") {
-        QVariantMap pageHeader;
-        pageHeader["logo"] = QUrl("../../../tests/qmltests/Components/tst_PageHeader/logo-ubuntu-orange.svg");
-        m["page-header"] = pageHeader;
+        h["background"] = "gradient:///lightgrey/grey";
+        h["logo"] = QUrl("../../../tests/qmltests/Components/tst_PageHeader/logo-ubuntu-orange.svg");
+        m["page-header"] = h;
     }
     return m;
 }

=== modified file 'tests/plugins/Dash/tst_ScopeStyle.qml'
--- tests/plugins/Dash/tst_ScopeStyle.qml	2014-07-08 08:30:46 +0000
+++ tests/plugins/Dash/tst_ScopeStyle.qml	2014-07-21 23:39:16 +0000
@@ -36,8 +36,8 @@
         property var styles: [
             {},
             { "foreground-color": "red", "background-color": "black", "page-header": { "logo": "/foo/bar" } },
-            { "foreground-color": "green", "background-color": "white" },
-            { "foreground-color": "blue", "background-color": "darkgrey" },
+            { "foreground-color": "green", "background-color": "white", "page-header": { "foreground-color": "black" } },
+            { "foreground-color": "blue", "background-color": "darkgrey", "page-header": { "background": "gradient:///white/blue" } },
         ]
 
         function cleanup() {
@@ -147,5 +147,30 @@
             tool.style = testCase.styles[data.index];
             compare(tool.headerLogo, data.headerLogo, "Header logo was incorrect.");
         }
+
+        function test_headerForeground_data() {
+            return [
+                { tag: "default", index: 0, headerForeground: "grey" },
+                { tag: "black", index: 2, headerForeground: "black" },
+            ];
+        }
+
+        function test_headerForeground(data) {
+            tool.style = testCase.styles[data.index];
+            verify(Qt.colorEqual(tool.headerForeground, data.headerForeground),
+                   "Header foreground not equal: %1 != %2".arg(tool.headerForeground).arg(data.headerForeground));
+        }
+
+        function test_headerBackground_data() {
+            return [
+                { tag: "default", index: 0, headerBackground: "" },
+                { tag: "black", index: 3, headerBackground: "gradient:///white/blue" },
+            ];
+        }
+
+        function test_headerBackground(data) {
+            tool.style = testCase.styles[data.index];
+            compare(tool.headerBackground, data.headerBackground, "Header background was incorrect.");
+        }
     }
 }

=== modified file 'tests/qmltests/CMakeLists.txt'
--- tests/qmltests/CMakeLists.txt	2014-07-21 23:39:16 +0000
+++ tests/qmltests/CMakeLists.txt	2014-07-21 23:39:16 +0000
@@ -21,6 +21,7 @@
 
 add_qml_test(. Shell ENVIRONMENT "LD_LIBRARY_PATH=${CMAKE_BINARY_DIR}/tests/mocks/LightDM/single")
 add_qml_test(. ShellWithPin ENVIRONMENT "LD_LIBRARY_PATH=${CMAKE_BINARY_DIR}/tests/mocks/LightDM/single-pin")
+add_qml_test(Components Background)
 add_qml_test(Components Carousel)
 add_qml_test(Components DraggingArea)
 add_qml_test(Components EdgeDemoOverlay)

=== added file 'tests/qmltests/Components/tst_Background.qml'
--- tests/qmltests/Components/tst_Background.qml	1970-01-01 00:00:00 +0000
+++ tests/qmltests/Components/tst_Background.qml	2014-07-21 23:39:16 +0000
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2014 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.2
+import QtTest 1.0
+import Unity.Test 0.1
+
+import "../../../qml/Components"
+
+Rectangle {
+    width: units.gu(40)
+    height: units.gu(71)
+
+    Background {
+        id: background
+    }
+
+    UnityTestCase {
+        id: testCase
+        name: "Background"
+        when: windowShown
+
+        SignalSpy {
+            id: loadedSpy
+            target: background
+            signalName: "loaded"
+        }
+
+        function cleanup() {
+            background.style = "";
+            loadedSpy.clear();
+        }
+
+        function test_style_data() {
+            return [
+                { tag: "empty", style: "" },
+                { tag: "solid", style: "color:///black" },
+                { tag: "gradient", style: "gradient:///black/red" },
+                { tag: "image", style: "/some/path" },
+            ];
+        }
+
+        function test_style(data) {
+            background.style = data.style;
+            expectFail("empty", "Empty style should not create a background.");
+            loadedSpy.wait();
+            compare(background.item.objectName, data.tag, "Background should be %1".arg(data.style));
+        }
+
+        function test_solid() {
+            background.style = "color:///black";
+            loadedSpy.wait();
+
+            verify(Qt.colorEqual(background.item.color, "black"),
+                   "Solid color not equal: %1 != black".arg(background.item.color));
+        }
+
+        function test_gradient() {
+            background.style = "gradient:///black/red";
+            loadedSpy.wait();
+
+            var stops = background.item.gradient.stops;
+
+            verify(Qt.colorEqual(stops[0].color, "black"),
+                   "Top gradient color not equal: %1 != black".arg(stops[0].color));
+            verify(Qt.colorEqual(stops[1].color, "red"),
+                   "Bottom gradient color not equal: %1 != black".arg(stops[1].color));
+        }
+
+        function test_image() {
+            background.style = "/some/path";
+            loadedSpy.wait();
+
+            compare(background.item.source, Qt.resolvedUrl("/some/path"), "Image path is incorrect.");
+        }
+    }
+}

=== modified file 'tests/qmltests/Dash/tst_GenericScopeView.qml'
--- tests/qmltests/Dash/tst_GenericScopeView.qml	2014-07-21 23:39:16 +0000
+++ tests/qmltests/Dash/tst_GenericScopeView.qml	2014-07-21 23:39:16 +0000
@@ -54,6 +54,7 @@
             when: scopes.loaded && windowShown
 
             property Item previewListView: findChild(genericScopeView, "previewListView")
+            property Item header: findChild(genericScopeView, "scopePageHeader")
 
             function init() {
                 genericScopeView.scope = scopes.getScope(1)
@@ -279,13 +280,33 @@
                 closePreview();
             }
 
-            function test_header_logo() {
-                genericScopeView.scope = scopes.getScope(3);
+            function test_header_style_data() {
+                return [
+                    { tag: "Default", index: 0, foreground: "grey", background: "", logo: "" },
+                    { tag: "Foreground", index: 2, foreground: "yellow", background: "", logo: "" },
+                    { tag: "Logo+Background", index: 3, foreground: "grey", background: "gradient:///lightgrey/grey",
+                      logo: Qt.resolvedUrl("../Components/tst_PageHeader/logo-ubuntu-orange.svg") },
+                ];
+            }
+
+            function test_header_style(data) {
+                genericScopeView.scope = scopes.getScope(data.index);
+                waitForRendering(genericScopeView);
+                verify(header, "Could not find the header.");
+
+                var innerHeader = findChild(header, "innerPageHeader");
+                verify(innerHeader, "Could not find the inner header");
+                verify(Qt.colorEqual(innerHeader.textColor, data.foreground),
+                       "Foreground color not equal: %1 != %2".arg(innerHeader.textColor).arg(data.foreground));
+
+                var background = findChild(header, "headerBackground");
+                verify(background, "Could not find the background");
+                compare(background.style, data.background);
 
                 var image = findChild(genericScopeView, "titleImage");
-                verify(image, "Could not find the title image");
-                compare(image.source, Qt.resolvedUrl("../Components/tst_PageHeader/logo-ubuntu-orange.svg"), "Title image has the wrong source");
-
+                if (data.logo == "") expectFail(data.tag, "Title image should not exist.");
+                verify(image, "Could not find the title image.");
+                compare(image.source, data.logo, "Title image has the wrong source");
             }
         }
     }