on xenial help sign in
adding new ui
commit8e937f64d853eeb28a455770aca9364357a78d7e authorDiego Sarmentero <diego.sarmentero@gmail.com> dateThu 18 Jul 2013, 09:53 (13 years ago) parent212a1db
4 files changed+135−220
Dash/DashApps.qml+97 Dash/DashPreview.qml−218 Dash/PreviewDelegateMapper.qml+2 Dash/Video/VideoPreview.qml+36−2
Dash/DashApps.qml+97
@@ -133,6 +133,12 @@ ScopeView {
133133 Qt.binding(function() { return isCurrent; })
134134 } else {
135135 function activateApplication(index, data) {
136+ //Check somehow if the app is not installed
137+ // IF NOT INSTALLED:
138+ //previewLoader.previewData = data;
139+ //previewLoader.open = true;
140+ //effect.positionPx = mapToItem(categoryView, 0, itemY).y;
141+ // IF INSTALLED:
136142 shell.activateApplication(data);
137143 }
138144
@@ -170,4 +176,95 @@ ScopeView {
170176 searchHistory: scopeView.searchHistory
171177 }
172178 }
179+
180+ OpenEffect {
181+ id: effect
182+ anchors {
183+ fill: parent
184+ bottomMargin: -bottomOverflow
185+ }
186+ sourceItem: categoryView
187+
188+ enabled: gap > 0.0
189+
190+ topGapPx: (1 - gap) * positionPx
191+ topOpacity: (1 - gap * 1.2)
192+ bottomGapPx: positionPx + gap * (targetBottomGapPx - positionPx)
193+ bottomOverflow: units.gu(20)
194+ bottomOpacity: 1 - (gap * 0.8)
195+
196+ property int targetBottomGapPx: height - units.gu(8) - bottomOverflow
197+ property real gap: previewLoader.open ? 1.0 : 0.0
198+
199+ Behavior on gap {
200+ NumberAnimation {
201+ duration: 200
202+ easing.type: Easing.InOutQuad
203+ onRunningChanged: {
204+ if (!previewLoader.open && !running) {
205+ previewLoader.onScreen = false
206+ }
207+ }
208+ }
209+ }
210+ }
211+
212+ Connections {
213+ target: scopeView.scope
214+ onPreviewReady: {
215+ previewLoader.previewData = preview
216+ previewLoader.open = true
217+ }
218+ }
219+
220+ Connections {
221+ ignoreUnknownSignals: true
222+ target: previewLoader.valid ? previewLoader.item : null
223+ onClose: {
224+ previewLoader.open = false
225+ }
226+ }
227+
228+ PreviewDelegateMapper {
229+ id: previewDelegateMapper
230+ }
231+
232+ Loader {
233+ id: previewLoader
234+ property var previewData
235+ height: effect.bottomGapPx - effect.topGapPx
236+ anchors {
237+ top: parent.top
238+ topMargin: effect.topGapPx
239+ left: parent.left
240+ right: parent.right
241+ }
242+ source: onScreen ? previewDelegateMapper.map("preview-app") : ""
243+
244+ property bool open: false
245+ property bool onScreen: false
246+ property bool valid: item !== null
247+
248+ onOpenChanged: {
249+ if (open) {
250+ onScreen = true
251+ }
252+ }
253+
254+ onLoaded: {
255+ item.previewData = previewLoader.previewData
256+ }
257+ }
258+
259+ // TODO: Move as InverseMouseArea to DashPreview
260+ MouseArea {
261+ enabled: previewLoader.onScreen
262+ anchors {
263+ fill: parent
264+ topMargin: effect.bottomGapPx
265+ }
266+ onClicked: {
267+ previewLoader.open = false;
268+ }
269+ }
173270}
Dash/DashPreview.qmldeleted−218
@@ -1,218 +0,0 @@
1−/*
2− * Copyright (C) 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−
20−Rectangle {
21− id: root
22− property string title: ""
23− property url url: ""
24− property real previewWidthRatio: 0.5
25− property bool playable: false
26− property bool forceSquare: false
27− property Component buttons
28− property Component caption
29− property Component description
30−
31− readonly property bool narrowMode: width <= height
32− readonly property int contentSpacing: units.gu(3)
33−
34− signal close()
35− signal previewImageClicked()
36−
37− color: Qt.rgba(0, 0, 0, .3)
38− clip: true
39−
40− Connections {
41− target: shell.applicationManager
42− onMainStageFocusedApplicationChanged: {
43− root.close();
44− }
45− onSideStageFocusedApplicationChanged: {
46− root.close();
47− }
48− }
49−
50− MouseArea {
51− anchors.fill: parent
52− }
53−
54− Item {
55− id: headerRow
56− height: units.gu(4)
57− anchors {
58− top: parent.top
59− left: parent.left
60− right: parent.right
61− margins: root.contentSpacing
62− }
63−
64− MouseArea {
65− anchors {
66− fill: parent
67− leftMargin: -root.contentSpacing
68− rightMargin: -root.contentSpacing
69− topMargin: -root.contentSpacing
70− }
71−
72− onClicked: root.close();
73− }
74−
75− Item {
76− id: labelItem
77− anchors {
78− fill: parent
79− rightMargin: closePreviewImage.width + spacing
80− }
81−
82− property int spacing: units.gu(2)
83−
84− Label {
85− id: title
86− objectName: "titleLabel"
87− anchors {
88− left: parent.left
89− right: parent.right
90− }
91−
92− elide: Text.ElideRight
93− fontSize: "x-large"
94− font.weight: Font.Light
95− color: Theme.palette.selected.backgroundText
96− opacity: 0.9
97− text: root.title
98− style: Text.Raised
99− styleColor: "black"
100− }
101− Image {
102− id: closePreviewImage
103− source: "graphics/tablet/icon_close_preview.png"
104− width: units.gu(4)
105− height: units.gu(1.5)
106− anchors {
107− bottom: title.bottom
108− bottomMargin: units.dp(7)
109− left: parent.left
110− leftMargin: title.paintedWidth + labelItem.spacing
111− }
112− }
113− }
114− }
115−
116− Row {
117− id: contentRow
118− anchors {
119− left: parent.left
120− right: parent.right
121− top: headerRow.bottom
122− bottom: parent.bottom
123− margins: root.contentSpacing
124− }
125−
126− spacing: units.gu(2)
127−
128− Flickable {
129− id: leftFlickable
130− anchors.top: parent.top
131− anchors.bottom: parent.bottom
132− width: root.narrowMode ? contentRow.width : contentRow.width * root.previewWidthRatio
133− contentHeight: leftColumn.height
134− clip: true
135−
136− Column {
137− id: leftColumn
138− objectName: "leftColumn"
139− anchors {
140− left: parent.left
141− right: parent.right
142− }
143− height: childrenRect.height
144− spacing: root.contentSpacing
145−
146− // TODO: replace this UbuntuShape with the Video component once that lands
147− // with the player.
148− UbuntuShape {
149− id: urlLoader
150− anchors.left: parent.left
151− anchors.right: parent.right
152− height: root.forceSquare ? width : width * previewImage.sourceSize.height / previewImage.sourceSize.width
153− radius: "medium"
154− image: Image {
155− id: previewImage
156− asynchronous: true
157− source: root.url
158− fillMode: Image.PreserveAspectCrop
159− }
160−
161− Image {
162− objectName: "playButton"
163− anchors.centerIn: parent
164− visible: root.playable
165− readonly property bool bigButton: parent.width > units.gu(40)
166− width: bigButton ? units.gu(8) : units.gu(4.5)
167− height: width
168− source: "graphics/play_button%1%2.png".arg(previewImageMouseArea.pressed ? "_active" : "").arg(bigButton ? "_big" : "")
169− }
170−
171− MouseArea {
172− id: previewImageMouseArea
173− anchors.fill: parent
174− onClicked: root.previewImageClicked()
175− }
176− }
177− Loader {
178− id: buttonLoader
179− anchors.left: parent.left
180− anchors.right: parent.right
181− sourceComponent: root.buttons
182− }
183− Loader {
184− id: captionLoader
185− anchors.left: parent.left
186− anchors.right: parent.right
187− sourceComponent: root.caption
188− }
189− }
190− }
191−
192− Flickable {
193− id: rightFlickable
194− anchors.top: parent.top
195− anchors.bottom: parent.bottom
196− width: narrowMode ? 0 : (contentRow.width - leftColumn.width - contentRow.spacing)
197− contentHeight: rightColumn.height
198− clip: true
199−
200− Column {
201− id: rightColumn
202− objectName: "rightColumn"
203− height: childrenRect.height
204− anchors {
205− left: parent.left
206− right: parent.right
207− }
208− }
209− }
210− }
211−
212− Loader {
213− parent: root.narrowMode ? leftColumn : rightColumn
214− anchors.left: parent.left
215− anchors.right: parent.right
216− sourceComponent: root.description
217− }
218−}
Dash/PreviewDelegateMapper.qml+2
@@ -19,7 +19,9 @@ import QtQuick 2.0
1919QtObject {
2020 property var d: QtObject {
2121 readonly property string genericPreview: "Generic/GenericPreview.qml"
22+ readonly property string appPreview: "Apps/AppPreview.qml"
2223 property var previewDelegateMapping: {"preview-generic": genericPreview,
24+ "preview-application": appPreview,
2325 }
2426 }
2527
Dash/Video/VideoPreview.qml+36−2
@@ -19,11 +19,13 @@ import Ubuntu.Components 0.1
1919import ".."
2020import "../../Components"
2121
22−DashPreview {
22+DashBasePreview {
2323 id: root
2424
2525 property var item
2626 property alias ready: nfo.ready
27+ property bool playable: false
28+ property bool forceSquare: false
2729 readonly property url fileUri: item ? item.fileUri : ""
2830
2931 VideoInfo {
@@ -42,6 +44,38 @@ DashPreview {
4244 }
4345 }
4446
47+ // TODO: replace this UbuntuShape with the Video component once that lands
48+ // with the player.
49+ header: UbuntuShape {
50+ id: urlLoader
51+ anchors.left: parent.left
52+ anchors.right: parent.right
53+ height: root.forceSquare ? width : width * previewImage.sourceSize.height / previewImage.sourceSize.width
54+ radius: "medium"
55+ image: Image {
56+ id: previewImage
57+ asynchronous: true
58+ source: root.url
59+ fillMode: Image.PreserveAspectCrop
60+ }
61+
62+ Image {
63+ objectName: "playButton"
64+ anchors.centerIn: parent
65+ visible: root.playable
66+ readonly property bool bigButton: parent.width > units.gu(40)
67+ width: bigButton ? units.gu(8) : units.gu(4.5)
68+ height: width
69+ source: "graphics/play_button%1%2.png".arg(previewImageMouseArea.pressed ? "_active" : "").arg(bigButton ? "_big" : "")
70+ }
71+
72+ MouseArea {
73+ id: previewImageMouseArea
74+ anchors.fill: parent
75+ onClicked: root.previewImageClicked()
76+ }
77+ }
78+
4579 buttons: Row {
4680 spacing: units.gu(2)
4781
@@ -64,7 +98,7 @@ DashPreview {
6498 }
6599 }
66100
67− description: Column {
101+ body: Column {
68102 spacing: units.gu(2)
69103 RatingStars {
70104 maximumRating: 10 // FIXME: this should happen on the backend side