git.iko.soy/unity8
on xenial help sign in
ListItem reworks to match the visuals from design
6dc4854Albert Astals Cid
qml/Dash/DashNavigation.qml−12
compare with xenial
unifiedsplit
@@ -24,7 +24,6 @@ Item {
24
24
25 // set by parent
25 // set by parent
26 property var scope: null
26 property var scope: null
27− property var scopeStyle: null
28 property real availableHeight
27 property real availableHeight
29
28
30 signal leafClicked()
29 signal leafClicked()
@@ -43,13 +42,6 @@ Item {
43 }
42 }
44 }
43 }
45
44
46− QtObject {
47− id: d
48− readonly property color foregroundColor: root.scopeStyle
49− ? root.scopeStyle.getTextColor(backgroundItem.luminance)
50− : theme.palette.normal.baseText
51− }
52−
53 Column {
45 Column {
54 id: headersColumn
46 id: headersColumn
55 anchors {
47 anchors {
@@ -86,7 +78,6 @@ Item {
86
78
87 backVisible: index != 0
79 backVisible: index != 0
88 text: headerText
80 text: headerText
89− foregroundColor: d.foregroundColor
90
81
91 onBackClicked: {
82 onBackClicked: {
92 scope.setNavigationState(parentNavigationId);
83 scope.setNavigationState(parentNavigationId);
@@ -143,9 +134,6 @@ Item {
143 objectName: "navigation" + index
134 objectName: "navigation" + index
144 visible: height > 0
135 visible: height > 0
145 width: navigationListView.width
136 width: navigationListView.width
146− itemsIndent: index != 0 ? units.gu(5) : 0
147− scopeStyle: root.scopeStyle
148− foregroundColor: d.foregroundColor
149 property real desiredHeight: {
137 property real desiredHeight: {
150 if (navigation && navigation.loaded && x == navigationListView.contentX)
138 if (navigation && navigation.loaded && x == navigationListView.contentX)
151 {
139 {
qml/Dash/DashNavigationHeader.qml+1−3
@@ -22,7 +22,6 @@ Row {
22 id: root
22 id: root
23
23
24 property alias backVisible: backImageItem.visible
24 property alias backVisible: backImageItem.visible
25− property alias foregroundColor: backImage.color
26 property alias textEnabled: textItem.enabled
25 property alias textEnabled: textItem.enabled
27 property alias text: textLabel.text
26 property alias text: textLabel.text
28
27
@@ -63,8 +62,7 @@ Row {
63 leftMargin: backImageItem.visible ? 0 : units.gu(2)
62 leftMargin: backImageItem.visible ? 0 : units.gu(2)
64 rightMargin: units.gu(2)
63 rightMargin: units.gu(2)
65 }
64 }
66− font.bold: true
65+ color: "#5D5D5D"
67− color: root.foregroundColor
68 wrapMode: Text.Wrap
66 wrapMode: Text.Wrap
69 maximumLineCount: 2
67 maximumLineCount: 2
70 elide: Text.ElideMiddle
68 elide: Text.ElideMiddle
qml/Dash/DashNavigationList.qml+30−19
@@ -16,16 +16,12 @@
16
16
17import QtQuick 2.4
17import QtQuick 2.4
18import Ubuntu.Components 1.3
18import Ubuntu.Components 1.3
19−import Ubuntu.Components.ListItems 1.3 as ListItem
20import "../Components"
19import "../Components"
21
20
22Item {
21Item {
23 id: root
22 id: root
24− property real itemsIndent: 0
25 property var navigation: null
23 property var navigation: null
26 property var currentNavigation: null
24 property var currentNavigation: null
27− property var scopeStyle: null
28− property color foregroundColor: theme.palette.normal.baseText
29 signal enterNavigation(var newNavigationId, string newNavigationLabel, bool hasChildren)
25 signal enterNavigation(var newNavigationId, string newNavigationLabel, bool hasChildren)
30
26
31 readonly property int itemHeight: units.gu(5)
27 readonly property int itemHeight: units.gu(5)
@@ -56,27 +52,42 @@ Item {
56 Repeater {
52 Repeater {
57 model: navigation && navigation.loaded ? navigation : null
53 model: navigation && navigation.loaded ? navigation : null
58 clip: true
54 clip: true
59− delegate: ListItem.Standard {
55+ delegate: ListItem {
60 objectName: root.objectName + "child" + index
56 objectName: root.objectName + "child" + index
61 height: root.itemHeight
57 height: root.itemHeight
62− showDivider: index != navigation.count - 1
58+ width: parent.width
63− selected: isActive
59+ anchors {
64− anchors.left: parent.left
60+ left: parent.left
61+ right: parent.right
65− anchors.leftMargin: itemsIndent
62+ leftMargin: units.gu(2)
66− anchors.right: parent.right
63+ rightMargin: units.gu(2)
64+ }
67
65
68 onClicked: root.enterNavigation(navigationId, allLabel != "" ? allLabel : label, hasChildren)
66 onClicked: root.enterNavigation(navigationId, allLabel != "" ? allLabel : label, hasChildren)
69
67
70− Label {
68+ Icon {
69+ id: leftIcon
71 anchors {
70 anchors {
72 verticalCenter: parent.verticalCenter
71 verticalCenter: parent.verticalCenter
73 left: parent.left
72 left: parent.left
74− leftMargin: itemsIndent > 0 ? 0 : units.gu(2)
73+ }
75− right: rightIcon.visible ? rightIcon.left : parent.right
74+ height: units.gu(2)
75+ width: height
76+ name: "tick"
77+ color: "#3EB34F"
78+ visible: isActive
79+ }
80+
81+ Label {
82+ anchors {
83+ verticalCenter: parent.verticalCenter
84+ left: leftIcon.right
85+ leftMargin: units.gu(1)
86+ right: rightIcon.left
76− rightMargin: rightIcon.visible ? units.gu(0.5) : units.gu(2)
87+ rightMargin: units.gu(2)
77 }
88 }
78 text: label
89 text: label
79− color: root.foregroundColor
90+ color: isActive ? "#333333" : "#888888"
80 wrapMode: Text.Wrap
91 wrapMode: Text.Wrap
81 maximumLineCount: 2
92 maximumLineCount: 2
82 elide: Text.ElideMiddle
93 elide: Text.ElideMiddle
@@ -87,14 +98,14 @@ Item {
87 anchors {
98 anchors {
88 verticalCenter: parent.verticalCenter
99 verticalCenter: parent.verticalCenter
89 right: parent.right
100 right: parent.right
90− rightMargin: units.gu(2)
91 }
101 }
92 height: units.gu(2)
102 height: units.gu(2)
93 width: height
103 width: height
94− name: hasChildren ? "go-next" : "tick"
104+ name: "go-next"
95− color: root.foregroundColor
96− visible: hasChildren || isActive
105+ visible: hasChildren
97 }
106 }
107+
108+ divider.visible: index != navigation.count - 1
98 }
109 }
99 }
110 }
100 }
111 }
qml/Dash/GenericScopeView.qml−1
@@ -665,7 +665,6 @@ FocusScope {
665
665
666 searchHistory: SearchHistoryModel
666 searchHistory: SearchHistoryModel
667 scope: scopeView.scope
667 scope: scopeView.scope
668− scopeStyle: scopeView.scopeStyle
669 windowHeight: scopeView.height
668 windowHeight: scopeView.height
670
669
671 onHistoryItemClicked: {
670 onHistoryItemClicked: {
qml/Dash/PageHeaderExtraPanel.qml+43−12
@@ -16,7 +16,7 @@
16
16
17import QtQuick 2.4
17import QtQuick 2.4
18import Ubuntu.Components 1.3
18import Ubuntu.Components 1.3
19−import Ubuntu.Components.ListItems 1.3
19+import Ubuntu.Components.ListItems 1.3 as ListItems
20import "Filters" as Filters
20import "Filters" as Filters
21
21
22Item {
22Item {
@@ -24,12 +24,11 @@ Item {
24
24
25 readonly property real searchesHeight: recentSearchesRepeater.count > 0 ? searchColumn.height + recentSearchesLabels.height + recentSearchesLabels.anchors.margins : 0
25 readonly property real searchesHeight: recentSearchesRepeater.count > 0 ? searchColumn.height + recentSearchesLabels.height + recentSearchesLabels.anchors.margins : 0
26
26
27− implicitHeight: searchesHeight + dashNavigation.implicitHeight + primaryFilter.height
27+ implicitHeight: searchesHeight + dashNavigation.implicitHeight + dashNavigation.anchors.topMargin + primaryFilter.height + primaryFilter.anchors.topMargin
28
28
29 // Set by parent
29 // Set by parent
30 property ListModel searchHistory
30 property ListModel searchHistory
31 property var scope: null
31 property var scope: null
32− property var scopeStyle: null
33 property real windowHeight
32 property real windowHeight
34
33
35 // Used by PageHeader
34 // Used by PageHeader
@@ -47,6 +46,10 @@ Item {
47 anchors.fill: parent
46 anchors.fill: parent
48 }
47 }
49
48
49+ ListItems.ThinDivider {
50+ anchors.top: parent.top
51+ }
52+
50 Label {
53 Label {
51 id: recentSearchesLabels
54 id: recentSearchesLabels
52 text: i18n.tr("Recent Searches")
55 text: i18n.tr("Recent Searches")
@@ -54,7 +57,7 @@ Item {
54 anchors {
57 anchors {
55 top: parent.top
58 top: parent.top
56 left: parent.left
59 left: parent.left
57− margins: units.gu(1)
60+ margins: units.gu(2)
58 }
61 }
59 }
62 }
60
63
@@ -65,7 +68,7 @@ Item {
65 anchors {
68 anchors {
66 top: parent.top
69 top: parent.top
67 right: parent.right
70 right: parent.right
68− margins: units.gu(1)
71+ margins: units.gu(2)
69 }
72 }
70
73
71 AbstractButton {
74 AbstractButton {
@@ -87,12 +90,39 @@ Item {
87 objectName: "recentSearchesRepeater"
90 objectName: "recentSearchesRepeater"
88 model: searchHistory
91 model: searchHistory
89
92
90− delegate: Standard {
93+ delegate: ListItem {
91− showDivider: index < recentSearchesRepeater.count - 1
94+ anchors {
92− height: units.gu(4)
95+ left: parent.left
93− text: query
96+ right: parent.right
94− iconName: "search"
97+ leftMargin: units.gu(2)
95− iconFrame: false
98+ rightMargin: units.gu(2)
99+ }
100+ height: units.gu(5)
101+
102+ Icon {
103+ id: searchIcon
104+ anchors {
105+ verticalCenter: parent.verticalCenter
106+ left: parent.left
107+ }
108+ height: units.gu(1.5)
109+ width: height
110+ name: "search"
111+ }
112+
113+ Label {
114+ anchors {
115+ verticalCenter: parent.verticalCenter
116+ left: searchIcon.right
117+ leftMargin: units.gu(1)
118+ right: parent.right
119+ }
120+ text: query
121+ color: "#888888"
122+ }
123+
124+ divider.visible: index != repeater.count - 1 || (scope && scope.hasNavigation) || primaryFilter.active
125+
96 onClicked: root.historyItemClicked(text)
126 onClicked: root.historyItemClicked(text)
97 }
127 }
98 }
128 }
@@ -103,10 +133,10 @@ Item {
103 scope: root.scope
133 scope: root.scope
104 anchors {
134 anchors {
105 top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
135 top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
136+ topMargin: implicitHeight && recentSearchesRepeater.count > 0 ? units.gu(2) : 0
106 left: parent.left
137 left: parent.left
107 right: parent.right
138 right: parent.right
108 }
139 }
109− scopeStyle: root.scopeStyle
110 availableHeight: windowHeight * 4 / 6 - searchesHeight
140 availableHeight: windowHeight * 4 / 6 - searchesHeight
111
141
112 onLeafClicked: root.dashNavigationLeafClicked();
142 onLeafClicked: root.dashNavigationLeafClicked();
@@ -120,6 +150,7 @@ Item {
120
150
121 anchors {
151 anchors {
122 top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
152 top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
153+ topMargin: active && recentSearchesRepeater.count > 0 ? units.gu(2) : 0
123 left: parent.left
154 left: parent.left
124 right: parent.right
155 right: parent.right
125 }
156 }