23 var kBackgroundLoaderCode =
'Loader {\n\ 24 id: backgroundLoader; \n\ 25 objectName: "backgroundLoader"; \n\ 26 anchors.fill: parent; \n\ 28 visible: status == Loader.Ready; \n\ 29 sourceComponent: UbuntuShape { \n\ 30 objectName: "background"; \n\ 33 switch (root.backgroundShapeStyle) { \n\ 34 case "inset": return UbuntuShape.Inset; \n\ 35 case "shadow": return UbuntuShape.DropShadow; \n\ 37 case "flat": return UbuntuShape.Flat; \n\ 40 backgroundColor: getColor(0) || "white"; \n\ 41 secondaryBackgroundColor: getColor(1) || backgroundColor; \n\ 42 backgroundMode: UbuntuShape.VerticalGradient; \n\ 43 anchors.fill: parent; \n\ 44 source: backgroundImage.source ? backgroundImage : null; \n\ 45 property real luminance: Style.luminance(backgroundColor); \n\ 46 property Image backgroundImage: Image { \n\ 47 objectName: "backgroundImage"; \n\ 49 if (cardData && typeof cardData["background"] === "string") return cardData["background"]; \n\ 53 function getColor(index) { \n\ 54 if (cardData && typeof cardData["background"] === "object" \n\ 55 && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) { \n\ 56 return cardData["background"]["elements"][index]; \n\ 57 } else return index === 0 ? %1 : %2; \n\ 63 var kArtUbuntuShapeCode =
'UbuntuShape { \n\ 64 anchors.fill: parent; \n\ 66 sourceFillMode: UbuntuShape.PreserveAspectCrop; \n\ 71 var kArtProportionalShapeCode =
'ProportionalShape { \n\ 72 anchors.fill: parent; \n\ 74 aspect: UbuntuShape.DropShadow; \n\ 86 var kArtShapeHolderCode =
'Item { \n\ 87 id: artShapeHolder; \n\ 88 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\ 89 width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width; \n\ 92 id: artShapeLoader; \n\ 93 objectName: "artShapeLoader"; \n\ 94 readonly property string cardArt: cardData && cardData["art"] || %9; \n\ 95 onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\ 96 active: cardArt != ""; \n\ 98 visible: status == Loader.Ready; \n\ 99 sourceComponent: Item { \n\ 101 objectName: "artShape"; \n\ 102 visible: image.status == Image.Ready; \n\ 103 readonly property alias image: artImage; \n\ 105 readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\ 106 readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : %5; \n\ 107 Component.onCompleted: { updateWidthHeightBindings(); } \n\ 108 Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); } \n\ 109 function updateWidthHeightBindings() { \n\ 110 if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) { \n\ 111 width = root.fixedArtShapeSize.width; \n\ 112 height = root.fixedArtShapeSize.height; \n\ 114 width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width }); \n\ 115 height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height }); \n\ 118 CroppedImageMinimumSourceSize { \n\ 120 objectName: "artImage"; \n\ 121 source: artShapeLoader.cardArt; \n\ 122 asynchronous: %6; \n\ 136 var kAudioButtonCode =
'AbstractButton { \n\ 138 anchors.fill: %1; \n\ 141 readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\ 143 anchors.fill: parent; \n\ 144 visible: parent.pressed; \n\ 145 radius: "medium"; \n\ 148 color: Qt.rgba(0, 0, 0, 0.5); \n\ 149 anchors.centerIn: parent; \n\ 150 width: parent.width * 0.5; \n\ 152 radius: width / 2; \n\ 155 anchors.centerIn: parent; \n\ 156 width: parent.width * 0.3; \n\ 159 name: DashAudioPlayer.playing && AudioUrlComparer.compare(parent.source, DashAudioPlayer.currentSource) ? "media-playback-pause" : "media-playback-start"; \n\ 161 asynchronous: %4; \n\ 164 if (AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)) { \n\ 165 if (DashAudioPlayer.playing) { \n\ 166 DashAudioPlayer.pause(); \n\ 168 DashAudioPlayer.play(); \n\ 171 var playlist = (cardData["quickPreviewData"] && cardData["quickPreviewData"]["playlist"]) || null; \n\ 172 DashAudioPlayer.playSource(source, playlist); \n\ 175 onPressAndHold: { \n\ 176 root.pressAndHold(); \n\ 182 var kOverlayLoaderCode =
'Loader { \n\ 183 id: overlayLoader; \n\ 184 readonly property real overlayHeight: %2 + units.gu(2); \n\ 185 anchors.fill: artShapeHolder; \n\ 186 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\ 187 asynchronous: %1; \n\ 188 visible: showHeader && status == Loader.Ready; \n\ 189 sourceComponent: UbuntuShapeOverlay { \n\ 191 property real luminance: Style.luminance(overlayColor); \n\ 192 aspect: UbuntuShape.Flat; \n\ 193 radius: "medium"; \n\ 194 overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\ 195 overlayRect: Qt.rect(0, 1 - overlayLoader.overlayHeight / height, 1, 1); \n\ 200 function kHeaderRowCodeGenerator() {
201 var kHeaderRowCodeTemplate =
'Row { \n\ 203 objectName: "outerRow"; \n\ 204 property real margins: units.gu(1); \n\ 205 spacing: margins; \n\ 208 anchors.right: parent.right; \n\ 209 anchors.margins: margins; \n\ 210 anchors.rightMargin: 0; \n\ 215 var args = Array.prototype.slice.call(arguments);
216 var isCardTool = args.shift();
217 var heightCode = isCardTool ?
"" :
"height: root.fixedHeaderHeight; \n";
218 var code = kHeaderRowCodeTemplate.arg(args.shift()).arg(heightCode).arg(args.join(
',\n'));
223 function kHeaderContainerCodeGenerator() {
224 var headerContainerCodeTemplate =
'Item { \n\ 225 id: headerTitleContainer; \n\ 227 width: parent.width - x; \n\ 228 implicitHeight: %2; \n\ 233 var args = Array.prototype.slice.call(arguments);
234 var code = headerContainerCodeTemplate.arg(args.shift()).arg(args.shift()).arg(args.join(
',\n'));
240 var kMascotShapeLoaderCode =
'Loader { \n\ 241 id: mascotShapeLoader; \n\ 242 objectName: "mascotShapeLoader"; \n\ 243 asynchronous: %2; \n\ 244 active: mascotImage.status === Image.Ready; \n\ 245 visible: showHeader && active && status == Loader.Ready; \n\ 246 width: units.gu(6); \n\ 247 height: units.gu(5.625); \n\ 248 sourceComponent: UbuntuShape { image: mascotImage } \n\ 256 var kMascotImageCode =
'CroppedImageMinimumSourceSize { \n\ 258 objectName: "mascotImage"; \n\ 260 source: cardData && cardData["mascot"] || %4; \n\ 261 width: units.gu(6); \n\ 262 height: units.gu(5.625); \n\ 263 horizontalAlignment: Image.AlignHCenter; \n\ 264 verticalAlignment: Image.AlignVCenter; \n\ 274 var kTitleLabelCode =
'Label { \n\ 276 objectName: "titleLabel"; \n\ 278 elide: Text.ElideRight; \n\ 279 fontSize: "small"; \n\ 280 wrapMode: Text.Wrap; \n\ 281 maximumLineCount: 2; \n\ 282 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\ 284 visible: showHeader %3; \n\ 286 text: root.title; \n\ 287 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; \n\ 288 horizontalAlignment: %5; \n\ 295 var kEmblemIconCode =
'Icon { \n\ 297 objectName: "emblemIcon"; \n\ 299 bottom: titleLabel.baseline; \n\ 300 right: parent.right; \n\ 303 source: cardData && cardData["emblem"] || ""; \n\ 305 height: source != "" ? titleLabel.font.pixelSize : 0; \n\ 306 width: implicitWidth > 0 && implicitHeight > 0 ? (implicitWidth / implicitHeight * height) : implicitWidth; \n\ 310 var kTouchdownCode =
'UbuntuShape { \n\ 312 objectName: "touchdown"; \n\ 314 visible: root.pressed; \n\ 315 radius: "medium"; \n\ 316 borderSource: "radius_pressed.sci" \n\ 321 var kSubtitleLabelCode =
'Label { \n\ 322 id: subtitleLabel; \n\ 323 objectName: "subtitleLabel"; \n\ 325 anchors.topMargin: units.dp(2); \n\ 326 elide: Text.ElideRight; \n\ 327 maximumLineCount: 1; \n\ 328 fontSize: "x-small"; \n\ 329 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\ 331 visible: titleLabel.visible && titleLabel.text; \n\ 332 text: cardData && cardData["subtitle"] || ""; \n\ 333 font.weight: Font.Light; \n\ 338 var kAttributesRowCode =
'CardAttributes { \n\ 339 id: attributesRow; \n\ 340 objectName: "attributesRow"; \n\ 343 fontScale: root.fontScale; \n\ 344 model: cardData && cardData["attributes"]; \n\ 349 var kSocialActionsRowCode =
'CardSocialActions { \n\ 350 id: socialActionsRow; \n\ 351 objectName: "socialActionsRow"; \n\ 354 model: cardData && cardData["socialActions"]; \n\ 355 onClicked: root.action(actionId); \n\ 361 var kSummaryLabelCode =
'Label { \n\ 363 objectName: "summaryLabel"; \n\ 366 left: parent.left; \n\ 367 right: parent.right; \n\ 368 margins: units.gu(1); \n\ 371 wrapMode: Text.Wrap; \n\ 372 maximumLineCount: 5; \n\ 373 elide: Text.ElideRight; \n\ 374 text: cardData && cardData["summary"] || ""; \n\ 375 height: text ? implicitHeight : 0; \n\ 376 fontSize: "small"; \n\ 383 var kAudioProgressBarCode =
'CardAudioProgress { \n\ 384 id: audioProgressBar; \n\ 385 duration: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["duration"]) || 0; \n\ 386 source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\ 390 right: parent.right; \n\ 391 margins: units.gu(1); \n\ 396 function sanitizeColor(colorString) {
397 if (colorString !== undefined) {
398 if (colorString.match(/^[#a-z0-9]*$/i) === null) {
408 function cardString(
template, components, isCardTool, artShapeStyle) {
411 var templateInteractive = (
template == null ?
true : (
template[
"non-interactive"] !== undefined ? !
template[
"non-interactive"] :
true)) ?
"true" :
"false";
413 code =
'AbstractButton { \n\ 415 property var cardData; \n\ 416 property string backgroundShapeStyle: "inset"; \n\ 417 property real fontScale: 1.0; \n\ 418 property var scopeStyle: null; \n\ 420 property size fixedArtShapeSize: Qt.size(-1, -1); \n\ 421 readonly property string title: cardData && cardData["title"] || ""; \n\ 422 property bool showHeader: true; \n\ 423 implicitWidth: childrenRect.width; \n\ 425 \n'.arg(templateInteractive);
427 code = code.arg(isCardTool ?
"" :
"property int fixedHeaderHeight: -1; \n");
429 var hasArt = components[
"art"] && components[
"art"][
"field"] ||
false;
430 var hasSummary = components[
"summary"] ||
false;
431 var isConciergeMode = components[
"art"] && components[
"art"][
"conciergeMode"] ||
false;
432 var artAndSummary = hasArt && hasSummary && !isConciergeMode;
433 var isHorizontal =
template[
"card-layout"] ===
"horizontal";
434 var hasBackground = (!isHorizontal && (
template[
"card-background"] || components[
"background"] || artAndSummary)) ||
435 (hasSummary && (
template[
"card-background"] || components[
"background"]));
436 var hasTitle = components[
"title"] ||
false;
437 var hasMascot = components[
"mascot"] ||
false;
438 var hasEmblem = components[
"emblem"] && !(hasMascot &&
template[
"card-size"] ===
"small") ||
false;
439 var headerAsOverlay = hasArt &&
template &&
template[
"overlay"] ===
true && (hasTitle || hasMascot);
440 var hasSubtitle = hasTitle && components[
"subtitle"] ||
false;
441 var hasHeaderRow = hasMascot && hasTitle;
442 var hasAttributes = hasTitle && components[
"attributes"] && components[
"attributes"][
"field"] ||
false;
443 var hasSocialActions = hasTitle && components[
"social-actions"] ||
false;
444 var isAudio =
template[
"quick-preview-type"] ===
"audio";
445 var asynchronous = isCardTool ?
"false" :
"true";
447 code +=
'signal action(var actionId);\n';
452 if (hasSummary) isAudio =
false;
453 if (!isHorizontal) isAudio =
false;
454 if (hasMascot) isAudio =
false;
455 if (hasEmblem) isAudio =
false;
456 if (headerAsOverlay) isAudio =
false;
457 if (hasAttributes) isAudio =
false;
461 var templateCardBackground;
462 if (
template && typeof
template[
"card-background"] ===
"string") {
463 templateCardBackground =
'decodeURI("' + encodeURI(
template[
"card-background"]) +
'")';
465 templateCardBackground =
'""';
468 var backgroundElements0;
469 var backgroundElements1;
470 if (
template && typeof
template[
"card-background"] ===
"object" && (
template[
"card-background"][
"type"] ===
"color" ||
template[
"card-background"][
"type"] ===
"gradient")) {
471 var element0 = sanitizeColor(
template[
"card-background"][
"elements"][0]);
472 var element1 = sanitizeColor(
template[
"card-background"][
"elements"][1]);
473 if (element0 !== undefined) {
474 backgroundElements0 =
'"%1"'.arg(element0);
476 if (element1 !== undefined) {
477 backgroundElements1 =
'"%1"'.arg(element1);
480 code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(asynchronous).arg(templateCardBackground);
484 code +=
'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
486 var widthCode, heightCode;
489 artAnchors =
'left: parent.left';
490 if (hasMascot || hasTitle) {
491 widthCode =
'height * artShape.aspect' 492 heightCode =
'headerHeight + 2 * units.gu(1)';
496 widthCode =
'height * artShape.aspect' 497 heightCode =
'units.gu(7.625)';
500 artAnchors =
'horizontalCenter: parent.horizontalCenter;';
501 widthCode =
'root.width' 502 heightCode =
'width / artShape.aspect';
505 var aspectRatio = components[
"art"] && components[
"art"][
"aspect-ratio"] || 1;
506 if (isNaN(aspectRatio)) {
509 var fallback = !isCardTool && components[
"art"] && components[
"art"][
"fallback"] ||
"";
510 fallback = encodeURI(fallback);
511 var fallbackStatusCode =
"";
512 var fallbackURICode =
'""';
513 if (fallback !==
"") {
516 fallbackStatusCode +=
'onStatusChanged: if (status === Image.Error) source = %9;';
517 fallbackURICode =
'decodeURI("%1")'.arg(fallback);
519 var artShapeHolderShapeCode;
520 if (!isConciergeMode) {
521 if (artShapeStyle ===
"icon") {
522 artShapeHolderShapeCode = kArtProportionalShapeCode;
524 var artShapeHolderShapeAspect;
525 switch (artShapeStyle) {
526 case "inset": artShapeHolderShapeAspect =
"UbuntuShape.Inset";
break;
527 case "shadow": artShapeHolderShapeAspect =
"UbuntuShape.DropShadow";
break;
529 case "flat": artShapeHolderShapeAspect =
"UbuntuShape.Flat";
break;
531 artShapeHolderShapeCode = kArtUbuntuShapeCode.arg(artShapeHolderShapeAspect);
534 artShapeHolderShapeCode =
"";
536 code += kArtShapeHolderCode.arg(artAnchors)
539 .arg(isConciergeMode ?
"true" :
"false")
542 .arg(artShapeHolderShapeCode)
543 .arg(fallbackStatusCode)
544 .arg(fallbackURICode);
546 code +=
'readonly property size artShapeSize: Qt.size(-1, -1);\n' 549 if (headerAsOverlay) {
550 var headerHeightCode = isCardTool ?
"headerHeight" :
"root.fixedHeaderHeight";
551 code += kOverlayLoaderCode.arg(asynchronous).arg(headerHeightCode);
554 var headerVerticalAnchors;
555 if (headerAsOverlay) {
556 headerVerticalAnchors =
'bottom: artShapeHolder.bottom; \n\ 557 bottomMargin: units.gu(1);\n';
561 headerVerticalAnchors =
'top: artShapeHolder.top; \n\ 562 topMargin: units.gu(1);\n';
564 headerVerticalAnchors =
'top: artShapeHolder.bottom; \n\ 565 topMargin: units.gu(1);\n';
568 headerVerticalAnchors =
'top: parent.top; \n\ 569 topMargin: units.gu(1);\n';
573 var headerLeftAnchor;
574 var headerLeftAnchorHasMargin =
false;
575 if (isHorizontal && hasArt) {
576 headerLeftAnchor =
'left: artShapeHolder.right; \n\ 577 leftMargin: units.gu(1);\n';
578 headerLeftAnchorHasMargin =
true;
579 }
else if (isHorizontal && isAudio) {
580 headerLeftAnchor =
'left: audioButton.right; \n\ 581 leftMargin: units.gu(1);\n';
582 headerLeftAnchorHasMargin =
true;
584 headerLeftAnchor =
'left: parent.left;\n';
587 var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary && !isAudio;
590 code +=
'readonly property int headerHeight: row.height;\n' 591 }
else if (hasMascot) {
592 code +=
'readonly property int headerHeight: mascotImage.height;\n' 593 }
else if (hasAttributes) {
594 if (hasTitle && hasSubtitle) {
595 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + attributesRow.height + attributesRow.anchors.topMargin;\n' 596 }
else if (hasTitle) {
597 code +=
'readonly property int headerHeight: titleLabel.height + attributesRow.height + attributesRow.anchors.topMargin;\n' 599 code +=
'readonly property int headerHeight: attributesRow.height;\n' 601 }
else if (isAudio) {
603 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n' 604 }
else if (hasTitle) {
605 code +=
'readonly property int headerHeight: titleLabel.height + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n' 607 code +=
'readonly property int headerHeight: audioProgressBar.height;\n' 609 }
else if (hasSubtitle) {
610 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n' 611 }
else if (hasTitle) {
612 code +=
'readonly property int headerHeight: titleLabel.height;\n' 614 code +=
'readonly property int headerHeight: 0;\n' 617 var mascotShapeCode =
'';
620 var useMascotShape = !hasBackground && !headerAsOverlay;
621 var mascotAnchors =
'';
623 mascotAnchors += headerLeftAnchor;
624 mascotAnchors += headerVerticalAnchors;
625 if (!headerLeftAnchorHasMargin) {
626 mascotAnchors +=
'leftMargin: units.gu(1);\n' 629 mascotAnchors =
'verticalCenter: parent.verticalCenter;' 632 if (useMascotShape) {
633 mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors).arg(asynchronous);
636 var mascotImageVisible = useMascotShape ?
'false' :
'showHeader';
637 var fallback = !isCardTool && components[
"mascot"] && components[
"mascot"][
"fallback"] ||
"";
638 fallback = encodeURI(fallback);
639 var fallbackStatusCode =
"";
640 var fallbackURICode =
'""';
641 if (fallback !==
"") {
644 fallbackStatusCode +=
'onStatusChanged: if (status === Image.Error) source = %4;';
645 fallbackURICode =
'decodeURI("%1")'.arg(fallback);
647 mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible).arg(fallbackStatusCode).arg(fallbackURICode);
650 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")';
652 var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
653 var titleSubtitleCode =
'';
656 if (headerAsOverlay) {
657 titleColor =
'root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white")';
658 }
else if (hasSummary) {
659 titleColor =
'summary.color';
660 }
else if (hasBackground) {
661 titleColor = summaryColorWithBackground;
663 titleColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
668 var attributesAnchors;
669 var titleContainerAnchors;
670 var titleRightAnchor;
671 var titleWidth =
"undefined";
673 var extraRightAnchor =
'';
674 var extraLeftAnchor =
'';
675 if (!touchdownOnArtShape) {
676 extraRightAnchor =
'rightMargin: units.gu(1); \n';
677 extraLeftAnchor =
'leftMargin: units.gu(1); \n';
678 }
else if (headerAsOverlay && !hasEmblem) {
679 extraRightAnchor =
'rightMargin: units.gu(1); \n';
683 titleContainerAnchors =
'verticalCenter: parent.verticalCenter; ';
685 titleContainerAnchors =
'right: parent.right; ';
686 titleContainerAnchors += headerLeftAnchor;
687 titleContainerAnchors += headerVerticalAnchors;
688 if (!headerLeftAnchorHasMargin) {
689 titleContainerAnchors += extraLeftAnchor;
693 titleRightAnchor =
'right: emblemIcon.left; \n\ 694 rightMargin: emblemIcon.width > 0 ? units.gu(0.5) : 0; \n';
696 titleRightAnchor =
'right: parent.right; \n' 697 titleRightAnchor += extraRightAnchor;
700 if (hasTitleContainer) {
702 titleAnchors = titleRightAnchor;
703 titleAnchors +=
'left: parent.left; \n\ 705 subtitleAnchors =
'right: parent.right; \n\ 706 left: parent.left; \n';
707 subtitleAnchors += extraRightAnchor;
709 attributesAnchors = subtitleAnchors +
'top: subtitleLabel.bottom;\n';
710 subtitleAnchors +=
'top: titleLabel.bottom;\n';
712 attributesAnchors = subtitleAnchors +
'top: titleLabel.bottom;\n';
714 }
else if (hasMascot) {
716 titleAnchors =
'verticalCenter: parent.verticalCenter;\n';
717 titleWidth =
"parent.width - x";
719 if (headerAsOverlay) {
721 titleAnchors = titleRightAnchor;
722 titleAnchors +=
'left: parent.left; \n\ 723 leftMargin: units.gu(1); \n\ 724 top: overlayLoader.top; \n\ 725 topMargin: units.gu(1) + overlayLoader.height - overlayLoader.overlayHeight; \n';
728 titleAnchors = titleRightAnchor;
729 titleAnchors += headerLeftAnchor;
730 titleAnchors += headerVerticalAnchors;
731 if (!headerLeftAnchorHasMargin) {
732 titleAnchors += extraLeftAnchor;
735 subtitleAnchors =
'left: titleLabel.left; \n\ 736 leftMargin: titleLabel.leftMargin; \n';
737 subtitleAnchors += extraRightAnchor;
740 subtitleAnchors +=
'right: parent.right; \n';
742 subtitleAnchors +=
'right: titleLabel.right; \n';
746 attributesAnchors = subtitleAnchors +
'top: subtitleLabel.bottom;\n';
747 subtitleAnchors +=
'top: titleLabel.bottom;\n';
749 attributesAnchors = subtitleAnchors +
'top: titleLabel.bottom;\n';
753 var titleAlignment =
"Text.AlignHCenter";
754 if (
template[
"card-layout"] ===
"horizontal" 755 || typeof components[
"title"] !==
"object" 756 || components[
"title"][
"align"] ===
"left") titleAlignment =
"Text.AlignLeft";
757 var keys = [
"mascot",
"emblem",
"subtitle",
"attributes",
"summary"];
758 for (var key in keys) {
761 if (typeof components[key] ===
"string" 762 || typeof components[key][
"field"] ===
"string") titleAlignment =
"Text.AlignLeft";
769 var titleLabelVisibleExtra = (headerAsOverlay ?
'&& overlayLoader.active':
'');
770 var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra).arg(titleWidth).arg(titleAlignment);
775 var containerCode = [];
776 var containerHeight =
'titleLabel.height';
777 containerCode.push(titleCode);
779 subtitleCode = kSubtitleLabelCode.arg(subtitleAnchors).arg(titleColor);
780 containerCode.push(subtitleCode);
781 containerHeight +=
' + subtitleLabel.height';
784 containerCode.push(kEmblemIconCode.arg(extraRightAnchor).arg(titleColor));
787 attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(titleColor);
788 containerCode.push(attributesCode);
789 containerHeight +=
' + attributesRow.height';
792 if (hasTitleContainer) {
794 titleSubtitleCode = kHeaderContainerCodeGenerator(titleContainerAnchors, containerHeight, containerCode);
797 titleSubtitleCode = titleCode;
799 titleSubtitleCode += subtitleCode;
802 titleSubtitleCode += attributesCode;
808 var rowCode = [mascotCode, titleSubtitleCode];
809 if (mascotShapeCode !=
'') {
810 rowCode.unshift(mascotShapeCode);
812 code += kHeaderRowCodeGenerator(isCardTool, headerVerticalAnchors + headerLeftAnchor, rowCode)
814 code += mascotShapeCode + mascotCode + titleSubtitleCode;
818 var audioProgressBarLeftAnchor =
'audioButton.right';
819 var audioProgressBarBottomAnchor =
'audioButton.bottom';
820 var audioProgressBarTextColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
822 code += kAudioProgressBarCode.arg(audioProgressBarBottomAnchor)
823 .arg(audioProgressBarLeftAnchor)
824 .arg(audioProgressBarTextColor);
826 var audioButtonAnchorsFill;
827 var audioButtonWidth;
828 var audioButtonHeight;
830 audioButtonAnchorsFill =
'artShapeHolder';
831 audioButtonWidth =
'undefined';
832 audioButtonHeight =
'undefined';
834 audioButtonAnchorsFill =
'undefined';
835 audioButtonWidth =
'height';
836 audioButtonHeight = isCardTool ?
'headerHeight + 2 * units.gu(1)' 837 :
'root.fixedHeaderHeight + 2 * units.gu(1)';
839 code += kAudioButtonCode.arg(audioButtonAnchorsFill).arg(audioButtonWidth).arg(audioButtonHeight).arg(asynchronous);
843 var summaryTopAnchor;
844 if (isHorizontal && hasArt) summaryTopAnchor =
'artShapeHolder.bottom';
845 else if (headerAsOverlay && hasArt) summaryTopAnchor =
'artShapeHolder.bottom';
846 else if (hasHeaderRow) summaryTopAnchor =
'row.bottom';
847 else if (hasTitleContainer) summaryTopAnchor =
'headerTitleContainer.bottom';
848 else if (hasMascot) summaryTopAnchor =
'mascotImage.bottom';
849 else if (hasAttributes) summaryTopAnchor =
'attributesRow.bottom';
850 else if (hasSubtitle) summaryTopAnchor =
'subtitleLabel.bottom';
851 else if (hasTitle) summaryTopAnchor =
'titleLabel.bottom';
852 else if (hasArt) summaryTopAnchor =
'artShapeHolder.bottom';
853 else summaryTopAnchor =
'parent.top';
857 summaryColor = summaryColorWithBackground;
859 summaryColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
862 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ?
'anchors.margins' :
'0');
864 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
871 if (hasSocialActions) {
875 if (hasSummary) socialTopAnchor =
'summary.bottom;';
876 else if (isHorizontal && hasArt) socialTopAnchor =
'artShapeHolder.bottom;';
877 else if (headerAsOverlay && hasArt) socialTopAnchor =
'artShapeHolder.bottom;';
878 else if (hasHeaderRow) socialTopAnchor =
'row.bottom;';
879 else if (hasTitleContainer) socialTopAnchor =
'headerTitleContainer.bottom;';
880 else if (hasMascot) socialTopAnchor =
'mascotImage.bottom;';
881 else if (hasAttributes) socialTopAnchor =
'attributesRow.bottom;';
882 else if (hasSubtitle) socialTopAnchor =
'subtitleLabel.bottom;';
883 else if (hasTitle) socialTopAnchor =
'titleLabel.bottom;';
884 else if (hasArt) socialTopAnchor =
'artShapeHolder.bottom;';
885 else socialTopAnchor =
'parent.top';
887 socialAnchors =
'top: ' + socialTopAnchor +
' left: parent.left; right: parent.right; topMargin: units.gu(1);' 891 socialColor = summaryColorWithBackground;
893 socialColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
896 code += kSocialActionsRowCode.arg(socialAnchors).arg(socialColor);
899 if (artShapeStyle !=
"shadow" && artShapeStyle !=
"icon") {
900 var touchdownAnchors;
902 touchdownAnchors =
'fill: backgroundLoader';
903 }
else if (touchdownOnArtShape) {
904 touchdownAnchors =
'fill: artShapeHolder';
906 touchdownAnchors =
'fill: root' 908 code += kTouchdownCode.arg(touchdownAnchors);
911 var implicitHeight =
'implicitHeight: ';
912 if (hasSocialActions) {
913 implicitHeight +=
'socialActionsRow.y + socialActionsRow.height + units.gu(1);\n';
914 }
else if (hasSummary) {
915 implicitHeight +=
'summary.y + summary.height + units.gu(1);\n';
916 }
else if (isAudio) {
917 implicitHeight +=
'audioButton.height;\n';
918 }
else if (headerAsOverlay) {
919 implicitHeight +=
'artShapeHolder.height;\n';
920 }
else if (hasHeaderRow) {
921 implicitHeight +=
'row.y + row.height + units.gu(1);\n';
922 }
else if (hasMascot) {
923 implicitHeight +=
'mascotImage.y + mascotImage.height;\n';
924 }
else if (hasTitleContainer) {
925 implicitHeight +=
'headerTitleContainer.y + headerTitleContainer.height + units.gu(1);\n';
926 }
else if (hasAttributes) {
927 implicitHeight +=
'attributesRow.y + attributesRow.height + units.gu(1);\n';
928 }
else if (hasSubtitle) {
929 implicitHeight +=
'subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
930 }
else if (hasTitle) {
931 implicitHeight +=
'titleLabel.y + titleLabel.height + units.gu(1);\n';
933 implicitHeight +=
'artShapeHolder.height;\n';
939 code += implicitHeight +
'}\n';
944 function createCardComponent(parent,
template, components, isCardTool, artShapeStyle, identifier) {
945 var imports =
'import QtQuick 2.4; \n\ 946 import Ubuntu.Components 1.3; \n\ 947 import Ubuntu.Settings.Components 0.1; \n\ 949 import Utils 0.1;\n';
950 var card = cardString(
template, components, isCardTool, artShapeStyle);
951 var code = imports +
'Component {\n' + card +
'}\n';
954 return Qt.createQmlObject(code, parent, identifier);
956 console.error(
"ERROR: Invalid component created.");
957 console.error(
"Template:");
958 console.error(JSON.stringify(
template));
959 console.error(
"Components:");
960 console.error(JSON.stringify(components));
961 console.error(
"Code:");