git.iko.soy/unity8
on xenial help sign in
Match design visuals for the new dash navigation/page header popup
5fda13fAlbert Astals Cid
plugins/Dash/ScopeStyle.qml+1−1
compare with xenial
unifiedsplit
@@ -58,7 +58,7 @@ QtObject {
58 readonly property url headerLogo: "logo" in d.headerStyle ? d.headerStyle["logo"] : ""
58 readonly property url headerLogo: "logo" in d.headerStyle ? d.headerStyle["logo"] : ""
59
59
60 /// Background style for the header
60 /// Background style for the header
61− readonly property url headerBackground: "background" in d.headerStyle ? d.headerStyle["background"] : "color:///#f5f5f5"
61+ readonly property url headerBackground: "background" in d.headerStyle ? d.headerStyle["background"] : "color:///#ffffff"
62
62
63 /// Foreground color for the header
63 /// Foreground color for the header
64 readonly property color headerForeground: "foreground-color" in d.headerStyle ? d.headerStyle["foreground-color"] : foreground
64 readonly property color headerForeground: "foreground-color" in d.headerStyle ? d.headerStyle["foreground-color"] : foreground
qml/Dash/DashNavigation.qml+2−20
@@ -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 {
@@ -82,11 +74,10 @@ Item {
82 delegate: DashNavigationHeader {
74 delegate: DashNavigationHeader {
83 objectName: "dashNavigationHeader" + index
75 objectName: "dashNavigationHeader" + index
84 height: index == 0 && headersModel.count > 1 ? 0 : units.gu(5)
76 height: index == 0 && headersModel.count > 1 ? 0 : units.gu(5)
85− width: parent.width
77+ width: headersColumn.width
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);
@@ -124,12 +115,7 @@ Item {
124 left: parent.left
115 left: parent.left
125 right: parent.right
116 right: parent.right
126 }
117 }
127− property int maxHeight: -1
118+ readonly property int maxHeight: root.availableHeight - navigationListView.y
128− Component.onCompleted: updateMaxHeight();
129− function updateMaxHeight()
130− {
131− maxHeight = root.availableHeight - mapToItem(root, 0, 0).y;
132− }
133 property int prevHeight: maxHeight
119 property int prevHeight: maxHeight
134 height: currentItem ? currentItem.height : maxHeight
120 height: currentItem ? currentItem.height : maxHeight
135
121
@@ -143,13 +129,9 @@ Item {
143 objectName: "navigation" + index
129 objectName: "navigation" + index
144 visible: height > 0
130 visible: height > 0
145 width: navigationListView.width
131 width: navigationListView.width
146− itemsIndent: index != 0 ? units.gu(5) : 0
147− scopeStyle: root.scopeStyle
148− foregroundColor: d.foregroundColor
149 property real desiredHeight: {
132 property real desiredHeight: {
150 if (navigation && navigation.loaded && x == navigationListView.contentX)
133 if (navigation && navigation.loaded && x == navigationListView.contentX)
151 {
134 {
152− navigationListView.updateMaxHeight();
153 return Math.min(implicitHeight, navigationListView.maxHeight);
135 return Math.min(implicitHeight, navigationListView.maxHeight);
154 } else {
136 } else {
155 return navigationListView.prevHeight;
137 return navigationListView.prevHeight;
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: column.width
63− selected: isActive
59+ anchors {
64− anchors.left: parent.left
60+ left: column.left
61+ right: column.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/DashPageHeader.qml+70−48
@@ -202,51 +202,43 @@ Item {
202 left: parent.left
202 left: parent.left
203 bottom: parent.bottom
203 bottom: parent.bottom
204 bottomMargin: units.gu(1)
204 bottomMargin: units.gu(1)
205− right: cancelLabel.left
205+ right: settingsButton.left
206− rightMargin: units.gu(1)
206+ rightMargin: settingsButton.visible ? 0 : units.gu(2)
207 }
207 }
208
208
209− readonly property bool clearIsSettings: !searchTextField.focus && root.scopeHasFilters
210−
211− primaryItem: Label {
209+ primaryItem: Rectangle {
210+ color: "#F5F4F5"
211+ width: root.navigationTag != "" ? tagLabel.width + units.gu(2) : 0
212+ height: root.navigationTag != "" ? tagLabel.height + units.gu(1) : 0
213+ radius: units.gu(0.5)
214+ Label {
215+ id: tagLabel
212− text: root.navigationTag
216+ text: root.navigationTag
217+ anchors.centerIn: parent
218+ color: "#333333"
219+ }
213 }
220 }
214
221
215− secondaryItem: Row {
222+ secondaryItem: AbstractButton {
223+ id: clearButton
216 height: searchTextField.height
224 height: searchTextField.height
217−
218− AbstractButton {
219− id: clearOrSettingsButton
220− height: parent.height
221− width: height
225+ width: height
222− enabled: searchTextField.text.length > 0 || root.navigationTag != ""
226+ enabled: searchTextField.text.length > 0 || root.navigationTag != ""
223−
227+
224− Image {
228+ Image {
225− objectName: "clearIcon"
229+ objectName: "clearIcon"
226− anchors.fill: parent
230+ anchors.fill: parent
227− anchors.margins: units.gu(.75)
231+ anchors.margins: units.gu(1)
228− source: searchTextField.clearIsSettings ? "image://theme/settings" : "image://theme/clear"
232+ source: "image://theme/clear"
229− opacity: parent.enabled
233+ opacity: parent.enabled
230− visible: opacity > 0
234+ visible: opacity > 0
231− Behavior on opacity {
235+ Behavior on opacity {
232− UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
236+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
233− }
234− }
235−
236− onClicked: {
237− if (searchTextField.clearIsSettings) {
238− root.showFiltersPopup(clearOrSettingsButton);
239− } else {
240− root.clearSearch(true);
241− }
242 }
237 }
243 }
238 }
244
239
245− Label {
240+ onClicked: {
246− visible: searchTextField.clearIsSettings && root.activeFiltersCount > 0
241+ root.clearSearch(true);
247− height: parent.height
248− text: root.activeFiltersCount
249− verticalAlignment: Text.AlignVCenter
250 }
242 }
251 }
243 }
252
244
@@ -264,22 +256,52 @@ Item {
264 }
256 }
265 }
257 }
266
258
267− Label {
259+ AbstractButton {
268− id: cancelLabel
260+ id: settingsButton
269− text: i18n.tr("Cancel")
261+
270− color: header.panelForegroundColor
262+ width: root.scopeHasFilters ? height : 0
271− verticalAlignment: Text.AlignVCenter
263+ visible: width > 0
272 anchors {
264 anchors {
273 top: parent.top
265 top: parent.top
274− right: parent.right
266+ right: cancelButton.left
275 bottom: parent.bottom
267 bottom: parent.bottom
276− margins: units.gu(1)
268+ rightMargin: units.gu(-1)
277 }
269 }
278− AbstractButton {
270+
271+ Icon {
279 anchors.fill: parent
272 anchors.fill: parent
273+ anchors.margins: units.gu(2)
274+ name: "filters"
275+ color: root.activeFiltersCount > 0 ? UbuntuColors.orange : Qt.rgba(0.0, 0.0, 0.0, 0.0)
276+ }
277+
278+ onClicked: {
279+ root.showFiltersPopup(settingsButton);
280+ }
281+ }
282+
283+ AbstractButton {
284+ id: cancelButton
285+ width: cancelLabel.width + cancelLabel.anchors.rightMargin + cancelLabel.anchors.leftMargin
286+ anchors {
287+ top: parent.top
288+ right: parent.right
289+ bottom: parent.bottom
290+ }
280− onClicked: {
291+ onClicked: {
281− root.clearSearch(false);
292+ root.clearSearch(false);
282− headerContainer.showSearch = false;
293+ headerContainer.showSearch = false;
294+ }
295+ Label {
296+ id: cancelLabel
297+ text: i18n.tr("Cancel")
298+ color: header.panelForegroundColor
299+ verticalAlignment: Text.AlignVCenter
300+ anchors {
301+ verticalCenter: parent.verticalCenter
302+ right: parent.right
303+ rightMargin: units.gu(2)
304+ leftMargin: units.gu(1)
283 }
305 }
284 }
306 }
285 }
307 }
qml/Dash/Filters/FilterOptionSelector.qml+1
@@ -34,6 +34,7 @@ FilterWidget {
34
34
35 onClicked: {
35 onClicked: {
36 expanded = !expanded;
36 expanded = !expanded;
37+ forceActiveFocus();
37 }
38 }
38
39
39 Item {
40 Item {
qml/Dash/FiltersPopover.qml+1
@@ -37,6 +37,7 @@ Popover {
37 var parentAndKeyboard = root.parent.height - posToRootParent - (Qt.inputMethod.visible ? Qt.inputMethod.keyboardRectangle.height + units.gu(3) : 0)
37 var parentAndKeyboard = root.parent.height - posToRootParent - (Qt.inputMethod.visible ? Qt.inputMethod.keyboardRectangle.height + units.gu(3) : 0)
38 return Math.min(parentAndKeyboard, Math.min(threeQuartersParent, column.height));
38 return Math.min(parentAndKeyboard, Math.min(threeQuartersParent, column.height));
39 }
39 }
40+ clip: true
40 contentHeight: column.height
41 contentHeight: column.height
41 contentWidth: width
42 contentWidth: width
42
43
qml/Dash/GenericScopeView.qml+1−1
@@ -651,6 +651,7 @@ FocusScope {
651 }
651 }
652 }
652 }
653 onShowFiltersPopup: { // item
653 onShowFiltersPopup: { // item
654+ extraPanel.visible = false;
654 scopeView.filtersPopover = PopupUtils.open(Qt.resolvedUrl("FiltersPopover.qml"), item, { "contentWidth": scopeView.width - units.gu(2) } );
655 scopeView.filtersPopover = PopupUtils.open(Qt.resolvedUrl("FiltersPopover.qml"), item, { "contentWidth": scopeView.width - units.gu(2) } );
655 }
656 }
656 }
657 }
@@ -668,7 +669,6 @@ FocusScope {
668
669
669 searchHistory: SearchHistoryModel
670 searchHistory: SearchHistoryModel
670 scope: scopeView.scope
671 scope: scopeView.scope
671− scopeStyle: scopeView.scopeStyle
672 windowHeight: scopeView.height
672 windowHeight: scopeView.height
673
673
674 onHistoryItemClicked: {
674 onHistoryItemClicked: {
qml/Dash/PageHeaderExtraPanel.qml+47−14
@@ -16,20 +16,19 @@
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 {
23 id: root
23 id: root
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.topMargin : 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,8 @@ 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)
61+ topMargin: units.gu(3)
58 }
62 }
59 }
63 }
60
64
@@ -65,7 +69,8 @@ Item {
65 anchors {
69 anchors {
66 top: parent.top
70 top: parent.top
67 right: parent.right
71 right: parent.right
68− margins: units.gu(1)
72+ margins: units.gu(2)
73+ topMargin: units.gu(3)
69 }
74 }
70
75
71 AbstractButton {
76 AbstractButton {
@@ -87,13 +92,40 @@ Item {
87 objectName: "recentSearchesRepeater"
92 objectName: "recentSearchesRepeater"
88 model: searchHistory
93 model: searchHistory
89
94
90− delegate: Standard {
95+ delegate: ListItem {
91− showDivider: index < recentSearchesRepeater.count - 1
96+ anchors {
92− height: units.gu(4)
97+ left: parent.left
93− text: query
98+ right: parent.right
94− iconName: "search"
99+ leftMargin: units.gu(2)
95− iconFrame: false
100+ rightMargin: units.gu(2)
101+ }
102+ height: units.gu(5)
103+
104+ Icon {
105+ id: searchIcon
106+ anchors {
107+ verticalCenter: parent.verticalCenter
108+ left: parent.left
109+ }
110+ height: units.gu(1.5)
111+ width: height
112+ name: "search"
113+ }
114+
115+ Label {
116+ anchors {
117+ verticalCenter: parent.verticalCenter
118+ left: searchIcon.right
119+ leftMargin: units.gu(1)
120+ right: parent.right
121+ }
122+ text: query
123+ color: "#888888"
124+ }
125+
126+ divider.visible: index != repeater.count - 1 || (scope && scope.hasNavigation) || primaryFilter.active
127+
96− onClicked: root.historyItemClicked(text)
128+ onClicked: root.historyItemClicked(query)
97 }
129 }
98 }
130 }
99 }
131 }
@@ -103,10 +135,10 @@ Item {
103 scope: root.scope
135 scope: root.scope
104 anchors {
136 anchors {
105 top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
137 top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
138+ topMargin: implicitHeight && recentSearchesRepeater.count > 0 ? units.gu(2) : 0
106 left: parent.left
139 left: parent.left
107 right: parent.right
140 right: parent.right
108 }
141 }
109− scopeStyle: root.scopeStyle
110 availableHeight: windowHeight * 4 / 6 - searchesHeight
142 availableHeight: windowHeight * 4 / 6 - searchesHeight
111
143
112 onLeafClicked: root.dashNavigationLeafClicked();
144 onLeafClicked: root.dashNavigationLeafClicked();
@@ -120,6 +152,7 @@ Item {
120
152
121 anchors {
153 anchors {
122 top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
154 top: recentSearchesRepeater.count > 0 ? searchColumn.bottom : parent.top
155+ topMargin: active && recentSearchesRepeater.count > 0 ? units.gu(2) : 0
123 left: parent.left
156 left: parent.left
124 right: parent.right
157 right: parent.right
125 }
158 }