git.iko.soy/unity8
on xenial help sign in
Add a LazyImage component that shows an activity spinner for long-loading images and handles aspect ratio properly.
fb3e090Michał Sawicz
Components/LazyImage.qmlnew file+172
compare with xenial
unifiedsplit
@@ -0,0 +1,172 @@
1+/*
2+ * Copyright (C) 2013 Canonical, Ltd.
3+ *
4+ * Authors:
5+ * Michał Sawicz <michal.sawicz@canonical.com>
6+ *
7+ * This program is free software; you can redistribute it and/or modify
8+ * it under the terms of the GNU General Public License as published by
9+ * the Free Software Foundation; version 3.
10+ *
11+ * This program is distributed in the hope that it will be useful,
12+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
13+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+ * GNU General Public License for more details.
15+ *
16+ * You should have received a copy of the GNU General Public License
17+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
18+ */
19+
20+import QtQuick 2.0
21+import Ubuntu.Components 0.1
22+
23+Item {
24+ id: root
25+
26+ property url source
27+ // TODO convert into enums when available in QML
28+ property string scaleTo
29+
30+ property real initialWidth: units.gu(10)
31+ property real initialHeight: units.gu(10)
32+
33+ property alias sourceSize: image.sourceSize
34+ property alias fillMode: image.fillMode
35+ property alias asynchronous: image.asynchronous
36+ property alias cache: image.cache
37+ property alias horizontalAlignment: image.horizontalAlignment
38+ property alias verticalAlignment: image.verticalAlignment
39+
40+ state: "default"
41+
42+ onSourceChanged: {
43+ if (state === "ready") {
44+ state = "default";
45+ image.nextSource = source;
46+ } else {
47+ image.source = source;
48+ }
49+ }
50+
51+ UbuntuShape {
52+ id: placeholder
53+ objectName: "placeholder"
54+ color: "#22FFFFFF"
55+ anchors.fill: parent
56+ visible: opacity != 0
57+
58+ ActivityIndicator {
59+ id: activity
60+ anchors.centerIn: parent
61+ opacity: 0
62+ visible: opacity != 0
63+
64+ running: visible
65+ }
66+
67+ Image {
68+ id: errorImage
69+ objectName: "errorImage"
70+ anchors.centerIn: parent
71+ opacity: 0
72+ visible: opacity != 0
73+
74+ source: "graphics/close.png"
75+ sourceSize { width: units.gu(3); height: units.gu(3) }
76+ }
77+ }
78+
79+ UbuntuShape {
80+ id: shape
81+ objectName: "shape"
82+ anchors.fill: parent
83+ opacity: 0
84+ visible: opacity != 0
85+
86+ image: Image {
87+ id: image
88+ objectName: "image"
89+
90+ property url nextSource
91+
92+ width: root.scaleTo == "height" ? implicitWidth * root.height / implicitHeight : implicitWidth
93+ height: root.scaleTo == "width" ? implicitHeight * root.width / implicitWidth : implicitHeight
94+ fillMode: Image.PreserveAspectCrop
95+ asynchronous: true
96+ cache: false
97+ horizontalAlignment: Image.AlignHCenter
98+ verticalAlignment: Image.AlignVCenter
99+ sourceSize.width: root.scaleTo == "width" ? root.width : 0
100+ sourceSize.height: root.scaleTo == "height" ? root.height : 0
101+ }
102+ }
103+
104+ states: [
105+ State {
106+ name: "default"
107+ when: image.source == ""
108+ PropertyChanges { target: root; implicitWidth: root.initialWidth; implicitHeight: root.initialHeight }
109+ PropertyChanges { target: errorImage; opacity: 0 }
110+ },
111+ State {
112+ name: "loading"
113+ extend: "default"
114+ when: image.status === Image.Loading
115+ PropertyChanges { target: activity; opacity: 1 }
116+ },
117+ State {
118+ name: "ready"
119+ when: image.status === Image.Ready && image.source != ""
120+ PropertyChanges { target: root; implicitWidth: image.width; implicitHeight: image.height }
121+ PropertyChanges { target: shape; opacity: 1 }
122+ PropertyChanges { target: placeholder; opacity: 0 }
123+ },
124+ State {
125+ name: "error"
126+ extend: "default"
127+ when: image.status === Image.Error
128+ PropertyChanges { target: errorImage; opacity: 1.0 }
129+ }
130+ ]
131+
132+ transitions: [
133+ Transition {
134+ to: "ready"
135+ objectName: "readyTransition"
136+ SequentialAnimation {
137+ PropertyAction { target: shape; property: "visible" }
138+ ParallelAnimation {
139+ NumberAnimation { target: shape; property: "opacity"; easing.type: Easing.Linear }
140+ UbuntuNumberAnimation { target: root; properties: "implicitWidth,implicitHeight" }
141+ NumberAnimation {
142+ targets: [placeholder, activity, errorImage]; property: "opacity";
143+ easing.type: Easing.Linear; duration: UbuntuAnimation.SnapDuration
144+ }
145+ }
146+ }
147+ },
148+
149+ Transition {
150+ to: "*"
151+ objectName: "genericTransition"
152+ SequentialAnimation {
153+ ParallelAnimation {
154+ NumberAnimation { target: shape; property: "opacity"; easing.type: Easing.Linear }
155+ NumberAnimation {
156+ targets: [placeholder, activity, errorImage]; property: "opacity";
157+ easing.type: Easing.Linear; duration: UbuntuAnimation.SnapDuration
158+ }
159+ UbuntuNumberAnimation { target: root; properties: "implicitWidth,implicitHeight" }
160+ }
161+ PropertyAction { target: shape; property: "visible" }
162+ }
163+
164+ onRunningChanged: {
165+ if (!running && state === "default" && image.nextSource !== "") {
166+ image.source = image.nextSource;
167+ image.nextSource = "";
168+ }
169+ }
170+ }
171+ ]
172+}
Components/graphics/close@20.pngnew file

Binary file not shown.

tests/qmltests/CMakeLists.txt+1
@@ -31,6 +31,7 @@ add_manual_qml_test(Components DragHandle IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugi
31add_qml_test(Components DraggingArea)
31add_qml_test(Components DraggingArea)
32add_qml_test(Components EdgeDemoOverlay)
32add_qml_test(Components EdgeDemoOverlay)
33add_qml_test(Components FilterGrid IMPORT_PATHS ${qmltest_DEFAULT_IMPORT_PATHS} ${CMAKE_BINARY_DIR}/plugins)
33add_qml_test(Components FilterGrid IMPORT_PATHS ${qmltest_DEFAULT_IMPORT_PATHS} ${CMAKE_BINARY_DIR}/plugins)
34+add_qml_test(Components LazyImage)
34add_qml_test(Components ResponsiveFlowView)
35add_qml_test(Components ResponsiveFlowView)
35add_qml_test(Components ResponsiveGridView)
36add_qml_test(Components ResponsiveGridView)
36add_qml_test(Components Revealer)
37add_qml_test(Components Revealer)
tests/qmltests/Components/tst_LazyImage.qmlnew file+156
@@ -0,0 +1,156 @@
1+/*
2+ * Copyright 2013 Canonical Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.0
18+import QtTest 1.0
19+import "../../../Components"
20+import Ubuntu.Components 0.1
21+import Unity.Test 0.1 as UT
22+import "tst_LazyImage"
23+
24+Rectangle {
25+ width: units.gu(120)
26+ height: units.gu(70)
27+
28+ Rectangle {
29+ id: baseRect
30+ anchors {
31+ fill: parent
32+ rightMargin: 2 * parent.width / 3
33+ }
34+
35+ color: "grey"
36+
37+ Column {
38+ anchors { fill: parent; margins: units.gu(5) }
39+
40+ Label {
41+ height: units.gu(4)
42+ text: "Unbound"
43+ color: "white"
44+ verticalAlignment: Text.AlignBottom
45+ }
46+
47+ LazyImage {
48+ id: lazy1
49+ }
50+
51+ Label {
52+ height: units.gu(4)
53+ text: "Width-bound"
54+ color: "white"
55+ verticalAlignment: Text.AlignBottom
56+ }
57+
58+ LazyImage {
59+ id: lazy2
60+ width: units.gu(30)
61+ scaleTo: "width"
62+ }
63+
64+ Label {
65+ height: units.gu(4)
66+ text: "Height-bound"
67+ color: "white"
68+ verticalAlignment: Text.AlignBottom
69+ }
70+
71+ LazyImage {
72+ id: lazy3
73+ height: units.gu(10)
74+ scaleTo: "height"
75+ }
76+ }
77+ }
78+
79+ Rectangle {
80+ id: controlsRect
81+ anchors {
82+ fill: parent
83+ leftMargin: parent.width / 3
84+ }
85+
86+ color: "lightgrey"
87+
88+ Column {
89+ id: controls
90+ spacing: units.gu(1)
91+
92+ anchors { fill: parent; margins: units.gu(3) }
93+
94+ ImageControls { id: controls1; image: lazy1 }
95+ ImageControls { id: controls2; image: lazy2 }
96+ ImageControls { id: controls3; image: lazy3 }
97+ }
98+ }
99+
100+ UT.UnityTestCase {
101+ name: "Stage"
102+ when: windowShown
103+
104+ function cleanup() {
105+ controls1.blank();
106+ tryCompare(lazy1, "width", units.gu(10));
107+ controls2.blank();
108+ tryCompare(lazy2, "height", units.gu(10));
109+ controls3.blank();
110+ tryCompare(lazy3, "width", units.gu(10));
111+ }
112+
113+ function test_lazyimage_data() {
114+ return [
115+ {tag: "Unbound Blank", image: lazy1, func: controls1.blank, width: units.gu(10), height: units.gu(10), placeholder: true},
116+ {tag: "Unbound Wide", image: lazy1, func: controls1.wide, transition: "readyTransition", width: 160, height: 80},
117+ {tag: "Unbound Square", image: lazy1, func: controls1.square, transition: "readyTransition", width: 160, height: 160},
118+ {tag: "Unbound Portrait", image: lazy1, func: controls1.portrait, transition: "readyTransition", width: 80, height: 160},
119+ {tag: "Unbound Bad path", image: lazy1, func: controls1.badpath, transition: "genericTransition", width: units.gu(10), height: units.gu(10), placeholder: true, error: true},
120+ {tag: "Width-bound Blank", image: lazy2, func: controls2.blank, width: units.gu(30), height: units.gu(10), placeholder: true},
121+ {tag: "Width-bound Wide", image: lazy2, func: controls2.wide, transition: "readyTransition", width: units.gu(30), height: units.gu(15)},
122+ {tag: "Width-bound Square", image: lazy2, func: controls2.square, transition: "readyTransition", width: units.gu(30), height: units.gu(30)},
123+ {tag: "Width-bound Portrait", image: lazy2, func: controls2.portrait, transition: "readyTransition", width: units.gu(30), height: units.gu(60)},
124+ {tag: "Width-bound Bad path", image: lazy2, func: controls2.badpath, transition: "genericTransition", width: units.gu(30), height: units.gu(10), placeholder: true, error: true},
125+ {tag: "Height-bound Blank", image: lazy3, func: controls3.blank, width: units.gu(10), height: units.gu(10), placeholder: true},
126+ {tag: "Height-bound Wide", image: lazy3, func: controls3.wide, transition: "readyTransition", width: units.gu(20), height: units.gu(10)},
127+ {tag: "Height-bound Square", image: lazy3, func: controls3.square, transition: "readyTransition", width: units.gu(10), height: units.gu(10)},
128+ {tag: "Height-bound Portrait", image: lazy3, func: controls3.portrait, transition: "readyTransition", width: units.gu(5), height: units.gu(10)},
129+ {tag: "Height-bound Bad path", image: lazy3, func: controls3.badpath, transition: "genericTransition", width: units.gu(10), height: units.gu(10), placeholder: true, error: true},
130+ ]
131+ }
132+
133+ function test_lazyimage(data) {
134+ data.func();
135+
136+ if (data.transition) {
137+ // wait for the transition to complete
138+ var transition = findInvisibleChild(data.image, data.transition);
139+ tryCompare(transition, "running", true);
140+ tryCompare(transition, "running", false);
141+ }
142+
143+ // check the dimensions
144+ compare(data.image.width, data.width);
145+ compare(data.image.height, data.height);
146+
147+ // check the placeholder
148+ var placeholder = findChild(data.image, "placeholder");
149+ compare(placeholder.visible, data.placeholder ? true : false);
150+
151+ // check the error image
152+ var error = findChild(data.image, "errorImage");
153+ compare(error.visible, data.error ? true : false);
154+ }
155+ }
156+}
tests/qmltests/Components/tst_LazyImage/ImageControls.qmlnew file+67
@@ -0,0 +1,67 @@
1+/*
2+ * Copyright 2013 Canonical Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.0
18+import Ubuntu.Components 0.1
19+import "../../../../Components"
20+
21+Row {
22+ property LazyImage image
23+
24+ anchors { left: parent.left; right: parent.right }
25+ spacing: units.gu(1)
26+
27+ function blank() { blankButton.clicked() }
28+ function wide() { wideButton.clicked() }
29+ function square() { squareButton.clicked() }
30+ function portrait() { portraitButton.clicked() }
31+ function badpath() { badpathButton.clicked() }
32+
33+ Button {
34+ id: blankButton
35+ width: parent / 5
36+ text: "Blank"
37+ onClicked: image.source = ""
38+ }
39+
40+ Button {
41+ id: wideButton
42+ width: parent / 5
43+ text: "Wide"
44+ onClicked: image.source = "wide.png"
45+ }
46+
47+ Button {
48+ id: squareButton
49+ width: parent / 5
50+ text: "Square"
51+ onClicked: image.source = "square.png"
52+ }
53+
54+ Button {
55+ id: portraitButton
56+ width: parent / 5
57+ text: "Portrait"
58+ onClicked: image.source = "portrait.png"
59+ }
60+
61+ Button {
62+ id: badpathButton
63+ width: parent / 5
64+ text: "Bad path"
65+ onClicked: image.source = "bad/path"
66+ }
67+}
tests/qmltests/Components/tst_LazyImage/portrait.pngnew file

Binary file not shown.

tests/qmltests/Components/tst_LazyImage/square.pngnew file

Binary file not shown.

tests/qmltests/Components/tst_LazyImage/wide.pngnew file

Binary file not shown.