git.iko.soy/unity8
on xenial help sign in
Add scaleTo: "fit" mode support to LazyImage

Approved by Mirco Müller.

commit0bc56631cd99a2ba5e00ac6fdb17e0b11c83f8d2 authorMichael Zanetti <michael.zanetti@canonical.com> dateThu 10 Oct 2013, 14:27 (13 years ago) parent2eee0c14362316
2 files changed+62−24
compare with xenial
unifiedsplit
Components/LazyImage.qml+22−9 tests/qmltests/Components/tst_LazyImage.qml+40−15
Components/LazyImage.qml+22−9
@@ -52,7 +52,7 @@ Item {
5252 id: placeholder
5353 objectName: "placeholder"
5454 color: "#22FFFFFF"
55− anchors.fill: parent
55+ anchors.fill: shape
5656 visible: opacity != 0
5757
5858 ActivityIndicator {
@@ -79,7 +79,10 @@ Item {
7979 UbuntuShape {
8080 id: shape
8181 objectName: "shape"
82− anchors.fill: parent
82+ height: root.initialHeight
83+ width: root.initialWidth
84+ anchors.centerIn: root.scaleTo == "fit" ? parent : undefined
85+
8386 opacity: 0
8487 visible: opacity != 0
8588
@@ -88,16 +91,19 @@ Item {
8891 objectName: "image"
8992
9093 property url nextSource
94+ property string format: image.implicitWidth > image.implicitHeight ? "landscape" : "portrait"
9195
92− width: root.scaleTo == "height" ? implicitWidth * root.height / implicitHeight : implicitWidth
93− height: root.scaleTo == "width" ? implicitHeight * root.width / implicitWidth : implicitHeight
94− fillMode: Image.PreserveAspectCrop
96+ fillMode: Image.PreserveAspectFit
9597 asynchronous: true
9698 cache: false
9799 horizontalAlignment: Image.AlignHCenter
98100 verticalAlignment: Image.AlignVCenter
99− sourceSize.width: root.scaleTo == "width" ? root.width : 0
100− sourceSize.height: root.scaleTo == "height" ? root.height : 0
101+ sourceSize.width: root.scaleTo == "width" ? root.width
102+ : root.scaleTo == "fit" && root.width < root.height ? root.width
103+ : undefined
104+ sourceSize.height: root.scaleTo == "height" ? root.height
105+ : root.scale == "fit" && root.height < root.width ? root.height
106+ : undefined
101107 }
102108 }
103109
@@ -117,9 +123,14 @@ Item {
117123 State {
118124 name: "ready"
119125 when: image.status === Image.Ready && image.source != ""
120− PropertyChanges { target: root; implicitWidth: image.width; implicitHeight: image.height }
121− PropertyChanges { target: shape; opacity: 1 }
126+ PropertyChanges { target: root; implicitWidth: shape.width; implicitHeight: shape.height }
122127 PropertyChanges { target: placeholder; opacity: 0 }
128+ PropertyChanges { target: shape; opacity: 1
129+ width: root.scaleTo == "width" || (root.scaleTo == "fit" && image.format == "landscape") ? root.width
130+ : root.scaleTo == "" ? image.implicitWidth : image.implicitWidth * height / image.implicitHeight
131+ height: root.scaleTo == "height" || (root.scaleTo == "fit" && image.format == "portrait") ? root.height
132+ : root.scaleTo == "" ? image.implicitHeight : image.implicitHeight * width / image.implicitWidth
133+ }
123134 },
124135 State {
125136 name: "error"
@@ -138,6 +149,7 @@ Item {
138149 ParallelAnimation {
139150 NumberAnimation { target: shape; property: "opacity"; easing.type: Easing.Linear }
140151 UbuntuNumberAnimation { target: root; properties: "implicitWidth,implicitHeight" }
152+ UbuntuNumberAnimation { target: shape; properties: "width,height" }
141153 NumberAnimation {
142154 targets: [placeholder, activity, errorImage]; property: "opacity";
143155 easing.type: Easing.Linear; duration: UbuntuAnimation.SnapDuration
@@ -157,6 +169,7 @@ Item {
157169 easing.type: Easing.Linear; duration: UbuntuAnimation.SnapDuration
158170 }
159171 UbuntuNumberAnimation { target: root; properties: "implicitWidth,implicitHeight" }
172+ UbuntuNumberAnimation { target: shape; properties: "width,height" }
160173 }
161174 PropertyAction { target: shape; property: "visible" }
162175 }
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);