git.iko.soy/unity8
on xenial help sign in
First work for the emblem
3f3ad6fAndrea Cimitan
plugins/Dash/CardCreator.js+94−27
compare with xenial
unifiedsplit
@@ -181,15 +181,35 @@ var kHeaderRow3Code = 'Row { \n\
181 ] \n\
181 ] \n\
182 }\n';
182 }\n';
183
183
184+// %1 is used as anchors
185+// %2 is used as height of the container
184−// %1 is used as first child of the column
186+// %3 is used as first child of the container
185−// %2 is used as second child of the column
187+// %4 is used as second child of the container
186−var kHeaderColumnCode = 'Column { \n\
188+var kHeader2ContainerCode = 'Item { \n\
187− anchors.verticalCenter: parent.verticalCenter; \n\
189+ id: headerTitleContainer; \n\
188− spacing: units.dp(2); \n\
190+ anchors { %1 } \n\
191+ width: parent.width - x; \n\
192+ implicitHeight: %2; \n\
193+ data: [ %3\n\
194+ ,\n\
195+ %4 \n\
196+ ] \n\
197+ }\n';
198+
199+// %1 is used as anchors
200+// %2 is used as first child of the container
201+// %3 is used as second child of the container
202+// %4 is used as third child of the container
203+var kHeader3ContainerCode = 'Item { \n\
204+ id: headerTitleContainer; \n\
205+ anchors { %1 } \n\
189− width: parent.width - x;\n\
206+ width: parent.width - x; \n\
207+ implicitHeight: titleLabel.height + subtitleLabel.height; \n\
190− data: [ %1\n\
208+ data: [ %2\n\
209+ ,\n\
210+ %3 \n\
191 ,\n\
211 ,\n\
192− %2 \n\
212+ %4 \n\
193 ] \n\
213 ] \n\
194 }\n';
214 }\n';
195
215
@@ -242,12 +262,25 @@ var kTitleLabelCode = 'Label { \n\
242 horizontalAlignment: root.headerAlignment; \n\
262 horizontalAlignment: root.headerAlignment; \n\
243 }\n';
263 }\n';
244
264
265+var kEmblemImageCode = 'Image { \n\
266+ id: emblemImage; \n\
267+ objectName: "emblemImage"; \n\
268+ anchors { \n\
269+ bottom: titleLabel.baseline; \n\
270+ right: parent.right; \n\ } \n\
271+ source: cardData && cardData["emblem"]; \n\
272+ width: height; \n\
273+ height: titleLabel.font.pixelSize; \n\
274+ fillMode: Image.PreserveAspectFit; \n\
275+ }\n';
276+
245// %1 is used as anchors of subtitleLabel
277// %1 is used as anchors of subtitleLabel
246// %2 is used as color of subtitleLabel
278// %2 is used as color of subtitleLabel
247var kSubtitleLabelCode = 'Label { \n\
279var kSubtitleLabelCode = 'Label { \n\
248 id: subtitleLabel; \n\
280 id: subtitleLabel; \n\
249 objectName: "subtitleLabel"; \n\
281 objectName: "subtitleLabel"; \n\
250 anchors { %1 } \n\
282 anchors { %1 } \n\
283+ anchors.topMargin: units.dp(2); \n\
251 elide: Text.ElideRight; \n\
284 elide: Text.ElideRight; \n\
252 fontSize: "small"; \n\
285 fontSize: "small"; \n\
253 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
286 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
@@ -305,6 +338,7 @@ function cardString(template, components) {
305 var hasBackground = !isHorizontal && (template["card-background"] || components["background"] || artAndSummary);
338 var hasBackground = !isHorizontal && (template["card-background"] || components["background"] || artAndSummary);
306 var hasTitle = components["title"] || false;
339 var hasTitle = components["title"] || false;
307 var hasMascot = components["mascot"] || false;
340 var hasMascot = components["mascot"] || false;
341+ var hasEmblem = components["emblem"] && !(hasMascot && template["card-size"] === "small") || false;
308 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
342 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
309 var hasSubtitle = hasTitle && components["subtitle"] || false;
343 var hasSubtitle = hasTitle && components["subtitle"] || false;
310 var hasHeaderRow = hasMascot && hasTitle;
344 var hasHeaderRow = hasMascot && hasTitle;
@@ -425,24 +459,44 @@ function cardString(template, components) {
425
459
426 var titleAnchors;
460 var titleAnchors;
427 var subtitleAnchors;
461 var subtitleAnchors;
462+ var titleRightAnchor;
463+ var titleContainerAnchors;
464+
428− if (hasMascot && hasSubtitle) {
465+ if (hasMascot) {
429− // Using row + column
466+ titleContainerAnchors = 'verticalCenter: parent.verticalCenter; ';
467+ } else {
468+ titleContainerAnchors = 'right: parent.right; ';
469+ titleContainerAnchors += headerLeftAnchor;
470+ titleContainerAnchors += headerVerticalAnchors;
471+ }
472+ if (hasEmblem) {
473+ titleRightAnchor = 'right: emblemImage.left;\n';
474+ } else {
475+ titleRightAnchor = 'right: parent.right;\n';
476+ }
477+
478+ if (hasEmblem || (hasMascot && hasSubtitle)) {
479+ // Using titleContainer (and maybe row)
480+ titleAnchors = titleRightAnchor;
430− titleAnchors = 'left: parent.left; right: parent.right';
481+ titleAnchors += 'left: parent.left;\n\
482+ top: parent.top;';
431− subtitleAnchors = titleAnchors;
483+ subtitleAnchors = 'right: parent.right;\n\
484+ left: parent.left;\n\
485+ top: titleLabel.bottom;\n';
432 } else if (hasMascot) {
486 } else if (hasMascot) {
433− // Using row + label
487+ // Using row + titleContainer
434− titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
488+ titleAnchors = 'verticalCenter: parent.verticalCenter;\n';
435 } else {
489 } else {
436 if (headerAsOverlay) {
490 if (headerAsOverlay) {
437 // Using anchors to the overlay
491 // Using anchors to the overlay
492+ titleAnchors = titleRightAnchor;
438− titleAnchors = 'left: parent.left; \n\
493+ titleAnchors += 'left: parent.left; \n\
439− leftMargin: units.gu(1); \n\
494+ leftMargin: units.gu(1); \n\
440− right: parent.right; \n\
441− top: overlayLoader.top; \n\
495+ top: overlayLoader.top; \n\
442− topMargin: units.gu(1);\n';
496+ topMargin: units.gu(1);\n';
443 } else {
497 } else {
444 // Using anchors to the mascot/parent
498 // Using anchors to the mascot/parent
445− titleAnchors = "right: parent.right;";
499+ titleAnchors = titleRightAnchor;
446 titleAnchors += headerLeftAnchor;
500 titleAnchors += headerLeftAnchor;
447 titleAnchors += headerVerticalAnchors;
501 titleAnchors += headerVerticalAnchors;
448 if (!headerLeftAnchorHasMargin) {
502 if (!headerLeftAnchorHasMargin) {
@@ -451,22 +505,34 @@ function cardString(template, components) {
451 }
505 }
452 subtitleAnchors = 'left: titleLabel.left; \n\
506 subtitleAnchors = 'left: titleLabel.left; \n\
453 leftMargin: titleLabel.leftMargin; \n\
507 leftMargin: titleLabel.leftMargin; \n\
454− right: titleLabel.right; \n\
455− top: titleLabel.bottom; \n\
508+ top: titleLabel.bottom;\n';
456− topMargin: units.dp(2);\n';
509+ if (hasEmblem) {
510+ // using container
511+ subtitleAnchors += 'right: parent.right; \n';
512+ } else {
513+ subtitleAnchors += 'right: titleLabel.right; \n';
514+ }
457 }
515 }
458
516
459 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
517 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
518+ var titleCode;
460− var titleCode = kTitleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
519+ titleCode = kTitleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
461 var subtitleCode = "";
520 var subtitleCode = "";
462 if (hasSubtitle) {
521 if (hasSubtitle) {
463 subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
522 subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
464 }
523 }
465
524
525+ if (hasEmblem && hasSubtitle) {
526+ // using container 3
527+ titleSubtitleCode = kHeader3ContainerCode.arg(titleContainerAnchors).arg(titleCode).arg(kEmblemImageCode).arg(kSubtitleLabelCode.arg(subtitleAnchors).arg(color));
528+ } else if (hasEmblem) {
529+ // container with emblem
530+ titleSubtitleCode = kHeader2ContainerCode.arg(titleContainerAnchors).arg('titleLabel.height').arg(titleCode).arg(kEmblemImageCode);
466− if (hasMascot && hasSubtitle) {
531+ } else if (hasMascot && hasSubtitle) {
467− // If using row + column wrap the code in the column
532+ // container with subtitle
468− titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
533+ titleSubtitleCode = kHeader2ContainerCode.arg(titleContainerAnchors).arg('titleLabel.height + subtitleLabel.height').arg(titleCode).arg(subtitleCode);
469 } else {
534 } else {
535+ // no container
470 titleSubtitleCode = titleCode + subtitleCode;
536 titleSubtitleCode = titleCode + subtitleCode;
471 }
537 }
472 }
538 }
@@ -486,6 +552,7 @@ function cardString(template, components) {
486 if (isHorizontal && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
552 if (isHorizontal && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
487 else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
553 else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
488 else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
554 else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
555+ else if (hasEmblem || (hasMascot && hasSubtitle)) summaryTopAnchor = "headerTitleContainer.bottom";
489 else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
556 else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
490 else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
557 else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
491 else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";
558 else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";
tests/qmltests/Dash/CardHelpers.js+1
@@ -59,6 +59,7 @@ var fullMapping = ' \
59 "art": "art", \
59 "art": "art", \
60 "subtitle": "subtitle", \
60 "subtitle": "subtitle", \
61 "mascot": "mascot", \
61 "mascot": "mascot", \
62+ "emblem": "emblem", \
62 "summary": "summary" \
63 "summary": "summary" \
63}'
64}'
64
65
tests/qmltests/Dash/tst_Card.qml+18
@@ -31,6 +31,7 @@ Rectangle {
31 {
31 {
32 "art": "../../../tests/qmltests/Dash/artwork/music-player-design.png",
32 "art": "../../../tests/qmltests/Dash/artwork/music-player-design.png",
33 "mascot": "../../../tests/qmltests/Dash/artwork/avatar.png",
33 "mascot": "../../../tests/qmltests/Dash/artwork/avatar.png",
34+ "emblem": "../../../tests/qmltests/Dash/artwork/emblem.png",
34 "title": "foo",
35 "title": "foo",
35 "subtitle": "bar",
36 "subtitle": "bar",
36 "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
37 "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
@@ -456,6 +457,23 @@ Rectangle {
456 tryCompareFunction(function() { return Qt.colorEqual(subtitle.color, fontColor); }, true);
457 tryCompareFunction(function() { return Qt.colorEqual(subtitle.color, fontColor); }, true);
457 }
458 }
458
459
460+ function test_emblemImage_data() {
461+ return [
462+ { tag: "Art and summary", emblem: true, index: 0 },
463+ { tag: "Art and summary, small", emblem: false, index: 1 },
464+ { tag: "No header", emblem: false, index: 7 },
465+ { tag: "With background", emblem: true, index: 10 },
466+ ];
467+ }
468+
469+ function test_emblemImage(data) {
470+ selector.selectedIndex = data.index;
471+ waitForRendering(card);
472+
473+ var emblemImage = findChild(card, "emblemImage");
474+ compare(emblemImage !== null, data.emblem);
475+ }
476+
459 function test_mascotShape_data() {
477 function test_mascotShape_data() {
460 return [
478 return [
461 { tag: "Art and summary", shape: false, index: 0 },
479 { tag: "Art and summary", shape: false, index: 0 },