git.iko.soy/unity8
on xenial help sign in
Make zoomable and video playback widgets edge to edge
b901318Andrea Cimitan
qml/Components/LazyImage.qml+23−10
compare with xenial
unifiedsplit
@@ -34,6 +34,8 @@ Item {
34 property alias asynchronous: image.asynchronous
34 property alias asynchronous: image.asynchronous
35 property alias cache: image.cache
35 property alias cache: image.cache
36 property alias sourceImage: image
36 property alias sourceImage: image
37+
38+ property bool useUbuntuShape: true
37 property bool pressed: false
39 property bool pressed: false
38
40
39 state: "default"
41 state: "default"
@@ -47,12 +49,15 @@ Item {
47 }
49 }
48 }
50 }
49
51
50− UbuntuShape {
52+ Loader {
51 id: placeholder
53 id: placeholder
52 objectName: "placeholder"
54 objectName: "placeholder"
53− backgroundColor: "#22FFFFFF"
54 anchors.fill: shape
55 anchors.fill: shape
56+ active: useUbuntuShape
55 visible: opacity != 0
57 visible: opacity != 0
58+ sourceComponent: UbuntuShape {
59+ backgroundColor: "#22FFFFFF"
60+ }
56
61
57 ActivityIndicator {
62 ActivityIndicator {
58 id: activity
63 id: activity
@@ -75,27 +80,35 @@ Item {
75 }
80 }
76 }
81 }
77
82
78− UbuntuShapeOverlay {
83+ Loader {
79 id: shape
84 id: shape
80 objectName: "shape"
85 objectName: "shape"
81 height: root.initialHeight
86 height: root.initialHeight
82 width: root.initialWidth
87 width: root.initialWidth
83 anchors.centerIn: root.scaleTo == "fit" ? parent : undefined
88 anchors.centerIn: root.scaleTo == "fit" ? parent : undefined
84−
89+ active: useUbuntuShape
85 opacity: 0
90 opacity: 0
86 visible: opacity != 0
91 visible: opacity != 0
92+ sourceComponent: UbuntuShapeOverlay {
93+ property bool pressed: false
87− overlayColor: Qt.rgba(0, 0, 0, root.pressed ? 0.1 : 0)
94+ overlayColor: Qt.rgba(0, 0, 0, pressed ? 0.1 : 0)
88− overlayRect: Qt.rect(0.0, 0.0, 1.0, 1.0)
95+ overlayRect: Qt.rect(0.0, 0.0, 1.0, 1.0)
89− sourceFillMode: UbuntuShape.PreserveAspectCrop
96+ }
90− sourceHorizontalAlignment: UbuntuShape.AlignHCenter
97+ onLoaded: {
91− sourceVerticalAlignment: UbuntuShape.AlignVCenter
98+ item.source = image;
99+ item.pressed = Qt.binding(function() { return root.pressed; });
100+ }
101+
92− source: Image {
102+ Image {
93 id: image
103 id: image
94 objectName: "image"
104 objectName: "image"
95
105
96 property url nextSource
106 property url nextSource
97 property string format: image.implicitWidth > image.implicitHeight ? "landscape" : "portrait"
107 property string format: image.implicitWidth > image.implicitHeight ? "landscape" : "portrait"
98
108
109+ anchors.fill: parent
110+ visible: !useUbuntuShape
111+ fillMode: Image.PreserveAspectFit
99 asynchronous: true
112 asynchronous: true
100 cache: false
113 cache: false
101 sourceSize.width: root.scaleTo == "width" ? root.width
114 sourceSize.width: root.scaleTo == "width" ? root.width
qml/Dash/Previews/Preview.qml+2−2
@@ -100,8 +100,8 @@ Item {
100 anchors {
100 anchors {
101 left: parent.left
101 left: parent.left
102 right: parent.right
102 right: parent.right
103− leftMargin: units.gu(1)
103+ leftMargin: widgetMargins
104− rightMargin: units.gu(1)
104+ rightMargin: widgetMargins
105 }
105 }
106
106
107 onTriggered: {
107 onTriggered: {
qml/Dash/Previews/PreviewVideoPlayback.qml+3
@@ -30,6 +30,8 @@ PreviewWidget {
30 implicitWidth: units.gu(35)
30 implicitWidth: units.gu(35)
31 implicitHeight: childrenRect.height
31 implicitHeight: childrenRect.height
32
32
33+ widgetMargins: -units.gu(1)
34+
33 LazyImage {
35 LazyImage {
34 objectName: "screenshot"
36 objectName: "screenshot"
35 anchors {
37 anchors {
@@ -51,6 +53,7 @@ PreviewWidget {
51 return "";
53 return "";
52 }
54 }
53 initialHeight: width * 10 / 16
55 initialHeight: width * 10 / 16
56+ useUbuntuShape: false
54
57
55 Image {
58 Image {
56 objectName: "playButton"
59 objectName: "playButton"
qml/Dash/Previews/PreviewWidget.qml+3
@@ -34,6 +34,9 @@ Item {
34 //! Should the widget show in expanded mode (For those that support it)
34 //! Should the widget show in expanded mode (For those that support it)
35 property bool expanded: true
35 property bool expanded: true
36
36
37+ //! Set margins width.
38+ property real widgetMargins: units.gu(1)
39+
37 /*! \brief This signal should be emitted when a preview action was triggered.
40 /*! \brief This signal should be emitted when a preview action was triggered.
38 *
41 *
39 * \param widgetId, actionId Respective identifiers from widgetData.
42 * \param widgetId, actionId Respective identifiers from widgetData.
qml/Dash/Previews/PreviewWidgetFactory.qml+3
@@ -40,6 +40,9 @@ Loader {
40 //! Set to true if the parent preview is displayed.
40 //! Set to true if the parent preview is displayed.
41 property bool isCurrentPreview: false
41 property bool isCurrentPreview: false
42
42
43+ //! Set margins width.
44+ property real widgetMargins: status === Loader.Ready ? item.widgetMargins : units.gu(1)
45+
43 //! Triggered signal forwarded from the widgets.
46 //! Triggered signal forwarded from the widgets.
44 signal triggered(string widgetId, string actionId, var data)
47 signal triggered(string widgetId, string actionId, var data)
45
48
qml/Dash/Previews/PreviewZoomableImage.qml+8−6
@@ -27,7 +27,10 @@ import "../../Components"
27
27
28PreviewWidget {
28PreviewWidget {
29 id: root
29 id: root
30+ implicitWidth: units.gu(35)
30− implicitHeight: units.gu(22)
31+ implicitHeight: lazyImage.height
32+
33+ widgetMargins: -units.gu(1)
31
34
32 property Item rootItem: QuickUtils.rootItem(root)
35 property Item rootItem: QuickUtils.rootItem(root)
33
36
@@ -35,14 +38,13 @@ PreviewWidget {
35 id: lazyImage
38 id: lazyImage
36 objectName: "lazyImage"
39 objectName: "lazyImage"
37 anchors {
40 anchors {
38− top: parent.top
41+ left: parent.left
39− bottom: parent.bottom
42+ right: parent.right
40− horizontalCenter: parent.horizontalCenter
41 }
43 }
42− scaleTo: "height"
44+ scaleTo: "width"
43 source: widgetData["source"]
45 source: widgetData["source"]
44 asynchronous: true
46 asynchronous: true
45−
47+ useUbuntuShape: false
46 pressed: mouseArea.pressed
48 pressed: mouseArea.pressed
47
49
48 MouseArea {
50 MouseArea {
tests/qmltests/Dash/Previews/tst_PreviewExpandable.qml+2−2
@@ -319,9 +319,9 @@ Rectangle {
319 previewWidgetFactory.widgetType = allWidgetsModel.get(i).type;
319 previewWidgetFactory.widgetType = allWidgetsModel.get(i).type;
320 previewWidgetFactory.active = true;
320 previewWidgetFactory.active = true;
321
321
322− // Wait for the height ot settle by waiting twice the time of the
322+ // Wait for the height ot settle by waiting four times the time of the
323 // longest of the height behaviour animations
323 // longest of the height behaviour animations
324− wait(UbuntuAnimation.SnapDuration * 2);
324+ wait(UbuntuAnimation.SnapDuration * 4);
325
325
326 // Check the item inside the expandable has the same height
326 // Check the item inside the expandable has the same height
327 // as the one straight from the factory
327 // as the one straight from the factory
tests/qmltests/Dash/Previews/tst_PreviewZoomableImage.qml+1−1
@@ -41,7 +41,7 @@ Rectangle {
41
41
42 Loader {
42 Loader {
43 id: loader
43 id: loader
44− anchors.centerIn: parent
44+ width: parent.width
45 sourceComponent: PreviewZoomableImage {
45 sourceComponent: PreviewZoomableImage {
46 widgetData: widgetData0
46 widgetData: widgetData0
47 }
47 }