Differential D16988 Diff 45757 applets/kickoff/package/contents/ui/Header.qml

Changeset View

Standalone View

View Options

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

Show All 29 Lines26Item {
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 Lines79 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";
161 } 138​ }
162 } 139​ }
140​ }
141​
142​ Item {
143​ id: searchWidget
144​
145​ property int animationDuration: units.longDuration
146​ property real normalOpacity: .6
147​ property int yOffset: height / 2
163 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​ }
169​
166 170​
167 placeholderText: i18n("Search...") 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​ onExited: {
177​ if (queryField.opacity != 0) {
178​ header.state = "query";
179​ } else {
180​ header.state = "Normal";
181​ }
182​ }
183​
184​ PlasmaComponents.TextField {
185​ id: queryField
186​ anchors.fill: parent
168 clearButtonShown: true 187​ clearButtonShown: true
188​ visible: opacity > 0
189​ placeholderText: i18nc("Type is a verb here, not a noun", "Type to search...")
190​ Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration / 4 } }
169 191​
170 onTextChanged: { 192​ onTextChanged: {
171 if (root.state != "Search") { 193​ if (root.state != "Search") {
172 root.previousState = root.state; 194​ root.previousState = root.state;
173 root.state = "Search"; 195​ root.state = "Search";
174 } 196​ }
175 if (text == "") { 197​ if (text == "") {
176 root.state = root.previousState; 198​ root.state = root.previousState;
199​ header.state = "hint";
200​ } else {
201​ header.state = "query";
177 } 202​ }
178 } 203​ }
179 204​
180 anchors { 205​ Keys.onPressed: {
181 left: faceIcon.right 206​ if ((event.key == Qt.Key_Escape) && (text == "")) {
182 bottom: faceIcon.bottom 207​ plasmoid.expanded = false;
183 right: parent.right 208​ }
184 leftMargin: units.gridUnit 209​ }
185 rightMargin: units.gridUnit 210​ }
211​ }
212​ }
213​
214​ states: [
215​ State {
216​ name: "info"
217​ PropertyChanges {
218​ target: infoLabel
219​ opacity: 1
220​ }
221​ PropertyChanges {
222​ target: nameLabel
223​ opacity: 0
224​ }
225​ PropertyChanges {
226​ target: queryField
227​ opacity: 0
228​ }
229​ },
230​ State {
231​ name: "infofocused"
232​ PropertyChanges {
233​ target: infoLabel
234​ opacity: 1
235​ }
236​ PropertyChanges {
237​ target: nameLabel
238​ opacity: 0
239​ }
240​ PropertyChanges {
241​ target: queryField
242​ opacity: 1
243​ }
244​ PropertyChanges {
245​ target: hintLabel
246​ opacity: 0
247​ }
248​ },
249​ State {
250​ name: "hint"
251​ PropertyChanges {
252​ target: infoLabel
253​ opacity: 0
254​ }
255​ PropertyChanges {
256​ target: nameLabel
257​ opacity: 1
258​ }
259​ PropertyChanges {
260​ target: hintLabel
261​ y: 0
262​ opacity: searchWidget.normalOpacity
263​ }
264​ PropertyChanges {
265​ target: queryField
266​ opacity: 0
267​ }
268​ },
269​ State {
270​ name: "query"
271​ PropertyChanges {
272​ target: infoLabel
273​ opacity: 0
274​ }
275​ PropertyChanges {
276​ target: hintLabel
277​ opacity: 0
278​ }
279​ PropertyChanges {
280​ target: queryField
281​ opacity: 1
282​ }
283​ }
284​ ] // states
285​ Keys.onPressed: {
286​ if (event.key == Qt.Key_Tab) {
287​ header.state = "query";
186 } 288​ }
187 } 289​ }
188} 290​}