git.iko.soy/unity8
on xenial help sign in
Add LazyImage for greceful loading of remote images.
49900eeMichał Sawicz
Components/LazyImage.qmlnew file+142
compare with xenial
unifiedsplit
@@ -0,0 +1,142 @@
1+import QtQuick 2.0
2+import Ubuntu.Components 0.1
3+
4+Item {
5+ id: root
6+
7+ property url source
8+
9+ property real initialWidth: units.gu(5)
10+ property real initialHeight: units.gu(5)
11+
12+ property alias sourceSize: image.sourceSize
13+ property alias fillMode: image.fillMode
14+ property alias asynchronous: image.asynchronous
15+ property alias cache: image.cache
16+ property alias horizontalAlignment: image.horizontalAlignment
17+ property alias verticalAlignment: image.verticalAlignment
18+
19+ state: "default"
20+
21+ onSourceChanged: {
22+ if (state === "ready") {
23+ state = "default";
24+ image.nextSource = source;
25+ } else {
26+ image.source = source;
27+ }
28+ }
29+
30+ UbuntuShape {
31+ id: placeholder
32+ color: "#22000000"
33+ anchors.fill: parent
34+
35+ ActivityIndicator {
36+ id: activity
37+ objectName: "activity"
38+ anchors.centerIn: parent
39+ opacity: 0
40+ visible: opacity != 0
41+
42+ running: visible
43+ }
44+
45+ Image {
46+ id: errorImage
47+ objectName: "errorImage"
48+ anchors.centerIn: parent
49+ opacity: 0
50+ visible: opacity != 0
51+
52+ source: "graphics/close.png"
53+ sourceSize { width: units.gu(3); height: units.gu(3) }
54+ }
55+ }
56+
57+ UbuntuShape {
58+ id: shape
59+ objectName: "shape"
60+ anchors.fill: parent
61+ opacity: 0
62+ visible: opacity != 0
63+
64+ image: Image {
65+ id: image
66+
67+ property url nextSource
68+
69+ fillMode: Image.PreserveAspectFit
70+ asynchronous: true
71+ cache: false
72+ horizontalAlignment: Image.AlignHCenter
73+ verticalAlignment: Image.AlignVCenter
74+ }
75+ }
76+
77+ states: [
78+ State {
79+ name: "default"
80+ when: image.source == ""
81+ PropertyChanges { target: root; implicitWidth: root.initialWidth; implicitHeight: root.initialHeight }
82+ PropertyChanges { target: errorImage; opacity: 0 }
83+ },
84+ State {
85+ name: "loading"
86+ extend: "default"
87+ when: image.status === Image.Loading
88+ PropertyChanges { target: root; implicitWidth: root.initialWidth; implicitHeight: root.initialHeight }
89+ PropertyChanges { target: activity; opacity: 1 }
90+ },
91+ State {
92+ name: "ready"
93+ when: image.status === Image.Ready && image.source != ""
94+ PropertyChanges { target: root; implicitWidth: image.width; implicitHeight: image.height }
95+ PropertyChanges { target: shape; opacity: 1 }
96+ PropertyChanges { target: placeholder; visible: false }
97+ },
98+ State {
99+ name: "error"
100+ extend: "default"
101+ when: image.status === Image.Error
102+ PropertyChanges { target: errorImage; opacity: 1.0 }
103+ }
104+ ]
105+
106+ transitions: [
107+ Transition {
108+ to: "ready"
109+ SequentialAnimation {
110+ PropertyAction { target: shape; property: "visible" }
111+ ParallelAnimation {
112+ NumberAnimation { target: shape; property: "opacity"; easing.type: Easing.Linear }
113+ UbuntuNumberAnimation { target: root; properties: "implicitWidth,implicitHeight" }
114+ }
115+ PropertyAction { target: placeholder; property: "visible" }
116+ }
117+ },
118+
119+ Transition {
120+ to: "*"
121+ SequentialAnimation {
122+ PropertyAction { target: placeholder; property: "visible" }
123+ ParallelAnimation {
124+ NumberAnimation { target: shape; property: "opacity"; easing.type: Easing.Linear }
125+ NumberAnimation {
126+ targets: [activity, errorImage]; property: "opacity";
127+ easing.type: Easing.Linear; duration: UbuntuAnimation.SnapDuration
128+ }
129+ UbuntuNumberAnimation { target: root; properties: "implicitWidth,implicitHeight" }
130+ }
131+ PropertyAction { target: shape; property: "visible" }
132+ }
133+
134+ onRunningChanged: {
135+ if (!running && state === "default" && image.nextSource !== "") {
136+ image.source = image.nextSource;
137+ image.nextSource = "";
138+ }
139+ }
140+ }
141+ ]
142+}
Components/graphics/close@20.pngnew file

Binary file not shown.