@@ -16,6 +16,8 @@
1616
1717import QtQuick 2.2
1818import Ubuntu.Components 1.1
19+import Dash 0.1
20+import "../Components"
1921
2022Item {
2123 id: root
@@ -47,29 +49,10 @@ Item {
4749 visible: opacity != 0
4850 }
4951
50− Image {
51− id: topGradient
52− anchors.top: parent.top
53− fillMode: Image.Stretch
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
52+ Background {
53+ id: background
54+ anchors.fill: parent
55+ style: scopeStyle ? scopeStyle.navigationBackground : "color:///f5f5f5"
7356 }
7457
7558 DashNavigationButton {
@@ -83,6 +66,19 @@ Item {
8366 isAltNavigation: true
8467 }
8568
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+
8682 DashNavigationButton {
8783 id: navigationButton
8884 objectName: "navigationButton"
@@ -94,4 +90,40 @@ Item {
9490 listView.width: root.width
9591 listView.x: -x
9692 }
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+ }
97129}