@@ -0,0 +1,518 @@
1+/*
2+ * Copyright (C) 2014 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+.pragma library
18+
19+var kBackgroundLoaderCode = 'Loader {\n\
20+ id: backgroundLoader; \n\
21+ objectName: "backgroundLoader"; \n\
22+ anchors.fill: parent; \n\
23+ asynchronous: root.asynchronous; \n\
24+ visible: status == Loader.Ready; \n\
25+ sourceComponent: UbuntuShape { \n\
26+ objectName: "background"; \n\
27+ radius: "medium"; \n\
28+ color: getColor(0) || "white"; \n\
29+ gradientColor: getColor(1) || color; \n\
30+ anchors.fill: parent; \n\
31+ image: backgroundImage.source ? backgroundImage : null; \n\
32+ property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b; \n\
33+ property Image backgroundImage: Image { \n\
34+ objectName: "backgroundImage"; \n\
35+ source: { \n\
36+ if (cardData && typeof cardData["background"] === "string") return cardData["background"]; \n\
37+ else if (template && typeof template["card-background"] === "string") return template["card-background"]; \n\
38+ else return ""; \n\
39+ } \n\
40+ } \n\
41+ function getColor(index) { \n\
42+ if (cardData && typeof cardData["background"] === "object" \n\
43+ && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) { \n\
44+ return cardData["background"]["elements"][index]; \n\
45+ } else if (template && typeof template["card-background"] === "object" \n\
46+ && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) { \n\
47+ return template["card-background"]["elements"][index]; \n\
48+ } else return undefined; \n\
49+ } \n\
50+ } \n\
51+ }\n';
52+
53+// %1 is used as anchors of artShapeHolder
54+// %2 is used as image width
55+// %3 is used as image height
56+var kArtShapeHolderCode = 'Item { \n\
57+ id: artShapeHolder; \n\
58+ height: root.fixedArtShapeSize.height != -1 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
59+ width: root.fixedArtShapeSize.width != -1 ? root.fixedArtShapeSize.width : artShapeLoader.width; \n\
60+ anchors { %1 } \n\
61+ Loader { \n\
62+ id: artShapeLoader; \n\
63+ objectName: "artShapeLoader"; \n\
64+ active: cardData && cardData["art"] || false; \n\
65+ asynchronous: root.asynchronous; \n\
66+ visible: status == Loader.Ready; \n\
67+ sourceComponent: UbuntuShape { \n\
68+ id: artShape; \n\
69+ objectName: "artShape"; \n\
70+ radius: "medium"; \n\
71+ readonly property real aspect: components !== undefined ? components["art"]["aspect-ratio"] : 1; \n\
72+ readonly property bool aspectSmallerThanImageAspect: aspect < image.aspect; \n\
73+ Component.onCompleted: updateWidthHeightBindings(); \n\
74+ onAspectSmallerThanImageAspectChanged: updateWidthHeightBindings(); \n\
75+ visible: image.status == Image.Ready; \n\
76+ function updateWidthHeightBindings() { \n\
77+ if (aspectSmallerThanImageAspect) { \n\
78+ width = Qt.binding(function() { return !visible ? 0 : image.width }); \n\
79+ height = Qt.binding(function() { return !visible ? 0 : image.fillMode === Image.PreserveAspectCrop ? image.height : width / image.aspect }); \n\
80+ } else { \n\
81+ width = Qt.binding(function() { return !visible ? 0 : image.fillMode === Image.PreserveAspectCrop ? image.width : height * image.aspect }); \n\
82+ height = Qt.binding(function() { return !visible ? 0 : image.height }); \n\
83+ } \n\
84+ } \n\
85+ image: Image { \n\
86+ objectName: "artImage"; \n\
87+ source: cardData && cardData["art"] || ""; \n\
88+ cache: true; \n\
89+ asynchronous: root.asynchronous; \n\
90+ fillMode: components && components["art"]["fill-mode"] === "fit" ? Image.PreserveAspectFit: Image.PreserveAspectCrop; \n\
91+ readonly property real aspect: implicitWidth / implicitHeight; \n\
92+ width: %2; \n\
93+ height: %3; \n\
94+ } \n\
95+ } \n\
96+ } \n\
97+ }\n';
98+
99+var kOverlayLoaderCode = 'Loader { \n\
100+ id: overlayLoader; \n\
101+ anchors { \n\
102+ left: artShapeHolder.left; \n\
103+ right: artShapeHolder.right; \n\
104+ bottom: artShapeHolder.bottom; \n\
105+ } \n\
106+ active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
107+ asynchronous: root.asynchronous; \n\
108+ visible: showHeader && status == Loader.Ready; \n\
109+ sourceComponent: ShaderEffect { \n\
110+ id: overlay; \n\
111+ height: fixedHeaderHeight != -1 ? fixedHeaderHeight : headerHeight; \n\
112+ opacity: 0.6; \n\
113+ property var source: ShaderEffectSource { \n\
114+ id: shaderSource; \n\
115+ sourceItem: artShapeLoader.item; \n\
116+ onVisibleChanged: if (visible) scheduleUpdate(); \n\
117+ live: false; \n\
118+ sourceRect: Qt.rect(0, artShapeLoader.height - overlay.height, artShapeLoader.width, overlay.height); \n\
119+ } \n\
120+ vertexShader: " \n\
121+ uniform highp mat4 qt_Matrix; \n\
122+ attribute highp vec4 qt_Vertex; \n\
123+ attribute highp vec2 qt_MultiTexCoord0; \n\
124+ varying highp vec2 coord; \n\
125+ void main() { \n\
126+ coord = qt_MultiTexCoord0; \n\
127+ gl_Position = qt_Matrix * qt_Vertex; \n\
128+ }"; \n\
129+ fragmentShader: " \n\
130+ varying highp vec2 coord; \n\
131+ uniform sampler2D source; \n\
132+ uniform lowp float qt_Opacity; \n\
133+ void main() { \n\
134+ lowp vec4 tex = texture2D(source, coord); \n\
135+ gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity; \n\
136+ }"; \n\
137+ } \n\
138+ }\n';
139+
140+// %1 is used as anchors of row
141+// %2 is used as first child of the row
142+// %3 is used as second child of the row
143+var kHeaderRow2Code = 'Row { \n\
144+ id: row; \n\
145+ objectName: "outerRow"; \n\
146+ property real margins: units.gu(1); \n\
147+ spacing: margins; \n\
148+ anchors { %1 } \n\
149+ anchors.right: parent.right; \n\
150+ anchors.margins: margins;\n\
151+ data: [ %2\n\
152+ ,\n\
153+ %3 \n\
154+ ] \n\
155+ }\n';
156+
157+// %1 is used as anchors of row
158+// %2 is used as first child of the row
159+// %3 is used as second child of the row
160+// %4 is used as third child of the row
161+var kHeaderRow3Code = 'Row { \n\
162+ id: row; \n\
163+ objectName: "outerRow"; \n\
164+ property real margins: units.gu(1); \n\
165+ spacing: margins; \n\
166+ anchors { %1 } \n\
167+ anchors.right: parent.right; \n\
168+ anchors.margins: margins;\n\
169+ data: [ %2\n\
170+ ,\n\
171+ %3 \n\
172+ ,\n\
173+ %4 \n\
174+ ] \n\
175+ }\n';
176+
177+// %1 is used as first child of the column
178+// %2 is used as second child of the column
179+var kHeaderColumnCode = 'Column { \n\
180+ anchors.verticalCenter: parent.verticalCenter; \n\
181+ spacing: units.dp(2); \n\
182+ width: parent.width - x;\n\
183+ data: [ %1\n\
184+ ,\n\
185+ %2 \n\
186+ ] \n\
187+ }\n';
188+
189+// %1 is used as anchors of mascotShapeLoader
190+var kMascotShapeLoaderCode = 'Loader { \n\
191+ id: mascotShapeLoader; \n\
192+ objectName: "mascotShapeLoader"; \n\
193+ asynchronous: root.asynchronous; \n\
194+ active: mascotImage.status === Image.Ready; \n\
195+ visible: showHeader && active && status == Loader.Ready; \n\
196+ width: units.gu(6); \n\
197+ height: units.gu(5.625); \n\
198+ sourceComponent: UbuntuShape { image: mascotImage } \n\
199+ anchors { %1 } \n\
200+ }\n';
201+
202+// %1 is used as anchors of mascotImage
203+// %2 is used as visible of mascotImage
204+var kMascotImageCode = 'Image { \n\
205+ id: mascotImage; \n\
206+ objectName: "mascotImage"; \n\
207+ anchors { %1 } \n\
208+ readonly property int maxSize: Math.max(width, height) * 4; \n\
209+ source: cardData && cardData["mascot"]; \n\
210+ width: units.gu(6); \n\
211+ height: units.gu(5.625); \n\
212+ sourceSize { width: maxSize; height: maxSize } \n\
213+ fillMode: Image.PreserveAspectCrop; \n\
214+ horizontalAlignment: Image.AlignHCenter; \n\
215+ verticalAlignment: Image.AlignVCenter; \n\
216+ visible: %2; \n\
217+ }\n';
218+
219+// %1 is used as anchors of titleLabel
220+// %1 is used as color of titleLabel
221+// %3 is used as extra condition for visible of titleLabel
222+var kTitleLabelCode = 'Label { \n\
223+ id: titleLabel; \n\
224+ objectName: "titleLabel"; \n\
225+ anchors { %1 } \n\
226+ elide: Text.ElideRight; \n\
227+ fontSize: "small"; \n\
228+ wrapMode: Text.Wrap; \n\
229+ maximumLineCount: 2; \n\
230+ font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
231+ color: %2; \n\
232+ visible: showHeader %3; \n\
233+ text: root.title; \n\
234+ font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal; \n\
235+ horizontalAlignment: root.headerAlignment; \n\
236+ }\n';
237+
238+// %1 is used as anchors of subtitleLabel
239+// %2 is used as color of subtitleLabel
240+var kSubtitleLabelCode = 'Label { \n\
241+ id: subtitleLabel; \n\
242+ objectName: "subtitleLabel"; \n\
243+ anchors { %1 } \n\
244+ elide: Text.ElideRight; \n\
245+ fontSize: "small"; \n\
246+ font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
247+ color: %2; \n\
248+ visible: titleLabel.visible && titleLabel.text; \n\
249+ text: cardData && cardData["subtitle"] || ""; \n\
250+ font.weight: Font.Light; \n\
251+ horizontalAlignment: root.headerAlignment; \n\
252+ }\n';
253+
254+// %1 is used as top anchor of summary
255+// %2 is used as topMargin anchor of summary
256+// %3 is used as color of summary
257+var kSummaryLabelCode = 'Label { \n\
258+ id: summary; \n\
259+ objectName: "summaryLabel"; \n\
260+ anchors { \n\
261+ top: %1; \n\
262+ left: parent.left; \n\
263+ right: parent.right; \n\
264+ margins: units.gu(1); \n\
265+ topMargin: %2; \n\
266+ } \n\
267+ wrapMode: Text.Wrap; \n\
268+ maximumLineCount: 5; \n\
269+ elide: Text.ElideRight; \n\
270+ text: cardData && cardData["summary"] || ""; \n\
271+ height: text ? implicitHeight : 0; \n\
272+ fontSize: "small"; \n\
273+ color: %3; \n\
274+ }\n';
275+
276+function cardString(template, components) {
277+ var code;
278+ code = 'AbstractButton { \n\
279+ id: root; \n\
280+ property var template; \n\
281+ property var components; \n\
282+ property var cardData; \n\
283+ property real fontScale: 1.0; \n\
284+ property int headerAlignment: Text.AlignLeft; \n\
285+ property int fixedHeaderHeight: -1; \n\
286+ property size fixedArtShapeSize: Qt.size(-1, -1); \n\
287+ readonly property string title: cardData && cardData["title"] || ""; \n\
288+ property bool asynchronous: true; \n\
289+ property bool showHeader: true; \n\
290+ implicitWidth: childrenRect.width; \n';
291+
292+ var hasArt = components["art"] && components["art"]["field"] || false;
293+ var hasSummary = components["summary"] || false;
294+ var artAndSummary = hasArt && hasSummary;
295+ var isHorizontal = template["card-layout"] === "horizontal";
296+ var hasBackground = !isHorizontal && (template["card-background"] || components["background"] || artAndSummary);
297+ var hasTitle = components["title"] || false;
298+ var hasMascot = components["mascot"] || false;
299+ var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
300+ var hasSubtitle = components["subtitle"] || false;
301+ var hasHeaderRow = hasMascot && hasTitle;
302+
303+ if (hasBackground) {
304+ code += kBackgroundLoaderCode;
305+ }
306+
307+ if (hasArt) {
308+ code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
309+
310+ var widthCode, heightCode;
311+ var anchors;
312+ if (isHorizontal) {
313+ anchors = 'left: parent.left';
314+ if (hasMascot || hasTitle) {
315+ widthCode = 'height * artShape.aspect'
316+ heightCode = 'headerHeight';
317+ } else {
318+ // This side of the else is a bit silly, who wants an horizontal layout without mascot and title?
319+ // So we define a "random" height of the image height + 2 gu for the margins
320+ widthCode = 'height * artShape.aspect'
321+ heightCode = 'units.gu(7.625)';
322+ }
323+ } else {
324+ anchors = 'horizontalCenter: parent.horizontalCenter;';
325+ widthCode = 'root.width'
326+ heightCode = 'width / artShape.aspect';
327+ }
328+
329+ code += kArtShapeHolderCode.arg(anchors).arg(widthCode).arg(heightCode);
330+ } else {
331+ code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
332+ }
333+
334+ if (headerAsOverlay) {
335+ code += kOverlayLoaderCode;
336+ }
337+
338+ var headerVerticalAnchors;
339+ if (headerAsOverlay) {
340+ headerVerticalAnchors = 'bottom: artShapeHolder.bottom; \n\
341+ bottomMargin: units.gu(1);\n';
342+ } else {
343+ if (hasArt) {
344+ if (isHorizontal) {
345+ headerVerticalAnchors = 'top: artShapeHolder.top; \n\
346+ topMargin: units.gu(1);\n';
347+ } else {
348+ headerVerticalAnchors = 'top: artShapeHolder.bottom; \n\
349+ topMargin: units.gu(1);\n';
350+ }
351+ } else {
352+ headerVerticalAnchors = 'top: parent.top; \n\
353+ topMargin: units.gu(1);\n';
354+ }
355+ }
356+ var headerLeftAnchor;
357+ var headerLeftAnchorHasMagin = false;
358+ if (isHorizontal && hasArt) {
359+ headerLeftAnchor = 'left: artShapeHolder.right; \n\
360+ leftMargin: units.gu(1);\n';
361+ headerLeftAnchorHasMagin = true;
362+ } else {
363+ headerLeftAnchor = 'left: parent.left;\n';
364+ }
365+
366+ if (hasHeaderRow) {
367+ code += 'readonly property int headerHeight: row.height + row.margins * 2;\n'
368+ } else if (hasMascot) {
369+ code += 'readonly property int headerHeight: mascotImage.height + units.gu(1) * 2;\n'
370+ } else if (hasSubtitle) {
371+ code += 'readonly property int headerHeight: titleLabel.height + titleLabel.anchors.topMargin * 2 + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
372+ } else if (hasTitle) {
373+ code += 'readonly property int headerHeight: titleLabel.height + titleLabel.anchors.topMargin * 2;\n'
374+ } else {
375+ code += 'readonly property int headerHeight: 0;\n'
376+ }
377+
378+ var mascotShapeCode = "";
379+ var mascotCode = "";
380+ if (hasMascot) {
381+ var useMascotShape = !hasBackground && !headerAsOverlay;
382+ var anchors = "";
383+ if (!hasHeaderRow) {
384+ anchors += headerLeftAnchor;
385+ anchors += headerVerticalAnchors;
386+ if (!headerLeftAnchorHasMagin) {
387+ anchors += 'leftMargin: units.gu(1);\n'
388+ }
389+ } else {
390+ anchors = "verticalCenter: parent.verticalCenter;"
391+ }
392+
393+ if (useMascotShape) {
394+ mascotShapeCode = kMascotShapeLoaderCode.arg(anchors);
395+ }
396+
397+ var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
398+ mascotCode = kMascotImageCode.arg(anchors).arg(mascotImageVisible);
399+ }
400+
401+ var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : "grey"';
402+
403+ var titleSubtitleCode = "";
404+ if (hasTitle) {
405+ var color;
406+ if (headerAsOverlay) {
407+ color = '"white"';
408+ } else if (hasSummary) {
409+ color = 'summary.color';
410+ } else if (hasBackground) {
411+ color = summaryColorWithBackground;
412+ } else {
413+ color = '"grey"';
414+ }
415+
416+ var titleAnchors;
417+ var subtitleAnchors;
418+ if (hasMascot && hasSubtitle) {
419+ // Using row + column
420+ titleAnchors = 'left: parent.left; right: parent.right';
421+ subtitleAnchors = titleAnchors;
422+ } else if (hasMascot) {
423+ // Using row + label
424+ titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
425+ } else {
426+ if (headerAsOverlay) {
427+ // Using anchors to the overlay
428+ titleAnchors = 'left: parent.left; \n\
429+ leftMargin: units.gu(1); \n\
430+ right: parent.right; \n\
431+ top: overlayLoader.top; \n\
432+ topMargin: units.gu(1);\n';
433+ } else {
434+ // Using anchors to the mascot/parent
435+ titleAnchors = "right: parent.right;";
436+ titleAnchors += headerLeftAnchor;
437+ titleAnchors += headerVerticalAnchors;
438+ }
439+ subtitleAnchors = 'left: titleLabel.left; \n\
440+ leftMargin: titleLabel.leftMargin; \n\
441+ right: titleLabel.right; \n\
442+ top: titleLabel.bottom; \n\
443+ topMargin: units.dp(2);\n';
444+ }
445+
446+ var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
447+ var titleCode = kTitleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
448+ var subtitleCode = "";
449+ if (hasSubtitle) {
450+ subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
451+ }
452+
453+ if (hasMascot && hasSubtitle) {
454+ // If using row + column wrap the code in the column
455+ titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
456+ } else {
457+ titleSubtitleCode = titleCode + subtitleCode;
458+ }
459+ }
460+
461+ if (hasHeaderRow) {
462+ if (mascotShapeCode != "") {
463+ code += kHeaderRow3Code.arg(headerVerticalAnchors + headerLeftAnchor).arg(mascotShapeCode).arg(mascotCode).arg(titleSubtitleCode);
464+ } else {
465+ code += kHeaderRow2Code.arg(headerVerticalAnchors + headerLeftAnchor).arg(mascotCode).arg(titleSubtitleCode);
466+ }
467+ } else {
468+ code += mascotShapeCode + mascotCode + titleSubtitleCode;
469+ }
470+
471+ if (hasSummary) {
472+ var summaryTopAnchor;
473+ if (isHorizontal && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
474+ else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
475+ else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
476+ else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
477+ else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
478+ else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";
479+ else if (hasArt) summaryTopAnchor = "artShapeHolder.bottom";
480+ else summaryTopAnchor = "parent.top";
481+
482+ var color;
483+ if (hasBackground) {
484+ color = summaryColorWithBackground;
485+ } else {
486+ color = '"grey"';
487+ }
488+
489+ var summaryTopMargin = (hasMascot || hasSubtitle ? 'anchors.margins' : '0');
490+
491+ code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(color);
492+ }
493+
494+ if (hasSummary) {
495+ code += 'implicitHeight: summary.y + summary.height + (summary.text ? units.gu(1) : 0);\n';
496+ } else if (hasHeaderRow) {
497+ code += 'implicitHeight: row.y + row.height + units.gu(1);\n';
498+ } else if (hasMascot) {
499+ code += 'implicitHeight: mascotImage.y + mascotImage.height;\n';
500+ } else if (hasSubtitle) {
501+ code += 'implicitHeight: subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
502+ } else if (hasTitle) {
503+ code += 'implicitHeight: titleLabel.y + titleLabel.height + units.gu(1);\n';
504+ }
505+ // Close the AbstractButton
506+ code += '}\n';
507+
508+ return code;
509+}
510+
511+function createCardComponent(parent, template, components) {
512+ var imports = 'import QtQuick 2.2; \n\
513+ import Ubuntu.Components 0.1; \n\
514+ import Ubuntu.Thumbnailer 0.1;\n';
515+ var card = cardString(template, components);
516+ var code = imports + 'Component {\n' + card + '}\n';
517+ return Qt.createQmlObject(code, parent, "createCardComponent");
518+}