Unity 8
OptionToggle.qml
1 /*
2  * Copyright (C) 2014,2015 Canonical, Ltd.
3  *
4  * This program is free software; you can redistribute it and/or modify
5  * it under the terms of the GNU General Public License as published by
6  * the Free Software Foundation; version 3.
7  *
8  * This program is distributed in the hope that it will be useful,
9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11  * GNU General Public License for more details.
12  *
13  * You should have received a copy of the GNU General Public License
14  * along with this program. If not, see <http://www.gnu.org/licenses/>.
15  */
16 
17 import QtQuick 2.4
18 import Ubuntu.Components 1.3
19 import Ubuntu.Components.ListItems 1.3 as ListItem
20 import Ubuntu.Components.Popups 1.3
21 
22 UbuntuShape {
23  id: optionToggle
24 
25  property bool expanded
26  property var model
27  property int startIndex
28  readonly property double itemHeight: units.gu(5)
29 
30  signal triggered(string id)
31 
32  backgroundColor: theme.palette.normal.base
33  aspect: UbuntuShape.Flat
34  height: expanded ? (optionToggleRepeater.count - startIndex) * itemHeight : itemHeight
35  width: parent.width
36  radius: "medium"
37  clip: true
38 
39  Column {
40  id: optionToggleContent
41  width: parent.width
42 
43  Repeater {
44  id: optionToggleRepeater
45  model: optionToggle.model
46 
47  delegate: Loader {
48  asynchronous: true
49  visible: status === Loader.Ready
50  property string actionLabel: label
51  property string actionId: id
52  readonly property var splitLabel: actionLabel.match(/(^([-a-z0-9]+):)?(.*)$/)
53 
54  Component {
55  id: optionToggleEntry
56 
57  AbstractButton {
58  objectName: "notify_button" + index
59  width: optionToggleContent.width
60  height: optionToggle.itemHeight
61 
62  onClicked: {
63  if (index === startIndex) {
64  optionToggle.expanded = !optionToggle.expanded
65  } else {
66  optionToggle.triggered(actionId)
67  }
68  }
69 
70  ListItem.ThinDivider {
71  visible: index > startIndex
72  }
73 
74  Icon {
75  id: delegateIcon
76  anchors {
77  left: parent.left
78  leftMargin: units.gu(2)
79  verticalCenter: parent.verticalCenter
80  }
81  visible: index !== startIndex
82  width: units.gu(2)
83  height: width
84  name: splitLabel[2] !== undefined ? splitLabel[2] : ""
85  }
86 
87  Label {
88  id: delegateLabel
89  anchors {
90  left: delegateIcon.visible ? delegateIcon.right : parent.left
91  leftMargin: delegateIcon.visible ? units.gu(1) : units.gu(2)
92  right: parent.right
93  rightMargin: units.gu(2)
94  verticalCenter: delegateIcon.visible ? delegateIcon.verticalCenter : parent.verticalCenter
95  }
96 
97  width: parent.width
98  text: splitLabel[3]
99  color:"#5d5d5d"
100  fontSize: "small"
101  maximumLineCount: 1
102  elide: Text.ElideRight
103  }
104 
105  Icon {
106  anchors {
107  right: parent.right
108  rightMargin: units.gu(2)
109  verticalCenter: delegateIcon.verticalCenter
110  }
111 
112  visible: index === startIndex
113  name: optionToggle.height === optionToggle.itemHeight ? "down" : "up"
114  width: units.gu(2)
115  height: width
116  }
117  }
118  }
119  sourceComponent: (index >= startIndex) ? optionToggleEntry : undefined
120  }
121  }
122  }
123 }