git.iko.soy/unity8
on xenial help sign in
some more cleanup and tweaks to match design
13e6008Michael Zanetti
Dash/Apps/AppPreview.qml+57−2
compare with xenial
unifiedsplit
@@ -16,7 +16,7 @@
16
16
17import QtQuick 2.0
17import QtQuick 2.0
18import Ubuntu.Components 0.1
18import Ubuntu.Components 0.1
19−import Ubuntu.Components.ListItems 0.1 as ListItem
19+import Ubuntu.Components.ListItems 0.1 as ListItems
20import Ubuntu.DownloadDaemonListener 0.1
20import Ubuntu.DownloadDaemonListener 0.1
21import ".."
21import ".."
22import "../Generic"
22import "../Generic"
@@ -32,6 +32,7 @@ GenericPreview {
32 actions: root.previewData.infoMap["show_progressbar"] ? progressComponent : buttonsComponent
32 actions: root.previewData.infoMap["show_progressbar"] ? progressComponent : buttonsComponent
33 description: descriptionComponent
33 description: descriptionComponent
34 header: headerComponent
34 header: headerComponent
35+ ratings: ratingsComponent
35
36
36 Component {
37 Component {
37 id: previewImagesComponent
38 id: previewImagesComponent
@@ -62,7 +63,7 @@ GenericPreview {
62
63
63 Component {
64 Component {
64 id: headerComponent
65 id: headerComponent
65− PreviewHeader {
66+ Header {
66 title: previewData.title
67 title: previewData.title
67 icon: previewData.appIcon
68 icon: previewData.appIcon
68 rating: Math.round(root.previewData.rating * 10)
69 rating: Math.round(root.previewData.rating * 10)
@@ -152,4 +153,58 @@ GenericPreview {
152 }
153 }
153 }
154 }
154 }
155 }
156+
157+ Component {
158+ id: ratingsComponent
159+ Column {
160+ visible: root.previewData.rating >= 0
161+ spacing: units.gu(1)
162+ height: childrenRect.height
163+
164+ ListItems.ThinDivider { }
165+
166+ Item {
167+ anchors { left: parent.left; right: parent.right }
168+ height: rateLabel.height
169+
170+ Label {
171+ id: rateLabel
172+ fontSize: "medium"
173+ color: "white"
174+ style: Text.Raised
175+ styleColor: "black"
176+ opacity: .9
177+ text: i18n.tr("Rate this")
178+
179+ anchors.left: parent.left
180+ anchors.verticalCenter: parent.verticalCenter
181+ }
182+
183+ // FIXME these need to be made interactive and connected to the scope
184+ RatingStars {
185+ anchors.right: parent.right
186+ anchors.verticalCenter: parent.verticalCenter
187+ }
188+ }
189+
190+ ListItems.ThinDivider { }
191+
192+ Reviews {
193+ id: appReviews
194+ objectName: "appReviews"
195+ // TODO: This should make this visible when the feature for reviews/comments is complete.
196+ visible: false; height: 0
197+
198+ anchors { left: parent.left; right: parent.right }
199+
200+ model: root.previewData.infoMap["comments"] ? root.previewData.infoMap["comments"].value : undefined
201+
202+ onSendReview: root.sendUserReview(review);
203+
204+ onEditing: {
205+ root.ensureVisible(appReviews.textArea);
206+ }
207+ }
208+ }
209+ }
155}
210}
Dash/Generic/GenericPreview.qml+2−55
@@ -51,9 +51,10 @@ DashPreview {
51
51
52 Component {
52 Component {
53 id: headerComponent
53 id: headerComponent
54− PreviewHeader {
54+ Header {
55 title: previewData.title
55 title: previewData.title
56 rating: Math.round(root.previewData.rating * 10)
56 rating: Math.round(root.previewData.rating * 10)
57+ subtitle: previewData.subtitle.replace(/[\r\n]+/g, "<br />")
57 reviews: root.previewData.numRatings
58 reviews: root.previewData.numRatings
58 rated: root.previewData.infoMap["rated"] ? root.previewData.infoMap["rated"].value : 0
59 rated: root.previewData.infoMap["rated"] ? root.previewData.infoMap["rated"].value : 0
59 }
60 }
@@ -168,58 +169,4 @@ DashPreview {
168 }
169 }
169 }
170 }
170 }
171 }
171−
172− Component {
173− id: ratingsComponent
174− Column {
175− visible: root.previewData.rating >= 0
176− spacing: units.gu(1)
177− height: childrenRect.height
178−
179− ListItems.ThinDivider { }
180−
181− Item {
182− anchors { left: parent.left; right: parent.right }
183− height: rateLabel.height
184−
185− Label {
186− id: rateLabel
187− fontSize: "medium"
188− color: "white"
189− style: Text.Raised
190− styleColor: "black"
191− opacity: .9
192− text: i18n.tr("Rate this")
193−
194− anchors.left: parent.left
195− anchors.verticalCenter: parent.verticalCenter
196− }
197−
198− // FIXME these need to be made interactive and connected to the scope
199− RatingStars {
200− anchors.right: parent.right
201− anchors.verticalCenter: parent.verticalCenter
202− }
203− }
204−
205− ListItems.ThinDivider { }
206−
207− Reviews {
208− id: appReviews
209− objectName: "appReviews"
210− // TODO: This should make this visible when the feature for reviews/comments is complete.
211− visible: false; height: 0
212−
213− anchors { left: parent.left; right: parent.right }
214−
215− model: root.previewData.infoMap["comments"] ? root.previewData.infoMap["comments"].value : undefined
216−
217− onSendReview: root.sendUserReview(review);
218−
219− onEditing: {
220− root.ensureVisible(appReviews.textArea);
221− }
222− }
223− }
224− }
225}
172}
Dash/Movie/MoviePreview.qml+73−51
@@ -19,6 +19,7 @@ import Ubuntu.Components 0.1
19import ".."
19import ".."
20import "../Generic"
20import "../Generic"
21import "../../Components"
21import "../../Components"
22+import "../Previews"
22
23
23GenericPreview {
24GenericPreview {
24 id: root
25 id: root
@@ -27,68 +28,89 @@ GenericPreview {
27 property bool playable: previewData.imageSourceUri != null
28 property bool playable: previewData.imageSourceUri != null
28 property url url: ready ? previewData.image : ""
29 property url url: ready ? previewData.image : ""
29
30
31+ previewImages: previewImageComponent
32+ header: headerComponent
33+ actions: actionsComponent
34+ ratings: ratingsComponent
35+
36+ Component {
37+ id: previewImageComponent
30− previewImages: UbuntuShape {
38+ UbuntuShape {
31− id: urlLoader
39+ id: urlLoader
32− anchors.left: parent.left
40+ anchors.left: parent.left
33− anchors.right: parent.right
41+ anchors.right: parent.right
34− height: width * previewImage.sourceSize.height / previewImage.sourceSize.width
42+ height: width * previewImage.sourceSize.height / previewImage.sourceSize.width
35− radius: "medium"
43+ radius: "medium"
36− visible: height > 0
44+ visible: height > 0
37− image: Image {
45+ image: Image {
38− id: previewImage
46+ id: previewImage
39− asynchronous: true
47+ asynchronous: true
40− source: root.url
48+ source: root.url
41− fillMode: Image.PreserveAspectCrop
49+ fillMode: Image.PreserveAspectCrop
42− }
50+ }
43
51
44− Image {
52+ Image {
45− objectName: "playButton"
53+ objectName: "playButton"
46− anchors.centerIn: parent
54+ anchors.centerIn: parent
47− visible: root.playable
55+ visible: root.playable
48− readonly property bool bigButton: parent.width > units.gu(40)
56+ readonly property bool bigButton: parent.width > units.gu(40)
49− width: bigButton ? units.gu(8) : units.gu(4.5)
57+ width: bigButton ? units.gu(8) : units.gu(4.5)
50− height: width
58+ height: width
51− source: "../graphics/play_button%1%2.png".arg(previewImageMouseArea.pressed ? "_active" : "").arg(bigButton ? "_big" : "")
59+ source: "../graphics/play_button%1%2.png".arg(previewImageMouseArea.pressed ? "_active" : "").arg(bigButton ? "_big" : "")
60+ }
61+
62+ MouseArea {
63+ id: previewImageMouseArea
64+ anchors.fill: parent
65+ onClicked: shell.activateApplication('/usr/share/applications/mediaplayer-app.desktop', previewData.imageSourceUri);
66+ }
52 }
67 }
68+ }
53
69
54− MouseArea {
70+ Component {
55− id: previewImageMouseArea
71+ id: headerComponent
56− anchors.fill: parent
72+ Header {
57− onClicked: shell.activateApplication('/usr/share/applications/mediaplayer-app.desktop', previewData.imageSourceUri);
73+ title: previewData.title
74+ rating: Math.round(root.previewData.rating * 10)
75+ reviews: root.previewData.numRatings
76+ rated: root.previewData.infoMap["rated"] ? root.previewData.infoMap["rated"].value : 0
58 }
77 }
59 }
78 }
60
79
80+ Component {
81+ id: actionsComponent
61− actions: GridView {
82+ GridView {
62− id: buttons
83+ id: buttons
63− objectName: "gridButtons"
84+ objectName: "gridButtons"
64− model: root.previewData.actions
85+ model: root.previewData.actions
65− interactive: false
86+ interactive: false
66
87
67− anchors.left: parent.left
88+ anchors.left: parent.left
68− anchors.right: parent.right
89+ anchors.right: parent.right
69
90
70− property int numOfRows: (count + numOfColumns - 1) / numOfColumns
91+ property int numOfRows: (count + numOfColumns - 1) / numOfColumns
71− property int numOfColumns: Math.max(1, Math.floor(width / (buttonWidth + spacing)))
92+ property int numOfColumns: Math.max(1, Math.floor(width / (buttonWidth + spacing)))
72− property int spacing: units.gu(1)
93+ property int spacing: units.gu(1)
73− height: Math.max(units.gu(4), units.gu(4)*numOfRows + spacing*(numOfRows - 1))
94+ height: Math.max(units.gu(4), units.gu(4)*numOfRows + spacing*(numOfRows - 1))
74
95
75− cellWidth: width / buttons.numOfColumns
96+ cellWidth: width / buttons.numOfColumns
76− cellHeight: buttonHeight + buttons.spacing
97+ cellHeight: buttonHeight + buttons.spacing
77− property int buttonWidth: units.gu(17) - spacing
98+ property int buttonWidth: units.gu(17) - spacing
78− property int buttonHeight: units.gu(4)
99+ property int buttonHeight: units.gu(4)
79
100
80− delegate: Button {
101+ delegate: Button {
81− width: Math.max(units.gu(4), buttons.buttonWidth)
102+ width: Math.max(units.gu(4), buttons.buttonWidth)
82− height: buttons.buttonHeight
103+ height: buttons.buttonHeight
83− color: "#dd4814"
104+ color: "#dd4814"
84− text: modelData.displayName
105+ text: modelData.displayName
85− iconSource: modelData.iconHint
106+ iconSource: modelData.iconHint
86− iconPosition: "right"
107+ iconPosition: "right"
87− visible: true
108+ visible: true
88− onClicked: {
109+ onClicked: {
89− root.previewData.execute(modelData.id, { })
110+ root.previewData.execute(modelData.id, { })
111+ }
90 }
112 }
113+ focus: false
91 }
114 }
92− focus: false
93 }
115 }
94}
116}
Dash/Previews/PreviewHeader.qml → Dash/Previews/Header.qmlrenamed+14−1
@@ -22,6 +22,7 @@ Row {
22 id: root
22 id: root
23 property alias icon: image.source
23 property alias icon: image.source
24 property alias title: titleLabel.text
24 property alias title: titleLabel.text
25+ property alias subtitle: subtitleLabel.text
25 property alias rating: ratingStars.rating
26 property alias rating: ratingStars.rating
26 property int rated: 0
27 property int rated: 0
27 property int reviews: 0
28 property int reviews: 0
@@ -51,10 +52,22 @@ Row {
51 style: Text.Raised
52 style: Text.Raised
52 styleColor: "black"
53 styleColor: "black"
53 opacity: .9
54 opacity: .9
55+ width: parent.width
56+ elide: Text.ElideRight
57+ }
58+
59+ Label {
60+ id: subtitleLabel
61+ objectName: "subtitleLabel"
62+ fontSize: "medium"
63+ color: "white"
64+ style: Text.Raised
65+ styleColor: "black"
66+ opacity: .6
54 }
67 }
55
68
56 Row {
69 Row {
57− visible: root.rating >= 0
70+ visible: root.rating >= 0 && subtitleLabel.text.length == 0
58 spacing: units.gu(1)
71 spacing: units.gu(1)
59
72
60 RatingStars {
73 RatingStars {