Differential D15011 Diff 40306 applets/kickoff/package/contents/ui/Header.qml

Changeset View

Standalone View

applets/kickoff/package/contents/ui/Header.qml

Show All 29 Lines		26	Item {
30		30
31	property alias query: queryField.text	31		property alias query: queryField.text
32	property Item input: queryField	32		property Item input: queryField
33		33
34	KCoreAddons.KUser {	34		KCoreAddons.KUser {
35	id: kuser	35		id: kuser
36	}	36		}
37		37
38	state: (query !== "") ? "query" : "hint"	38		state: "name"
39		39
40	Timer {	40		states: [
41	id: labelTimer	41		State {
42	interval: 8000	42		name: "name"
43	repeat: true	43		PropertyChanges {
44	running: (header.state === "hint" \|\| header.state === "info") && plasmoid.expanded && (header.query === "")	44		target: nameLabel
45	onTriggered: {	45		opacity: 1
46	if (header.state == "info") {	46		}
47	header.state = "hint";	47		PropertyChanges {
48	} else if (header.state == "hint") {	48		target: infoLabel
49	header.state = "info";	49		opacity: 0
		50		}
		51		},
		52		State {
		53		name: "info"
		54		PropertyChanges {
		55		target: nameLabel
		56		opacity: 0
50	}	57		}
		58		PropertyChanges {
		59		target: infoLabel
		60		opacity: 0.4
51	}	61		}
52	}	62		}
		63		] // states
		64
53		65
54	Image {	66		Image {
55	id: faceIcon	67		id: faceIcon
56	source: kuser.faceIconUrl	68		source: kuser.faceIconUrl
57	cache: false	69		cache: false
58	visible: source !== ""	70		visible: source !== ""
59		71
60	width: units.gridUnit * 3	72		width: units.gridUnit * 3
61	height: width	73		height: width
62		74
63	sourceSize.width: width	75		sourceSize.width: width
64	sourceSize.height: height	76		sourceSize.height: height
65		77
			davidedmundsonUnsubmitted Done What's this about? Negative offsets are weird, and we also have a 300ms animation to move 1px? davidedmundson: What's this about? Negative offsets are weird, and we also have a 300ms animation to move 1px?
			ngrahamAuthorUnsubmitted Done I was copying this from the original, but yeah, it did seem weird to me too. Removed. ngraham: I was copying this from the original, but yeah, it did seem weird to me too. Removed.
66	fillMode: Image.PreserveAspectFit	78		fillMode: Image.PreserveAspectFit
67		79
68	anchors {	80		anchors {
69	top: parent.top	81		top: parent.top
70	left: parent.left	82		left: parent.left
71	topMargin: units.gridUnit	83		topMargin: units.gridUnit
72	leftMargin: units.gridUnit	84		leftMargin: units.gridUnit
73	}	85		}
Show All 24 Lines
98		110
99	PlasmaExtras.Heading {	111		PlasmaExtras.Heading {
100	id: nameLabel	112		id: nameLabel
101		113
102	level: 2	114		level: 2
103	text: kuser.fullName	115		text: kuser.fullName
104	elide: Text.ElideRight	116		elide: Text.ElideRight
105	horizontalAlignment: Text.AlignLeft	117		horizontalAlignment: Text.AlignLeft
106	verticalAlignment: Text.AlignTop	118		verticalAlignment: Text.AlignBottom
107	height: paintedHeight	119
		120		Behavior on opacity { NumberAnimation { duration: units.longDuration; easing.type: Easing.InOutQuad; } }
108		121
109	anchors {	122		anchors {
110	left: faceIcon.right	123		left: faceIcon.right
111	top: faceIcon.top	124		bottom: queryField.top
112	right: parent.right	125		right: parent.right
			davidedmundsonUnsubmitted Done and here davidedmundson: and here
113	leftMargin: units.gridUnit	126		leftMargin: units.gridUnit
114	rightMargin: units.gridUnit	127		rightMargin: units.gridUnit
115	}	128		}
116	}	129		}
117		130
118	Item {	131		PlasmaExtras.Heading {
119	id: searchWidget
120
121	property int animationDuration: units.longDuration
122	property real normalOpacity: .6
123	property int yOffset: height / 2
124
125	height: infoLabel.height
126	anchors {
127	left: nameLabel.left
128	top: nameLabel.bottom
129	right: nameLabel.right
130	}
131
132	PlasmaComponents.Label {
133	id: infoLabel	132		id: infoLabel
134	anchors {	133
135	left: parent.left	134		level: 5
136	right: parent.right	135		opacity: 0
			davidedmundsonUnsubmitted Done We can't do this. You're assuming lots of things about the user's font that you can't do. davidedmundson: We can't do this. You're assuming lots of things about the user's font that you can't do.
			ngrahamAuthorUnsubmitted Done Oops, this was left over from an earlier idea that I abandoned. Removed. ngraham: Oops, this was left over from an earlier idea that I abandoned. Removed.
137	}
138	horizontalAlignment: Text.AlignLeft
139	verticalAlignment: Text.AlignBottom
140	text: kuser.os != "" ? i18n("%2@%3 (%1)", kuser.os, kuser.loginName, kuser.host) : i18n("%1@%2", kuser.loginName, kuser.host)	136		text: kuser.os != "" ? i18n("%2@%3 (%1)", kuser.os, kuser.loginName, kuser.host) : i18n("%1@%2", kuser.loginName, kuser.host)
141	elide: Text.ElideRight	137		elide: Text.ElideRight
		138		horizontalAlignment: Text.AlignLeft
		139		verticalAlignment: Text.AlignBottom
142		140
143	Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }	141		Behavior on opacity { NumberAnimation { duration: units.longDuration; easing.type: Easing.InOutQuad; } }
144	Behavior on y { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }
145	}
146		142
147	PlasmaComponents.Label {
148	id: hintLabel
149	anchors {	143		anchors {
150	left: parent.left	144		left: faceIcon.right
		145		bottom: queryField.top
151	right: parent.right	146		right: parent.right
		147		leftMargin: units.gridUnit
		148		rightMargin: units.gridUnit
			davidedmundsonUnsubmitted Done This will no longer elide as the right is not constrained. If you have a long username this will just overflow out the box. When dealing with text items, it's easier to think in terms of bounding box rather than where the text itself. Include the rightMargin back too. davidedmundson: This will no longer elide as the right is not constrained. If you have a long username this…
152	}	149		}
153	verticalAlignment: Text.AlignBottom
154	text: i18nc("Type is a verb here, not a noun", "Type to search...")
155	Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }
156	Behavior on y { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }
157	}	150		}
158		151
159		152		// Show the info instead of the user's name when hovering over it
160	MouseArea {	153		MouseArea {
161	anchors.fill: parent	154		anchors.fill: nameLabel
162	cursorShape: header.state === "hint" ? Qt.PointingHandCursor : Qt.ArrowCursor	155		hoverEnabled: true
163	acceptedButtons: Qt.LeftButton	156		onEntered: {
164	enabled: header.state === "hint"	157		header.state = "info"
165	onClicked: {	158		}
166	root.previousState = "Normal"	159		onExited: {
167	root.state = "Search"	160		header.state = "name"
168	header.state = "query"	161		}
169	queryField.forceActiveFocus()
170	}	162		}
171		163
172	PlasmaComponents.TextField {	164		PlasmaComponents.TextField {
173	id: queryField	165		id: queryField
174	anchors.fill: parent	166
		167		placeholderText: i18n("Search...")
			davidedmundsonUnsubmitted Done No working round Plasma code in Plasma. davidedmundson: No working round Plasma code in Plasma.
175	clearButtonShown: true	168		clearButtonShown: true
176	visible: opacity > 0
177	placeholderText: i18nc("Type is a verb here, not a noun", "Type to search...")
178	Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration / 4 } }
179		169
180	onTextChanged: {	170		onTextChanged: {
181	if (root.state != "Search") {	171		if (root.state != "Search") {
182	root.previousState = root.state;	172		root.previousState = root.state;
183	root.state = "Search";	173		root.state = "Search";
184	}	174		}
185	if (text == "") {	175		if (text == "") {
186	root.state = root.previousState;	176		root.state = root.previousState;
187	header.state = "info";
188	} else {
189	header.state = "query";
190	}
191	}
192	}
193	}	177		}
194	}	178		}
195		179
196	states: [	180		anchors {
197	State {	181		left: faceIcon.right
198	name: "info"	182		bottom: faceIcon.bottom
199	PropertyChanges {	183		right: parent.right
200	target: infoLabel	184		leftMargin: units.gridUnit
201	opacity: searchWidget.normalOpacity	185		rightMargin: units.gridUnit
202	y: 0
203	}
204	PropertyChanges {
205	target: hintLabel
206	opacity: 0
207	y: searchWidget.yOffset
208	}
209	PropertyChanges {
210	target: queryField
211	opacity: 0
212	}
213	},
214	State {
215	name: "hint"
216	PropertyChanges {
217	target: infoLabel
218	y: -searchWidget.yOffset
219	opacity: 0
220	}
221	PropertyChanges {
222	target: hintLabel
223	y: 0
224	opacity: searchWidget.normalOpacity
225	}
226	PropertyChanges {
227	target: queryField
228	opacity: 0
229	}
230	},
231	State {
232	name: "query"
233	PropertyChanges {
234	target: infoLabel
235	opacity: 0
236	}
237	PropertyChanges {
238	target: hintLabel
239	opacity: 0
240	}
241	PropertyChanges {
242	target: queryField
243	opacity: 1
244	}	186		}
245	}	187		}
246	] // states
247	}	188		}