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.left: parent.left; \n\ 73 anchors.right: parent.right; \n\ 75 aspect: UbuntuShape.DropShadow; \n\ 86 var kArtShapeHolderCode =
'Loader { \n\ 87 id: artShapeLoader; \n\ 88 height: root.fixedArtShapeSize.height; \n\ 89 width: root.fixedArtShapeSize.width; \n\ 91 objectName: "artShapeLoader"; \n\ 92 readonly property string cardArt: cardData && cardData["art"] || %8; \n\ 93 onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\ 94 active: cardArt != ""; \n\ 96 visible: status === Loader.Ready; \n\ 97 sourceComponent: Item { \n\ 99 objectName: "artShape"; \n\ 100 visible: image.status === Image.Ready; \n\ 101 readonly property alias image: artImage; \n\ 103 width: root.fixedArtShapeSize.width; \n\ 104 height: root.fixedArtShapeSize.height; \n\ 105 CroppedImageMinimumSourceSize { \n\ 107 objectName: "artImage"; \n\ 108 source: artShapeLoader.cardArt; \n\ 109 asynchronous: %5; \n\ 126 var kArtShapeHolderCodeCardToolCard =
'Loader { \n\ 127 id: artShapeLoader; \n\ 129 objectName: "artShapeLoader"; \n\ 130 readonly property string cardArt: cardData && cardData["art"] || %8; \n\ 131 onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\ 132 active: cardArt != ""; \n\ 133 asynchronous: %5; \n\ 134 visible: status === Loader.Ready; \n\ 135 sourceComponent: Item { \n\ 137 objectName: "artShape"; \n\ 138 visible: image.status === Image.Ready; \n\ 139 readonly property alias image: artImage; \n\ 141 width: image.status !== Image.Ready ? 0 : image.width; \n\ 142 height: image.status !== Image.Ready ? 0 : image.height; \n\ 143 CroppedImageMinimumSourceSize { \n\ 145 objectName: "artImage"; \n\ 146 source: artShapeLoader.cardArt; \n\ 147 asynchronous: %5; \n\ 160 var kAudioButtonCode =
'AbstractButton { \n\ 162 anchors.fill: %1; \n\ 165 readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\ 167 anchors.fill: parent; \n\ 168 visible: parent.pressed; \n\ 169 radius: "medium"; \n\ 172 color: Qt.rgba(0, 0, 0, 0.5); \n\ 173 anchors.centerIn: parent; \n\ 174 width: parent.width * 0.5; \n\ 176 radius: width / 2; \n\ 179 anchors.centerIn: parent; \n\ 180 width: parent.width * 0.3; \n\ 183 name: DashAudioPlayer.playing && AudioUrlComparer.compare(parent.source, DashAudioPlayer.currentSource) ? "media-playback-pause" : "media-playback-start"; \n\ 185 asynchronous: %4; \n\ 188 if (AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)) { \n\ 189 if (DashAudioPlayer.playing) { \n\ 190 DashAudioPlayer.pause(); \n\ 192 DashAudioPlayer.play(); \n\ 195 var playlist = (cardData["quickPreviewData"] && cardData["quickPreviewData"]["playlist"]) || null; \n\ 196 DashAudioPlayer.playSource(source, playlist); \n\ 199 onPressAndHold: { \n\ 200 root.pressAndHold(); \n\ 206 var kOverlayLoaderCode =
'Loader { \n\ 207 id: overlayLoader; \n\ 208 readonly property real overlayHeight: %2 + units.gu(2); \n\ 209 anchors.fill: artShapeLoader; \n\ 210 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\ 211 asynchronous: %1; \n\ 212 visible: showHeader && status === Loader.Ready; \n\ 213 sourceComponent: UbuntuShapeOverlay { \n\ 215 property real luminance: Style.luminance(overlayColor); \n\ 216 aspect: UbuntuShape.Flat; \n\ 217 radius: "medium"; \n\ 218 overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\ 219 overlayRect: Qt.rect(0, 1 - overlayLoader.overlayHeight / height, 1, 1); \n\ 224 function kHeaderRowCodeGenerator() {
225 var kHeaderRowCodeTemplate =
'Row { \n\ 227 objectName: "outerRow"; \n\ 228 property real margins: units.gu(1); \n\ 229 spacing: margins; \n\ 232 anchors.right: parent.right; \n\ 233 anchors.margins: margins; \n\ 234 anchors.rightMargin: 0; \n\ 239 var args = Array.prototype.slice.call(arguments);
240 var isCardTool = args.shift();
241 var heightCode = isCardTool ?
"" :
"height: root.fixedHeaderHeight; \n";
242 var code = kHeaderRowCodeTemplate.arg(args.shift()).arg(heightCode).arg(args.join(
',\n'));
247 function kHeaderContainerCodeGenerator() {
248 var headerContainerCodeTemplate =
'Item { \n\ 249 id: headerTitleContainer; \n\ 251 width: parent.width - x; \n\ 252 implicitHeight: %2; \n\ 257 var args = Array.prototype.slice.call(arguments);
258 var code = headerContainerCodeTemplate.arg(args.shift()).arg(args.shift()).arg(args.join(
',\n'));
264 var kMascotShapeLoaderCode =
'Loader { \n\ 265 id: mascotShapeLoader; \n\ 266 objectName: "mascotShapeLoader"; \n\ 267 asynchronous: %2; \n\ 268 active: mascotImage.status === Image.Ready; \n\ 269 visible: showHeader && active && status === Loader.Ready; \n\ 270 width: units.gu(6); \n\ 271 height: units.gu(5.625); \n\ 272 sourceComponent: UbuntuShape { image: mascotImage } \n\ 280 var kMascotImageCode =
'CroppedImageMinimumSourceSize { \n\ 282 objectName: "mascotImage"; \n\ 284 source: cardData && cardData["mascot"] || %4; \n\ 285 width: units.gu(6); \n\ 286 height: units.gu(5.625); \n\ 287 horizontalAlignment: Image.AlignHCenter; \n\ 288 verticalAlignment: Image.AlignVCenter; \n\ 298 var kTitleLabelCode =
'Label { \n\ 300 objectName: "titleLabel"; \n\ 302 elide: Text.ElideRight; \n\ 303 fontSize: "small"; \n\ 304 wrapMode: Text.Wrap; \n\ 305 maximumLineCount: 2; \n\ 306 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\ 308 visible: showHeader %3; \n\ 310 text: root.title; \n\ 311 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; \n\ 312 horizontalAlignment: %5; \n\ 319 var kEmblemIconCode =
'Icon { \n\ 321 objectName: "emblemIcon"; \n\ 323 bottom: titleLabel.baseline; \n\ 324 right: parent.right; \n\ 327 source: cardData && cardData["emblem"] || ""; \n\ 329 height: source != "" ? titleLabel.font.pixelSize : 0; \n\ 330 width: implicitWidth > 0 && implicitHeight > 0 ? (implicitWidth / implicitHeight * height) : implicitWidth; \n\ 334 var kTouchdownCode =
'Loader { \n\ 335 active: root.pressed; \n\ 337 sourceComponent: UbuntuShape { \n\ 338 objectName: "touchdown"; \n\ 339 anchors.fill: parent; \n\ 340 radius: "medium"; \n\ 341 borderSource: "radius_pressed.sci" \n\ 347 var kSubtitleLabelCode =
'Label { \n\ 348 id: subtitleLabel; \n\ 349 objectName: "subtitleLabel"; \n\ 351 anchors.topMargin: units.dp(2); \n\ 352 elide: Text.ElideRight; \n\ 353 maximumLineCount: 1; \n\ 354 fontSize: "x-small"; \n\ 355 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\ 357 visible: titleLabel.visible && titleLabel.text; \n\ 358 text: cardData && cardData["subtitle"] || ""; \n\ 359 font.weight: Font.Light; \n\ 364 var kAttributesRowCode =
'CardAttributes { \n\ 365 id: attributesRow; \n\ 366 objectName: "attributesRow"; \n\ 369 fontScale: root.fontScale; \n\ 370 model: cardData && cardData["attributes"]; \n\ 375 var kSocialActionsRowCode =
'CardSocialActions { \n\ 376 id: socialActionsRow; \n\ 377 objectName: "socialActionsRow"; \n\ 380 model: cardData && cardData["socialActions"]; \n\ 381 onClicked: root.action(actionId); \n\ 387 var kSummaryLabelCode =
'Label { \n\ 389 objectName: "summaryLabel"; \n\ 392 left: parent.left; \n\ 393 right: parent.right; \n\ 394 margins: units.gu(1); \n\ 397 wrapMode: Text.Wrap; \n\ 398 maximumLineCount: 5; \n\ 399 elide: Text.ElideRight; \n\ 400 text: cardData && cardData["summary"] || ""; \n\ 401 height: text ? implicitHeight : 0; \n\ 402 fontSize: "small"; \n\ 409 var kAudioProgressBarCode =
'CardAudioProgress { \n\ 410 id: audioProgressBar; \n\ 411 duration: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["duration"]) || 0; \n\ 412 source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\ 416 right: parent.right; \n\ 417 margins: units.gu(1); \n\ 422 function sanitizeColor(colorString) {
423 if (colorString !== undefined) {
424 if (colorString.match(/^[#a-z0-9]*$/i) === null) {
434 function cardString(
template, components, isCardTool, artShapeStyle, categoryLayout) {
437 var templateInteractive = (
template == null ?
true : (
template[
"non-interactive"] !== undefined ? !
template[
"non-interactive"] :
true)) ?
"true" :
"false";
439 code =
'AbstractButton { \n\ 441 property var cardData; \n\ 442 property string backgroundShapeStyle: "inset"; \n\ 443 property real fontScale: 1.0; \n\ 444 property var scopeStyle: null; \n\ 445 readonly property string title: cardData && cardData["title"] || ""; \n\ 446 property bool showHeader: true; \n\ 447 implicitWidth: childrenRect.width; \n\ 449 \n'.arg(templateInteractive);
452 code +=
"property int fixedHeaderHeight: -1; \n\ 453 property size fixedArtShapeSize: Qt.size(-1, -1); \n";
456 var hasArt = components[
"art"] && components[
"art"][
"field"] ||
false;
457 var hasSummary = components[
"summary"] ||
false;
458 var isConciergeMode = components[
"art"] && components[
"art"][
"conciergeMode"] ||
false;
459 var artAndSummary = hasArt && hasSummary && !isConciergeMode;
460 var isHorizontal =
template[
"card-layout"] ===
"horizontal";
461 var hasBackground = (!isHorizontal && (
template[
"card-background"] || components[
"background"] || artAndSummary)) ||
462 (hasSummary && (
template[
"card-background"] || components[
"background"]));
463 var hasTitle = components[
"title"] ||
false;
464 var hasMascot = components[
"mascot"] ||
false;
465 var hasEmblem = components[
"emblem"] && !(hasMascot &&
template[
"card-size"] ===
"small") ||
false;
466 var headerAsOverlay = hasArt &&
template &&
template[
"overlay"] ===
true && (hasTitle || hasMascot);
467 var hasSubtitle = hasTitle && components[
"subtitle"] ||
false;
468 var hasHeaderRow = hasMascot && hasTitle;
469 var hasAttributes = hasTitle && components[
"attributes"] && components[
"attributes"][
"field"] ||
false;
470 var hasSocialActions = hasTitle && components[
"social-actions"] ||
false;
471 var isAudio =
template[
"quick-preview-type"] ===
"audio";
472 var asynchronous = isCardTool ?
"false" :
"true";
474 code +=
'signal action(var actionId);\n';
479 if (hasSummary) isAudio =
false;
480 if (!isHorizontal) isAudio =
false;
481 if (hasMascot) isAudio =
false;
482 if (hasEmblem) isAudio =
false;
483 if (headerAsOverlay) isAudio =
false;
484 if (hasAttributes) isAudio =
false;
488 var templateCardBackground;
489 if (
template && typeof
template[
"card-background"] ===
"string") {
490 templateCardBackground =
'decodeURI("' + encodeURI(
template[
"card-background"]) +
'")';
492 templateCardBackground =
'""';
495 var backgroundElements0;
496 var backgroundElements1;
497 if (
template && typeof
template[
"card-background"] ===
"object" && (
template[
"card-background"][
"type"] ===
"color" ||
template[
"card-background"][
"type"] ===
"gradient")) {
498 var element0 = sanitizeColor(
template[
"card-background"][
"elements"][0]);
499 var element1 = sanitizeColor(
template[
"card-background"][
"elements"][1]);
500 if (element0 !== undefined) {
501 backgroundElements0 =
'"%1"'.arg(element0);
503 if (element1 !== undefined) {
504 backgroundElements1 =
'"%1"'.arg(element1);
507 code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(asynchronous).arg(templateCardBackground);
513 code +=
'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
515 var artShapeAspect = components[
"art"] && components[
"art"][
"aspect-ratio"] || 1;
516 if (isNaN(artShapeAspect)) {
520 artShapeAspect =
"(root.fixedArtShapeSize.width / root.fixedArtShapeSize.height)";
523 var widthCode, heightCode;
526 artAnchors =
'left: parent.left';
527 if (hasMascot || hasTitle) {
528 widthCode =
'height * ' + artShapeAspect;
529 heightCode =
'headerHeight + 2 * units.gu(1)';
533 widthCode =
'height * ' + artShapeAspect
534 heightCode =
'units.gu(7.625)';
537 artAnchors =
'horizontalCenter: parent.horizontalCenter;';
538 widthCode =
'root.width' 539 heightCode =
'width / ' + artShapeAspect;
542 var fallback = !isCardTool && components[
"art"] && components[
"art"][
"fallback"] ||
"";
543 fallback = encodeURI(fallback);
544 var fallbackStatusCode =
"";
545 var fallbackURICode =
'""';
546 if (fallback !==
"") {
549 fallbackStatusCode +=
'onStatusChanged: if (status === Image.Error) source = %8;';
550 fallbackURICode =
'decodeURI("%1")'.arg(fallback);
552 var artShapeHolderShapeCode;
553 if (!isConciergeMode) {
554 if (artShapeStyle ===
"icon") {
555 artShapeHolderShapeCode = kArtProportionalShapeCode;
557 var artShapeHolderShapeAspect;
558 switch (artShapeStyle) {
559 case "inset": artShapeHolderShapeAspect =
"UbuntuShape.Inset";
break;
560 case "shadow": artShapeHolderShapeAspect =
"UbuntuShape.DropShadow";
break;
562 case "flat": artShapeHolderShapeAspect =
"UbuntuShape.Flat";
break;
564 artShapeHolderShapeCode = kArtUbuntuShapeCode.arg(artShapeHolderShapeAspect);
567 artShapeHolderShapeCode =
"";
569 var artShapeHolderCode = isCardTool ? kArtShapeHolderCodeCardToolCard : kArtShapeHolderCode;
570 code += artShapeHolderCode.arg(artAnchors)
573 .arg(isConciergeMode ?
"true" :
"false")
575 .arg(artShapeHolderShapeCode)
576 .arg(fallbackStatusCode)
577 .arg(fallbackURICode);
578 }
else if (isCardTool) {
579 code +=
'readonly property size artShapeSize: Qt.size(-1, -1);\n' 582 if (headerAsOverlay) {
583 var headerHeightCode = isCardTool ?
"headerHeight" :
"root.fixedHeaderHeight";
584 code += kOverlayLoaderCode.arg(asynchronous).arg(headerHeightCode);
587 var headerVerticalAnchors;
588 if (headerAsOverlay) {
589 headerVerticalAnchors =
'bottom: artShapeLoader.bottom; \n\ 590 bottomMargin: units.gu(1);\n';
594 headerVerticalAnchors =
'top: artShapeLoader.top; \n\ 595 topMargin: units.gu(1);\n';
597 headerVerticalAnchors =
'top: artShapeLoader.bottom; \n\ 598 topMargin: units.gu(1);\n';
601 headerVerticalAnchors =
'top: parent.top; \n\ 602 topMargin: units.gu(1);\n';
606 var headerLeftAnchor;
607 var headerLeftAnchorHasMargin =
false;
608 if (isHorizontal && hasArt) {
609 headerLeftAnchor =
'left: artShapeLoader.right; \n\ 610 leftMargin: units.gu(1);\n';
611 headerLeftAnchorHasMargin =
true;
612 }
else if (isHorizontal && isAudio) {
613 headerLeftAnchor =
'left: audioButton.right; \n\ 614 leftMargin: units.gu(1);\n';
615 headerLeftAnchorHasMargin =
true;
617 headerLeftAnchor =
'left: parent.left;\n';
620 var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary && !isAudio;
623 code +=
'readonly property int headerHeight: row.height;\n' 624 }
else if (hasMascot) {
625 code +=
'readonly property int headerHeight: mascotImage.height;\n' 626 }
else if (hasAttributes) {
627 if (hasTitle && hasSubtitle) {
628 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + attributesRow.height + attributesRow.anchors.topMargin;\n' 629 }
else if (hasTitle) {
630 code +=
'readonly property int headerHeight: titleLabel.height + attributesRow.height + attributesRow.anchors.topMargin;\n' 632 code +=
'readonly property int headerHeight: attributesRow.height;\n' 634 }
else if (isAudio) {
636 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n' 637 }
else if (hasTitle) {
638 code +=
'readonly property int headerHeight: titleLabel.height + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n' 640 code +=
'readonly property int headerHeight: audioProgressBar.height;\n' 642 }
else if (hasSubtitle) {
643 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n' 644 }
else if (hasTitle) {
645 code +=
'readonly property int headerHeight: titleLabel.height;\n' 647 code +=
'readonly property int headerHeight: 0;\n' 650 var mascotShapeCode =
'';
653 var useMascotShape = !hasBackground && !headerAsOverlay;
654 var mascotAnchors =
'';
656 mascotAnchors += headerLeftAnchor;
657 mascotAnchors += headerVerticalAnchors;
658 if (!headerLeftAnchorHasMargin) {
659 mascotAnchors +=
'leftMargin: units.gu(1);\n' 662 mascotAnchors =
'verticalCenter: parent.verticalCenter;' 665 if (useMascotShape) {
666 mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors).arg(asynchronous);
669 var mascotImageVisible = useMascotShape ?
'false' :
'showHeader';
670 var fallback = !isCardTool && components[
"mascot"] && components[
"mascot"][
"fallback"] ||
"";
671 fallback = encodeURI(fallback);
672 var fallbackStatusCode =
"";
673 var fallbackURICode =
'""';
674 if (fallback !==
"") {
677 fallbackStatusCode +=
'onStatusChanged: if (status === Image.Error) source = %4;';
678 fallbackURICode =
'decodeURI("%1")'.arg(fallback);
680 mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible).arg(fallbackStatusCode).arg(fallbackURICode);
683 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")';
685 var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
686 var titleSubtitleCode =
'';
689 if (headerAsOverlay) {
690 titleColor =
'root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white")';
691 }
else if (hasSummary) {
692 titleColor =
'summary.color';
693 }
else if (hasBackground) {
694 titleColor = summaryColorWithBackground;
696 titleColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
701 var attributesAnchors;
702 var titleContainerAnchors;
703 var titleRightAnchor;
704 var titleWidth =
"undefined";
706 var extraRightAnchor =
'';
707 var extraLeftAnchor =
'';
708 if (!touchdownOnArtShape) {
709 extraRightAnchor =
'rightMargin: units.gu(1); \n';
710 extraLeftAnchor =
'leftMargin: units.gu(1); \n';
711 }
else if (headerAsOverlay && !hasEmblem) {
712 extraRightAnchor =
'rightMargin: units.gu(1); \n';
716 titleContainerAnchors =
'verticalCenter: parent.verticalCenter; ';
718 titleContainerAnchors =
'right: parent.right; ';
719 titleContainerAnchors += headerLeftAnchor;
720 titleContainerAnchors += headerVerticalAnchors;
721 if (!headerLeftAnchorHasMargin) {
722 titleContainerAnchors += extraLeftAnchor;
726 titleRightAnchor =
'right: emblemIcon.left; \n\ 727 rightMargin: emblemIcon.width > 0 ? units.gu(0.5) : 0; \n';
729 titleRightAnchor =
'right: parent.right; \n' 730 titleRightAnchor += extraRightAnchor;
733 if (hasTitleContainer) {
735 titleAnchors = titleRightAnchor;
736 titleAnchors +=
'left: parent.left; \n\ 738 subtitleAnchors =
'right: parent.right; \n\ 739 left: parent.left; \n';
740 subtitleAnchors += extraRightAnchor;
742 attributesAnchors = subtitleAnchors +
'top: subtitleLabel.bottom;\n';
743 subtitleAnchors +=
'top: titleLabel.bottom;\n';
745 attributesAnchors = subtitleAnchors +
'top: titleLabel.bottom;\n';
747 }
else if (hasMascot) {
749 titleAnchors =
'verticalCenter: parent.verticalCenter;\n';
750 titleWidth =
"parent.width - x";
752 if (headerAsOverlay) {
754 titleAnchors = titleRightAnchor;
755 titleAnchors +=
'left: parent.left; \n\ 756 leftMargin: units.gu(1); \n\ 757 top: overlayLoader.top; \n\ 758 topMargin: units.gu(1) + overlayLoader.height - overlayLoader.overlayHeight; \n';
761 titleAnchors = titleRightAnchor;
762 titleAnchors += headerLeftAnchor;
763 titleAnchors += headerVerticalAnchors;
764 if (!headerLeftAnchorHasMargin) {
765 titleAnchors += extraLeftAnchor;
768 subtitleAnchors =
'left: titleLabel.left; \n\ 769 leftMargin: titleLabel.leftMargin; \n';
770 subtitleAnchors += extraRightAnchor;
773 subtitleAnchors +=
'right: parent.right; \n';
775 subtitleAnchors +=
'right: titleLabel.right; \n';
779 attributesAnchors = subtitleAnchors +
'top: subtitleLabel.bottom;\n';
780 subtitleAnchors +=
'top: titleLabel.bottom;\n';
782 attributesAnchors = subtitleAnchors +
'top: titleLabel.bottom;\n';
786 var titleAlignment =
"Text.AlignHCenter";
787 if (
template[
"card-layout"] ===
"horizontal" 788 || typeof components[
"title"] !==
"object" 789 || components[
"title"][
"align"] ===
"left") titleAlignment =
"Text.AlignLeft";
790 var keys = [
"mascot",
"emblem",
"subtitle",
"attributes",
"summary"];
791 for (var key in keys) {
794 if (typeof components[key] ===
"string" 795 || typeof components[key][
"field"] ===
"string") titleAlignment =
"Text.AlignLeft";
802 var titleLabelVisibleExtra = (headerAsOverlay ?
'&& overlayLoader.active':
'');
803 var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra).arg(titleWidth).arg(titleAlignment);
808 var containerCode = [];
809 var containerHeight =
'titleLabel.height';
810 containerCode.push(titleCode);
812 subtitleCode = kSubtitleLabelCode.arg(subtitleAnchors).arg(titleColor);
813 containerCode.push(subtitleCode);
814 containerHeight +=
' + subtitleLabel.height';
817 containerCode.push(kEmblemIconCode.arg(extraRightAnchor).arg(titleColor));
820 attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(titleColor);
821 containerCode.push(attributesCode);
822 containerHeight +=
' + attributesRow.height';
825 if (hasTitleContainer) {
827 titleSubtitleCode = kHeaderContainerCodeGenerator(titleContainerAnchors, containerHeight, containerCode);
830 titleSubtitleCode = titleCode;
832 titleSubtitleCode += subtitleCode;
835 titleSubtitleCode += attributesCode;
841 var rowCode = [mascotCode, titleSubtitleCode];
842 if (mascotShapeCode !=
'') {
843 rowCode.unshift(mascotShapeCode);
845 code += kHeaderRowCodeGenerator(isCardTool, headerVerticalAnchors + headerLeftAnchor, rowCode)
847 code += mascotShapeCode + mascotCode + titleSubtitleCode;
851 var audioProgressBarLeftAnchor =
'audioButton.right';
852 var audioProgressBarBottomAnchor =
'audioButton.bottom';
853 var audioProgressBarTextColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
855 code += kAudioProgressBarCode.arg(audioProgressBarBottomAnchor)
856 .arg(audioProgressBarLeftAnchor)
857 .arg(audioProgressBarTextColor);
859 var audioButtonAnchorsFill;
860 var audioButtonWidth;
861 var audioButtonHeight;
863 audioButtonAnchorsFill =
'artShapeLoader';
864 audioButtonWidth =
'undefined';
865 audioButtonHeight =
'undefined';
867 audioButtonAnchorsFill =
'undefined';
868 audioButtonWidth =
'height';
869 audioButtonHeight = isCardTool ?
'headerHeight + 2 * units.gu(1)' 870 :
'root.fixedHeaderHeight + 2 * units.gu(1)';
872 code += kAudioButtonCode.arg(audioButtonAnchorsFill).arg(audioButtonWidth).arg(audioButtonHeight).arg(asynchronous);
876 var summaryTopAnchor;
877 if (isHorizontal && hasArt) summaryTopAnchor =
'artShapeLoader.bottom';
878 else if (headerAsOverlay && hasArt) summaryTopAnchor =
'artShapeLoader.bottom';
879 else if (hasHeaderRow) summaryTopAnchor =
'row.bottom';
880 else if (hasTitleContainer) summaryTopAnchor =
'headerTitleContainer.bottom';
881 else if (hasMascot) summaryTopAnchor =
'mascotImage.bottom';
882 else if (hasAttributes) summaryTopAnchor =
'attributesRow.bottom';
883 else if (hasSubtitle) summaryTopAnchor =
'subtitleLabel.bottom';
884 else if (hasTitle) summaryTopAnchor =
'titleLabel.bottom';
885 else if (hasArt) summaryTopAnchor =
'artShapeLoader.bottom';
886 else summaryTopAnchor =
'parent.top';
890 summaryColor = summaryColorWithBackground;
892 summaryColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
895 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ?
'anchors.margins' :
'0');
897 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
900 if (hasSocialActions) {
904 if (hasSummary) socialTopAnchor =
'summary.bottom;';
905 else if (isHorizontal && hasArt) socialTopAnchor =
'artShapeLoader.bottom;';
906 else if (headerAsOverlay && hasArt) socialTopAnchor =
'artShapeLoader.bottom;';
907 else if (hasHeaderRow) socialTopAnchor =
'row.bottom;';
908 else if (hasTitleContainer) socialTopAnchor =
'headerTitleContainer.bottom;';
909 else if (hasMascot) socialTopAnchor =
'mascotImage.bottom;';
910 else if (hasAttributes) socialTopAnchor =
'attributesRow.bottom;';
911 else if (hasSubtitle) socialTopAnchor =
'subtitleLabel.bottom;';
912 else if (hasTitle) socialTopAnchor =
'titleLabel.bottom;';
913 else if (hasArt) socialTopAnchor =
'artShapeLoader.bottom;';
914 else socialTopAnchor =
'parent.top';
916 socialAnchors =
'top: ' + socialTopAnchor +
' left: parent.left; right: parent.right; topMargin: units.gu(1);' 920 socialColor = summaryColorWithBackground;
922 socialColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
925 code += kSocialActionsRowCode.arg(socialAnchors).arg(socialColor);
928 if (artShapeStyle !=
"shadow" && artShapeStyle !=
"icon" && !isCardTool) {
929 var touchdownAnchors;
931 touchdownAnchors =
'fill: backgroundLoader';
932 }
else if (touchdownOnArtShape) {
933 touchdownAnchors =
'fill: artShapeLoader';
935 touchdownAnchors =
'fill: root' 937 code += kTouchdownCode.arg(touchdownAnchors);
940 if (isCardTool || categoryLayout !==
"grid") {
941 var implicitHeight =
'implicitHeight: ';
942 if (hasSocialActions) {
943 implicitHeight +=
'socialActionsRow.y + socialActionsRow.height + units.gu(1);\n';
944 }
else if (hasSummary) {
945 implicitHeight +=
'summary.y + summary.height + units.gu(1);\n';
946 }
else if (isAudio) {
947 implicitHeight +=
'audioButton.height;\n';
948 }
else if (headerAsOverlay) {
949 implicitHeight +=
'artShapeLoader.height;\n';
950 }
else if (hasHeaderRow) {
951 implicitHeight +=
'row.y + row.height + units.gu(1);\n';
952 }
else if (hasMascot) {
953 implicitHeight +=
'mascotImage.y + mascotImage.height;\n';
954 }
else if (hasTitleContainer) {
955 implicitHeight +=
'headerTitleContainer.y + headerTitleContainer.height + units.gu(1);\n';
956 }
else if (hasAttributes) {
957 implicitHeight +=
'attributesRow.y + attributesRow.height + units.gu(1);\n';
958 }
else if (hasSubtitle) {
959 implicitHeight +=
'subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
960 }
else if (hasTitle) {
961 implicitHeight +=
'titleLabel.y + titleLabel.height + units.gu(1);\n';
963 implicitHeight +=
'artShapeLoader.height;\n';
972 code += implicitHeight +
'}\n';
977 function createCardComponent(parent,
template, components, isCardTool, artShapeStyle, categoryLayout, identifier) {
978 var imports =
'import QtQuick 2.4; \n\ 979 import Ubuntu.Components 1.3; \n\ 980 import Ubuntu.Settings.Components 0.1; \n\ 982 import Utils 0.1;\n';
983 var card = cardString(
template, components, isCardTool, artShapeStyle, categoryLayout);
984 var code = imports +
'Component {\n' + card +
'}\n';
987 return Qt.createQmlObject(code, parent, identifier);
989 console.error(
"ERROR: Invalid component created.");
990 console.error(
"Template:");
991 console.error(JSON.stringify(
template));
992 console.error(
"Components:");
993 console.error(JSON.stringify(components));
994 console.error(
"Code:");