@@ -28,11 +28,12 @@ var kBackgroundLoaderCode = 'Loader {\n\
2828 sourceComponent: UbuntuShape { \n\
2929 objectName: "background"; \n\
3030 radius: "medium"; \n\
31− color: getColor(0) || "white"; \n\
32− gradientColor: getColor(1) || color; \n\
31+ backgroundColor: getColor(0) || "white"; \n\
32+ secondaryBackgroundColor: getColor(1) || backgroundColor; \n\
33+ backgroundMode: UbuntuShape.VerticalGradient; \n\
3334 anchors.fill: parent; \n\
34− image: backgroundImage.source ? backgroundImage : null; \n\
35− property real luminance: Style.luminance(color); \n\
35+ source: backgroundImage.source ? backgroundImage : null; \n\
36+ property real luminance: Style.luminance(backgroundColor); \n\
3637 property Image backgroundImage: Image { \n\
3738 objectName: "backgroundImage"; \n\
3839 source: { \n\
@@ -52,7 +53,7 @@ var kBackgroundLoaderCode = 'Loader {\n\
5253// %1 is used as anchors of artShapeHolder
5354// %2 is used as image width
5455// %3 is used as image height
55−var kArtShapeHolderCode = 'Item { \n\
56+var kArtShapeHolderCode = 'Item { \n\
5657 id: artShapeHolder; \n\
5758 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
5859 width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width; \n\
@@ -66,10 +67,9 @@ var kArtShapeHolderCode = 'Item { \n\
6667 sourceComponent: Item { \n\
6768 id: artShape; \n\
6869 objectName: "artShape"; \n\
69− property bool doShapeItem: components["art"]["conciergeMode"] !== true; \n\
70+ readonly property bool doShapeItem: components["art"]["conciergeMode"] !== true; \n\
7071 visible: image.status == Image.Ready; \n\
7172 readonly property alias image: artImage; \n\
72− property alias borderSource: artShapeShape.borderSource; \n\
7373 ShaderEffectSource { \n\
7474 id: artShapeSource; \n\
7575 sourceItem: artImage; \n\
@@ -78,16 +78,17 @@ var kArtShapeHolderCode = 'Item { \n\
7878 height: 1; \n\
7979 hideSource: doShapeItem; \n\
8080 } \n\
81− Shape { \n\
81+ UbuntuShape { \n\
8282 id: artShapeShape; \n\
83− image: artShapeSource; \n\
83+ source: artShapeSource; \n\
8484 anchors.fill: parent; \n\
8585 visible: doShapeItem; \n\
8686 radius: "medium"; \n\
87+ aspect: root.artShapeStyle === "inset" ? UbuntuShape.Inset : UbuntuShape.Flat; \n\
8788 } \n\
8889 readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\
8990 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\
9192 Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); } \n\
9293 function updateWidthHeightBindings() { \n\
9394 if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) { \n\
@@ -112,44 +113,18 @@ var kArtShapeHolderCode = 'Item { \n\
112113
113114var kOverlayLoaderCode = 'Loader { \n\
114115 id: overlayLoader; \n\
115− anchors { \n\
116− left: artShapeHolder.left; \n\
117− right: artShapeHolder.right; \n\
118− bottom: artShapeHolder.bottom; \n\
119− } \n\
116+ readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
117+ anchors.fill: artShapeHolder; \n\
120118 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
121119 asynchronous: root.asynchronous; \n\
122120 visible: showHeader && status == Loader.Ready; \n\
123− sourceComponent: ShaderEffect { \n\
121+ sourceComponent: UbuntuShapeOverlay { \n\
124122 id: overlay; \n\
125− height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
126123 property real luminance: Style.luminance(overlayColor); \n\
127− property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
128− property var source: ShaderEffectSource { \n\
129− id: shaderSource; \n\
130− sourceItem: artShapeLoader.item; \n\
131− onVisibleChanged: if (visible) scheduleUpdate(); \n\
132− live: false; \n\
133− sourceRect: Qt.rect(0, artShapeLoader.height - overlay.height, artShapeLoader.width, overlay.height); \n\
134− } \n\
135− vertexShader: " \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\
140− void main() { \n\
141− coord = qt_MultiTexCoord0; \n\
142− gl_Position = qt_Matrix * qt_Vertex; \n\
143− }"; \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\
149− void main() { \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\
152− }"; \n\
124+ aspect: UbuntuShape.Flat; \n\
125+ radius: "medium"; \n\
126+ overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
127+ overlayRect: Qt.rect(0, 1 - overlayLoader.overlayHeight / height, 1, 1); \n\
153128 } \n\
154129 }\n';
155130
@@ -325,7 +300,7 @@ function cardString(template, components) {
325300 id: root; \n\
326301 property var components; \n\
327302 property var cardData; \n\
328− property var artShapeBorderSource: undefined; \n\
303+ property string artShapeStyle: "inset"; \n\
329304 property real fontScale: 1.0; \n\
330305 property var scopeStyle: null; \n\
331306 property int titleAlignment: Text.AlignLeft; \n\
@@ -368,7 +343,6 @@ function cardString(template, components) {
368343 }
369344
370345 if (hasArt) {
371− code += 'onArtShapeBorderSourceChanged: { if (artShapeBorderSource !== undefined && artShapeLoader.item) artShapeLoader.item.borderSource = artShapeBorderSource; } \n';
372346 code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
373347
374348 var widthCode, heightCode;
@@ -480,20 +454,20 @@ function cardString(template, components) {
480454 }
481455 }
482456
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")';
484458
485459 var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
486460 var titleSubtitleCode = '';
487461 if (hasTitle) {
488462 var titleColor;
489463 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")';
491465 } else if (hasSummary) {
492466 titleColor = 'summary.color';
493467 } else if (hasBackground) {
494468 titleColor = summaryColorWithBackground;
495469 } else {
496− titleColor = 'root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText';
470+ titleColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
497471 }
498472
499473 var titleAnchors;
@@ -555,7 +529,7 @@ function cardString(template, components) {
555529 titleAnchors += 'left: parent.left; \n\
556530 leftMargin: units.gu(1); \n\
557531 top: overlayLoader.top; \n\
558− topMargin: units.gu(1);\n';
532+ topMargin: units.gu(1) + overlayLoader.height - overlayLoader.overlayHeight; \n';
559533 } else {
560534 // Using anchors to the mascot/parent
561535 titleAnchors = titleRightAnchor;
@@ -649,7 +623,7 @@ function cardString(template, components) {
649623 if (hasBackground) {
650624 summaryColor = summaryColorWithBackground;
651625 } else {
652− summaryColor = 'root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText';
626+ summaryColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
653627 }
654628
655629 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ? 'anchors.margins' : '0');
@@ -698,7 +672,7 @@ function cardString(template, components) {
698672
699673function createCardComponent(parent, template, components) {
700674 var imports = 'import QtQuick 2.2; \n\
701− import Ubuntu.Components 1.1; \n\
675+ import Ubuntu.Components 1.3; \n\
702676 import Ubuntu.Settings.Components 0.1; \n\
703677 import Dash 0.1;\n\
704678 import Utils 0.1;\n';