git.iko.soy/unity8
on xenial help sign in
Fix wide layout and adapt to coloured background
5c1bae9Michał Sawicz
qml/Dash/DashNavigation.qml+32−51
compare with xenial
unifiedsplit
@@ -38,14 +38,23 @@ Item {
38
38
39 height: visible ? units.gu(5) : 0
39 height: visible ? units.gu(5) : 0
40
40
41+ QtObject {
42+ id: d
43+ readonly property color foregroundColor: {
44+ if (scopeStyle) return background.luminance > scopeStyle.threshold ? scopeStyle.dark : ScopeStyle.light;
45+ else return background.luminance > 0.7 ? Theme.palette.normal.baseText : "white"
46+ }
47+ readonly property bool bothVisible: altNavigationButton.visible && navigationButton.visible
48+ readonly property real navigationWidth: root.width >= units.gu(60) ? units.gu(40) : root.width
49+ readonly property real buttonWidth: navigationWidth / (bothVisible ? 2 : 1)
50+ }
51+
41 Rectangle {
52 Rectangle {
42 id: blackRect
53 id: blackRect
43 color: "black"
54 color: "black"
44 opacity: openList && openList.currentItem && openList.currentItem.visible ? 0.3 : 0
55 opacity: openList && openList.currentItem && openList.currentItem.visible ? 0.3 : 0
45 Behavior on opacity { UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration } }
56 Behavior on opacity { UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration } }
46− // Doesn't matter if navigationButton or altNavigationButton list, they are both at the same y
47− y: navigationButton.listView.y
48− anchors.right: parent.right
57+ anchors { left: parent.left; right: parent.right }
49 visible: opacity != 0
58 visible: opacity != 0
50 }
59 }
51
60
@@ -59,71 +68,43 @@ Item {
59 id: altNavigationButton
68 id: altNavigationButton
60 objectName: "altNavigationButton"
69 objectName: "altNavigationButton"
61 height: root.height
70 height: root.height
62− width: navigationButton.visible ? root.width / 2 : root.width
71+ width: d.buttonWidth
63 scope: root.scope
72 scope: root.scope
64 scopeStyle: root.scopeStyle
73 scopeStyle: root.scopeStyle
74+ foregroundColor: d.foregroundColor
65− listView.width: root.width
75+ listView.width: d.navigationWidth
66 isAltNavigation: true
76 isAltNavigation: true
67− }
68−
69− Rectangle {
70− visible: navigationButton.visible && altNavigationButton.visible
77+ showDivider: navigationButton.visible || root.width > d.navigationWidth
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 }
78 }
81
79
82 DashNavigationButton {
80 DashNavigationButton {
83 id: navigationButton
81 id: navigationButton
84 objectName: "navigationButton"
82 objectName: "navigationButton"
85 height: root.height
83 height: root.height
86− width: altNavigationButton.visible ? root.width / 2 : root.width
84+ width: altNavigationButton.visible ? d.buttonWidth : d.navigationWidth
87− x: altNavigationButton.visible ? root.width / 2 : 0
85+ x: altNavigationButton.visible ? d.buttonWidth : 0
88 scope: root.scope
86 scope: root.scope
89 scopeStyle: root.scopeStyle
87 scopeStyle: root.scopeStyle
88+ foregroundColor: d.foregroundColor
90− listView.width: root.width
89+ listView.width: d.navigationWidth
91 listView.x: -x
90 listView.x: -x
91+ showDivider: root.width > d.navigationWidth
92 }
92 }
93
93
94 Image {
94 Image {
95− id: dropShadow
96 fillMode: Image.Stretch
95 fillMode: Image.Stretch
97 source: "graphics/navigation_shadow.png"
96 source: "graphics/navigation_shadow.png"
97+ anchors { top: parent.bottom; left: parent.left; right: parent.right }
98+ z: d.bothVisible ? -1 : 0
99+ }
98
100
101+ Image {
102+ fillMode: Image.Stretch
103+ source: "graphics/navigation_shadow.png"
99− readonly property bool bothVisible: navigationButton.visible & altNavigationButton.visible
104+ x: navigationButton.listView.height > 0 ? altNavigationButton.x : navigationButton.x
100−
105+ width: d.buttonWidth
101− state: "default"
106+ rotation: 180
102−
107+ anchors.bottom: parent.bottom
103− states: [
108+ visible: d.bothVisible && (navigationButton.listView.height > 0 || altNavigationButton.listView.height > 0)
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 }
109 }
129}
110}
qml/Dash/DashNavigationButton.qml+18−2
@@ -24,7 +24,9 @@ AbstractButton {
24 // Set by parent
24 // Set by parent
25 property var scope: null
25 property var scope: null
26 property var scopeStyle: null
26 property var scopeStyle: null
27+ property color foregroundColor: Theme.palette.normal.baseText
27 property bool isAltNavigation: false
28 property bool isAltNavigation: false
29+ property bool showDivider: false
28
30
29 // Used by parent
31 // Used by parent
30 readonly property var currentNavigation: scope && scope[hasNavigation] ? getNavigation(scope[currentNavigationId]) : null
32 readonly property var currentNavigation: scope && scope[hasNavigation] ? getNavigation(scope[currentNavigationId]) : null
@@ -56,7 +58,7 @@ AbstractButton {
56 anchors.margins: units.gu(2)
58 anchors.margins: units.gu(2)
57 verticalAlignment: Text.AlignVCenter
59 verticalAlignment: Text.AlignVCenter
58 text: root.currentNavigation ? root.currentNavigation.label : ""
60 text: root.currentNavigation ? root.currentNavigation.label : ""
59− color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText
61+ color: root.foregroundColor
60 }
62 }
61
63
62 Icon {
64 Icon {
@@ -66,7 +68,7 @@ AbstractButton {
66 name: showList ? "up" : "down"
68 name: showList ? "up" : "down"
67 height: units.gu(2)
69 height: units.gu(2)
68 width: height
70 width: height
69− color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText
71+ color: root.foregroundColor
70 }
72 }
71
73
72 // navigationListView is outside root
74 // navigationListView is outside root
@@ -103,6 +105,7 @@ AbstractButton {
103 visible: height != 0
105 visible: height != 0
104 width: navigationListView.width
106 width: navigationListView.width
105 scopeStyle: root.scopeStyle
107 scopeStyle: root.scopeStyle
108+ foregroundColor: root.foregroundColor
106 property real desiredHeight: {
109 property real desiredHeight: {
107 if (root.showList) {
110 if (root.showList) {
108 if (navigation && navigation.loaded && x == navigationListView.contentX)
111 if (navigation && navigation.loaded && x == navigationListView.contentX)
@@ -202,4 +205,17 @@ AbstractButton {
202 enabled: root.showList
205 enabled: root.showList
203 onClicked: root.showList = false
206 onClicked: root.showList = false
204 }
207 }
208+
209+ Rectangle {
210+ visible: root.showDivider
211+ anchors {
212+ top: parent.top
213+ bottom: parent.bottom
214+ left: parent.right
215+ leftMargin: -units.dp(1)
216+ }
217+ width: units.dp(2)
218+ color: root.foregroundColor
219+ opacity: 0.3
220+ }
205}
221}
qml/Dash/DashNavigationList.qml+1−1
@@ -23,12 +23,12 @@ Item {
23 property var navigation: null
23 property var navigation: null
24 property var currentNavigation: null
24 property var currentNavigation: null
25 property var scopeStyle: null
25 property var scopeStyle: null
26+ property color foregroundColor: Theme.palette.normal.baseText
26 signal enterNavigation(var newNavigationId, bool hasChildren)
27 signal enterNavigation(var newNavigationId, bool hasChildren)
27 signal goBackToParentClicked()
28 signal goBackToParentClicked()
28 signal allNavigationClicked()
29 signal allNavigationClicked()
29
30
30 readonly property int itemHeight: units.gu(5)
31 readonly property int itemHeight: units.gu(5)
31− readonly property color foregroundColor: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText
32 implicitHeight: flickable.contentHeight
32 implicitHeight: flickable.contentHeight
33
33
34 Background {
34 Background {
qml/Dash/GenericScopeView.qml+1−2
@@ -438,8 +438,7 @@ FocusScope {
438
438
439 bottomItem: DashNavigation {
439 bottomItem: DashNavigation {
440 scope: scopeView.scope
440 scope: scopeView.scope
441− width: parent.width <= units.gu(60) ? parent.width : units.gu(40)
442− anchors.right: parent.right
441+ anchors { left: parent.left; right: parent.right }
443 windowHeight: scopeView.height
442 windowHeight: scopeView.height
444 windowWidth: scopeView.width
443 windowWidth: scopeView.width
445 scopeStyle: scopeView.scopeStyle
444 scopeStyle: scopeView.scopeStyle