Changeset View
Changeset View
Standalone 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: "name" | 38 | state: (query !== "") ? "query" : "hint" | ||
39 | | ||||
40 | states: [ | | |||
41 | State { | | |||
42 | name: "name" | | |||
43 | PropertyChanges { | | |||
44 | target: nameLabel | | |||
45 | opacity: 1 | | |||
46 | } | | |||
47 | PropertyChanges { | | |||
48 | target: infoLabel | | |||
49 | opacity: 0 | | |||
50 | } | | |||
51 | }, | | |||
52 | State { | | |||
53 | name: "info" | | |||
54 | PropertyChanges { | | |||
55 | target: nameLabel | | |||
56 | opacity: 0 | | |||
57 | } | | |||
58 | PropertyChanges { | | |||
59 | target: infoLabel | | |||
60 | opacity: 0.4 | | |||
61 | } | | |||
62 | } | | |||
63 | ] // states | | |||
64 | | ||||
65 | 39 | | |||
66 | Image { | 40 | Image { | ||
67 | id: faceIcon | 41 | id: faceIcon | ||
68 | source: kuser.faceIconUrl | 42 | source: kuser.faceIconUrl | ||
69 | cache: false | 43 | cache: false | ||
70 | visible: source !== "" | 44 | visible: source !== "" | ||
71 | 45 | | |||
72 | width: units.gridUnit * 3 | 46 | width: units.gridUnit * 3 | ||
Show All 33 Lines | 79 | onClicked: { | |||
106 | KCMShell.open("user_manager") | 80 | KCMShell.open("user_manager") | ||
107 | } | 81 | } | ||
108 | visible: KCMShell.authorize("user_manager.desktop").length > 0 | 82 | visible: KCMShell.authorize("user_manager.desktop").length > 0 | ||
109 | } | 83 | } | ||
110 | 84 | | |||
111 | PlasmaExtras.Heading { | 85 | PlasmaExtras.Heading { | ||
112 | id: nameLabel | 86 | id: nameLabel | ||
113 | 87 | | |||
114 | level: 2 | 88 | level: 3 | ||
115 | text: kuser.fullName | 89 | text: kuser.fullName | ||
116 | elide: Text.ElideRight | 90 | elide: Text.ElideRight | ||
117 | horizontalAlignment: Text.AlignLeft | 91 | horizontalAlignment: Text.AlignLeft | ||
118 | verticalAlignment: Text.AlignBottom | 92 | verticalAlignment: Text.AlignTop | ||
119 | 93 | height: paintedHeight | |||
120 | Behavior on opacity { NumberAnimation { duration: units.longDuration; easing.type: Easing.InOutQuad; } } | | |||
121 | 94 | | |||
122 | anchors { | 95 | anchors { | ||
123 | left: faceIcon.right | 96 | left: faceIcon.right | ||
124 | bottom: queryField.top | 97 | top: faceIcon.top | ||
125 | right: parent.right | 98 | right: parent.right | ||
126 | leftMargin: units.gridUnit | 99 | leftMargin: units.gridUnit | ||
127 | rightMargin: units.gridUnit | 100 | rightMargin: units.gridUnit | ||
128 | } | 101 | } | ||
129 | } | 102 | } | ||
130 | 103 | | |||
131 | PlasmaExtras.Heading { | 104 | PlasmaExtras.Heading { | ||
132 | id: infoLabel | 105 | id: infoLabel | ||
133 | | ||||
134 | level: 5 | 106 | level: 5 | ||
135 | opacity: 0 | 107 | opacity: 0 | ||
136 | text: kuser.os != "" ? i18n("%2@%3 (%1)", kuser.os, kuser.loginName, kuser.host) : i18n("%1@%2", kuser.loginName, kuser.host) | 108 | text: kuser.os != "" ? i18n("%2@%3 (%1)", kuser.os, kuser.loginName, kuser.host) : i18n("%1@%2", kuser.loginName, kuser.host) | ||
137 | elide: Text.ElideRight | 109 | elide: Text.ElideRight | ||
138 | horizontalAlignment: Text.AlignLeft | 110 | horizontalAlignment: Text.AlignLeft | ||
139 | verticalAlignment: Text.AlignBottom | 111 | verticalAlignment: Text.AlignVCenter | ||
140 | 112 | Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } } | |||
141 | Behavior on opacity { NumberAnimation { duration: units.longDuration; easing.type: Easing.InOutQuad; } } | | |||
142 | | ||||
143 | anchors { | 113 | anchors { | ||
114 | top: faceIcon.top | ||||
144 | left: faceIcon.right | 115 | left: faceIcon.right | ||
145 | bottom: queryField.top | | |||
146 | right: parent.right | 116 | right: parent.right | ||
147 | leftMargin: units.gridUnit | 117 | leftMargin: units.gridUnit | ||
148 | rightMargin: units.gridUnit | 118 | rightMargin: units.gridUnit | ||
149 | } | 119 | } | ||
150 | } | 120 | } | ||
151 | 121 | | |||
152 | // Show the info instead of the user's name when hovering over it | 122 | // Show the info instead of the user's name when hovering over it | ||
153 | MouseArea { | 123 | MouseArea { | ||
154 | anchors.fill: nameLabel | 124 | anchors.fill: nameLabel | ||
155 | hoverEnabled: true | 125 | hoverEnabled: true | ||
156 | onEntered: { | 126 | onEntered: { | ||
157 | header.state = "info" | 127 | if (queryField.opacity != 0) { | ||
128 | header.state = "infofocused"; | ||||
129 | } else { | ||||
130 | header.state = "info"; | ||||
131 | } | ||||
158 | } | 132 | } | ||
159 | onExited: { | 133 | onExited: { | ||
160 | header.state = "name" | 134 | if (queryField.opacity != 0) { | ||
135 | header.state = "query"; | ||||
136 | } else { | ||||
137 | header.state = "hint"; | ||||
138 | } | ||||
161 | } | 139 | } | ||
162 | } | 140 | } | ||
163 | 141 | | |||
142 | Item { | ||||
143 | id: searchWidget | ||||
144 | | ||||
145 | property int animationDuration: units.longDuration | ||||
146 | property real normalOpacity: .6 | ||||
147 | property int yOffset: height / 2 | ||||
148 | | ||||
149 | height: infoLabel.height | ||||
150 | anchors { | ||||
151 | left: nameLabel.left | ||||
152 | top: nameLabel.bottom | ||||
153 | right: nameLabel.right | ||||
154 | } | ||||
164 | PlasmaComponents.TextField { | 155 | PlasmaComponents.TextField { | ||
165 | id: queryField | 156 | id: hintLabel | ||
157 | anchors { | ||||
158 | left: parent.left | ||||
159 | right: parent.right | ||||
160 | top: nameLabel.bottom | ||||
161 | bottom: faceIcon.bottom | ||||
162 | } | ||||
163 | text: i18nc("Type is a verb here, not a noun", "Type to search...") | ||||
164 | activeFocusOnTab: false | ||||
165 | opacity: .6 | ||||
166 | Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } } | ||||
167 | Behavior on y { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } } | ||||
168 | } | ||||
166 | 169 | | |||
167 | placeholderText: i18n("Search...") | 170 | | ||
171 | MouseArea { | ||||
172 | anchors.fill: parent | ||||
173 | cursorShape: header.state === "hint" ? Qt.PointingHandCursor : Qt.ArrowCursor | ||||
174 | acceptedButtons: Qt.LeftButton | ||||
175 | enabled: header.state === "hint" | ||||
176 | onClicked: { | ||||
177 | root.previousState = "hint" | ||||
178 | root.state = "query" | ||||
179 | header.state = "query" | ||||
180 | queryField.forceActiveFocus() | ||||
181 | } | ||||
182 | onExited: { | ||||
183 | if (queryField.opacity != 0) { | ||||
184 | header.state = "query"; | ||||
185 | } else { | ||||
186 | header.state = "Normal"; | ||||
187 | } | ||||
188 | } | ||||
189 | | ||||
190 | PlasmaComponents.TextField { | ||||
191 | id: queryField | ||||
192 | anchors.fill: parent | ||||
168 | clearButtonShown: true | 193 | clearButtonShown: true | ||
194 | visible: opacity > 0 | ||||
195 | placeholderText: i18nc("Type is a verb here, not a noun", "Type to search...") | ||||
196 | Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration / 4 } } | ||||
169 | 197 | | |||
170 | onTextChanged: { | 198 | onTextChanged: { | ||
171 | if (root.state != "Search") { | 199 | if (root.state != "Search") { | ||
172 | root.previousState = root.state; | 200 | root.previousState = root.state; | ||
173 | root.state = "Search"; | 201 | root.state = "Search"; | ||
174 | } | 202 | } | ||
175 | if (text == "") { | 203 | if (text == "") { | ||
176 | root.state = root.previousState; | 204 | root.state = root.previousState; | ||
205 | header.state = "hint"; | ||||
206 | } else { | ||||
207 | header.state = "query"; | ||||
177 | } | 208 | } | ||
178 | } | 209 | } | ||
179 | 210 | | |||
180 | anchors { | 211 | Keys.onPressed: { | ||
181 | left: faceIcon.right | 212 | if ((event.key == Qt.Key_Escape) && (text == "")) { | ||
182 | bottom: faceIcon.bottom | 213 | plasmoid.expanded = false; | ||
183 | right: parent.right | 214 | } | ||
184 | leftMargin: units.gridUnit | 215 | } | ||
185 | rightMargin: units.gridUnit | 216 | } | ||
217 | } | ||||
218 | } | ||||
219 | | ||||
220 | states: [ | ||||
221 | State { | ||||
222 | name: "info" | ||||
223 | PropertyChanges { | ||||
224 | target: infoLabel | ||||
225 | opacity: 1 | ||||
226 | } | ||||
227 | PropertyChanges { | ||||
228 | target: nameLabel | ||||
229 | opacity: 0 | ||||
230 | } | ||||
231 | PropertyChanges { | ||||
232 | target: queryField | ||||
233 | opacity: 0 | ||||
234 | } | ||||
235 | }, | ||||
236 | State { | ||||
237 | name: "infofocused" | ||||
238 | PropertyChanges { | ||||
239 | target: infoLabel | ||||
240 | opacity: 1 | ||||
241 | } | ||||
242 | PropertyChanges { | ||||
243 | target: nameLabel | ||||
244 | opacity: 0 | ||||
245 | } | ||||
246 | PropertyChanges { | ||||
247 | target: queryField | ||||
248 | opacity: 1 | ||||
249 | } | ||||
250 | PropertyChanges { | ||||
251 | target: hintLabel | ||||
252 | opacity: 0 | ||||
253 | } | ||||
254 | }, | ||||
255 | State { | ||||
256 | name: "hint" | ||||
257 | PropertyChanges { | ||||
258 | target: infoLabel | ||||
259 | opacity: 0 | ||||
260 | } | ||||
261 | PropertyChanges { | ||||
262 | target: nameLabel | ||||
263 | opacity: 1 | ||||
264 | } | ||||
265 | PropertyChanges { | ||||
266 | target: hintLabel | ||||
267 | y: 0 | ||||
268 | opacity: searchWidget.normalOpacity | ||||
269 | } | ||||
270 | PropertyChanges { | ||||
271 | target: queryField | ||||
272 | opacity: 0 | ||||
273 | } | ||||
274 | }, | ||||
275 | State { | ||||
276 | name: "query" | ||||
277 | PropertyChanges { | ||||
278 | target: infoLabel | ||||
279 | opacity: 0 | ||||
280 | } | ||||
281 | PropertyChanges { | ||||
282 | target: hintLabel | ||||
283 | opacity: 0 | ||||
284 | } | ||||
285 | PropertyChanges { | ||||
286 | target: queryField | ||||
287 | opacity: 1 | ||||
288 | } | ||||
289 | } | ||||
290 | ] // states | ||||
291 | Keys.onPressed: { | ||||
292 | if (event.key == Qt.Key_Tab) { | ||||
293 | header.state = "query"; | ||||
186 | } | 294 | } | ||
187 | } | 295 | } | ||
188 | } | 296 | } |