on xenial help sign in
Support solids and gradients in navigation button highlights
7886066Michał Sawicz
qml/Components/Background.qml+4
@@ -15,6 +15,7 @@
15 */
15 */
16
16
17import QtQuick 2.0
17import QtQuick 2.0
18+import Ubuntu.Components 1.1
18import Utils 0.1 as Utils
19import Utils 0.1 as Utils
19
20
20Loader {
21Loader {
@@ -30,6 +31,9 @@ Loader {
30 else if (parsedStyle[1] === "gradient") return Utils.Style.luminance(parsedStyle[2], parsedStyle[3]);
31 else if (parsedStyle[1] === "gradient") return Utils.Style.luminance(parsedStyle[2], parsedStyle[3]);
31 }
32 }
32
33
34+ // FIXME this is only here for highlight purposes (see DashNavigation.qml, too)
35+ readonly property color topColor: parsedStyle ? parsedStyle[2] : UbuntuColors.lightGrey
36+
33 sourceComponent: {
37 sourceComponent: {
34 if (style == "") return null;
38 if (style == "") return null;
35 if (!parsedStyle) return image;
39 if (!parsedStyle) return image;
qml/Dash/DashNavigation.qml+6−3
@@ -34,13 +34,16 @@ Item {
34 return null;
34 return null;
35 }
35 }
36
36
37+ // FIXME this is only here for highlight purposes (see Background.qml, too)
38+ readonly property var background: backgroundItem
39+
37 visible: navigationButton.currentNavigation || altNavigationButton.currentNavigation
40 visible: navigationButton.currentNavigation || altNavigationButton.currentNavigation
38
41
39 height: visible ? units.gu(5) : 0
42 height: visible ? units.gu(5) : 0
40
43
41 QtObject {
44 QtObject {
42 id: d
45 id: d
43− readonly property color foregroundColor: scopeStyle.getTextColor(background.luminance)
46+ readonly property color foregroundColor: scopeStyle.getTextColor(backgroundItem.luminance)
44 readonly property bool bothVisible: altNavigationButton.visible && navigationButton.visible
47 readonly property bool bothVisible: altNavigationButton.visible && navigationButton.visible
45 readonly property real navigationWidth: root.width >= units.gu(60) ? units.gu(40) : root.width
48 readonly property real navigationWidth: root.width >= units.gu(60) ? units.gu(40) : root.width
46 readonly property real buttonWidth: navigationWidth / (bothVisible ? 2 : 1)
49 readonly property real buttonWidth: navigationWidth / (bothVisible ? 2 : 1)
@@ -56,7 +59,7 @@ Item {
56 }
59 }
57
60
58 Background {
61 Background {
59− id: background
62+ id: backgroundItem
60 anchors.fill: parent
63 anchors.fill: parent
61 style: scopeStyle ? scopeStyle.navigationBackground : "color:///f5f5f5"
64 style: scopeStyle ? scopeStyle.navigationBackground : "color:///f5f5f5"
62 }
65 }
@@ -98,7 +101,7 @@ Item {
98
101
99 Image {
102 Image {
100 fillMode: Image.Stretch
103 fillMode: Image.Stretch
101− source: background.luminance > 0.7 ? "graphics/navigation_shadow.png" : "graphics/navigation_shadow_light.png"
104+ source: backgroundItem.luminance > 0.7 ? "graphics/navigation_shadow.png" : "graphics/navigation_shadow_light.png"
102 x: navigationButton.listView.height > 0 ? altNavigationButton.x : navigationButton.x
105 x: navigationButton.listView.height > 0 ? altNavigationButton.x : navigationButton.x
103 width: d.buttonWidth
106 width: d.buttonWidth
104 rotation: 180
107 rotation: 180
qml/Dash/PageHeader.qml+8−4
@@ -379,13 +379,17 @@ Item {
379 height: units.dp(1)
379 height: units.dp(1)
380 opacity: 0.6
380 opacity: 0.6
381
381
382− // FIXME this should be a shader when bottomContainer.height != 0
382+ // FIXME this should be a shader when bottomItem exists
383 // to support image backgrounds
383 // to support image backgrounds
384 Rectangle {
384 Rectangle {
385 anchors.fill: parent
385 anchors.fill: parent
386− color: scopeStyle && bottomContainer.height === 0 ?
386+ color: if (bottomItem && bottomItem.background) {
387+ Qt.lighter(Qt.rgba(bottomItem.background.topColor.r,
388+ bottomItem.background.topColor.g,
389+ bottomItem.background.topColor.b, 1.0), 1.2);
390+ } else if (!bottomItem && scopeStyle) {
387− Qt.lighter(Qt.rgba(scopeStyle.background.r, scopeStyle.background.g, scopeStyle.background.b, 1.0), 1.2) :
391+ Qt.lighter(Qt.rgba(scopeStyle.background.r, scopeStyle.background.g, scopeStyle.background.b, 1.0), 1.2);
388− "#CCFFFFFF"
392+ } else "#CCFFFFFF"
389 }
393 }
390 }
394 }
391
395
tests/mocks/Unity/fake_scope.cpp+6
@@ -224,12 +224,18 @@ QVariantMap Scope::customizations() const
224 m["background-color"] = "red";
224 m["background-color"] = "red";
225 m["foreground-color"] = "blue";
225 m["foreground-color"] = "blue";
226 m["page-header"] = h;
226 m["page-header"] = h;
227+ } else if (m_id == "MockScope4") {
228+ h["navigation-background"] = QUrl("../../../tests/qmltests/Dash/artwork/background.png");
229+ m["page-header"] = h;
227 } else if (m_id == "MockScope5") {
230 } else if (m_id == "MockScope5") {
228 h["background"] = "gradient:///lightgrey/grey";
231 h["background"] = "gradient:///lightgrey/grey";
229 h["logo"] = QUrl("../../../tests/qmltests/Dash/tst_PageHeader/logo-ubuntu-orange.svg");
232 h["logo"] = QUrl("../../../tests/qmltests/Dash/tst_PageHeader/logo-ubuntu-orange.svg");
230 h["divider-color"] = "red";
233 h["divider-color"] = "red";
231 h["navigation-background"] = "color:///black";
234 h["navigation-background"] = "color:///black";
232 m["page-header"] = h;
235 m["page-header"] = h;
236+ } else if (m_id == "MockScope6") {
237+ h["navigation-background"] = "gradient:///blue/red";
238+ m["page-header"] = h;
233 }
239 }
234 return m;
240 return m;
235}
241}
tests/qmltests/Dash/artwork/background.pngnew file

Binary file not shown.