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

Changeset View

Standalone View

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
21	import QtQuick 2.4	21		import QtQuick 2.4
		22		import QtQuick.Layouts 1.4
22	import org.kde.plasma.core 2.0 as PlasmaCore	23		import org.kde.plasma.core 2.0 as PlasmaCore
23	import 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
24	import org.kde.kquickcontrolsaddons 2.0 as KQuickControlsAddons	26		import org.kde.kquickcontrolsaddons 2.0 as KQuickControlsAddons
25	import org.kde.plasma.plasmoid 2.0	27		import org.kde.plasma.plasmoid 2.0
26		28
27	Item {	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)
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
36	rotation: switch(state) {
37	case "left":
38	return -90;
39	case "right":
40	return 90;
41	default:
42	return 0;
43	}
44
45	transform: Translate {	32		transform: Translate {
46	x: state == "left" ? Math.round(-width/2 + height/2) : state == "right" ? + Math.round(width/2 - height/2) : 0	33		y: plasmoid.editMode ? 0
47	Behavior on x {	34		: state == "top" \|\| state == "topcenter" ? -height
		35		: state == "bottom" \|\| state == "bottomcenter" ? height
		36		: 0
		37
		38		Behavior on y {
48	NumberAnimation {	39		NumberAnimation {
49	duration: units.shortDuration * 3;	40		duration: units.longDuration
50	easing.type: Easing.InOutExpo;	41		easing.type: Easing.InOutQuad
51	}	42		}
52	}	43		}
53	}	44		}
54	transformOrigin: Item.Center	45		transformOrigin: Item.Center
		46		opacity: plasmoid.editMode
		47		Behavior on opacity {
		48		OpacityAnimator {
		49		duration: units.longDuration
		50		easing.type: Easing.InOutQuad
		51		}
		52		enabled: visible
		53		}
55	Behavior on rotation {	54		Behavior on rotation {
56	NumberAnimation {	55		NumberAnimation {
57	duration: units.shortDuration * 3;	56		duration: units.shortDuration * 3;
58	easing.type: Easing.InOutExpo;	57		easing.type: Easing.InOutExpo;
59	}	58		}
60	enabled: visible	59		enabled: visible
61	}	60		}
62	Behavior on x {	61		Behavior on x {
63	NumberAnimation {	62		NumberAnimation {
64	duration: units.shortDuration * 3;	63		duration: units.shortDuration * 3;
65	easing.type: Easing.InOutExpo;	64		easing.type: Easing.InOutExpo;
66	}	65		}
67	enabled: visible	66		enabled: visible
68		67
69	}	68		}
70	Behavior on y {	69		Behavior on y {
71	NumberAnimation {	70		NumberAnimation {
72	duration: units.shortDuration * 3;	71		duration: units.shortDuration * 3;
73	easing.type: Easing.InOutExpo;	72		easing.type: Easing.InOutExpo;
74	}	73		}
75	enabled: visible	74		enabled: visible
76	}	75		}
77		76
78	clip: backgroundFrameWidthAnimation.running	77		width: buttonLayout.width
79	width: backgroundFrame.width + backgroundFrame.width % 2	78		height: buttonLayout.height
80	height: backgroundFrame.height + backgroundFrame.height % 2	79
81		80		state: "topcenter"
82	//x and y default to 0, so top left would be correct
83	//If the position is anything else it will updated via onXChanged during initialization
84	state: "topleft"
85		81
86	onXChanged: stateTimer.restart()	82		onXChanged: stateTimer.restart()
87	onYChanged: stateTimer.restart()	83		onYChanged: stateTimer.restart()
88		84
89	Timer {	85		Timer {
90	id: stateTimer	86		id: stateTimer
91	interval: 100	87		interval: 0
			davidedmundsonUnsubmitted Done fix davidedmundson: fix
92	onTriggered: updateState()	88		onTriggered: updateState()
93	}	89		}
94	function updateState() {	90		function updateState() {
95	var container = main;	91		var container = main;
96	//print(" w: " + container.width +"x"+container.height+" : "+x+"/"+y+" tbw: " + toolBoxButton.width);	92		//print(" w: " + container.width +"x"+container.height+" : "+x+"/"+y+" tbw: " + toolBoxButton.width);
97		93
98	var x = toolBoxButton.x - main.x;	94		var x = toolBoxButton.x - main.x;
99	var y = toolBoxButton.y - main.y;	95		var y = toolBoxButton.y - main.y;
100		96
101	var cornerSnap = iconWidth	97		var cornerSnap = iconWidth
102		98
103	if (x < cornerSnap && y < cornerSnap) {	99		//top
104	toolBoxButton.state = "topleft";	100		if (y + height / 2 < container.height / 2) {
105	} else if (container.width - x - buttonLayout.width < cornerSnap && y < cornerSnap) {	101		if (Math.abs(container.width/2 - (x + width/2)) < units.gridUnit) {
106	toolBoxButton.state = "topright";	102		toolBoxButton.state = "topcenter";
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
112	} else if (x > (y * (container.width/container.height))) {
113	//Top edge
114	if (container.width - x > y ) {
115	toolBoxButton.state = "top";
116	//right edge
117	} else {	103		} else {
118	//toolBoxButton.transformOrigin = Item.BottomRight	104		toolBoxButton.state = "top";
119	toolBoxButton.state = "right";
120	}	105		}
121	//bottom diagonal half	106		//bottom
122	} else {	107		} else {
123	//Left edge	108		if (Math.abs(container.width/2 - (x + height/2)) < units.gridUnit) {
124	if (container.height - y > x ) {	109		toolBoxButton.state = "bottomcenter";
125	//toolBoxButton.transformOrigin = Item.TopLeft
126	toolBoxButton.state = "left";
127	//Bottom edge
128	} else {	110		} else {
129	toolBoxButton.state = "bottom";	111		toolBoxButton.state = "bottom";
130	}	112		}
131	}	113		}
132		114
133	if (!buttonMouse.pressed) {	115		if (!buttonMouse.pressed) {
134	main.placeToolBox(toolBoxButton.state);	116		main.placeToolBox(toolBoxButton.state);
135	}	117		}
136		118
137	stateTimer.running = false;	119		stateTimer.running = false;
138	}	120		}
139		121
140	PlasmaCore.FrameSvgItem {	122		PlasmaCore.FrameSvgItem {
141	id: backgroundFrame	123		id: backgroundFrame
142	anchors {	124		anchors {
143	left: parent.left	125		fill: parent
144	top: parent.top	126		leftMargin: -backgroundFrame.margins.left
		127		topMargin: -backgroundFrame.margins.top
		128		rightMargin: -backgroundFrame.margins.right
		129		bottomMargin: -backgroundFrame.margins.bottom
145	}	130		}
146	imagePath: "widgets/translucentbackground"	131		imagePath: "widgets/background"
147	opacity: buttonMouse.containsMouse \|\| (toolBoxLoader.item && toolBoxLoader.item.visible) ? 1.0 : 0.4	132		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)	133		height: Math.round(buttonLayout.height + margins.vertical)
150	Behavior on width {
151	NumberAnimation {
152	id: backgroundFrameWidthAnimation
153	duration: units.longDuration;
154	easing.type: Easing.InOutQuad;
155	}
156	}
157	Behavior on opacity {
158	NumberAnimation {
159	duration: units.longDuration;
160	}
161	}
162	}
163
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	}	134		}
229		135
230	MouseArea {	136		MouseArea {
231	id: buttonMouse	137		id: buttonMouse
232		138
233	property QtObject container: main	139		property QtObject container: main
234	property int pressedX	140		property int pressedX
235	property int pressedY	141		property int pressedY
		142		property int snapStartX
		143		property bool snapX: false;
236	property bool dragging: false	144		property bool dragging: false
237		145
238	anchors {	146		anchors.fill: parent
239	fill: parent
240	margins: -10
241	}
242		147
243	drag {	148		drag {
		149		filterChildren: true
244	target: main.Plasmoid.immutable ? undefined : toolBoxButton	150		target: main.Plasmoid.immutable ? undefined : toolBoxButton
245	minimumX: 0	151		minimumX: 0
246	maximumX: container.width - toolBoxIcon.width	152		maximumX: container.width - toolBoxButton.width
247	minimumY: 0	153		minimumY: 0
248	maximumY: container.height - toolBoxIcon.height	154		maximumY: container.height
249	}	155		}
250		156
251	hoverEnabled: true	157		hoverEnabled: true
252		158
253	onPressed: {	159		onPressed: {
254	pressedX = toolBoxButton.x	160		pressedX = toolBoxButton.x
255	pressedY = toolBoxButton.y	161		pressedY = toolBoxButton.y
256	}	162		}
257	onPositionChanged: {	163		onPositionChanged: {
258	if (pressed && (Math.abs(toolBoxButton.x - pressedX) > iconSize \|\|	164		if (pressed && (Math.abs(toolBoxButton.x - pressedX) > iconSize \|\|
259	Math.abs(toolBoxButton.y - pressedY) > iconSize)) {	165		Math.abs(toolBoxButton.y - pressedY) > iconSize)) {
260	dragging = true;	166		dragging = true;
261	}	167		}
		168
		169		// Center snapping X
		170		if (snapX && Math.abs(snapStartX - mouse.x) > units.gridUnit) {
		171		toolBoxButton.anchors.horizontalCenter = undefined;
		172		snapX = false;
		173		} else if (!snapX && Math.abs(main.width/2 - (toolBoxButton.x + toolBoxButton.width/2)) < units.gridUnit) {
		174		toolBoxButton.anchors.horizontalCenter = main.horizontalCenter;
		175		snapStartX = mouse.x;
		176		snapX = true;
262	}	177		}
263	onClicked: {
264	// the dialog auto-closes on losing focus
265	main.open = !main.dialogWasVisible
266	plasmoid.focus = true;
267	}	178		}
		179
268	onReleased: {	180		onReleased: {
		181		toolBoxButton.anchors.horizontalCenter = undefined;
		182		toolBoxButton.anchors.verticalCenter = undefined;
		183		snapX = false;
269	main.Plasmoid.configuration.ToolBoxButtonState = toolBoxButton.state;	184		main.Plasmoid.configuration.ToolBoxButtonState = toolBoxButton.state;
270	main.Plasmoid.configuration.ToolBoxButtonX = toolBoxButton.x;	185		main.Plasmoid.configuration.ToolBoxButtonX = toolBoxButton.x;
271	main.Plasmoid.configuration.ToolBoxButtonY = toolBoxButton.y;	186		main.Plasmoid.configuration.ToolBoxButtonY = toolBoxButton.y;
272	//print("Saved coordinates for ToolBox in config: " + toolBoxButton.x + ", " +toolBoxButton.x);	187		//print("Saved coordinates for ToolBox in config: " + toolBoxButton.x + ", " +toolBoxButton.x);
273	if (dragging) {	188		if (dragging) {
274	main.placeToolBox();	189		main.placeToolBox();
275	}	190		}
276	dragging = false;	191		dragging = false;
277	stateTimer.stop();	192		stateTimer.stop();
278	updateState();	193		updateState();
279	}	194		}
280	onCanceled: dragging = false;	195		onCanceled: dragging = false;
281	}
282		196
283	states: [	197		RowLayout {
284	State {	198		id: buttonLayout
285	name: "topleft"	199		anchors.centerIn: parent
286	},	200		spacing: units.smallSpacing
287	State {	201
288	name: "top"	202
289	},	203		PlasmaComponents3.ToolButton {
290	State {	204		property QtObject qAction: plasmoid.action("add widgets")
291	name: "topright"	205		text: qAction.text
292	},	206		icon.name: "list-add"
293	State {	207		icon.height: units.iconSizes.smallMedium
294	name: "right"	208		onClicked: qAction.trigger()
295	},	209		}
296	State {	210		PlasmaComponents3.ToolButton {
297	name: "bottomright"	211		property QtObject qAction: plasmoid.globalAction("manage activities")
298	},	212		text: qAction.text
299	State {	213		icon.name: "activities"
300	name: "bottom"	214		icon.height: units.iconSizes.smallMedium
301	},	215		onClicked: qAction.trigger()
302	State {	216		}
303	name: "bottomleft"	217		PlasmaComponents3.ToolButton {
304	},	218		property QtObject qAction: plasmoid.action("configure")
305	State {	219		text: qAction.text
306	name: "left"	220		icon.name: "preferences-desktop-wallpaper"
		221		icon.height: units.iconSizes.smallMedium
		222		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
		223		}
		224		PlasmaComponents3.ToolButton {
		225		icon.name: "window-close"
		226		icon.height: units.iconSizes.smallMedium
		227		Layout.preferredWidth: height
		228		onClicked: plasmoid.editMode = false
		229		PlasmaComponents3.ToolTip {
		230		text: i18n("Close Edit Mode")
			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.
		231		}
		232		}
		233		}
307	}	234		}
308	]
309	}	235		}
			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.