git.iko.soy/unity8
on xenial help sign in
Add navigation bar background and drop shadows
339ae52Michał Sawicz
qml/Dash/DashNavigation.qml+55−23
compare with xenial
unifiedsplit
@@ -16,6 +16,8 @@
16
16
17import QtQuick 2.2
17import QtQuick 2.2
18import Ubuntu.Components 1.1
18import Ubuntu.Components 1.1
19+import Dash 0.1
20+import "../Components"
19
21
20Item {
22Item {
21 id: root
23 id: root
@@ -47,29 +49,10 @@ Item {
47 visible: opacity != 0
49 visible: opacity != 0
48 }
50 }
49
51
50− Image {
52+ Background {
51− id: topGradient
53+ id: background
52− anchors.top: parent.top
54+ anchors.fill: parent
53− fillMode: Image.Stretch
55+ style: scopeStyle ? scopeStyle.navigationBackground : "color:///f5f5f5"
54− source: "graphics/dash_divider_top_lightgrad.png"
55− z: -1
56−
57− readonly property bool bothVisible: navigationButton.visible & altNavigationButton.visible
58− width: root.openList && bothVisible ? navigationButton.width : root.width
59− x: !bothVisible ? 0 :
60− navigationButton.showList ? altNavigationButton.x :
61− altNavigationButton.showList ? navigationButton.x : 0
62− }
63−
64− Image {
65− anchors {
66− bottom: parent.bottom
67− left: topGradient.left
68− right: topGradient.right
69− }
70− fillMode: Image.Stretch
71− source: "graphics/dash_divider_top_darkgrad.png"
72− z: -1
73 }
56 }
74
57
75 DashNavigationButton {
58 DashNavigationButton {
@@ -83,6 +66,19 @@ Item {
83 isAltNavigation: true
66 isAltNavigation: true
84 }
67 }
85
68
69+ Rectangle {
70+ visible: navigationButton.visible && altNavigationButton.visible
71+ anchors {
72+ top: parent.top
73+ bottom: parent.bottom
74+ right: navigationButton.left
75+ rightMargin: -units.dp(1)
76+ }
77+ width: units.dp(2)
78+ color: scopeStyle ? (background.luminance > scopeStyle.threshold ? scopeStyle.dark : scopeStyle.light) : Theme.palette.normal.baseText
79+ opacity: 0.3
80+ }
81+
86 DashNavigationButton {
82 DashNavigationButton {
87 id: navigationButton
83 id: navigationButton
88 objectName: "navigationButton"
84 objectName: "navigationButton"
@@ -94,4 +90,40 @@ Item {
94 listView.width: root.width
90 listView.width: root.width
95 listView.x: -x
91 listView.x: -x
96 }
92 }
93+
94+ Image {
95+ id: dropShadow
96+ fillMode: Image.Stretch
97+ source: "graphics/navigation_shadow.png"
98+
99+ readonly property bool bothVisible: navigationButton.visible & altNavigationButton.visible
100+
101+ state: "default"
102+
103+ states: [
104+ State {
105+ name: "default"
106+ when: !dropShadow.bothVisible || (!altNavigationButton.showList && !navigationButton.showList)
107+ PropertyChanges { target: dropShadow; width: root.width; x: 0; rotation: 0 }
108+ AnchorChanges { target: dropShadow; anchors.top: parent.bottom; anchors.bottom: undefined }
109+ },
110+ State {
111+ name: "open"
112+ PropertyChanges { target: dropShadow; width: navigationButton.width; rotation: 180 }
113+ AnchorChanges { target: dropShadow; anchors.bottom: parent.bottom; anchors.top: undefined }
114+ },
115+ State {
116+ name: "mainOpen"
117+ extend: "open"
118+ when: dropShadow.bothVisible && navigationButton.showList
119+ PropertyChanges { target: dropShadow; x: altNavigationButton.x }
120+ },
121+ State {
122+ name: "altOpen"
123+ extend: "open"
124+ when: dropShadow.bothVisible && altNavigationButton.showList
125+ PropertyChanges { target: dropShadow; x: navigationButton.x }
126+ }
127+ ]
128+ }
97}
129}
qml/Dash/DashNavigationButton.qml+11
@@ -156,6 +156,17 @@ AbstractButton {
156 }
156 }
157 }
157 }
158
158
159+ Image {
160+ anchors {
161+ top: navigationListView.bottom
162+ left: navigationListView.left
163+ right: navigationListView.right
164+ }
165+ fillMode: Image.Stretch
166+ source: "graphics/navigation_shadow.png"
167+ visible: root.showList
168+ }
169+
159 onScopeChanged: {
170 onScopeChanged: {
160 navigationModel.clear();
171 navigationModel.clear();
161 if (scope && scope[hasNavigation]) {
172 if (scope && scope[hasNavigation]) {
qml/Dash/DashNavigationList.qml+3−2
@@ -16,6 +16,7 @@
16
16
17import QtQuick 2.2
17import QtQuick 2.2
18import Ubuntu.Components 1.1
18import Ubuntu.Components 1.1
19+import "../Components"
19
20
20Item {
21Item {
21 id: root
22 id: root
@@ -30,8 +31,8 @@ Item {
30 readonly property color foregroundColor: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText
31 readonly property color foregroundColor: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText
31 implicitHeight: flickable.contentHeight
32 implicitHeight: flickable.contentHeight
32
33
33− Rectangle {
34+ Background {
34− color: !root.scopeStyle || Qt.colorEqual(root.scopeStyle.background, "transparent") ? "white" : root.scopeStyle.background
35+ style: scopeStyle ? scopeStyle.navigationBackground : "color:///#f5f5f5"
35 anchors.fill: parent
36 anchors.fill: parent
36 }
37 }
37
38
qml/Dash/graphics/navigation_shadow@18.pngnew file

Binary file not shown.