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\ 70 var kArtShapeHolderCode =
'Item { \n\ 71 id: artShapeHolder; \n\ 72 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\ 73 width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width; \n\ 76 id: artShapeLoader; \n\ 77 objectName: "artShapeLoader"; \n\ 78 readonly property string cardArt: cardData && cardData["art"] || %8; \n\ 79 active: cardArt != ""; \n\ 81 visible: status == Loader.Ready; \n\ 82 sourceComponent: Item { \n\ 84 objectName: "artShape"; \n\ 85 visible: image.status == Image.Ready; \n\ 86 readonly property alias image: artImage; \n\ 87 ShaderEffectSource { \n\ 88 id: artShapeSource; \n\ 89 sourceItem: artImage; \n\ 90 anchors.centerIn: parent; \n\ 96 anchors.fill: parent; \n\ 98 sourceComponent: root.artShapeStyle === "icon" ? artShapeIconComponent : artShapeShapeComponent; \n\ 100 id: artShapeShapeComponent; \n\ 102 source: artShapeSource; \n\ 103 sourceFillMode: UbuntuShape.PreserveAspectCrop; \n\ 104 radius: "medium"; \n\ 106 switch (root.artShapeStyle) { \n\ 107 case "inset": return UbuntuShape.Inset; \n\ 108 case "shadow": return UbuntuShape.DropShadow; \n\ 110 case "flat": return UbuntuShape.Flat; \n\ 116 id: artShapeIconComponent; \n\ 117 ProportionalShape { source: artShapeSource; aspect: UbuntuShape.DropShadow; } \n\ 120 readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\ 121 readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : %5; \n\ 122 Component.onCompleted: { updateWidthHeightBindings(); } \n\ 123 Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); } \n\ 124 function updateWidthHeightBindings() { \n\ 125 if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) { \n\ 126 width = root.fixedArtShapeSize.width; \n\ 127 height = root.fixedArtShapeSize.height; \n\ 129 width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width }); \n\ 130 height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height }); \n\ 133 CroppedImageMinimumSourceSize { \n\ 135 objectName: "artImage"; \n\ 136 source: artShapeLoader.cardArt; \n\ 137 asynchronous: %6; \n\ 150 var kAudioButtonCode =
'AbstractButton { \n\ 152 anchors.fill: %1; \n\ 155 readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\ 157 anchors.fill: parent; \n\ 158 visible: parent.pressed; \n\ 159 radius: "medium"; \n\ 162 color: Qt.rgba(0, 0, 0, 0.5); \n\ 163 anchors.centerIn: parent; \n\ 164 width: parent.width * 0.5; \n\ 166 radius: width / 2; \n\ 169 anchors.centerIn: parent; \n\ 170 width: parent.width * 0.3; \n\ 173 name: DashAudioPlayer.playing && AudioUrlComparer.compare(parent.source, DashAudioPlayer.currentSource) ? "media-playback-pause" : "media-playback-start"; \n\ 175 asynchronous: %4; \n\ 178 if (AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)) { \n\ 179 if (DashAudioPlayer.playing) { \n\ 180 DashAudioPlayer.pause(); \n\ 182 DashAudioPlayer.play(); \n\ 185 var playlist = (cardData["quickPreviewData"] && cardData["quickPreviewData"]["playlist"]) || null; \n\ 186 DashAudioPlayer.playSource(source, playlist); \n\ 189 onPressAndHold: { \n\ 190 root.pressAndHold(); \n\ 196 var kOverlayLoaderCode =
'Loader { \n\ 197 id: overlayLoader; \n\ 198 readonly property real overlayHeight: %2 + units.gu(2); \n\ 199 anchors.fill: artShapeHolder; \n\ 200 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\ 201 asynchronous: %1; \n\ 202 visible: showHeader && status == Loader.Ready; \n\ 203 sourceComponent: UbuntuShapeOverlay { \n\ 205 property real luminance: Style.luminance(overlayColor); \n\ 206 aspect: UbuntuShape.Flat; \n\ 207 radius: "medium"; \n\ 208 overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\ 209 overlayRect: Qt.rect(0, 1 - overlayLoader.overlayHeight / height, 1, 1); \n\ 214 function kHeaderRowCodeGenerator() {
215 var kHeaderRowCodeTemplate =
'Row { \n\ 217 objectName: "outerRow"; \n\ 218 property real margins: units.gu(1); \n\ 219 spacing: margins; \n\ 222 anchors.right: parent.right; \n\ 223 anchors.margins: margins; \n\ 224 anchors.rightMargin: 0; \n\ 229 var args = Array.prototype.slice.call(arguments);
230 var isCardTool = args.shift();
231 var heightCode = isCardTool ?
"" :
"height: root.fixedHeaderHeight; \n";
232 var code = kHeaderRowCodeTemplate.arg(args.shift()).arg(heightCode).arg(args.join(
',\n'));
237 function kHeaderContainerCodeGenerator() {
238 var headerContainerCodeTemplate =
'Item { \n\ 239 id: headerTitleContainer; \n\ 241 width: parent.width - x; \n\ 242 implicitHeight: %2; \n\ 247 var args = Array.prototype.slice.call(arguments);
248 var code = headerContainerCodeTemplate.arg(args.shift()).arg(args.shift()).arg(args.join(
',\n'));
254 var kMascotShapeLoaderCode =
'Loader { \n\ 255 id: mascotShapeLoader; \n\ 256 objectName: "mascotShapeLoader"; \n\ 257 asynchronous: %2; \n\ 258 active: mascotImage.status === Image.Ready; \n\ 259 visible: showHeader && active && status == Loader.Ready; \n\ 260 width: units.gu(6); \n\ 261 height: units.gu(5.625); \n\ 262 sourceComponent: UbuntuShape { image: mascotImage } \n\ 270 var kMascotImageCode =
'CroppedImageMinimumSourceSize { \n\ 272 objectName: "mascotImage"; \n\ 274 source: cardData && cardData["mascot"] || %4; \n\ 275 width: units.gu(6); \n\ 276 height: units.gu(5.625); \n\ 277 horizontalAlignment: Image.AlignHCenter; \n\ 278 verticalAlignment: Image.AlignVCenter; \n\ 288 var kTitleLabelCode =
'Label { \n\ 290 objectName: "titleLabel"; \n\ 292 elide: Text.ElideRight; \n\ 293 fontSize: "small"; \n\ 294 wrapMode: Text.Wrap; \n\ 295 maximumLineCount: 2; \n\ 296 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\ 298 visible: showHeader %3; \n\ 300 text: root.title; \n\ 301 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; \n\ 302 horizontalAlignment: %5; \n\ 309 var kEmblemIconCode =
'Icon { \n\ 311 objectName: "emblemIcon"; \n\ 313 bottom: titleLabel.baseline; \n\ 314 right: parent.right; \n\ 317 source: cardData && cardData["emblem"] || ""; \n\ 319 height: source != "" ? titleLabel.font.pixelSize : 0; \n\ 320 width: implicitWidth > 0 && implicitHeight > 0 ? (implicitWidth / implicitHeight * height) : implicitWidth; \n\ 324 var kTouchdownCode =
'UbuntuShape { \n\ 326 objectName: "touchdown"; \n\ 328 visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed; \n\ 329 radius: "medium"; \n\ 330 borderSource: "radius_pressed.sci" \n\ 335 var kSubtitleLabelCode =
'Label { \n\ 336 id: subtitleLabel; \n\ 337 objectName: "subtitleLabel"; \n\ 339 anchors.topMargin: units.dp(2); \n\ 340 elide: Text.ElideRight; \n\ 341 maximumLineCount: 1; \n\ 342 fontSize: "x-small"; \n\ 343 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\ 345 visible: titleLabel.visible && titleLabel.text; \n\ 346 text: cardData && cardData["subtitle"] || ""; \n\ 347 font.weight: Font.Light; \n\ 352 var kAttributesRowCode =
'CardAttributes { \n\ 353 id: attributesRow; \n\ 354 objectName: "attributesRow"; \n\ 357 fontScale: root.fontScale; \n\ 358 model: cardData && cardData["attributes"]; \n\ 364 var kSummaryLabelCode =
'Label { \n\ 366 objectName: "summaryLabel"; \n\ 369 left: parent.left; \n\ 370 right: parent.right; \n\ 371 margins: units.gu(1); \n\ 374 wrapMode: Text.Wrap; \n\ 375 maximumLineCount: 5; \n\ 376 elide: Text.ElideRight; \n\ 377 text: cardData && cardData["summary"] || ""; \n\ 378 height: text ? implicitHeight : 0; \n\ 379 fontSize: "small"; \n\ 386 var kAudioProgressBarCode =
'CardAudioProgress { \n\ 387 id: audioProgressBar; \n\ 388 duration: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["duration"]) || 0; \n\ 389 source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || ""; \n\ 393 right: parent.right; \n\ 394 margins: units.gu(1); \n\ 399 function sanitizeColor(colorString) {
400 if (colorString !== undefined) {
401 if (colorString.match(/^[#a-z0-9]*$/i) === null) {
411 function cardString(
template, components, isCardTool) {
414 var templateInteractive = (
template == null ?
true : (
template[
"non-interactive"] !== undefined ? !
template[
"non-interactive"] :
true)) ?
"true" :
"false";
416 code =
'AbstractButton { \n\ 418 property var cardData; \n\ 419 property string artShapeStyle: "inset"; \n\ 420 property string backgroundShapeStyle: "inset"; \n\ 421 property real fontScale: 1.0; \n\ 422 property var scopeStyle: null; \n\ 424 property size fixedArtShapeSize: Qt.size(-1, -1); \n\ 425 readonly property string title: cardData && cardData["title"] || ""; \n\ 426 property bool showHeader: true; \n\ 427 implicitWidth: childrenRect.width; \n\ 429 \n'.arg(templateInteractive);
431 code = code.arg(isCardTool ?
"" :
"property int fixedHeaderHeight: -1; \n");
433 var hasArt = components[
"art"] && components[
"art"][
"field"] ||
false;
434 var hasSummary = components[
"summary"] ||
false;
435 var isConciergeMode = components[
"art"] && components[
"art"][
"conciergeMode"] ||
false;
436 var artAndSummary = hasArt && hasSummary && !isConciergeMode;
437 var isHorizontal =
template[
"card-layout"] ===
"horizontal";
438 var hasBackground = (!isHorizontal && (
template[
"card-background"] || components[
"background"] || artAndSummary)) ||
439 (hasSummary && (
template[
"card-background"] || components[
"background"]));
440 var hasTitle = components[
"title"] ||
false;
441 var hasMascot = components[
"mascot"] ||
false;
442 var hasEmblem = components[
"emblem"] && !(hasMascot &&
template[
"card-size"] ===
"small") ||
false;
443 var headerAsOverlay = hasArt &&
template &&
template[
"overlay"] ===
true && (hasTitle || hasMascot);
444 var hasSubtitle = hasTitle && components[
"subtitle"] ||
false;
445 var hasHeaderRow = hasMascot && hasTitle;
446 var hasAttributes = hasTitle && components[
"attributes"] && components[
"attributes"][
"field"] ||
false;
447 var isAudio =
template[
"quick-preview-type"] ===
"audio";
448 var asynchronous = isCardTool ?
"false" :
"true";
454 if (hasSummary) isAudio =
false;
455 if (!isHorizontal) isAudio =
false;
456 if (hasMascot) isAudio =
false;
457 if (hasEmblem) isAudio =
false;
458 if (headerAsOverlay) isAudio =
false;
459 if (hasAttributes) isAudio =
false;
463 var templateCardBackground;
464 if (
template && typeof
template[
"card-background"] ===
"string") {
465 templateCardBackground =
'decodeURI("' + encodeURI(
template[
"card-background"]) +
'")';
467 templateCardBackground =
'""';
470 var backgroundElements0;
471 var backgroundElements1;
472 if (
template && typeof
template[
"card-background"] ===
"object" && (
template[
"card-background"][
"type"] ===
"color" ||
template[
"card-background"][
"type"] ===
"gradient")) {
473 var element0 = sanitizeColor(
template[
"card-background"][
"elements"][0]);
474 var element1 = sanitizeColor(
template[
"card-background"][
"elements"][1]);
475 if (element0 !== undefined) {
476 backgroundElements0 =
'"%1"'.arg(element0);
478 if (element1 !== undefined) {
479 backgroundElements1 =
'"%1"'.arg(element1);
482 code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(asynchronous).arg(templateCardBackground);
486 code +=
'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
488 var widthCode, heightCode;
491 artAnchors =
'left: parent.left';
492 if (hasMascot || hasTitle) {
493 widthCode =
'height * artShape.aspect' 494 heightCode =
'headerHeight + 2 * units.gu(1)';
498 widthCode =
'height * artShape.aspect' 499 heightCode =
'units.gu(7.625)';
502 artAnchors =
'horizontalCenter: parent.horizontalCenter;';
503 widthCode =
'root.width' 504 heightCode =
'width / artShape.aspect';
507 var aspectRatio = components[
"art"] && components[
"art"][
"aspect-ratio"] || 1;
508 if (isNaN(aspectRatio)) {
511 var fallback = !isCardTool && components[
"art"] && components[
"art"][
"fallback"] ||
"";
512 fallback = encodeURI(fallback);
513 var fallbackStatusCode =
"";
514 var fallbackURICode =
'""';
515 if (fallback !==
"") {
518 fallbackStatusCode +=
'onStatusChanged: if (status === Image.Error) source = %8;';
519 fallbackURICode =
'decodeURI("%1")'.arg(fallback);
521 code += kArtShapeHolderCode.arg(artAnchors)
524 .arg(isConciergeMode ?
"false" :
"true")
527 .arg(fallbackStatusCode)
528 .arg(fallbackURICode);
530 code +=
'readonly property size artShapeSize: Qt.size(-1, -1);\n' 533 if (headerAsOverlay) {
534 var headerHeightCode = isCardTool ?
"headerHeight" :
"root.fixedHeaderHeight";
535 code += kOverlayLoaderCode.arg(asynchronous).arg(headerHeightCode);
538 var headerVerticalAnchors;
539 if (headerAsOverlay) {
540 headerVerticalAnchors =
'bottom: artShapeHolder.bottom; \n\ 541 bottomMargin: units.gu(1);\n';
545 headerVerticalAnchors =
'top: artShapeHolder.top; \n\ 546 topMargin: units.gu(1);\n';
548 headerVerticalAnchors =
'top: artShapeHolder.bottom; \n\ 549 topMargin: units.gu(1);\n';
552 headerVerticalAnchors =
'top: parent.top; \n\ 553 topMargin: units.gu(1);\n';
557 var headerLeftAnchor;
558 var headerLeftAnchorHasMargin =
false;
559 if (isHorizontal && hasArt) {
560 headerLeftAnchor =
'left: artShapeHolder.right; \n\ 561 leftMargin: units.gu(1);\n';
562 headerLeftAnchorHasMargin =
true;
563 }
else if (isHorizontal && isAudio) {
564 headerLeftAnchor =
'left: audioButton.right; \n\ 565 leftMargin: units.gu(1);\n';
566 headerLeftAnchorHasMargin =
true;
568 headerLeftAnchor =
'left: parent.left;\n';
571 var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary && !isAudio;
574 code +=
'readonly property int headerHeight: row.height;\n' 575 }
else if (hasMascot) {
576 code +=
'readonly property int headerHeight: mascotImage.height;\n' 577 }
else if (hasAttributes) {
578 if (hasTitle && hasSubtitle) {
579 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + attributesRow.height + attributesRow.anchors.topMargin;\n' 580 }
else if (hasTitle) {
581 code +=
'readonly property int headerHeight: titleLabel.height + attributesRow.height + attributesRow.anchors.topMargin;\n' 583 code +=
'readonly property int headerHeight: attributesRow.height;\n' 585 }
else if (isAudio) {
587 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n' 588 }
else if (hasTitle) {
589 code +=
'readonly property int headerHeight: titleLabel.height + audioProgressBar.height + audioProgressBar.anchors.topMargin;\n' 591 code +=
'readonly property int headerHeight: audioProgressBar.height;\n' 593 }
else if (hasSubtitle) {
594 code +=
'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n' 595 }
else if (hasTitle) {
596 code +=
'readonly property int headerHeight: titleLabel.height;\n' 598 code +=
'readonly property int headerHeight: 0;\n' 601 var mascotShapeCode =
'';
604 var useMascotShape = !hasBackground && !headerAsOverlay;
605 var mascotAnchors =
'';
607 mascotAnchors += headerLeftAnchor;
608 mascotAnchors += headerVerticalAnchors;
609 if (!headerLeftAnchorHasMargin) {
610 mascotAnchors +=
'leftMargin: units.gu(1);\n' 613 mascotAnchors =
'verticalCenter: parent.verticalCenter;' 616 if (useMascotShape) {
617 mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors).arg(asynchronous);
620 var mascotImageVisible = useMascotShape ?
'false' :
'showHeader';
621 var fallback = !isCardTool && components[
"mascot"] && components[
"mascot"][
"fallback"] ||
"";
622 fallback = encodeURI(fallback);
623 var fallbackStatusCode =
"";
624 var fallbackURICode =
'""';
625 if (fallback !==
"") {
628 fallbackStatusCode +=
'onStatusChanged: if (status === Image.Error) source = %4;';
629 fallbackURICode =
'decodeURI("%1")'.arg(fallback);
631 mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible).arg(fallbackStatusCode).arg(fallbackURICode);
634 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")';
636 var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
637 var titleSubtitleCode =
'';
640 if (headerAsOverlay) {
641 titleColor =
'root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white")';
642 }
else if (hasSummary) {
643 titleColor =
'summary.color';
644 }
else if (hasBackground) {
645 titleColor = summaryColorWithBackground;
647 titleColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
652 var attributesAnchors;
653 var titleContainerAnchors;
654 var titleRightAnchor;
655 var titleWidth =
"undefined";
657 var extraRightAnchor =
'';
658 var extraLeftAnchor =
'';
659 if (!touchdownOnArtShape) {
660 extraRightAnchor =
'rightMargin: units.gu(1); \n';
661 extraLeftAnchor =
'leftMargin: units.gu(1); \n';
662 }
else if (headerAsOverlay && !hasEmblem) {
663 extraRightAnchor =
'rightMargin: units.gu(1); \n';
667 titleContainerAnchors =
'verticalCenter: parent.verticalCenter; ';
669 titleContainerAnchors =
'right: parent.right; ';
670 titleContainerAnchors += headerLeftAnchor;
671 titleContainerAnchors += headerVerticalAnchors;
672 if (!headerLeftAnchorHasMargin) {
673 titleContainerAnchors += extraLeftAnchor;
677 titleRightAnchor =
'right: emblemIcon.left; \n\ 678 rightMargin: emblemIcon.width > 0 ? units.gu(0.5) : 0; \n';
680 titleRightAnchor =
'right: parent.right; \n' 681 titleRightAnchor += extraRightAnchor;
684 if (hasTitleContainer) {
686 titleAnchors = titleRightAnchor;
687 titleAnchors +=
'left: parent.left; \n\ 689 subtitleAnchors =
'right: parent.right; \n\ 690 left: parent.left; \n';
691 subtitleAnchors += extraRightAnchor;
693 attributesAnchors = subtitleAnchors +
'top: subtitleLabel.bottom;\n';
694 subtitleAnchors +=
'top: titleLabel.bottom;\n';
696 attributesAnchors = subtitleAnchors +
'top: titleLabel.bottom;\n';
698 }
else if (hasMascot) {
700 titleAnchors =
'verticalCenter: parent.verticalCenter;\n';
701 titleWidth =
"parent.width - x";
703 if (headerAsOverlay) {
705 titleAnchors = titleRightAnchor;
706 titleAnchors +=
'left: parent.left; \n\ 707 leftMargin: units.gu(1); \n\ 708 top: overlayLoader.top; \n\ 709 topMargin: units.gu(1) + overlayLoader.height - overlayLoader.overlayHeight; \n';
712 titleAnchors = titleRightAnchor;
713 titleAnchors += headerLeftAnchor;
714 titleAnchors += headerVerticalAnchors;
715 if (!headerLeftAnchorHasMargin) {
716 titleAnchors += extraLeftAnchor;
719 subtitleAnchors =
'left: titleLabel.left; \n\ 720 leftMargin: titleLabel.leftMargin; \n';
721 subtitleAnchors += extraRightAnchor;
724 subtitleAnchors +=
'right: parent.right; \n';
726 subtitleAnchors +=
'right: titleLabel.right; \n';
730 attributesAnchors = subtitleAnchors +
'top: subtitleLabel.bottom;\n';
731 subtitleAnchors +=
'top: titleLabel.bottom;\n';
733 attributesAnchors = subtitleAnchors +
'top: titleLabel.bottom;\n';
737 var titleAlignment =
"Text.AlignHCenter";
738 if (
template[
"card-layout"] ===
"horizontal" 739 || typeof components[
"title"] !==
"object" 740 || components[
"title"][
"align"] ===
"left") titleAlignment =
"Text.AlignLeft";
741 var keys = [
"mascot",
"emblem",
"subtitle",
"attributes",
"summary"];
742 for (var key in keys) {
745 if (typeof components[key] ===
"string" 746 || typeof components[key][
"field"] ===
"string") titleAlignment =
"Text.AlignLeft";
753 var titleLabelVisibleExtra = (headerAsOverlay ?
'&& overlayLoader.active':
'');
754 var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra).arg(titleWidth).arg(titleAlignment);
759 var containerCode = [];
760 var containerHeight =
'titleLabel.height';
761 containerCode.push(titleCode);
763 subtitleCode = kSubtitleLabelCode.arg(subtitleAnchors).arg(titleColor);
764 containerCode.push(subtitleCode);
765 containerHeight +=
' + subtitleLabel.height';
768 containerCode.push(kEmblemIconCode.arg(extraRightAnchor).arg(titleColor));
771 attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(titleColor);
772 containerCode.push(attributesCode);
773 containerHeight +=
' + attributesRow.height';
776 if (hasTitleContainer) {
778 titleSubtitleCode = kHeaderContainerCodeGenerator(titleContainerAnchors, containerHeight, containerCode);
781 titleSubtitleCode = titleCode;
783 titleSubtitleCode += subtitleCode;
786 titleSubtitleCode += attributesCode;
792 var rowCode = [mascotCode, titleSubtitleCode];
793 if (mascotShapeCode !=
'') {
794 rowCode.unshift(mascotShapeCode);
796 code += kHeaderRowCodeGenerator(isCardTool, headerVerticalAnchors + headerLeftAnchor, rowCode)
798 code += mascotShapeCode + mascotCode + titleSubtitleCode;
802 var audioProgressBarLeftAnchor =
'audioButton.right';
803 var audioProgressBarBottomAnchor =
'audioButton.bottom';
804 var audioProgressBarTextColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
806 code += kAudioProgressBarCode.arg(audioProgressBarBottomAnchor)
807 .arg(audioProgressBarLeftAnchor)
808 .arg(audioProgressBarTextColor);
810 var audioButtonAnchorsFill;
811 var audioButtonWidth;
812 var audioButtonHeight;
814 audioButtonAnchorsFill =
'artShapeHolder';
815 audioButtonWidth =
'undefined';
816 audioButtonHeight =
'undefined';
818 audioButtonAnchorsFill =
'undefined';
819 audioButtonWidth =
'height';
820 audioButtonHeight = isCardTool ?
'headerHeight + 2 * units.gu(1)' 821 :
'root.fixedHeaderHeight + 2 * units.gu(1)';
823 code += kAudioButtonCode.arg(audioButtonAnchorsFill).arg(audioButtonWidth).arg(audioButtonHeight).arg(asynchronous);
827 var summaryTopAnchor;
828 if (isHorizontal && hasArt) summaryTopAnchor =
'artShapeHolder.bottom';
829 else if (headerAsOverlay && hasArt) summaryTopAnchor =
'artShapeHolder.bottom';
830 else if (hasHeaderRow) summaryTopAnchor =
'row.bottom';
831 else if (hasTitleContainer) summaryTopAnchor =
'headerTitleContainer.bottom';
832 else if (hasMascot) summaryTopAnchor =
'mascotImage.bottom';
833 else if (hasAttributes) summaryTopAnchor =
'attributesRow.bottom';
834 else if (hasSubtitle) summaryTopAnchor =
'subtitleLabel.bottom';
835 else if (hasTitle) summaryTopAnchor =
'titleLabel.bottom';
836 else if (hasArt) summaryTopAnchor =
'artShapeHolder.bottom';
837 else summaryTopAnchor =
'parent.top';
841 summaryColor = summaryColorWithBackground;
843 summaryColor =
'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
846 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ?
'anchors.margins' :
'0');
848 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
851 var touchdownAnchors;
853 touchdownAnchors =
'fill: backgroundLoader';
854 }
else if (touchdownOnArtShape) {
855 touchdownAnchors =
'fill: artShapeHolder';
857 touchdownAnchors =
'fill: root' 859 code += kTouchdownCode.arg(touchdownAnchors);
861 var implicitHeight =
'implicitHeight: ';
863 implicitHeight +=
'summary.y + summary.height + units.gu(1);\n';
864 }
else if (isAudio) {
865 implicitHeight +=
'audioButton.height;\n';
866 }
else if (headerAsOverlay) {
867 implicitHeight +=
'artShapeHolder.height;\n';
868 }
else if (hasHeaderRow) {
869 implicitHeight +=
'row.y + row.height + units.gu(1);\n';
870 }
else if (hasMascot) {
871 implicitHeight +=
'mascotImage.y + mascotImage.height;\n';
872 }
else if (hasTitleContainer) {
873 implicitHeight +=
'headerTitleContainer.y + headerTitleContainer.height + units.gu(1);\n';
874 }
else if (hasAttributes) {
875 implicitHeight +=
'attributesRow.y + attributesRow.height + units.gu(1);\n';
876 }
else if (hasSubtitle) {
877 implicitHeight +=
'subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
878 }
else if (hasTitle) {
879 implicitHeight +=
'titleLabel.y + titleLabel.height + units.gu(1);\n';
881 implicitHeight +=
'artShapeHolder.height;\n';
887 code += implicitHeight +
'}\n';
892 function createCardComponent(parent,
template, components, isCardTool, identifier) {
893 var imports =
'import QtQuick 2.4; \n\ 894 import Ubuntu.Components 1.3; \n\ 895 import Ubuntu.Settings.Components 0.1; \n\ 897 import Utils 0.1;\n';
898 var card = cardString(
template, components, isCardTool);
899 var code = imports +
'Component {\n' + card +
'}\n';
902 return Qt.createQmlObject(code, parent, identifier);
904 console.error(
"ERROR: Invalid component created.");
905 console.error(
"Template:");
906 console.error(JSON.stringify(
template));
907 console.error(
"Components:");
908 console.error(JSON.stringify(components));
909 console.error(
"Code:");