@@ -28,11 +28,12 @@ var kBackgroundLoaderCode = 'Loader {\n\
28 sourceComponent: UbuntuShape { \n\
28 sourceComponent: UbuntuShape { \n\
29 objectName: "background"; \n\
29 objectName: "background"; \n\
30 radius: "medium"; \n\
30 radius: "medium"; \n\
31− color: getColor(0) || "white"; \n\
31+ backgroundColor: getColor(0) || "white"; \n\
32− gradientColor: getColor(1) || color; \n\
32+ secondaryBackgroundColor: getColor(1) || backgroundColor; \n\
33+ backgroundMode: UbuntuShape.VerticalGradient; \n\
33 anchors.fill: parent; \n\
34 anchors.fill: parent; \n\
34− image: backgroundImage.source ? backgroundImage : null; \n\
35+ source: backgroundImage.source ? backgroundImage : null; \n\
35− property real luminance: Style.luminance(color); \n\
36+ property real luminance: Style.luminance(backgroundColor); \n\
36 property Image backgroundImage: Image { \n\
37 property Image backgroundImage: Image { \n\
37 objectName: "backgroundImage"; \n\
38 objectName: "backgroundImage"; \n\
38 source: { \n\
39 source: { \n\
@@ -52,7 +53,7 @@ var kBackgroundLoaderCode = 'Loader {\n\
52// %1 is used as anchors of artShapeHolder
53// %1 is used as anchors of artShapeHolder
53// %2 is used as image width
54// %2 is used as image width
54// %3 is used as image height
55// %3 is used as image height
55−var kArtShapeHolderCode = 'Item { \n\
56+var kArtShapeHolderCode = 'Item { \n\
56 id: artShapeHolder; \n\
57 id: artShapeHolder; \n\
57 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
58 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
58 width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width; \n\
59 width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width; \n\
@@ -66,10 +67,9 @@ var kArtShapeHolderCode = 'Item { \n\
66 sourceComponent: Item { \n\
67 sourceComponent: Item { \n\
67 id: artShape; \n\
68 id: artShape; \n\
68 objectName: "artShape"; \n\
69 objectName: "artShape"; \n\
69− property bool doShapeItem: components["art"]["conciergeMode"] !== true; \n\
70+ readonly property bool doShapeItem: components["art"]["conciergeMode"] !== true; \n\
70 visible: image.status == Image.Ready; \n\
71 visible: image.status == Image.Ready; \n\
71 readonly property alias image: artImage; \n\
72 readonly property alias image: artImage; \n\
72− property alias borderSource: artShapeShape.borderSource; \n\
73 ShaderEffectSource { \n\
73 ShaderEffectSource { \n\
74 id: artShapeSource; \n\
74 id: artShapeSource; \n\
75 sourceItem: artImage; \n\
75 sourceItem: artImage; \n\
@@ -78,16 +78,17 @@ var kArtShapeHolderCode = 'Item { \n\
78 height: 1; \n\
78 height: 1; \n\
79 hideSource: doShapeItem; \n\
79 hideSource: doShapeItem; \n\
81− Shape { \n\
81+ UbuntuShape { \n\
82 id: artShapeShape; \n\
82 id: artShapeShape; \n\
83− image: artShapeSource; \n\
83+ source: artShapeSource; \n\
84 anchors.fill: parent; \n\
84 anchors.fill: parent; \n\
85 visible: doShapeItem; \n\
85 visible: doShapeItem; \n\
86 radius: "medium"; \n\
86 radius: "medium"; \n\
87+ aspect: root.artShapeStyle === "inset" ? UbuntuShape.Inset : UbuntuShape.Flat; \n\
88 readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\
89 readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\
89 readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : components !== undefined ? components["art"]["aspect-ratio"] : 1; \n\
90 readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : components !== undefined ? components["art"]["aspect-ratio"] : 1; \n\
90− Component.onCompleted: { updateWidthHeightBindings(); if (artShapeBorderSource !== undefined) borderSource = artShapeBorderSource; } \n\
91+ Component.onCompleted: { updateWidthHeightBindings(); } \n\
91 Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); } \n\
92 Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); } \n\
92 function updateWidthHeightBindings() { \n\
93 function updateWidthHeightBindings() { \n\
93 if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) { \n\
94 if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) { \n\
@@ -112,44 +113,18 @@ var kArtShapeHolderCode = 'Item { \n\
113var kOverlayLoaderCode = 'Loader { \n\
114var kOverlayLoaderCode = 'Loader { \n\
114 id: overlayLoader; \n\
115 id: overlayLoader; \n\
115− anchors { \n\
116+ readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
116− left: artShapeHolder.left; \n\
117− right: artShapeHolder.right; \n\
117+ anchors.fill: artShapeHolder; \n\
118− bottom: artShapeHolder.bottom; \n\
120 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
118 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
121 asynchronous: root.asynchronous; \n\
119 asynchronous: root.asynchronous; \n\
122 visible: showHeader && status == Loader.Ready; \n\
120 visible: showHeader && status == Loader.Ready; \n\
123− sourceComponent: ShaderEffect { \n\
121+ sourceComponent: UbuntuShapeOverlay { \n\
124 id: overlay; \n\
122 id: overlay; \n\
125− height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
126 property real luminance: Style.luminance(overlayColor); \n\
123 property real luminance: Style.luminance(overlayColor); \n\
124+ aspect: UbuntuShape.Flat; \n\
125+ radius: "medium"; \n\
127− property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
126+ overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
128− property var source: ShaderEffectSource { \n\
127+ overlayRect: Qt.rect(0, 1 - overlayLoader.overlayHeight / height, 1, 1); \n\
129− id: shaderSource; \n\
130− sourceItem: artShapeLoader.item; \n\
131− onVisibleChanged: if (visible) scheduleUpdate(); \n\
133− sourceRect: Qt.rect(0, artShapeLoader.height - overlay.height, artShapeLoader.width, overlay.height); \n\
136− uniform highp mat4 qt_Matrix; \n\
137− attribute highp vec4 qt_Vertex; \n\
138− attribute highp vec2 qt_MultiTexCoord0; \n\
139− varying highp vec2 coord; \n\
141− coord = qt_MultiTexCoord0; \n\
142− gl_Position = qt_Matrix * qt_Vertex; \n\
144− fragmentShader: " \n\
145− varying highp vec2 coord; \n\
146− uniform sampler2D source; \n\
147− uniform lowp float qt_Opacity; \n\
148− uniform highp vec4 overlayColor; \n\
150− lowp vec4 tex = texture2D(source, coord); \n\
151− gl_FragColor = vec4(overlayColor.r, overlayColor.g, overlayColor.b, 1) * qt_Opacity * overlayColor.a * tex.a; \n\
@@ -325,7 +300,7 @@ function cardString(template, components) {
325 id: root; \n\
300 id: root; \n\
326 property var components; \n\
301 property var components; \n\
327 property var cardData; \n\
302 property var cardData; \n\
328− property var artShapeBorderSource: undefined; \n\
303+ property string artShapeStyle: "inset"; \n\
329 property real fontScale: 1.0; \n\
304 property real fontScale: 1.0; \n\
330 property var scopeStyle: null; \n\
305 property var scopeStyle: null; \n\
331 property int titleAlignment: Text.AlignLeft; \n\
306 property int titleAlignment: Text.AlignLeft; \n\
@@ -368,7 +343,6 @@ function cardString(template, components) {
370 if (hasArt) {
345 if (hasArt) {
371− code += 'onArtShapeBorderSourceChanged: { if (artShapeBorderSource !== undefined && artShapeLoader.item) artShapeLoader.item.borderSource = artShapeBorderSource; } \n';
372 code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
346 code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
374 var widthCode, heightCode;
348 var widthCode, heightCode;
@@ -480,20 +454,20 @@ function cardString(template, components) {
483− var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white")';
457+ var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white")';
485 var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
459 var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
486 var titleSubtitleCode = '';
460 var titleSubtitleCode = '';
487 if (hasTitle) {
461 if (hasTitle) {
488 var titleColor;
462 var titleColor;
489 if (headerAsOverlay) {
463 if (headerAsOverlay) {
490− titleColor = 'root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white")';
464+ titleColor = 'root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white")';
491 } else if (hasSummary) {
465 } else if (hasSummary) {
492 titleColor = 'summary.color';
466 titleColor = 'summary.color';
493 } else if (hasBackground) {
467 } else if (hasBackground) {
494 titleColor = summaryColorWithBackground;
468 titleColor = summaryColorWithBackground;
496− titleColor = 'root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText';
470+ titleColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
499 var titleAnchors;
473 var titleAnchors;
@@ -555,7 +529,7 @@ function cardString(template, components) {
555 titleAnchors += 'left: parent.left; \n\
529 titleAnchors += 'left: parent.left; \n\
556 leftMargin: units.gu(1); \n\
530 leftMargin: units.gu(1); \n\
557 top: overlayLoader.top; \n\
531 top: overlayLoader.top; \n\
558− topMargin: units.gu(1);\n';
532+ topMargin: units.gu(1) + overlayLoader.height - overlayLoader.overlayHeight; \n';
560 // Using anchors to the mascot/parent
534 // Using anchors to the mascot/parent
561 titleAnchors = titleRightAnchor;
535 titleAnchors = titleRightAnchor;
@@ -649,7 +623,7 @@ function cardString(template, components) {
649 if (hasBackground) {
623 if (hasBackground) {
650 summaryColor = summaryColorWithBackground;
624 summaryColor = summaryColorWithBackground;
652− summaryColor = 'root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText';
626+ summaryColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
655 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ? 'anchors.margins' : '0');
629 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ? 'anchors.margins' : '0');
@@ -698,7 +672,7 @@ function cardString(template, components) {
699function createCardComponent(parent, template, components) {
673function createCardComponent(parent, template, components) {
700 var imports = 'import QtQuick 2.2; \n\
674 var imports = 'import QtQuick 2.2; \n\
701− import Ubuntu.Components 1.1; \n\
675+ import Ubuntu.Components 1.3; \n\
702 import Ubuntu.Settings.Components 0.1; \n\
676 import Ubuntu.Settings.Components 0.1; \n\
703 import Dash 0.1;\n\
677 import Dash 0.1;\n\
704 import Utils 0.1;\n';
678 import Utils 0.1;\n';