on xenial help sign in
Make the PreviewButtons be of the width of the button and not half the total width
75d3855Albert Astals Cid
qml/Dash/Previews/PreviewActionCombo.qml+13−2
@@ -21,6 +21,7 @@ Item {
21 id: root
21 id: root
22
22
23 implicitHeight: childrenRect.height
23 implicitHeight: childrenRect.height
24+ implicitWidth: Math.max(moreButton.implicitWidth, column.maxButtonImplicitWidth)
24
25
25 signal triggeredAction(var actionData)
26 signal triggeredAction(var actionData)
26
27
@@ -39,14 +40,23 @@ Item {
39 }
40 }
40
41
41 Column {
42 Column {
43+ id: column
42 anchors {
44 anchors {
43 top: moreButton.bottom
45 top: moreButton.bottom
44 topMargin: height > 0 ? spacing : 0
46 topMargin: height > 0 ? spacing : 0
45 }
47 }
46 objectName: "buttonColumn"
48 objectName: "buttonColumn"
47 spacing: units.gu(1)
49 spacing: units.gu(1)
48− width: parent.width
49 height: moreButton.expanded ? implicitHeight : 0
50 height: moreButton.expanded ? implicitHeight : 0
51+
52+ property real maxButtonImplicitWidth: 0
53+ function calculateImplicitWidth() {
54+ maxButtonImplicitWidth = 0;
55+ for (var i in children) {
56+ maxButtonImplicitWidth = Math.max(maxButtonImplicitWidth, children[i].implicitWidth);
57+ }
58+ }
59+
50 clip: true
60 clip: true
51 Behavior on height {
61 Behavior on height {
52 UbuntuNumberAnimation {
62 UbuntuNumberAnimation {
@@ -59,7 +69,8 @@ Item {
59
69
60 delegate: PreviewActionButton {
70 delegate: PreviewActionButton {
61 data: modelData
71 data: modelData
62− width: implicitWidth < root.width ? root.width : implicitWidth
72+ width: root.width
73+ onImplicitWidthChanged: column.calculateImplicitWidth();
63 onClicked: root.triggeredAction(modelData)
74 onClicked: root.triggeredAction(modelData)
64 strokeColor: moreButton.strokeColor
75 strokeColor: moreButton.strokeColor
65 }
76 }
qml/Dash/Previews/PreviewActions.qml+3−2
@@ -27,6 +27,7 @@ PreviewWidget {
27
27
28 implicitHeight: row.height + units.gu(1)
28 implicitHeight: row.height + units.gu(1)
29 readonly property var actions: root.widgetData ? root.widgetData["actions"] : null
29 readonly property var actions: root.widgetData ? root.widgetData["actions"] : null
30+ readonly property real maxButtonWidth: (width - units.gu(1)) / 2
30
31
31 Row {
32 Row {
32 id: row
33 id: row
@@ -40,7 +41,7 @@ PreviewWidget {
40 readonly property bool button: root.actions && root.actions.length == 2
41 readonly property bool button: root.actions && root.actions.length == 2
41 readonly property bool combo: root.actions && root.actions.length > 2
42 readonly property bool combo: root.actions && root.actions.length > 2
42 source: button ? "PreviewActionButton.qml" : (combo ? "PreviewActionCombo.qml" : "")
43 source: button ? "PreviewActionButton.qml" : (combo ? "PreviewActionCombo.qml" : "")
43− width: (root.width - units.gu(1)) / 2
44+ width: Math.min(root.maxButtonWidth, implicitWidth + units.gu(2))
44 onLoaded: {
45 onLoaded: {
45 if (button) {
46 if (button) {
46 item.data = Qt.binding(function() { return root.actions[1]; });
47 item.data = Qt.binding(function() { return root.actions[1]; });
@@ -65,7 +66,7 @@ PreviewWidget {
65 data: visible ? root.actions[0] : null
66 data: visible ? root.actions[0] : null
66 visible: root.actions && root.actions.length > 0
67 visible: root.actions && root.actions.length > 0
67 onTriggeredAction: root.triggered(root.widgetId, actionData.id, actionData)
68 onTriggeredAction: root.triggered(root.widgetId, actionData.id, actionData)
68− width: (root.width - units.gu(1)) / 2
69+ width: Math.min(root.maxButtonWidth, implicitWidth + units.gu(2))
69 color: root.scopeStyle ? root.scopeStyle.previewButtonColor : theme.palette.normal.positive
70 color: root.scopeStyle ? root.scopeStyle.previewButtonColor : theme.palette.normal.positive
70 }
71 }
71 }
72 }
tests/qmltests/Dash/Previews/tst_PreviewActions.qml+31−1
@@ -39,12 +39,30 @@ Rectangle {
39 readonly property var actionDataFiveActions: {
39 readonly property var actionDataFiveActions: {
40 "actions": [{"label": "Some Label C", "id": "someid3"},
40 "actions": [{"label": "Some Label C", "id": "someid3"},
41 {"label": "Some Label D", "id": "someid4"},
41 {"label": "Some Label D", "id": "someid4"},
42− {"label": "Some Label E", "id": "someid5"},
42+ {"label": "Some Longer Longer Longer Longer Label E", "id": "someid5"},
43 {"label": "Some Label F", "id": "someid6"},
43 {"label": "Some Label F", "id": "someid6"},
44 {"label": "Some Label G", "id": "someid7"}
44 {"label": "Some Label G", "id": "someid7"}
45 ]
45 ]
46 }
46 }
47
47
48+ readonly property var actionDataFiveActions2: {
49+ "actions": [{"label": "Some Label C", "id": "someid3"},
50+ {"label": "Some Label D", "id": "someid4"},
51+ {"label": "Some E", "id": "someid5"},
52+ {"label": "Some Label F", "id": "someid6"},
53+ {"label": "Some Label G", "id": "someid7"}
54+ ]
55+ }
56+
57+ readonly property var actionDataFiveActions3: {
58+ "actions": [{"label": "C", "id": "someid3"},
59+ {"label": "D", "id": "someid4"},
60+ {"label": "E", "id": "someid5"},
61+ {"label": "F", "id": "someid6"},
62+ {"label": "G", "id": "someid7"}
63+ ]
64+ }
65+
48 property var actionModelActions: {
66 property var actionModelActions: {
49 "actions": [{"label": "Some Label H", "id": "someid8"},
67 "actions": [{"label": "Some Label H", "id": "someid8"},
50 {"label": "Some Label I", "id": "someid9"},
68 {"label": "Some Label I", "id": "someid9"},
@@ -90,6 +108,18 @@ Rectangle {
90 }
108 }
91 }
109 }
92
110
111+ PreviewActions {
112+ id: buttonAndCombo2
113+ widgetData: actionDataFiveActions2
114+ width: units.gu(40)
115+ }
116+
117+ PreviewActions {
118+ id: buttonAndCombo3
119+ widgetData: actionDataFiveActions3
120+ width: units.gu(40)
121+ }
122+
93 PreviewActions {
123 PreviewActions {
94 id: twoActions
124 id: twoActions
95 widgetId: "2buttons"
125 widgetId: "2buttons"