git.iko.soy/unity8
on xenial help sign in
adds "fit" mode to LazyImage.
commite77c275af2d0e284ff54fb942b65c4bdf3a2dbea authorMichael Zanetti <michael.zanetti@canonical.com> dateSat 5 Oct 2013, 01:08 (13 years ago) parent9cb0c29
2 files changed+68−24
compare with xenial
unifiedsplit
Components/LazyImage.qml+28−9 tests/qmltests/Components/tst_LazyImage.qml+40−15
Components/LazyImage.qml+28−9
@@ -52,7 +52,9 @@ Item {
5252 id: placeholder
5353 objectName: "placeholder"
5454 color: "#22FFFFFF"
55− anchors.fill: parent
55+ width: shape.width
56+ height: shape.height
57+ anchors.centerIn: shape
5658 visible: opacity != 0
5759
5860 ActivityIndicator {
@@ -79,7 +81,11 @@ Item {
7981 UbuntuShape {
8082 id: shape
8183 objectName: "shape"
82− anchors.fill: parent
84+ // w : h = i.w : i.h
85+ height: root.initialHeight
86+ width: root.initialWidth
87+
88+ anchors.centerIn: root.scaleTo == "fit" ? parent : undefined
8389 opacity: 0
8490 visible: opacity != 0
8591
@@ -88,16 +94,19 @@ Item {
8894 objectName: "image"
8995
9096 property url nextSource
97+ property string format: image.implicitWidth > image.implicitHeight ? "landscape" : "portrait"
9198
92− width: root.scaleTo == "height" ? implicitWidth * root.height / implicitHeight : implicitWidth
93− height: root.scaleTo == "width" ? implicitHeight * root.width / implicitWidth : implicitHeight
94− fillMode: Image.PreserveAspectCrop
99+ fillMode: Image.PreserveAspectFit
95100 asynchronous: true
96101 cache: false
97102 horizontalAlignment: Image.AlignHCenter
98103 verticalAlignment: Image.AlignVCenter
99− sourceSize.width: root.scaleTo == "width" ? root.width : 0
100− sourceSize.height: root.scaleTo == "height" ? root.height : 0
104+ sourceSize.width: root.scaleTo == "width" ? root.width
105+ : root.scaleTo == "fit" && root.width < root.height ? root.width
106+ : undefined
107+ sourceSize.height: root.scaleTo == "height" ? root.height
108+ : root.scale == "fit" && root.height < root.width ? root.height
109+ : undefined
101110 }
102111 }
103112
@@ -107,6 +116,7 @@ Item {
107116 when: image.source == ""
108117 PropertyChanges { target: root; implicitWidth: root.initialWidth; implicitHeight: root.initialHeight }
109118 PropertyChanges { target: errorImage; opacity: 0 }
119+ PropertyChanges { target: placeholder; width: root.initialWidth; height: root.initialHeight }
110120 },
111121 State {
112122 name: "loading"
@@ -117,9 +127,14 @@ Item {
117127 State {
118128 name: "ready"
119129 when: image.status === Image.Ready && image.source != ""
120− PropertyChanges { target: root; implicitWidth: image.width; implicitHeight: image.height }
121− PropertyChanges { target: shape; opacity: 1 }
130+ PropertyChanges { target: root; implicitWidth: shape.width; implicitHeight: shape.height }
122131 PropertyChanges { target: placeholder; opacity: 0 }
132+ PropertyChanges { target: shape; opacity: 1
133+ width: root.scaleTo == "width" || (root.scaleTo == "fit" && image.format == "landscape") ? root.width
134+ : root.scaleTo == "" ? image.implicitWidth : image.implicitWidth * height / image.implicitHeight
135+ height: root.scaleTo == "height" || (root.scaleTo == "fit" && image.format == "portrait") ? root.height
136+ : root.scaleTo == "" ? image.implicitHeight : image.implicitHeight * width / image.implicitWidth
137+ }
123138 },
124139 State {
125140 name: "error"
@@ -138,6 +153,8 @@ Item {
138153 ParallelAnimation {
139154 NumberAnimation { target: shape; property: "opacity"; easing.type: Easing.Linear }
140155 UbuntuNumberAnimation { target: root; properties: "implicitWidth,implicitHeight" }
156+ UbuntuNumberAnimation { target: shape; properties: "width,height" }
157+ UbuntuNumberAnimation { target: placeholder; properties: "width,height" }
141158 NumberAnimation {
142159 targets: [placeholder, activity, errorImage]; property: "opacity";
143160 easing.type: Easing.Linear; duration: UbuntuAnimation.SnapDuration
@@ -157,6 +174,8 @@ Item {
157174 easing.type: Easing.Linear; duration: UbuntuAnimation.SnapDuration
158175 }
159176 UbuntuNumberAnimation { target: root; properties: "implicitWidth,implicitHeight" }
177+ UbuntuNumberAnimation { target: shape; properties: "width,height" }
178+ UbuntuNumberAnimation { target: placeholder; properties: "width,height" }
160179 }
161180 PropertyAction { target: shape; property: "visible" }
162181 }
tests/qmltests/Components/tst_LazyImage.qml+40−15
@@ -73,6 +73,20 @@ Rectangle {
7373 height: units.gu(10)
7474 scaleTo: "height"
7575 }
76+
77+ Label {
78+ height: units.gu(4)
79+ text: "Fit"
80+ color: "white"
81+ verticalAlignment: Text.AlignBottom
82+ }
83+
84+ LazyImage {
85+ id: lazy4
86+ height: units.gu(10)
87+ width: units.gu(10)
88+ scaleTo: "fit"
89+ }
7690 }
7791 }
7892
@@ -94,6 +108,7 @@ Rectangle {
94108 ImageControls { id: controls1; image: lazy1 }
95109 ImageControls { id: controls2; image: lazy2 }
96110 ImageControls { id: controls3; image: lazy3 }
111+ ImageControls { id: controls4; image: lazy4 }
97112 }
98113 }
99114
@@ -112,21 +127,26 @@ Rectangle {
112127
113128 function test_lazyimage_data() {
114129 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+ {tag: "Unbound Blank", image: lazy1, func: controls1.blank, width: units.gu(10), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10), placeholder: true},
131+ {tag: "Unbound Wide", image: lazy1, func: controls1.wide, transition: "readyTransition", width: 160, height: 80, imageWidth: 160, imageHeight: 80},
132+ {tag: "Unbound Square", image: lazy1, func: controls1.square, transition: "readyTransition", width: 160, height: 160, imageWidth: 160, imageHeight: 160},
133+ {tag: "Unbound Portrait", image: lazy1, func: controls1.portrait, transition: "readyTransition", width: 80, height: 160, imageWidth: 80, imageHeight: 160},
134+ {tag: "Unbound Bad path", image: lazy1, func: controls1.badpath, transition: "genericTransition", width: units.gu(10), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10), placeholder: true, error: true},
135+ {tag: "Width-bound Blank", image: lazy2, func: controls2.blank, width: units.gu(30), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10), placeholder: true},
136+ {tag: "Width-bound Wide", image: lazy2, func: controls2.wide, transition: "readyTransition", width: units.gu(30), height: units.gu(15), imageWidth: units.gu(30), imageHeight: units.gu(15)},
137+ {tag: "Width-bound Square", image: lazy2, func: controls2.square, transition: "readyTransition", width: units.gu(30), height: units.gu(30), imageWidth: units.gu(30), imageHeight: units.gu(30)},
138+ {tag: "Width-bound Portrait", image: lazy2, func: controls2.portrait, transition: "readyTransition", width: units.gu(30), height: units.gu(60), imageWidth: units.gu(30), imageHeight: units.gu(60)},
139+ {tag: "Width-bound Bad path", image: lazy2, func: controls2.badpath, transition: "genericTransition", width: units.gu(30), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10), placeholder: true, error: true},
140+ {tag: "Height-bound Blank", image: lazy3, func: controls3.blank, width: units.gu(10), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10), placeholder: true},
141+ {tag: "Height-bound Wide", image: lazy3, func: controls3.wide, transition: "readyTransition", width: units.gu(20), height: units.gu(10), imageWidth: units.gu(20), imageHeight: units.gu(10)},
142+ {tag: "Height-bound Square", image: lazy3, func: controls3.square, transition: "readyTransition", width: units.gu(10), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10)},
143+ {tag: "Height-bound Portrait", image: lazy3, func: controls3.portrait, transition: "readyTransition", width: units.gu(5), height: units.gu(10), imageWidth: units.gu(5), imageHeight: units.gu(10)},
144+ {tag: "Height-bound Bad path", image: lazy3, func: controls3.badpath, transition: "genericTransition", width: units.gu(10), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10), placeholder: true, error: true},
145+ {tag: "Fit Blank", image: lazy4, func: controls4.blank, width: units.gu(10), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10), placeholder: true},
146+ {tag: "Fit Wide", image: lazy4, func: controls4.wide, transition: "readyTransition", width: units.gu(10), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(5)},
147+ {tag: "Fit Square", image: lazy4, func: controls4.square, transition: "readyTransition", width: units.gu(10), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10)},
148+ {tag: "Fit Portrait", image: lazy4, func: controls4.portrait, transition: "readyTransition", width: units.gu(10), height: units.gu(10), imageWidth: units.gu(5), imageHeight: units.gu(10)},
149+ {tag: "Fit Bad path", image: lazy4, func: controls4.badpath, transition: "genericTransition", width: units.gu(10), height: units.gu(10), imageWidth: units.gu(10), imageHeight: units.gu(10), placeholder: true, error: true},
130150 ]
131151 }
132152
@@ -144,6 +164,11 @@ Rectangle {
144164 compare(data.image.width, data.width);
145165 compare(data.image.height, data.height);
146166
167+ // check the shape dimensions
168+ var shape = findChild(data.image, "shape");
169+ compare(shape.width, data.imageWidth);
170+ compare(shape.height, data.imageHeight);
171+
147172 // check the placeholder
148173 var placeholder = findChild(data.image, "placeholder");
149174 compare(placeholder.visible, data.placeholder ? true : false);