Differential D24265 Diff 67189 toolboxes/desktoptoolbox/contents/ui/ToolBoxButton.qml

Changeset View

Standalone View

View Options

toolboxes/desktoptoolbox/contents/ui/ToolBoxButton.qml

Show All 13 Lines
14 * * 14​ * *
15 * You should have received a copy of the GNU General Public License * 15​ * You should have received a copy of the GNU General Public License *
16 * along with this program; if not, write to the * 16​ * along with this program; if not, write to the *
17 * Free Software Foundation, Inc., * 17​ * Free Software Foundation, Inc., *
18 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA . * 18​ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA . *
19 ***************************************************************************/ 19​ ***************************************************************************/
20 20​
21import QtQuick 2.4 21​import QtQuick 2.4
22​import QtQuick.Layouts 1.4
22import org.kde.plasma.core 2.0 as PlasmaCore 23​import org.kde.plasma.core 2.0 as PlasmaCore
23import org.kde.plasma.components 2.0 as PlasmaComponents 24​import org.kde.plasma.components 2.0 as PlasmaComponents
25​import org.kde.plasma.components 3.0 as PlasmaComponents3
24import org.kde.kquickcontrolsaddons 2.0 as KQuickControlsAddons 26​import org.kde.kquickcontrolsaddons 2.0 as KQuickControlsAddons
25import org.kde.plasma.plasmoid 2.0 27​import org.kde.plasma.plasmoid 2.0
26 28​
27Item { 29​Item {
28 id: toolBoxButton 30​ id: toolBoxButton
29 31​
30 property string text: main.Plasmoid.activityName === i18n("Default") ? i18n("Desktop Toolbox") : i18n("Desktop Toolbox — %1 Activity", main.Plasmoid.activityName) 32​ property bool isHorizontal: state != "left" && state != "right" && state != "leftcenter" && state != "rightcenter"
31 property bool isCorner: !buttonMouse.dragging && ​
32 ((state == "topleft") || (state == "topright") || ​
33 (state == "bottomright") || (state == "bottomleft")) ​
34 property bool isHorizontal: (state != "left" && state != "right") ​
35 33​
36 rotation: switch(state) { 34​ rotation: switch(state) {
37 case "left": 35​ case "left":
36​ case "leftcenter":
38 return -90; 37​ return -90;
39 case "right": 38​ case "right":
39​ case "rightcenter":
40 return 90; 40​ return 90;
41 default: 41​ default:
42 return 0; 42​ return 0;
43 } 43​ }
44 44​
45 transform: Translate { 45​ transform: Translate {
46 x: state == "left" ? Math.round(-width/2 + height/2) : state == "right" ? + Math.round(width/2 - height/2) : 0 46​ x: state == "left" || state == "leftcenter" ? Math.round(-width/2 + height/2) - (plasmoid.editMode ? 0: height)
47​ : state == "right" || state == "rightcenter" ? + Math.round(width/2 - height/2) + (plasmoid.editMode ? 0 : height)
48​ : 0
49​
50​ y: plasmoid.editMode ? 0
51​ : state == "top" || state == "topcenter" ? -height
52​ : state == "bottom" || state == "bottomcenter" ? height
53​ : 0
47 Behavior on x { 54​ Behavior on x {
48 NumberAnimation { 55​ NumberAnimation {
49 duration: units.shortDuration * 3; 56​ duration: units.longDuration
50 easing.type: Easing.InOutExpo; 57​ easing.type: Easing.InOutQuad
58​ }
59​ }
60​ Behavior on y {
61​ NumberAnimation {
62​ duration: units.longDuration
63​ easing.type: Easing.InOutQuad
51 } 64​ }
52 } 65​ }
53 } 66​ }
54 transformOrigin: Item.Center 67​ transformOrigin: Item.Center
68​ opacity: plasmoid.editMode
69​ Behavior on opacity {
70​ OpacityAnimator {
71​ duration: units.longDuration
72​ easing.type: Easing.InOutQuad
73​ }
74​ enabled: visible
75​ }
55 Behavior on rotation { 76​ Behavior on rotation {
56 NumberAnimation { 77​ NumberAnimation {
57 duration: units.shortDuration * 3; 78​ duration: units.shortDuration * 3;
58 easing.type: Easing.InOutExpo; 79​ easing.type: Easing.InOutExpo;
59 } 80​ }
60 enabled: visible 81​ enabled: visible
61 } 82​ }
62 Behavior on x { 83​ Behavior on x {
Show All 11 Lines91 Behavior on y {
74 } 95​ }
75 enabled: visible 96​ enabled: visible
76 } 97​ }
77 98​
78 clip: backgroundFrameWidthAnimation.running 99​ clip: backgroundFrameWidthAnimation.running
79 width: backgroundFrame.width + backgroundFrame.width % 2 100​ width: backgroundFrame.width + backgroundFrame.width % 2
80 height: backgroundFrame.height + backgroundFrame.height % 2 101​ height: backgroundFrame.height + backgroundFrame.height % 2
81 102​
82 //x and y default to 0, so top left would be correct 103​ state: "topcenter"
83 //If the position is anything else it will updated via onXChanged during initialization ​
84 state: "topleft" ​
85 104​
86 onXChanged: stateTimer.restart() 105​ onXChanged: stateTimer.restart()
87 onYChanged: stateTimer.restart() 106​ onYChanged: stateTimer.restart()
88 107​
89 Timer { 108​ Timer {
90 id: stateTimer 109​ id: stateTimer
91 interval: 100 110​ interval: 0//toolBoxButton.state.indexOf("center") != -1 ? 0 : 100
davidedmundsonUnsubmitted
Done

fix

davidedmundson: fix
92 onTriggered: updateState() 111​ onTriggered: updateState()
93 } 112​ }
94 function updateState() { 113​ function updateState() {
95 var container = main; 114​ var container = main;
96 //print(" w: " + container.width +"x"+container.height+" : "+x+"/"+y+" tbw: " + toolBoxButton.width); 115​ //print(" w: " + container.width +"x"+container.height+" : "+x+"/"+y+" tbw: " + toolBoxButton.width);
97 116​
98 var x = toolBoxButton.x - main.x; 117​ var x = toolBoxButton.x - main.x;
99 var y = toolBoxButton.y - main.y; 118​ var y = toolBoxButton.y - main.y;
100 119​
101 var cornerSnap = iconWidth 120​ var cornerSnap = iconWidth
102 121​
103 if (x < cornerSnap && y < cornerSnap) { ​
104 toolBoxButton.state = "topleft"; ​
105 } else if (container.width - x - buttonLayout.width < cornerSnap && y < cornerSnap) { ​
106 toolBoxButton.state = "topright"; ​
107 } else if (container.width - x - buttonLayout.width < cornerSnap && container.height - y - buttonLayout.width < cornerSnap) { ​
108 toolBoxButton.state = "bottomright"; ​
109 } else if (x < cornerSnap && container.height - y - buttonLayout.width < cornerSnap) { ​
110 toolBoxButton.state = "bottomleft"; ​
111 //top diagonal half 122​ //top diagonal half
112 } else if (x > (y * (container.width/container.height))) { 123​ if (x > (y * (container.width/container.height))) {
113 //Top edge 124​ //Top edge
114 if (container.width - x > y ) { 125​ if (container.width - x - width/2 > y ) {
126​ if (Math.abs(container.width/2 - (x + width/2)) < units.gridUnit) {
127​ toolBoxButton.state = "topcenter";
128​ } else {
115 toolBoxButton.state = "top"; 129​ toolBoxButton.state = "top";
130​ }
116 //right edge 131​ //right edge
117 } else { 132​ } else {
118 //toolBoxButton.transformOrigin = Item.BottomRight 133​ if (Math.abs(container.height/2 - (y + height/2)) < units.gridUnit) {
134​ toolBoxButton.state = "rightcenter";
135​ } else {
119 toolBoxButton.state = "right"; 136​ toolBoxButton.state = "right";
120 } 137​ }
138​ }
121 //bottom diagonal half 139​ //bottom diagonal half
122 } else { 140​ } else {
123 //Left edge 141​ //Left edge
124 if (container.height - y > x ) { 142​ if (container.height - y - width/2 > x ) {
125 //toolBoxButton.transformOrigin = Item.TopLeft 143​ if (Math.abs(container.height/2 - (y + width/2)) < units.gridUnit) {
144​ toolBoxButton.state = "leftcenter";
145​ } else {
126 toolBoxButton.state = "left"; 146​ toolBoxButton.state = "left";
147​ }
127 //Bottom edge 148​ //Bottom edge
128 } else { 149​ } else {
150​ if (Math.abs(container.width/2 - (x + height/2)) < units.gridUnit) {
151​ toolBoxButton.state = "bottomcenter";
152​ } else {
129 toolBoxButton.state = "bottom"; 153​ toolBoxButton.state = "bottom";
130 } 154​ }
131 } 155​ }
156​ }
132 157​
133 if (!buttonMouse.pressed) { 158​ if (!buttonMouse.pressed) {
134 main.placeToolBox(toolBoxButton.state); 159​ main.placeToolBox(toolBoxButton.state);
135 } 160​ }
136 161​
137 stateTimer.running = false; 162​ stateTimer.running = false;
138 } 163​ }
139 164​
140 PlasmaCore.FrameSvgItem { 165​ PlasmaCore.FrameSvgItem {
141 id: backgroundFrame 166​ id: backgroundFrame
142 anchors { 167​ anchors {
143 left: parent.left 168​ left: parent.left
144 top: parent.top 169​ top: parent.top
145 } 170​ }
146 imagePath: "widgets/translucentbackground" 171​ imagePath: "widgets/translucentbackground"
147 opacity: buttonMouse.containsMouse || (toolBoxLoader.item && toolBoxLoader.item.visible) ? 1.0 : 0.4 172​ width: Math.round(buttonLayout.width + margins.horizontal)
148 width: Math.round((isCorner ? buttonLayout.height : buttonLayout.width) + margins.horizontal) ​
149 height: Math.round(buttonLayout.height + margins.vertical) 173​ height: Math.round(buttonLayout.height + margins.vertical)
150 Behavior on width { 174​ Behavior on width {
151 NumberAnimation { 175​ NumberAnimation {
152 id: backgroundFrameWidthAnimation 176​ id: backgroundFrameWidthAnimation
153 duration: units.longDuration; 177​ duration: units.longDuration;
154 easing.type: Easing.InOutQuad; 178​ easing.type: Easing.InOutQuad;
155 } 179​ }
156 } 180​ }
157 Behavior on opacity { 181​ Behavior on opacity {
158 NumberAnimation { 182​ NumberAnimation {
159 duration: units.longDuration; 183​ duration: units.longDuration;
160 } 184​ }
161 } 185​ }
162 } 186​ }
163 187​
164 Row { ​
165 id: buttonLayout ​
166 anchors.centerIn: parent ​
167 height: Math.max(toolBoxIcon.height, fontMetrics.height) ​
168 spacing: units.smallSpacing ​
169 ​
170 Behavior on x { ​
171 NumberAnimation { ​
172 duration: units.longDuration; ​
173 easing.type: Easing.InOutQuad; ​
174 } ​
175 } ​
176 ​
177 PlasmaCore.SvgItem { ​
178 id: toolBoxIcon ​
179 svg: PlasmaCore.Svg { ​
180 id: iconSvg ​
181 imagePath: "widgets/configuration-icons" ​
182 onRepaintNeeded: toolBoxIcon.elementId = iconSvg.hasElement("menu") ? "menu" : "configure" ​
183 } ​
184 elementId: iconSvg.hasElement("menu") ? "menu" : "configure" ​
185 anchors.verticalCenter: parent.verticalCenter ​
186 width: iconSize ​
187 height: iconSize ​
188 opacity: buttonMouse.containsMouse || (toolBoxLoader.item && toolBoxLoader.item.visible) ? 1 : 0.5 ​
189 rotation: isHorizontal ? 0 : -90; ​
190 transformOrigin: Item.Center ​
191 Behavior on opacity { ​
192 NumberAnimation { ​
193 duration: units.longDuration; ​
194 easing.type: Easing.InOutExpo; ​
195 } ​
196 } ​
197 } ​
198 ​
199 PlasmaComponents.Label { ​
200 id: activityName ​
201 anchors.verticalCenter: parent.verticalCenter ​
202 opacity: isCorner ? 0 : 1 ​
203 text: toolBoxButton.text ​
204 visible: opacity ​
205 Behavior on opacity { ​
206 //only have this animation when going from hidden -> shown ​
207 enabled: activityName.opacity == 0 ​
208 ​
209 SequentialAnimation { ​
210 //pause to allow the toolbox frame to resize ​
211 //otherwise we see the text overflow the box ​
212 //whilst that animates ​
213 PauseAnimation { ​
214 duration: units.longDuration ​
215 } ​
216 NumberAnimation { ​
217 duration: units.shortDuration ​
218 easing.type: Easing.InOutExpo ​
219 } ​
220 } ​
221 } ​
222 } ​
223 ​
224 FontMetrics { ​
225 id: fontMetrics ​
226 font: activityName.font ​
227 } ​
228 } ​
229 ​
230 MouseArea { 188​ MouseArea {
231 id: buttonMouse 189​ id: buttonMouse
232 190​
233 property QtObject container: main 191​ property QtObject container: main
234 property int pressedX 192​ property int pressedX
235 property int pressedY 193​ property int pressedY
194​ property int snapStartX
195​ property int snapStartY
196​ property bool snapX: false;
197​ property bool snapY: false;
236 property bool dragging: false 198​ property bool dragging: false
237 199​
238 anchors { 200​ anchors.fill: parent
239 fill: parent ​
240 margins: -10 ​
241 } ​
242 201​
243 drag { 202​ drag {
203​ filterChildren: true
244 target: main.Plasmoid.immutable ? undefined : toolBoxButton 204​ target: main.Plasmoid.immutable ? undefined : toolBoxButton
245 minimumX: 0 205​ minimumX: 0
246 maximumX: container.width - toolBoxIcon.width 206​ maximumX: container.width - toolBoxButton.width
247 minimumY: 0 207​ minimumY: toolBoxButton.isHorizontal ? 0 : toolBoxButton.width/2 - toolBoxButton.height/2
248 maximumY: container.height - toolBoxIcon.height 208​ maximumY: toolBoxButton.isHorizontal ? container.height : container.height - toolBoxButton.width/2 - toolBoxButton.height/2
249 } 209​ }
250 210​
251 hoverEnabled: true 211​ hoverEnabled: true
252 212​
253 onPressed: { 213​ onPressed: {
254 pressedX = toolBoxButton.x 214​ pressedX = toolBoxButton.x
255 pressedY = toolBoxButton.y 215​ pressedY = toolBoxButton.y
256 } 216​ }
257 onPositionChanged: { 217​ onPositionChanged: {
258 if (pressed && (Math.abs(toolBoxButton.x - pressedX) > iconSize || 218​ if (pressed && (Math.abs(toolBoxButton.x - pressedX) > iconSize ||
259 Math.abs(toolBoxButton.y - pressedY) > iconSize)) { 219​ Math.abs(toolBoxButton.y - pressedY) > iconSize)) {
260 dragging = true; 220​ dragging = true;
261 } 221​ }
222​
223​ // Center snapping X
224​ if (snapX && Math.abs(snapStartX - mouse.x) > units.gridUnit) {
225​ toolBoxButton.anchors.horizontalCenter = undefined;
226​ snapX = false;
227​ } else if (!snapX && Math.abs(main.width/2 - (toolBoxButton.x + toolBoxButton.width/2)) < units.gridUnit) {
228​ toolBoxButton.anchors.horizontalCenter = main.horizontalCenter;
229​ snapStartX = mouse.x;
230​ snapX = true;
231​ }
232​ // Center snapping Y still use mouse.x because rotation
233​ if (snapY && Math.abs(snapStartY - mouse.x) > units.gridUnit) {
234​ toolBoxButton.anchors.verticalCenter = undefined;
235​ snapY = false;
236​ } else if (!snapY && Math.abs(main.height/2 - (toolBoxButton.y + toolBoxButton.height/2)) < units.gridUnit) {
237​ toolBoxButton.anchors.verticalCenter = main.verticalCenter;
238​ snapStartY = mouse.x;
239​ snapY = true;
262 } 240​ }
263 onClicked: { ​
264 // the dialog auto-closes on losing focus ​
265 main.open = !main.dialogWasVisible ​
266 plasmoid.focus = true; ​
267 } 241​ }
242​
268 onReleased: { 243​ onReleased: {
244​ toolBoxButton.anchors.horizontalCenter = undefined;
245​ toolBoxButton.anchors.verticalCenter = undefined;
246​ snapX = false;
247​ snapY = false;
269 main.Plasmoid.configuration.ToolBoxButtonState = toolBoxButton.state; 248​ main.Plasmoid.configuration.ToolBoxButtonState = toolBoxButton.state;
270 main.Plasmoid.configuration.ToolBoxButtonX = toolBoxButton.x; 249​ main.Plasmoid.configuration.ToolBoxButtonX = toolBoxButton.x;
271 main.Plasmoid.configuration.ToolBoxButtonY = toolBoxButton.y; 250​ main.Plasmoid.configuration.ToolBoxButtonY = toolBoxButton.y;
272 //print("Saved coordinates for ToolBox in config: " + toolBoxButton.x + ", " +toolBoxButton.x); 251​ //print("Saved coordinates for ToolBox in config: " + toolBoxButton.x + ", " +toolBoxButton.x);
273 if (dragging) { 252​ if (dragging) {
274 main.placeToolBox(); 253​ main.placeToolBox();
275 } 254​ }
276 dragging = false; 255​ dragging = false;
277 stateTimer.stop(); 256​ stateTimer.stop();
278 updateState(); 257​ updateState();
279 } 258​ }
280 onCanceled: dragging = false; 259​ onCanceled: dragging = false;
260​
261​ RowLayout {
262​ id: buttonLayout
263​ anchors.centerIn: parent
264​ spacing: units.smallSpacing
265​
266​
267​ PlasmaComponents3.ToolButton {
268​ property QtObject qAction: plasmoid.action("add widgets")
269​ text: qAction.text
270​ icon.name: "list-add"
271​ icon.height: units.iconSizes.smallMedium
272​ onClicked: qAction.trigger()
273​ }
274​ PlasmaComponents3.ToolButton {
275​ property QtObject qAction: plasmoid.globalAction("manage activities")
276​ text: qAction.text
277​ icon.name: "activities"
278​ icon.height: units.iconSizes.smallMedium
279​ onClicked: qAction.trigger()
280​ }
281​ PlasmaComponents3.ToolButton {
282​ property QtObject qAction: plasmoid.action("lock widgets")
283​ text: qAction.text
284​ icon.name: "lock"
285​ icon.height: units.iconSizes.smallMedium
286​ onClicked: qAction.trigger()
ngrahamUnsubmitted
Done

Locking the widgets while in edit mode doesn't update the menu item, so it's possible to end up in this state:

ngraham: Locking the widgets while in edit mode doesn't update the menu item, so it's possible to end up…
martAuthorUnsubmitted
Not Done

latest revision should fix that

mart: latest revision should fix that
martAuthorUnsubmitted
Not Done

actually, revision of D24263

mart: actually, revision of D24263
287​ }
288​ PlasmaComponents3.ToolButton {
289​ property QtObject qAction: plasmoid.action("configure")
290​ text: qAction.text
291​ icon.name: "preferences-desktop-wallpaper"
292​ icon.height: units.iconSizes.smallMedium
293​ onClicked: qAction.trigger()
294​ }
295​ PlasmaComponents3.ToolButton {
296​ icon.name: "window-close"
297​ icon.height: units.iconSizes.smallMedium
298​ onClicked: plasmoid.editMode = false
299​ PlasmaComponents3.ToolTip {
300​ text: i18n("Close Edit Mode")
301​ }
302​ }
303​ }
281 } 304​ }
282 305​
283 states: [ 306​ /* states: [
284 State { ​
285 name: "topleft" ​
286 }, ​
287 State { 307​ State {
288 name: "top" 308​ name: "top"
289 }, 309​ },
290 State { 310​ State {
291 name: "topright" 311​ name: "topcenter"
292 }, 312​ },
293 State { 313​ State {
294 name: "right" 314​ name: "right"
295 }, 315​ },
296 State { 316​ State {
297 name: "bottomright" ​
298 }, ​
299 State { ​
300 name: "bottom" 317​ name: "bottom"
301 }, 318​ },
302 State { 319​ State {
303 name: "bottomleft" ​
304 }, ​
305 State { ​
306 name: "left" 320​ name: "left"
307 } 321​ }
308 ] 322​ ]*/
309} 323​}
GB_2Unsubmitted
Not Done

This should probably be changed to "Finish Customizing Layout" to match the current menu entry.

GB_2: This should probably be changed to "Finish Customizing Layout" to match the current menu entry.
GB_2Unsubmitted
Not Done

Not done.

GB_2: Not done.
GB_2Unsubmitted
Not Done

Please change to "Finish Customizing Layout" to match the menu entry.

GB_2: Please change to "Finish Customizing Layout" to match the menu entry.