on xenial help sign in
Add the processing indicator.
commit93392094394d00fe164ea53afaf46482f17697ea authorMichał Sawicz <michal.sawicz@canonical.com> dateTue 29 Jul 2014, 12:14 (12 years ago) parent84064e5
6 files changed+90−77
qml/Components/PageHeader.qml−1 qml/Dash/Dash.qml+68 qml/Dash/DashContent.qml+2 qml/Dash/DashDepartmentsList.qml−5 qml/Dash/GenericScopeView.qml+2−43 qml/Dash/PreviewListView.qml+18−28
qml/Components/PageHeader.qml−1
@@ -32,7 +32,6 @@ Item {
3232 property bool searchEntryEnabled: false
3333 property ListModel searchHistory: SearchHistoryModel
3434 property alias searchQuery: searchTextField.text
35− property bool searchInProgress: false
3635
3736 property alias bottomItem: bottomContainer.children
3837
qml/Dash/Dash.qml+68
@@ -126,4 +126,72 @@ Showable {
126126 }
127127 }
128128 }
129+
130+ Rectangle {
131+ id: indicator
132+ anchors {
133+ left: parent.left
134+ right: parent.right
135+ bottom: parent.bottom
136+ }
137+ clip: true
138+ height: units.dp(3)
139+ color: scopeStyle.backgroundLuminance > 0.7 ? "#50000000" : "#50ffffff"
140+ visible: opacity > 0
141+
142+ readonly property bool processing: dashContent.processing || scopeItem.processing
143+
144+ Behavior on opacity {
145+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
146+ }
147+
148+ onProcessingChanged: {
149+ if (processing) delay.start();
150+ else if (!persist.running) indicator.opacity = 0;
151+ }
152+
153+ Timer {
154+ id: delay
155+ interval: 200
156+ onTriggered: if (indicator.processing) {
157+ persist.restart();
158+ indicator.opacity = 1;
159+ }
160+ }
161+
162+
163+ Timer {
164+ id: persist
165+ interval: 2 * UbuntuAnimation.SleepyDuration - UbuntuAnimation.FastDuration
166+ onTriggered: if (!indicator.processing) indicator.opacity = 0
167+ }
168+
169+ Rectangle {
170+ id: orange
171+ anchors { top: parent.top; bottom: parent.bottom }
172+ width: parent.width / 4
173+ color: Theme.palette.selected.foreground
174+
175+ SequentialAnimation {
176+ running: indicator.visible
177+ loops: Animation.Infinite
178+ PropertyAnimation {
179+ from: -orange.width / 2
180+ to: indicator.width - orange.width / 2
181+ duration: UbuntuAnimation.SleepyDuration
182+ easing.type: Easing.InOutSine
183+ target: orange
184+ property: "x"
185+ }
186+ PropertyAnimation {
187+ to: -orange.width / 2
188+ duration: UbuntuAnimation.SleepyDuration
189+ easing.type: Easing.InOutSine
190+ target: orange
191+ property: "x"
192+ }
193+ }
194+ }
195+ }
196+
129197}
qml/Dash/DashContent.qml+2
@@ -26,6 +26,8 @@ Item {
2626 property var model: null
2727 property var scopes: null
2828 readonly property alias currentIndex: dashContentList.currentIndex
29+ readonly property bool processing: dashContentList.currentItem && dashContentList.currentItem.item
30+ && dashContentList.currentItem.item.processing || false
2931
3032 signal scopeLoaded(string scopeId)
3133 signal gotoScope(string scopeId)
qml/Dash/DashDepartmentsList.qml−5
@@ -35,11 +35,6 @@ Item {
3535 anchors.fill: parent
3636 }
3737
38− ActivityIndicator {
39− id: loadingIndicator
40− anchors.centerIn: parent
41− running: !(department && department.loaded)
42− }
4338 clip: true
4439
4540 Behavior on height {
qml/Dash/GenericScopeView.qml+2−43
@@ -38,6 +38,8 @@ FocusScope {
3838 style: scope ? scope.customizations : {}
3939 }
4040
41+ readonly property bool processing: scope ? scope.searchInProgress || previewListView.processing : false
42+
4143 signal backClicked()
4244
4345 onScopeChanged: {
@@ -396,7 +398,6 @@ FocusScope {
396398 title: scopeView.scope ? scopeView.scope.name : ""
397399 showBackButton: scopeView.hasBackAction
398400 searchEntryEnabled: true
399− searchInProgress: scopeView.scope ? scopeView.scope.searchInProgress : false
400401 scopeStyle: scopeView.scopeStyle
401402
402403 bottomItem: DashDepartments {
@@ -431,46 +432,4 @@ FocusScope {
431432 pageHeader.unfocus();
432433 }
433434 }
434−
435− Rectangle {
436− id: indicator
437− anchors {
438− left: parent.left
439− right: parent.right
440− bottom: parent.bottom
441− }
442− clip: true
443− height: units.dp(3)
444− color: scopeStyle.backgroundLuminance > 0.7 ? "#50000000" : "#50ffffff"
445− visible: opacity > 0
446− opacity: scope && scope.searchInProgress && !departments.showList ? 1.0 : 0.0
447− Behavior on opacity {
448− UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
449− }
450−
451− Rectangle {
452− id: orange
453− anchors { top: parent.top; bottom: parent.bottom }
454− width: parent.width / 4
455− color: Theme.palette.selected.foreground
456−
457− SequentialAnimation on x {
458− running: visible
459− loops: Animation.Infinite
460− PropertyAnimation {
461− from: -orange.width / 2
462− to: indicator.width - orange.width / 2
463− duration: UbuntuAnimation.SleepyDuration
464− easing.type: Easing.InOutSine
465− }
466− PropertyAnimation {
467− from: indicator.width - orange.width / 2
468− to: -orange.width / 2
469− duration: UbuntuAnimation.SleepyDuration
470− easing.type: Easing.InOutSine
471− }
472− }
473− }
474− }
475−
476435}
qml/Dash/PreviewListView.qml+18−28
@@ -32,6 +32,9 @@ Item {
3232 property alias currentItem: previewListView.currentItem
3333 property alias count: previewListView.count
3434
35+ readonly property bool processing: currentItem && (!currentItem.previewModel.loaded
36+ || currentItem.previewModel.processingAction)
37+
3538 PageHeader {
3639 id: header
3740 objectName: "pageHeader"
@@ -83,39 +86,26 @@ Item {
8386 }
8487 }
8588
86− delegate: Item {
87− objectName: "previewItem" + index
89+ delegate: Previews.Preview {
90+ id: preview
91+ objectName: "preview" + index
8892 height: previewListView.height
8993 width: previewListView.width
9094
91− readonly property bool ready: preview.previewModel.loaded
92−
93− Previews.Preview {
94− id: preview
95− objectName: "preview" + index
96− anchors.fill: parent
97−
98− isCurrent: parent.ListView.isCurrentItem
99−
100− previewModel: {
101− var previewStack = root.scope.preview(result);
102− return previewStack.getPreviewModel(0);
103− }
104− scopeStyle: root.scopeStyle
105− }
106−
107− MouseArea {
108− id: processingMouseArea
109− objectName: "processingMouseArea"
110− anchors.fill: parent
111− enabled: !preview.previewModel.loaded || preview.previewModel.processingAction
95+ isCurrent: parent.ListView.isCurrentItem
11296
113− ActivityIndicator {
114− anchors.centerIn: parent
115− visible: root.open && parent.enabled
116− running: visible
117− }
97+ previewModel: {
98+ var previewStack = root.scope.preview(result);
99+ return previewStack.getPreviewModel(0);
118100 }
101+ scopeStyle: root.scopeStyle
119102 }
120103 }
104+
105+ MouseArea {
106+ id: processingMouseArea
107+ objectName: "processingMouseArea"
108+ anchors.fill: parent
109+ enabled: root.processing
110+ }
121111}