on xenial help sign in
Set width of title label when inside the title row
commit6a339171214e6a6b2edbd6744a314e6fa27593e4 authorAlbert Astals Cid <albert.astals@canonical.com> dateMon 22 Jun 2015, 10:29 (11 years ago) parentc4c7e43
10 files changed+118−2
plugins/Dash/CardCreator.js+6−2 tests/plugins/Dash/cardcreator/1.res+1 tests/plugins/Dash/cardcreator/2.res+1 tests/plugins/Dash/cardcreator/3.res+1 tests/plugins/Dash/cardcreator/4.res+1 tests/plugins/Dash/cardcreator/5.res+1 tests/plugins/Dash/cardcreator/6.res+1 tests/plugins/Dash/cardcreator/7.res+1 tests/plugins/Dash/cardcreator/8.res+102 tests/plugins/Dash/cardcreator/8.tst+3
plugins/Dash/CardCreator.js+6−2
@@ -155,7 +155,7 @@ var kOverlayLoaderCode = 'Loader { \n\
155155
156156// multiple row version of HeaderRowCode
157157function kHeaderRowCodeGenerator() {
158−var kHeaderRowCodeTemplate = 'Row { \n\
158+ var kHeaderRowCodeTemplate = 'Row { \n\
159159 id: row; \n\
160160 objectName: "outerRow"; \n\
161161 property real margins: units.gu(1); \n\
@@ -220,6 +220,7 @@ var kMascotImageCode = 'CroppedImageMinimumSourceSize { \n\
220220// %1 is used as anchors of titleLabel
221221// %2 is used as color of titleLabel
222222// %3 is used as extra condition for visible of titleLabel
223+// %4 is used as title width
223224var kTitleLabelCode = 'Label { \n\
224225 id: titleLabel; \n\
225226 objectName: "titleLabel"; \n\
@@ -231,6 +232,7 @@ var kTitleLabelCode = 'Label { \n\
231232 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
232233 color: %2; \n\
233234 visible: showHeader %3; \n\
235+ width: %4; \n\
234236 text: root.title; \n\
235237 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; \n\
236238 horizontalAlignment: root.titleAlignment; \n\
@@ -491,6 +493,7 @@ function cardString(template, components) {
491493 var attributesAnchors;
492494 var titleContainerAnchors;
493495 var titleRightAnchor;
496+ var titleWidth = "undefined";
494497
495498 var extraRightAnchor = '';
496499 var extraLeftAnchor = '';
@@ -536,6 +539,7 @@ function cardString(template, components) {
536539 } else if (hasMascot) {
537540 // Using row + titleContainer
538541 titleAnchors = 'verticalCenter: parent.verticalCenter;\n';
542+ titleWidth = "parent.width - x";
539543 } else {
540544 if (headerAsOverlay) {
541545 // Using anchors to the overlay
@@ -573,7 +577,7 @@ function cardString(template, components) {
573577
574578 // code for different elements
575579 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
576− var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra);
580+ var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra).arg(titleWidth);
577581 var subtitleCode;
578582 var attributesCode;
579583
tests/plugins/Dash/cardcreator/1.res+1
@@ -89,6 +89,7 @@ Label {
8989 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9090 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
9191 visible: showHeader ;
92+ width: undefined;
9293 text: root.title;
9394 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
9495 horizontalAlignment: root.titleAlignment;
tests/plugins/Dash/cardcreator/2.res+1
@@ -90,6 +90,7 @@ CroppedImageMinimumSourceSize {
9090 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9191 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
9292 visible: showHeader ;
93+ width: undefined;
9394 text: root.title;
9495 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
9596 horizontalAlignment: root.titleAlignment;
tests/plugins/Dash/cardcreator/3.res+1
@@ -89,6 +89,7 @@ Label {
8989 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9090 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
9191 visible: showHeader ;
92+ width: undefined;
9293 text: root.title;
9394 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
9495 horizontalAlignment: root.titleAlignment;
tests/plugins/Dash/cardcreator/4.res+1
@@ -74,6 +74,7 @@ Label {
7474 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
7575 color: root.scopeStyle ? root.scopeStyle.foreground : Theme.palette.normal.baseText;
7676 visible: showHeader ;
77+ width: undefined;
7778 text: root.title;
7879 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
7980 horizontalAlignment: root.titleAlignment;
tests/plugins/Dash/cardcreator/5.res+1
@@ -133,6 +133,7 @@ Label {
133133 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
134134 color: root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
135135 visible: showHeader && overlayLoader.active;
136+ width: undefined;
136137 text: root.title;
137138 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
138139 horizontalAlignment: root.titleAlignment;
tests/plugins/Dash/cardcreator/6.res+1
@@ -69,6 +69,7 @@ Item {
6969 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
7070 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
7171 visible: showHeader ;
72+ width: undefined;
7273 text: root.title;
7374 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
7475 horizontalAlignment: root.titleAlignment;
tests/plugins/Dash/cardcreator/7.res+1
@@ -91,6 +91,7 @@ CroppedImageMinimumSourceSize {
9191 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
9292 color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
9393 visible: showHeader ;
94+ width: undefined;
9495 text: root.title;
9596 font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
9697 horizontalAlignment: root.titleAlignment;
tests/plugins/Dash/cardcreator/8.resnew file+102
@@ -0,0 +1,102 @@
1+AbstractButton {
2+ id: root;
3+ property var components;
4+ property var cardData;
5+ property var artShapeBorderSource: undefined;
6+ property real fontScale: 1.0;
7+ property var scopeStyle: null;
8+ property int titleAlignment: Text.AlignLeft;
9+ property int fixedHeaderHeight: -1;
10+ property size fixedArtShapeSize: Qt.size(-1, -1);
11+ readonly property string title: cardData && cardData["title"] || "";
12+ property bool asynchronous: true;
13+ property bool showHeader: true;
14+ implicitWidth: childrenRect.width;
15+ enabled: true;
16+
17+Loader {
18+ id: backgroundLoader;
19+ objectName: "backgroundLoader";
20+ anchors.fill: parent;
21+ asynchronous: root.asynchronous;
22+ visible: status == Loader.Ready;
23+ sourceComponent: UbuntuShape {
24+ objectName: "background";
25+ radius: "medium";
26+ color: getColor(0) || "white";
27+ gradientColor: getColor(1) || color;
28+ anchors.fill: parent;
29+ image: backgroundImage.source ? backgroundImage : null;
30+ property real luminance: Style.luminance(color);
31+ property Image backgroundImage: Image {
32+ objectName: "backgroundImage";
33+ source: {
34+ if (cardData && typeof cardData["background"] === "string") return cardData["background"];
35+ else return "";
36+ }
37+ }
38+ function getColor(index) {
39+ if (cardData && typeof cardData["background"] === "object"
40+ && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
41+ return cardData["background"]["elements"][index];
42+ } else return index === 0 ? "#E9E9E9" : "#E9AAE9";
43+ }
44+ }
45+ }
46+readonly property size artShapeSize: Qt.size(-1, -1);
47+readonly property int headerHeight: row.height;
48+Row {
49+ id: row;
50+ objectName: "outerRow";
51+ property real margins: units.gu(1);
52+ spacing: margins;
53+ height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight;
54+ anchors { top: parent.top;
55+ topMargin: units.gu(1);
56+left: parent.left;
57+ }
58+ anchors.right: parent.right;
59+ anchors.margins: margins;
60+ anchors.rightMargin: 0;
61+ data: [
62+ CroppedImageMinimumSourceSize {
63+ id: mascotImage;
64+ objectName: "mascotImage";
65+ anchors { verticalCenter: parent.verticalCenter; }
66+ source: cardData && cardData["mascot"] || "";
67+ width: units.gu(6);
68+ height: units.gu(5.625);
69+ horizontalAlignment: Image.AlignHCenter;
70+ verticalAlignment: Image.AlignVCenter;
71+ visible: showHeader;
72+ }
73+,Label {
74+ id: titleLabel;
75+ objectName: "titleLabel";
76+ anchors { verticalCenter: parent.verticalCenter;
77+ }
78+ elide: Text.ElideRight;
79+ fontSize: "small";
80+ wrapMode: Text.Wrap;
81+ maximumLineCount: 2;
82+ font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
83+ color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? Theme.palette.normal.baseText : "white");
84+ visible: showHeader ;
85+ width: parent.width - x;
86+ text: root.title;
87+ font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
88+ horizontalAlignment: root.titleAlignment;
89+ }
90+
91+ ]
92+ }
93+UbuntuShape {
94+ id: touchdown;
95+ objectName: "touchdown";
96+ anchors { fill: backgroundLoader }
97+ visible: root.pressed;
98+ radius: "medium";
99+ borderSource: "radius_pressed.sci"
100+ }
101+implicitHeight: row.y + row.height + units.gu(1);
102+}
tests/plugins/Dash/cardcreator/8.tstnew file+3
@@ -0,0 +1,3 @@
1+template: {"card-background":{"elements":["#E9E9E9","#E9AAE9"],"type":"color"},"card-layout":"vertical","card-size":"medium","category-layout":"grid","collapsed-rows":2}
2+components: {"background":{"field":"background"},"mascot":{"field":"icon"},"title":{"field":"title"},"attributes":{}}
3+result: 8.res