on xenial help sign in
Switched indicator display to use sequential animations and states/transitions.
acc5b0cNicolas d'Offay
Components/PageHeader.qml+29−8
@@ -169,11 +169,6 @@ Item {
169 left: parent.left
169 left: parent.left
170 leftMargin: units.gu(0.5)
170 leftMargin: units.gu(0.5)
171 }
171 }
172−
173− running: scope.searchInProgress && searchField.text !== ""
174− opacity: running ? 1 : 0
175−
176− Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration; easing.type: Easing.Linear } }
177 }
172 }
178
173
179 Image {
174 Image {
@@ -187,9 +182,6 @@ Item {
187 width: units.gu(3)
182 width: units.gu(3)
188 height: units.gu(3)
183 height: units.gu(3)
189 visible: opacity > 0
184 visible: opacity > 0
190− opacity: searchIndicator.running ? 0 : 1
191−
192− Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration; easing.type: Easing.Linear } }
193 }
185 }
194
186
195 Item {
187 Item {
@@ -208,6 +200,35 @@ Item {
208 onActiveFocusChanged: {
200 onActiveFocusChanged: {
209 if (!activeFocus) searchContainer.closePopover()
201 if (!activeFocus) searchContainer.closePopover()
210 }
202 }
203+
204+ states: [
205+ State {
206+ name: "searching"
207+ when: scope.searchInProgress && searchField.text !== ""
208+ PropertyChanges { target: searchIndicator; running: true; opacity: 1 }
209+ PropertyChanges { target: primaryImage; opacity: 0 }
210+ }, State {
211+ name: "idle"
212+ PropertyChanges { target: searchIndicator; running: true; opacity: 1 }
213+ PropertyChanges { target: primaryImage; opacity: 0 }
214+ }
215+ ]
216+
217+ transitions: [
218+ Transition {
219+ to: "searching"
220+ SequentialAnimation {
221+ NumberAnimation { targets: primaryImage; property: opacity; duration: UbuntuAnimation.SlowDuration; easing.type: Easing.Linear }
222+ NumberAnimation { targets: searchIndicator; property: opacity; duration: UbuntuAnimation.SlowDuration; easing.type: Easing.Linear }
223+ }
224+ }, Transition {
225+ to: "idle"
226+ SequentialAnimation {
227+ NumberAnimation { targets: searchIndicator; property: opacity; duration: UbuntuAnimation.SlowDuration; easing.type: Easing.Linear }
228+ NumberAnimation { targets: primaryImage; property: opacity; duration: UbuntuAnimation.SlowDuration; easing.type: Easing.Linear }
229+ }
230+ }
231+ ]
211 }
232 }
212
233
213 states: [
234 states: [