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 =
'Item { \n\ 87 id: artShapeHolder; \n\ 88 height: root.fixedArtShapeSize.height; \n\ 89 width: root.fixedArtShapeSize.width; \n\ 92 id: artShapeLoader; \n\ 93 objectName: "artShapeLoader"; \n\ 94 readonly property string cardArt: cardData && cardData["art"] || %8; \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 width: root.fixedArtShapeSize.width; \n\ 106 height: root.fixedArtShapeSize.height; \n\ 107 CroppedImageMinimumSourceSize { \n\ 109 objectName: "artImage"; \n\ 110 source: artShapeLoader.cardArt; \n\ 111 asynchronous: %5; \n\ 129 var kArtShapeHolderCodeCardToolCard =
'Item { \n\ 130 id: artShapeHolder; \n\ 131 height: artShapeLoader.height; \n\ 132 width: artShapeLoader.width; \n\ 135 id: artShapeLoader; \n\ 136 objectName: "artShapeLoader"; \n\ 137 readonly property string cardArt: cardData && cardData["art"] || %8; \n\ 138 onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\ 139 active: cardArt != ""; \n\ 140 asynchronous: %5; \n\ 141 visible: status == Loader.Ready; \n\ 142 sourceComponent: Item { \n\ 144 objectName: "artShape"; \n\ 145 visible: image.status == Image.Ready; \n\ 146 readonly property alias image: artImage; \n\ 148 width: image.status !== Image.Ready ? 0 : image.width; \n\ 149 height: image.status !== Image.Ready ? 0 : image.height; \n\ 150 CroppedImageMinimumSourceSize { \n\ 152 objectName: "artImage"; \n\ 153 source: artShapeLoader.cardArt; \n\ 154 asynchronous: %5; \n\ 168 var kAudioButtonCode =
'AbstractButton { \n\ 170 anchors.fill: %1; \n\ 173 readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\ 175 anchors.fill: parent; \n\ 176 visible: parent.pressed; \n\ 177 radius: "medium"; \n\ 180 color: Qt.rgba(0, 0, 0, 0.5); \n\ 181 anchors.centerIn: parent; \n\ 182 width: parent.width * 0.5; \n\ 184 radius: width / 2; \n\ 187 anchors.centerIn: parent; \n\ 188 width: parent.width * 0.3; \n\ 191 name: DashAudioPlayer.playing && AudioUrlComparer.compare(parent.source, DashAudioPlayer.currentSource) ? "media-playback-pause" : "media-playback-start"; \n\ 193 asynchronous: %4; \n\ 196 if (AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)) { \n\ 197 if (DashAudioPlayer.playing) { \n\ 198 DashAudioPlayer.pause(); \n\ 200 DashAudioPlayer.play(); \n\ 203 var playlist = (cardData["quickPreviewData"] && cardData["quickPreviewData"]["playlist"]) || null; \n\ 204 DashAudioPlayer.playSource(source, playlist); \n\ 207 onPressAndHold: { \n\ 208 root.pressAndHold(); \n\ 214 var kOverlayLoaderCode =
'Loader { \n\ 215 id: overlayLoader; \n\ 216 readonly property real overlayHeight: %2 + units.gu(2); \n\ 217 anchors.fill: artShapeHolder; \n\ 218 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\ 219 asynchronous: %1; \n\ 220 visible: showHeader && status == Loader.Ready; \n\ 221 sourceComponent: UbuntuShapeOverlay { \n\ 223 property real luminance: Style.luminance(overlayColor); \n\ 224 aspect: UbuntuShape.Flat; \n\ 225 radius: "medium"; \n\ 226 overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\ 227 overlayRect: Qt.rect(0, 1 - overlayLoader.overlayHeight / height, 1, 1); \n\ 232 function kHeaderRowCodeGenerator() {
233 var kHeaderRowCodeTemplate =
'Row { \n\ 235 objectName: "outerRow"; \n\ 236 property real margins: units.gu(1); \n\ 237 spacing: margins; \n\ 240 anchors.right: parent.right; \n\ 241 anchors.margins: margins; \n\ 242 anchors.rightMargin: 0; \n\ 247 var args = Array.prototype.slice.call(arguments);
248 var isCardTool = args.shift();
249 var heightCode = isCardTool ?
"" :
"height: root.fixedHeaderHeight; \n";
250 var code = kHeaderRowCodeTemplate.arg(args.shift()).arg(heightCode).arg(args.join(
',\n'));
255 function kHeaderContainerCodeGenerator() {
256 var headerContainerCodeTemplate =
'Item { \n\ 257 id: headerTitleContainer; \n\ 259 width: parent.width - x; \n\ 260 implicitHeight: %2; \n\ 265 var args = Array.prototype.slice.call(arguments);
266 var code = headerContainerCodeTemplate.arg(args.shift()).arg(args.shift()).arg(args.join(
',\n'));
272 var kMascotShapeLoaderCode =
'Loader { \n\ 273 id: mascotShapeLoader; \n\ 274 objectName: "mascotShapeLoader"; \n\ 275 asynchronous: %2; \n\ 276 active: mascotImage.status === Image.Ready; \n\ 277 visible: showHeader && active && status == Loader.Ready; \n\ 278 width: units.gu(6); \n\ 279 height: units.gu(5.625); \n\ 280 sourceComponent: UbuntuShape { image: mascotImage } \n\ 288 var kMascotImageCode =
'CroppedImageMinimumSourceSize { \n\ 290 objectName: "mascotImage"; \n\ 292 source: cardData && cardData["mascot"] || %4; \n\ 293 width: units.gu(6); \n\ 294 height: units.gu(5.625); \n\ 295 horizontalAlignment: Image.AlignHCenter; \n\ 296 verticalAlignment: Image.AlignVCenter; \n\ 306 var kTitleLabelCode =
'Label { \n\ 308 objectName: "titleLabel"; \n\ 310 elide: Text.ElideRight; \n\ 311 fontSize: "small"; \n\ 312 wrapMode: Text.Wrap; \n\ 313 maximumLineCount: 2; \n\ 314 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\ 316 visible: showHeader %3; \n\ 318 text: root.title; \n\ 319 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; \n\ 320 horizontalAlignment: %5; \n\ 327 var kEmblemIconCode =
'Icon { \n\ 329 objectName: "emblemIcon"; \n\ 331 bottom: titleLabel.baseline; \n\ 332 right: parent.right; \n\ 335 source: cardData && cardData["emblem"] || ""; \n\ 337 height: source != "" ? titleLabel.font.pixelSize : 0; \n\ 338 width: implicitWidth > 0 && implicitHeight > 0 ? (implicitWidth / implicitHeight * height) : implicitWidth; \n\ 342 var kTouchdownCode =
'UbuntuShape { \n\ 344 objectName: "touchdown"; \n\ 346 visible: root.pressed; \n\ 347 radius: "medium"; \n\ 348 borderSource: "radius_pressed.sci" \n\ 353 var kSubtitleLabelCode =
'Label { \n\ 354 id: subtitleLabel; \n\ 355 objectName: "subtitleLabel"; \n\ 357 anchors.topMargin: units.dp(2); \n\ 358 elide: Text.ElideRight; \n\ 359 maximumLineCount: 1; \n\ 360 fontSize: "x-small"; \n\ 361 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\ 363 visible: titleLabel.visible && titleLabel.text; \n\ 364 text: cardData && cardData["subtitle"] || ""; \n\ 365 font.weight: Font.Light; \n\ 370 var kAttributesRowCode =
'CardAttributes { \n\ 371 id: attributesRow; \n\ 372 objectName: "attributesRow"; \n\ 375 fontScale: root.fontScale; \n\ 376 model: cardData && cardData["attributes"]; \n\ 381 var kSocialActionsRowCode =
'CardSocialActions { \n\ 382 id: socialActionsRow; \n\ 383 objectName: "socialActionsRow"; \n\ 386 model: cardData && cardData["socialActions"]; \n\ 387 onClicked: root.action(actionId); \n\ 393 var kSummaryLabelCode =
'Label { \n\ 395 objectName: "summaryLabel"; \n\ 398 left: parent.left; \n\ 399 right: parent.right; \n\ 400 margins: units.gu(1); \n\ 403 wrapMode: Text.Wrap; \n\ 404 maximumLineCount: 5; \n\ 405 elide: Text.ElideRight; \n\ 406 text: cardData && cardData["summary"] || ""; \n\ 407 height: text ? implicitHeight : 0; \n\ 408 fontSize: "small"; \n\ 415 var kAudioProgressBarCode =
'CardAudioProgress { \n\ 416 id: audioProgressBar; \n\ 417 duration: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["duration"]) || 0; \n\ 418 source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\ 422 right: parent.right; \n\ 423 margins: units.gu(1); \n\ 428 function sanitizeColor(colorString) {
429 if (colorString !== undefined) {
430 if (colorString.match(/^[#a-z0-9]*$/i) === null) {
440 function cardString(
template, components, isCardTool, artShapeStyle) {
443 var templateInteractive = (
template == null ?
true : (
template[
"non-interactive"] !== undefined ? !
template[
"non-interactive"] :
true)) ?
"true" :
"false";
445 code =
'AbstractButton { \n\ 447 property var cardData; \n\ 448 property string backgroundShapeStyle: "inset"; \n\ 449 property real fontScale: 1.0; \n\ 450 property var scopeStyle: null; \n\ 451 readonly property string title: cardData && cardData["title"] || ""; \n\ 452 property bool showHeader: true; \n\ 453 implicitWidth: childrenRect.width; \n\ 455 \n'.arg(templateInteractive);
458 code +=
"property int fixedHeaderHeight: -1; \n\ 459 property size fixedArtShapeSize: Qt.size(-1, -1); \n";
462 var hasArt = components[
"art"] && components[
"art"][
"field"] ||
false;
463 var hasSummary = components[
"summary"] ||
false;
464 var isConciergeMode = components[
"art"] && components[
"art"][
"conciergeMode"] ||
false;
465 var artAndSummary = hasArt && hasSummary && !isConciergeMode;
466 var isHorizontal =
template[
"card-layout"] ===
"horizontal";
467 var hasBackground = (!isHorizontal && (
template[
"card-background"] || components[
"background"] || artAndSummary)) ||
468 (hasSummary && (
template[
"card-background"] || components[
"background"]));
469 var hasTitle = components[
"title"] ||
false;
470 var hasMascot = components[
"mascot"] ||
false;
471 var hasEmblem = components[
"emblem"] && !(hasMascot &&
template[
"card-size"] ===
"small") ||
false;
472 var headerAsOverlay = hasArt &&
template &&
template[
"overlay"] ===
true && (hasTitle || hasMascot);
473 var hasSubtitle = hasTitle && components[
"subtitle"] ||
false;
474 var hasHeaderRow = hasMascot && hasTitle;
475 var hasAttributes = hasTitle && components[
"attributes"] && components[
"attributes"][
"field"] ||
false;
476 var hasSocialActions = hasTitle && components[
"social-actions"] ||
false;
477 var isAudio =
template[
"quick-preview-type"] ===
"audio";
478 var asynchronous = isCardTool ?
"false" :
"true";
480 code +=
'signal action(var actionId);\n';
485 if (hasSummary) isAudio =
false;
486 if (!isHorizontal) isAudio =
false;
487 if (hasMascot) isAudio =
false;
488 if (hasEmblem) isAudio =
false;
489 if (headerAsOverlay) isAudio =
false;
490 if (hasAttributes) isAudio =
false;
494 var templateCardBackground;
495 if (
template && typeof
template[
"card-background"] ===
"string") {
496 templateCardBackground =
'decodeURI("' + encodeURI(
template[
"card-background"]) +
'")';
498 templateCardBackground =
'""';
501 var backgroundElements0;
502 var backgroundElements1;
503 if (
template && typeof
template[
"card-background"] ===
"object" && (
template[
"card-background"][
"type"] ===
"color" ||
template[
"card-background"][
"type"] ===
"gradient")) {
504 var element0 = sanitizeColor(
template[
"card-background"][
"elements"][0]);
505 var element1 = sanitizeColor(
template[
"card-background"][
"elements"][1]);
506 if (element0 !== undefined) {
507 backgroundElements0 =
'"%1"'.arg(element0);
509 if (element1 !== undefined) {
510 backgroundElements1 =
'"%1"'.arg(element1);
513 code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(asynchronous).arg(templateCardBackground);
517 code +=
'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
521 var artShapeAspect = components[
"art"] && components[
"art"][
"aspect-ratio"] || 1;
522 if (isNaN(artShapeAspect)) {
526 artShapeAspect =
"(root.fixedArtShapeSize.width / root.fixedArtShapeSize.height)";
529 var widthCode, heightCode;
532 artAnchors =
'left: parent.left';
533 if (hasMascot || hasTitle) {
534 widthCode =
'height * ' + artShapeAspect;
535 heightCode =
'headerHeight + 2 * units.gu(1)';
539 widthCode =
'height * ' + artShapeAspect
540 heightCode =
'units.gu(7.625)';
543 artAnchors =
'horizontalCenter: parent.horizontalCenter;';
544 widthCode =
'root.width' 545 heightCode =
'width / ' + artShapeAspect;
548 var fallback = !isCardTool && components[
"art"] && components[
"art"][
"fallback"] ||
"";
549 fallback = encodeURI(fallback);
550 var fallbackStatusCode =
"";
551 var fallbackURICode =
'""';
552 if (fallback !==
"") {
555 fallbackStatusCode +=
'onStatusChanged: if (status === Image.Error) source = %8;';
556 fallbackURICode =
'decodeURI("%1")'.arg(fallback);
558 var artShapeHolderShapeCode;
559 if (!isConciergeMode) {
560 if (artShapeStyle ===
"icon") {
561 artShapeHolderShapeCode = kArtProportionalShapeCode;
563 var artShapeHolderShapeAspect;
564 switch (artShapeStyle) {
565 case "inset": artShapeHolderShapeAspect =
"UbuntuShape.Inset";
break;
566 case "shadow": artShapeHolderShapeAspect =
"UbuntuShape.DropShadow";
break;
568 case "flat": artShapeHolderShapeAspect =
"UbuntuShape.Flat";
break;
570 artShapeHolderShapeCode = kArtUbuntuShapeCode.arg(artShapeHolderShapeAspect);
573 artShapeHolderShapeCode =
"";
575 var artShapeHolderCode = isCardTool ? kArtShapeHolderCodeCardToolCard : kArtShapeHolderCode;
576 code += artShapeHolderCode.arg(artAnchors)
579 .arg(isConciergeMode ?
"true" :
"false")
581 .arg(artShapeHolderShapeCode)
582 .arg(fallbackStatusCode)
583 .arg(fallbackURICode);
585 code +=
'readonly property size artShapeSize: Qt.size(-1, -1);\n' 588 if (headerAsOverlay) {
589 var headerHeightCode = isCardTool ?
"headerHeight" :
"root.fixedHeaderHeight";
590 code += kOverlayLoaderCode.arg(asynchronous).arg(headerHeightCode);
593 var headerVerticalAnchors;
594 if (headerAsOverlay) {
595 headerVerticalAnchors =
'bottom: artShapeHolder.bottom; \n\ 596 bottomMargin: units.gu(1);\n';
600 headerVerticalAnchors =
'top: artShapeHolder.top; \n\ 601 topMargin: units.gu(1);\n';
603 headerVerticalAnchors =
'top: artShapeHolder.bottom; \n\ 604 topMargin: units.gu(1);\n';
607 headerVerticalAnchors =
'top: parent.top; \n\ 608 topMargin: units.gu(1);\n';
612 var headerLeftAnchor;
613 var headerLeftAnchorHasMargin =
false;
614 if (isHorizontal && hasArt) {
615 headerLeftAnchor =
'left: artShapeHolder.right; \n\ 616 leftMargin: units.gu(1);\n';
617 headerLeftAnchorHasMargin =
true;
618 }
else if (isHorizontal && isAudio) {
619 headerLeftAnchor =
'left: audioButton.right; \n\ 620 leftMargin: units.gu(1);\n';
621 headerLeftAnchorHasMargin =
true;
623 headerLeftAnchor =
'left: parent.left;\n';
626 var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary && !isAudio;
629 code +=
'readonly property int headerHeight: row.height;\n' 630 }
else if (hasMascot) {
631 code +=
'readonly property int headerHeight: mascotImage.height;\n' 632 }
else if (hasAttributes) {
633 if (hasTitle && hasSubtitle) {
634 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + attributesRow.height + attributesRow.anchors.topMargin;\n' 635 }
else if (hasTitle) {
636 code +=
'readonly property int headerHeight: titleLabel.height + attributesRow.height + attributesRow.anchors.topMargin;\n' 638 code +=
'readonly property int headerHeight: attributesRow.height;\n' 640 }
else if (isAudio) {
642 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n' 643 }
else if (hasTitle) {
644 code +=
'readonly property int headerHeight: titleLabel.height + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n' 646 code +=
'readonly property int headerHeight: audioProgressBar.height;\n' 648 }
else if (hasSubtitle) {
649 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n' 650 }
else if (hasTitle) {
651 code +=
'readonly property int headerHeight: titleLabel.height;\n' 653 code +=
'readonly property int headerHeight: 0;\n' 656 var mascotShapeCode =
'';
659 var useMascotShape = !hasBackground && !headerAsOverlay;
660 var mascotAnchors =
'';
662 mascotAnchors += headerLeftAnchor;
663 mascotAnchors += headerVerticalAnchors;
664 if (!headerLeftAnchorHasMargin) {
665 mascotAnchors +=
'leftMargin: units.gu(1);\n' 668 mascotAnchors =
'verticalCenter: parent.verticalCenter;' 671 if (useMascotShape) {
672 mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors).arg(asynchronous);
675 var mascotImageVisible = useMascotShape ?
'false' :
'showHeader';
676 var fallback = !isCardTool && components[
"mascot"] && components[
"mascot"][
"fallback"] ||
"";
677 fallback = encodeURI(fallback);
678 var fallbackStatusCode =
"";
679 var fallbackURICode =
'""';
680 if (fallback !==
"") {
683 fallbackStatusCode +=
'onStatusChanged: if (status === Image.Error) source = %4;';
684 fallbackURICode =
'decodeURI("%1")'.arg(fallback);
686 mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible).arg(fallbackStatusCode).arg(fallbackURICode);
689 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")';
691 var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
692 var titleSubtitleCode =
'';
695 if (headerAsOverlay) {
696 titleColor =
'root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white")';
697 }
else if (hasSummary) {
698 titleColor =
'summary.color';
699 }
else if (hasBackground) {
700 titleColor = summaryColorWithBackground;
702 titleColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
707 var attributesAnchors;
708 var titleContainerAnchors;
709 var titleRightAnchor;
710 var titleWidth =
"undefined";
712 var extraRightAnchor =
'';
713 var extraLeftAnchor =
'';
714 if (!touchdownOnArtShape) {
715 extraRightAnchor =
'rightMargin: units.gu(1); \n';
716 extraLeftAnchor =
'leftMargin: units.gu(1); \n';
717 }
else if (headerAsOverlay && !hasEmblem) {
718 extraRightAnchor =
'rightMargin: units.gu(1); \n';
722 titleContainerAnchors =
'verticalCenter: parent.verticalCenter; ';
724 titleContainerAnchors =
'right: parent.right; ';
725 titleContainerAnchors += headerLeftAnchor;
726 titleContainerAnchors += headerVerticalAnchors;
727 if (!headerLeftAnchorHasMargin) {
728 titleContainerAnchors += extraLeftAnchor;
732 titleRightAnchor =
'right: emblemIcon.left; \n\ 733 rightMargin: emblemIcon.width > 0 ? units.gu(0.5) : 0; \n';
735 titleRightAnchor =
'right: parent.right; \n' 736 titleRightAnchor += extraRightAnchor;
739 if (hasTitleContainer) {
741 titleAnchors = titleRightAnchor;
742 titleAnchors +=
'left: parent.left; \n\ 744 subtitleAnchors =
'right: parent.right; \n\ 745 left: parent.left; \n';
746 subtitleAnchors += extraRightAnchor;
748 attributesAnchors = subtitleAnchors +
'top: subtitleLabel.bottom;\n';
749 subtitleAnchors +=
'top: titleLabel.bottom;\n';
751 attributesAnchors = subtitleAnchors +
'top: titleLabel.bottom;\n';
753 }
else if (hasMascot) {
755 titleAnchors =
'verticalCenter: parent.verticalCenter;\n';
756 titleWidth =
"parent.width - x";
758 if (headerAsOverlay) {
760 titleAnchors = titleRightAnchor;
761 titleAnchors +=
'left: parent.left; \n\ 762 leftMargin: units.gu(1); \n\ 763 top: overlayLoader.top; \n\ 764 topMargin: units.gu(1) + overlayLoader.height - overlayLoader.overlayHeight; \n';
767 titleAnchors = titleRightAnchor;
768 titleAnchors += headerLeftAnchor;
769 titleAnchors += headerVerticalAnchors;
770 if (!headerLeftAnchorHasMargin) {
771 titleAnchors += extraLeftAnchor;
774 subtitleAnchors =
'left: titleLabel.left; \n\ 775 leftMargin: titleLabel.leftMargin; \n';
776 subtitleAnchors += extraRightAnchor;
779 subtitleAnchors +=
'right: parent.right; \n';
781 subtitleAnchors +=
'right: titleLabel.right; \n';
785 attributesAnchors = subtitleAnchors +
'top: subtitleLabel.bottom;\n';
786 subtitleAnchors +=
'top: titleLabel.bottom;\n';
788 attributesAnchors = subtitleAnchors +
'top: titleLabel.bottom;\n';
792 var titleAlignment =
"Text.AlignHCenter";
793 if (
template[
"card-layout"] ===
"horizontal" 794 || typeof components[
"title"] !==
"object" 795 || components[
"title"][
"align"] ===
"left") titleAlignment =
"Text.AlignLeft";
796 var keys = [
"mascot",
"emblem",
"subtitle",
"attributes",
"summary"];
797 for (var key in keys) {
800 if (typeof components[key] ===
"string" 801 || typeof components[key][
"field"] ===
"string") titleAlignment =
"Text.AlignLeft";
808 var titleLabelVisibleExtra = (headerAsOverlay ?
'&& overlayLoader.active':
'');
809 var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra).arg(titleWidth).arg(titleAlignment);
814 var containerCode = [];
815 var containerHeight =
'titleLabel.height';
816 containerCode.push(titleCode);
818 subtitleCode = kSubtitleLabelCode.arg(subtitleAnchors).arg(titleColor);
819 containerCode.push(subtitleCode);
820 containerHeight +=
' + subtitleLabel.height';
823 containerCode.push(kEmblemIconCode.arg(extraRightAnchor).arg(titleColor));
826 attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(titleColor);
827 containerCode.push(attributesCode);
828 containerHeight +=
' + attributesRow.height';
831 if (hasTitleContainer) {
833 titleSubtitleCode = kHeaderContainerCodeGenerator(titleContainerAnchors, containerHeight, containerCode);
836 titleSubtitleCode = titleCode;
838 titleSubtitleCode += subtitleCode;
841 titleSubtitleCode += attributesCode;
847 var rowCode = [mascotCode, titleSubtitleCode];
848 if (mascotShapeCode !=
'') {
849 rowCode.unshift(mascotShapeCode);
851 code += kHeaderRowCodeGenerator(isCardTool, headerVerticalAnchors + headerLeftAnchor, rowCode)
853 code += mascotShapeCode + mascotCode + titleSubtitleCode;
857 var audioProgressBarLeftAnchor =
'audioButton.right';
858 var audioProgressBarBottomAnchor =
'audioButton.bottom';
859 var audioProgressBarTextColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
861 code += kAudioProgressBarCode.arg(audioProgressBarBottomAnchor)
862 .arg(audioProgressBarLeftAnchor)
863 .arg(audioProgressBarTextColor);
865 var audioButtonAnchorsFill;
866 var audioButtonWidth;
867 var audioButtonHeight;
869 audioButtonAnchorsFill =
'artShapeHolder';
870 audioButtonWidth =
'undefined';
871 audioButtonHeight =
'undefined';
873 audioButtonAnchorsFill =
'undefined';
874 audioButtonWidth =
'height';
875 audioButtonHeight = isCardTool ?
'headerHeight + 2 * units.gu(1)' 876 :
'root.fixedHeaderHeight + 2 * units.gu(1)';
878 code += kAudioButtonCode.arg(audioButtonAnchorsFill).arg(audioButtonWidth).arg(audioButtonHeight).arg(asynchronous);
882 var summaryTopAnchor;
883 if (isHorizontal && hasArt) summaryTopAnchor =
'artShapeHolder.bottom';
884 else if (headerAsOverlay && hasArt) summaryTopAnchor =
'artShapeHolder.bottom';
885 else if (hasHeaderRow) summaryTopAnchor =
'row.bottom';
886 else if (hasTitleContainer) summaryTopAnchor =
'headerTitleContainer.bottom';
887 else if (hasMascot) summaryTopAnchor =
'mascotImage.bottom';
888 else if (hasAttributes) summaryTopAnchor =
'attributesRow.bottom';
889 else if (hasSubtitle) summaryTopAnchor =
'subtitleLabel.bottom';
890 else if (hasTitle) summaryTopAnchor =
'titleLabel.bottom';
891 else if (hasArt) summaryTopAnchor =
'artShapeHolder.bottom';
892 else summaryTopAnchor =
'parent.top';
896 summaryColor = summaryColorWithBackground;
898 summaryColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
901 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ?
'anchors.margins' :
'0');
903 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
906 if (hasSocialActions) {
910 if (hasSummary) socialTopAnchor =
'summary.bottom;';
911 else if (isHorizontal && hasArt) socialTopAnchor =
'artShapeHolder.bottom;';
912 else if (headerAsOverlay && hasArt) socialTopAnchor =
'artShapeHolder.bottom;';
913 else if (hasHeaderRow) socialTopAnchor =
'row.bottom;';
914 else if (hasTitleContainer) socialTopAnchor =
'headerTitleContainer.bottom;';
915 else if (hasMascot) socialTopAnchor =
'mascotImage.bottom;';
916 else if (hasAttributes) socialTopAnchor =
'attributesRow.bottom;';
917 else if (hasSubtitle) socialTopAnchor =
'subtitleLabel.bottom;';
918 else if (hasTitle) socialTopAnchor =
'titleLabel.bottom;';
919 else if (hasArt) socialTopAnchor =
'artShapeHolder.bottom;';
920 else socialTopAnchor =
'parent.top';
922 socialAnchors =
'top: ' + socialTopAnchor +
' left: parent.left; right: parent.right; topMargin: units.gu(1);' 926 socialColor = summaryColorWithBackground;
928 socialColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
931 code += kSocialActionsRowCode.arg(socialAnchors).arg(socialColor);
934 if (artShapeStyle !=
"shadow" && artShapeStyle !=
"icon") {
935 var touchdownAnchors;
937 touchdownAnchors =
'fill: backgroundLoader';
938 }
else if (touchdownOnArtShape) {
939 touchdownAnchors =
'fill: artShapeHolder';
941 touchdownAnchors =
'fill: root' 943 code += kTouchdownCode.arg(touchdownAnchors);
946 var implicitHeight =
'implicitHeight: ';
947 if (hasSocialActions) {
948 implicitHeight +=
'socialActionsRow.y + socialActionsRow.height + units.gu(1);\n';
949 }
else if (hasSummary) {
950 implicitHeight +=
'summary.y + summary.height + units.gu(1);\n';
951 }
else if (isAudio) {
952 implicitHeight +=
'audioButton.height;\n';
953 }
else if (headerAsOverlay) {
954 implicitHeight +=
'artShapeHolder.height;\n';
955 }
else if (hasHeaderRow) {
956 implicitHeight +=
'row.y + row.height + units.gu(1);\n';
957 }
else if (hasMascot) {
958 implicitHeight +=
'mascotImage.y + mascotImage.height;\n';
959 }
else if (hasTitleContainer) {
960 implicitHeight +=
'headerTitleContainer.y + headerTitleContainer.height + units.gu(1);\n';
961 }
else if (hasAttributes) {
962 implicitHeight +=
'attributesRow.y + attributesRow.height + units.gu(1);\n';
963 }
else if (hasSubtitle) {
964 implicitHeight +=
'subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
965 }
else if (hasTitle) {
966 implicitHeight +=
'titleLabel.y + titleLabel.height + units.gu(1);\n';
968 implicitHeight +=
'artShapeHolder.height;\n';
974 code += implicitHeight +
'}\n';
979 function createCardComponent(parent,
template, components, isCardTool, artShapeStyle, identifier) {
980 var imports =
'import QtQuick 2.4; \n\ 981 import Ubuntu.Components 1.3; \n\ 982 import Ubuntu.Settings.Components 0.1; \n\ 984 import Utils 0.1;\n';
985 var card = cardString(
template, components, isCardTool, artShapeStyle);
986 var code = imports +
'Component {\n' + card +
'}\n';
989 return Qt.createQmlObject(code, parent, identifier);
991 console.error(
"ERROR: Invalid component created.");
992 console.error(
"Template:");
993 console.error(JSON.stringify(
template));
994 console.error(
"Components:");
995 console.error(JSON.stringify(components));
996 console.error(
"Code:");