Changeset View
Changeset View
Standalone View
Standalone View
kcm/package/contents/ui/Output.qml
- This file was added.
1 | /******************************************************************** | ||||
---|---|---|---|---|---|
2 | Copyright © 2019 Roman Gilg <subdiff@gmail.com> | ||||
3 | Copyright © 2012 Dan Vratil <dvratil@redhat.com> | ||||
4 | | ||||
5 | This program is free software; you can redistribute it and/or modify | ||||
6 | it under the terms of the GNU General Public License as published by | ||||
7 | the Free Software Foundation; either version 2 of the License, or | ||||
8 | (at your option) any later version. | ||||
9 | | ||||
10 | This program is distributed in the hope that it will be useful, | ||||
11 | but WITHOUT ANY WARRANTY; without even the implied warranty of | ||||
12 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||||
13 | GNU General Public License for more details. | ||||
14 | | ||||
15 | You should have received a copy of the GNU General Public License | ||||
16 | along with this program. If not, see <http://www.gnu.org/licenses/>. | ||||
17 | *********************************************************************/ | ||||
18 | import QtQuick 2.12 | ||||
19 | import QtQuick.Layouts 1.1 | ||||
20 | import QtQuick.Controls 2.3 as Controls | ||||
21 | import QtGraphicalEffects 1.0 | ||||
22 | | ||||
23 | Rectangle { | ||||
24 | id: output | ||||
25 | | ||||
26 | property bool isSelected: root.selectedOutput === model.index | ||||
27 | | ||||
28 | onIsSelectedChanged: { | ||||
29 | if (isSelected) { | ||||
30 | z = 89; | ||||
31 | } else { | ||||
32 | z = 0; | ||||
33 | } | ||||
34 | } | ||||
35 | | ||||
36 | function getAbsolutePosition(pos) { | ||||
37 | return Qt.point((pos.x - screen.xOffset) * screen.relativeFactor, | ||||
38 | (pos.y - screen.yOffset) * screen.relativeFactor) ; | ||||
39 | } | ||||
40 | | ||||
41 | x: model.position.x / screen.relativeFactor + screen.xOffset | ||||
42 | y: model.position.y / screen.relativeFactor + screen.yOffset | ||||
43 | | ||||
44 | width: model.size.width / screen.relativeFactor | ||||
45 | height: model.size.height / screen.relativeFactor | ||||
46 | | ||||
47 | SystemPalette { | ||||
48 | id: palette | ||||
49 | } | ||||
50 | | ||||
51 | radius: 4 | ||||
52 | color: palette.window | ||||
53 | smooth: true | ||||
54 | clip: true | ||||
55 | | ||||
56 | border { | ||||
57 | color: isSelected ? palette.highlight : palette.shadow | ||||
58 | width: 1 | ||||
59 | | ||||
60 | Behavior on color { | ||||
61 | PropertyAnimation { | ||||
62 | duration: 150 | ||||
63 | } | ||||
64 | } | ||||
65 | } | ||||
66 | | ||||
67 | Item { | ||||
68 | anchors.fill: parent | ||||
69 | | ||||
70 | ColumnLayout { | ||||
71 | anchors.centerIn: parent | ||||
72 | spacing: units.smallSpacing | ||||
73 | width: parent.width | ||||
74 | Layout.maximumHeight: parent.height | ||||
75 | | ||||
76 | Controls.Label { | ||||
77 | Layout.fillWidth: true | ||||
78 | Layout.margins: units.smallSpacing | ||||
79 | | ||||
80 | text: model.display | ||||
81 | horizontalAlignment: Text.AlignHCenter | ||||
82 | elide: Text.ElideRight | ||||
83 | color: palette.text | ||||
84 | } | ||||
85 | | ||||
86 | Controls.Label { | ||||
87 | Layout.fillWidth: true | ||||
88 | Layout.margins: units.smallSpacing | ||||
89 | | ||||
90 | text: "(" + model.size.width + "x" + model.size.height + ")" | ||||
91 | horizontalAlignment: Text.AlignHCenter | ||||
92 | elide: Text.ElideRight | ||||
93 | color: palette.text | ||||
94 | } | ||||
95 | } | ||||
96 | } | ||||
97 | | ||||
98 | Rectangle { | ||||
99 | id: posLabel | ||||
100 | | ||||
101 | y: 4 | ||||
102 | x: 4 | ||||
103 | width: childrenRect.width + 5 | ||||
104 | height: childrenRect.height + 2 | ||||
105 | radius: 4 | ||||
106 | | ||||
107 | opacity: model.enabled && | ||||
108 | (tapHandler.isLongPressed || dragHandler.active) ? 0.9 : 0.0 | ||||
109 | | ||||
110 | | ||||
111 | color: palette.shadow | ||||
112 | | ||||
113 | Text { | ||||
114 | id: posLabelText | ||||
115 | | ||||
116 | y: 2 | ||||
117 | x: 2 | ||||
118 | | ||||
119 | text: model.normalizedPosition.x + "," + model.normalizedPosition.y | ||||
120 | color: "white" | ||||
121 | } | ||||
122 | | ||||
123 | Behavior on opacity { | ||||
124 | PropertyAnimation { | ||||
125 | duration: 100; | ||||
126 | } | ||||
127 | } | ||||
128 | } | ||||
129 | | ||||
130 | Item { | ||||
131 | id: orientationPanelContainer | ||||
132 | | ||||
133 | anchors.fill: output | ||||
134 | visible: false | ||||
135 | | ||||
136 | Rectangle { | ||||
137 | id: orientationPanel | ||||
138 | anchors { | ||||
139 | left: parent.left | ||||
140 | right: parent.right | ||||
141 | bottom: parent.bottom | ||||
142 | } | ||||
143 | | ||||
144 | height: 10 | ||||
145 | color: isSelected ? palette.highlight : palette.shadow | ||||
146 | smooth: true | ||||
147 | | ||||
148 | Behavior on color { | ||||
149 | PropertyAnimation { | ||||
150 | duration: 150 | ||||
151 | } | ||||
152 | } | ||||
153 | } | ||||
154 | } | ||||
155 | | ||||
156 | states: [ | ||||
157 | State { | ||||
158 | name: "rot90" | ||||
159 | when: model.rotation === 2 | ||||
160 | PropertyChanges { | ||||
161 | target: orientationPanel | ||||
162 | height: undefined | ||||
163 | width: 10 | ||||
164 | } | ||||
165 | AnchorChanges { | ||||
166 | target: orientationPanel | ||||
167 | anchors.right: undefined | ||||
168 | anchors.top: orientationPanelContainer.top | ||||
169 | } | ||||
170 | }, | ||||
171 | State { | ||||
172 | name: "rot180" | ||||
173 | when: model.rotation === 4 | ||||
174 | AnchorChanges { | ||||
175 | target: orientationPanel | ||||
176 | anchors.top: orientationPanelContainer.top | ||||
177 | anchors.bottom: undefined | ||||
178 | } | ||||
179 | }, | ||||
180 | State { | ||||
181 | name: "rot270" | ||||
182 | when: model.rotation === 8 | ||||
183 | PropertyChanges { | ||||
184 | target: orientationPanel | ||||
185 | height: undefined | ||||
186 | width: 10 | ||||
187 | } | ||||
188 | AnchorChanges { | ||||
189 | target: orientationPanel | ||||
190 | anchors.left: undefined | ||||
191 | anchors.top: orientationPanelContainer.top | ||||
192 | } | ||||
193 | } | ||||
194 | ] | ||||
195 | | ||||
196 | OpacityMask { | ||||
197 | anchors.fill: orientationPanelContainer | ||||
198 | source: orientationPanelContainer | ||||
199 | maskSource: output | ||||
200 | } | ||||
201 | | ||||
202 | property point dragStartPosition | ||||
203 | | ||||
204 | TapHandler { | ||||
205 | id: tapHandler | ||||
206 | property bool isLongPressed: false | ||||
207 | | ||||
208 | function bindSelectedOutput() { | ||||
209 | root.selectedOutput | ||||
210 | = Qt.binding(function() { return model.index; }); | ||||
211 | } | ||||
212 | onPressedChanged: { | ||||
213 | if (pressed) { | ||||
214 | bindSelectedOutput(); | ||||
215 | dragStartPosition = Qt.point(output.x, output.y) | ||||
216 | } else { | ||||
217 | isLongPressed = false; | ||||
218 | } | ||||
219 | } | ||||
220 | onLongPressed: isLongPressed = true; | ||||
221 | longPressThreshold: 0.3 | ||||
222 | } | ||||
223 | DragHandler { | ||||
224 | id: dragHandler | ||||
225 | acceptedButtons: Qt.LeftButton | ||||
226 | target: null | ||||
227 | | ||||
228 | onTranslationChanged: { | ||||
229 | var newX = dragStartPosition.x + translation.x; | ||||
230 | var newY = dragStartPosition.y + translation.y; | ||||
231 | model.position = getAbsolutePosition(Qt.point(newX, newY)); | ||||
232 | } | ||||
233 | } | ||||
234 | } | ||||
235 | |