Unity 8
MediaServicesControls.qml
1 /*
2  * Copyright (C) 2016 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 QtQuick.Layouts 1.1
19 import QtMultimedia 5.0
20 import Ubuntu.Components 1.3
21 import Ubuntu.Components.ListItems 1.3 as ListItem
22 
23 Item {
24  id: root
25 
26  property alias component: loader.sourceComponent
27 
28  signal actionClicked(string action)
29  signal viewModeClicked
30 
31  property list<Action> userActions
32  property Action viewAction
33 
34  property color iconColor
35  property color backgroundColor
36 
37  RowLayout {
38  anchors {
39  left: parent.left
40  right: parent.right
41  verticalCenter: parent.verticalCenter
42  margins: units.gu(2)
43  }
44  spacing: units.gu(2)
45 
46  AbstractButton {
47  id: actionButton
48  Layout.preferredWidth: units.gu(3)
49  Layout.preferredHeight: units.gu(3)
50  Layout.alignment: Qt.AlignVCenter
51  enabled: action && action.enabled
52 
53  Action {
54  id: popupAction
55  iconName: "navigation-menu"
56  onTriggered: userActionsPopup.createObject(root, { "anchors.bottom": root.top })
57  }
58 
59  action: {
60  switch (userActions.length) {
61  case 0:
62  return null;
63  case 1:
64  return userActions[0];
65  default:
66  return popupAction;
67  }
68  }
69 
70  Icon {
71  anchors.fill: parent
72  visible: actionButton.action && actionButton.action.iconSource !== "" || false
73  source: actionButton.action ? actionButton.action.iconSource : ""
74  color: root.iconColor
75  opacity: actionButton.action && actionButton.action.enabled ? 1.0 : 0.5
76  }
77  }
78 
79  Loader {
80  id: loader
81  Layout.fillWidth: true
82  Layout.preferredHeight: units.gu(3)
83  }
84 
85  AbstractButton {
86  objectName: "viewActionButton"
87  Layout.preferredWidth: units.gu(3)
88  Layout.preferredHeight: units.gu(3)
89  Layout.alignment: Qt.AlignVCenter
90  enabled: viewAction.enabled
91  action: viewAction
92 
93  Icon {
94  anchors.fill: parent
95  visible: viewAction.iconSource !== ""
96  source: viewAction.iconSource
97  color: root.iconColor
98  opacity: viewAction.enabled ? 1.0 : 0.5
99  }
100  }
101  }
102 
103  Component {
104  id: userActionsPopup
105 
106  Rectangle {
107  id: popup
108  color: root.backgroundColor
109  width: userActionsColumn.width
110  height: userActionsColumn.height
111 
112  InverseMouseArea {
113  id: eventGrabber
114  acceptedButtons: Qt.LeftButton | Qt.MiddleButton | Qt.RightButton
115  anchors.fill: popup
116  propagateComposedEvents: false
117  onWheel: wheel.accepted = true
118 
119  onPressed: popup.destroy()
120  }
121 
122  Column {
123  id: userActionsColumn
124  spacing: units.gu(1)
125  width: units.gu(31)
126 
127  Repeater {
128  id: actionRepeater
129  model: userActions
130  AbstractButton {
131  action: modelData
132 
133  onClicked: popup.destroy()
134 
135  implicitHeight: units.gu(4) + bottomDividerLine.height
136  width: parent ? parent.width : units.gu(31)
137 
138  Rectangle {
139  visible: parent.pressed
140  anchors {
141  left: parent.left
142  right: parent.right
143  top: parent.top
144  }
145  height: parent.height - bottomDividerLine.height
146  opacity: 0.5
147  }
148 
149  Icon {
150  id: actionIcon
151  visible: "" !== action.iconSource
152  source: action.iconSource
153  color: root.iconColor
154  anchors {
155  verticalCenter: parent.verticalCenter
156  verticalCenterOffset: units.dp(-1)
157  left: parent.left
158  leftMargin: units.gu(2)
159  }
160  width: units.gu(2)
161  height: units.gu(2)
162  opacity: action.enabled ? 1.0 : 0.5
163  }
164 
165  Label {
166  anchors {
167  verticalCenter: parent.verticalCenter
168  verticalCenterOffset: units.dp(-1)
169  left: actionIcon.visible ? actionIcon.right : parent.left
170  leftMargin: units.gu(2)
171  right: parent.right
172  }
173  // In the tabs overflow panel there are no icons, and the font-size
174  // is medium as opposed to the small font-size in the actions overflow panel.
175  fontSize: actionIcon.visible ? "small" : "medium"
176  elide: Text.ElideRight
177  text: action.text
178  color: root.iconColor
179  opacity: action.enabled ? 1.0 : 0.5
180  }
181 
182  ListItem.ThinDivider {
183  id: bottomDividerLine
184  anchors.bottom: parent.bottom
185  visible: index !== actionRepeater.count - 1
186  }
187  }
188  }
189  }
190  }
191  }
192 }