git.iko.soy/unity8
on xenial help sign in
Started to replace ComboButton with custom OptionToggle widget.
commit36cd49c1ee93b0c62d55ee059497340f422b4782 authorMirco Müller <mirco.mueller@canonical.com> dateThu 30 Oct 2014, 13:27 (12 years ago) parent96445fc
2 files changed+121−82
compare with xenial
unifiedsplit
qml/Notifications/Notification.qml+5−82 qml/Notifications/OptionToggle.qml+116
qml/Notifications/Notification.qml+5−82
@@ -440,9 +440,8 @@ Item {
440440 }
441441 }
442442
443− ComboButton {
444− id: comboButton
445−
443+ OptionToggle {
444+ id: optionToggle
446445 objectName: "notify_button2"
447446 width: parent.width
448447 anchors {
@@ -452,85 +451,9 @@ Item {
452451 }
453452
454453 visible: notification.type == Notification.SnapDecision && actionRepeater.count > 3 && !oneOverTwoCase.visible
455− color: sdDarkGrey
456− onClicked: notification.notification.invokeAction(comboRepeater.itemAt(2).actionId)
457− expanded: false
458− expandedHeight: (comboRepeater.count - 2) * units.gu(4) + units.gu(.5)
459− comboList: Flickables.Flickable {
460− // this has to be wrapped inside a flickable
461− // to work around a feature/bug? of the
462− // ComboButton SDK-element, making a regular
463− // unwrapped Column item flickable
464− // see LP: #1332590
465− interactive: false
466− Column {
467− Repeater {
468− id: comboRepeater
469−
470− onVisibleChanged: {
471− comboButton.text = comboRepeater.count >= 3 ? comboRepeater.itemAt(2).actionLabel : ""
472− }
473−
474− model: notification.actions
475− delegate: Loader {
476− id: comboLoader
477−
478− asynchronous: true
479− visible: status == Loader.Ready
480− property string actionId: id
481− property string actionLabel: label
482− readonly property var splitLabel: actionLabel.match(/(^([-a-z0-9]+):)?(.*)$/)
483− Component {
484− id: comboEntry
485−
486− MouseArea {
487− id: comboInputArea
488−
489− objectName: "notify_button" + index
490− width: comboButton.width
491− height: comboIcon.height + units.gu(2)
492−
493− onClicked: {
494− notification.notification.invokeAction(actionId)
495− }
496−
497− ListItem.ThinDivider {
498− visible: index > 3
499− }
500−
501− Icon {
502− id: comboIcon
503−
504− anchors {
505− left: parent.left
506− leftMargin: units.gu(.5)
507− verticalCenter: parent.verticalCenter
508− }
509− width: units.gu(2)
510− height: units.gu(2)
511− color: sdFontColor
512− name: splitLabel[2]
513− }
514−
515− Label {
516− id: comboLabel
517−
518− anchors {
519− left: comboIcon.right
520− leftMargin: units.gu(1)
521− verticalCenter: comboIcon.verticalCenter
522− }
523− fontSize: "small"
524− color: sdFontColor
525− text: splitLabel[3]
526− }
527− }
528− }
529− sourceComponent: (index > 2) ? comboEntry : undefined
530− }
531− }
532− }
533− }
454+ model: notification.actions
455+ expanded: true
456+ startIndex: 2
534457 }
535458 }
536459 }
qml/Notifications/OptionToggle.qmlnew file+116
@@ -0,0 +1,116 @@
1+import QtQuick 2.0
2+import Ubuntu.Components 0.1
3+import Ubuntu.Components.ListItems 0.1 as ListItem
4+import Ubuntu.Components.Popups 0.1
5+
6+UbuntuShape {
7+ id: optionToggle
8+
9+ property bool expanded
10+ property var model
11+ property int startIndex
12+ readonly property double itemHeight: units.gu(5)
13+
14+ Behavior on height {
15+ UbuntuNumberAnimation {
16+ duration: UbuntuAnimation.SnapDuration
17+ }
18+ }
19+
20+ color: Theme.palette.normal.base
21+ borderSource: "none"
22+ height: expanded ? (model.count - startIndex) * itemHeight : itemHeight
23+ width: parent.width
24+ radius: "medium"
25+ clip: true
26+
27+ onExpandedChanged: {
28+ print("expanded changed to:", expanded ? "true" : "false")
29+ print("height:", height)
30+ print("count:", model.count)
31+ optionToggle.height = expanded ? (model.count - startIndex) * itemHeight : itemHeight
32+ }
33+
34+ Column {
35+ id: optionToggleContent
36+ width: parent.width
37+ //property double itemHeight: units.gu(5)
38+
39+ Repeater {
40+ model: optionToggle.model
41+
42+ delegate: Loader {
43+ asynchronous: true
44+ visible: status === Loader.Ready
45+ property string actionLabel: label
46+ readonly property var splitLabel: actionLabel.match(/(^([-a-z0-9]+):)?(.*)$/)
47+
48+ Component {
49+ id: optionToggleEntry
50+
51+ MouseArea {
52+ width: optionToggleContent.width
53+ height: optionToggle.itemHeight
54+
55+ onClicked: {
56+ if (index === startIndex) {
57+ optionToggle.expanded = optionToggle.expanded ? false : true
58+ } else {
59+ print("clicked on", label)
60+ }
61+ }
62+
63+ ListItem.ThinDivider {
64+ visible: index > startIndex
65+ }
66+
67+ Icon {
68+ id: delegateIcon
69+ anchors {
70+ left: parent.left
71+ leftMargin: units.gu(2)
72+ verticalCenter: parent.verticalCenter
73+ }
74+ visible: index !== startIndex
75+ width: units.gu(2)
76+ height: width
77+ name: splitLabel[2] !== undefined ? splitLabel[2] : ""
78+ }
79+
80+ Label {
81+ id: delegateLabel
82+ anchors {
83+ left: delegateIcon.visible ? delegateIcon.right : parent.left
84+ leftMargin: delegateIcon.visible ? units.gu(1) : units.gu(2)
85+ right: parent.right
86+ rightMargin: units.gu(2)
87+ verticalCenter: delegateIcon.visible ? delegateIcon.verticalCenter : parent.verticalCenter
88+ }
89+
90+ width: parent.width
91+ text: splitLabel[3]
92+ color:"#5d5d5d"
93+ fontSize: "small"
94+ maximumLineCount: 1
95+ elide: Text.ElideRight
96+ }
97+
98+ Icon {
99+ anchors {
100+ right: parent.right
101+ rightMargin: units.gu(2)
102+ verticalCenter: delegateIcon.verticalCenter
103+ }
104+
105+ visible: index === startIndex
106+ name: optionToggle.height === optionToggle.itemHeight ? "down" : "up"
107+ width: units.gu(2)
108+ height: width
109+ }
110+ }
111+ }
112+ sourceComponent: (index >= startIndex) ? optionToggleEntry : undefined
113+ }
114+ }
115+ }
116+}