Differential D16988 Diff 45750 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​ header.state = "info";
158 } 128​ }
159 onExited: { 129​ onExited: {
160 header.state = "name" 130​ if (queryField.opacity != 0) {
131​ header.state = "query";
132​ } else {
133​ header.state = "hint";
134​ }
161 } 135​ }
162 } 136​ }
163 137​
138​ Item {
139​ id: searchWidget
140​
141​ property int animationDuration: units.longDuration
142​ property real normalOpacity: .6
143​ property int yOffset: height / 2
144​
145​ height: infoLabel.height
146​ anchors {
147​ left: nameLabel.left
148​ top: nameLabel.bottom
149​ right: nameLabel.right
150​ }
164 PlasmaComponents.TextField { 151​ PlasmaComponents.TextField {
165 id: queryField 152​ id: hintLabel
153​ anchors {
154​ left: parent.left
155​ right: parent.right
156​ top: nameLabel.bottom
157​ bottom: faceIcon.bottom
158​ }
159​ text: i18nc("Type is a verb here, not a noun", "Type to search...")
160​ activeFocusOnTab: false
161​ opacity: .6
162​ Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }
163​ Behavior on y { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }
164​ }
165​
166 166​
167 placeholderText: i18n("Search...") 167​ MouseArea {
168​ anchors.fill: parent
169​ cursorShape: header.state === "hint" ? Qt.PointingHandCursor : Qt.ArrowCursor
170​ acceptedButtons: Qt.LeftButton
171​ enabled: header.state === "hint"
172​ onClicked: {
173​ root.previousState = "hint"
174​ root.state = "query"
175​ header.state = "query"
176​ queryField.forceActiveFocus()
177​ }
178​ onExited: {
179​ if (queryField.opacity != 0) {
180​ header.state = "query";
181​ } else {
182​ header.state = "Normal";
183​ }
184​ }
185​
186​ PlasmaComponents.TextField {
187​ id: queryField
188​ anchors.fill: parent
168 clearButtonShown: true 189​ clearButtonShown: true
190​ visible: opacity > 0
191​ placeholderText: i18nc("Type is a verb here, not a noun", "Type to search...")
192​ Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration / 4 } }
169 193​
170 onTextChanged: { 194​ onTextChanged: {
171 if (root.state != "Search") { 195​ if (root.state != "Search") {
172 root.previousState = root.state; 196​ root.previousState = root.state;
173 root.state = "Search"; 197​ root.state = "Search";
174 } 198​ }
175 if (text == "") { 199​ if (text == "") {
176 root.state = root.previousState; 200​ root.state = root.previousState;
201​ header.state = "hint";
202​ } else {
203​ header.state = "query";
177 } 204​ }
178 } 205​ }
179 206​
180 anchors { 207​ Keys.onPressed: {
181 left: faceIcon.right 208​ if ((event.key == Qt.Key_Escape) && (text == "")) {
182 bottom: faceIcon.bottom 209​ plasmoid.expanded = false;
183 right: parent.right 210​ }
184 leftMargin: units.gridUnit 211​ }
185 rightMargin: units.gridUnit 212​ }
213​ }
214​ }
215​
216​ states: [
217​ State {
218​ name: "info"
219​ PropertyChanges {
220​ target: infoLabel
221​ opacity: 1
222​ }
223​ PropertyChanges {
224​ target: nameLabel
225​ opacity: 0
226​ }
227​ PropertyChanges {
228​ target: queryField
229​ opacity: 0
230​ }
231​ },
232​ State {
233​ name: "hint"
234​ PropertyChanges {
235​ target: infoLabel
236​ opacity: 0
237​ }
238​ PropertyChanges {
239​ target: nameLabel
240​ opacity: 1
241​ }
242​ PropertyChanges {
243​ target: hintLabel
244​ y: 0
245​ opacity: searchWidget.normalOpacity
246​ }
247​ PropertyChanges {
248​ target: queryField
249​ opacity: 0
250​ }
251​ },
252​ State {
253​ name: "query"
254​ PropertyChanges {
255​ target: infoLabel
256​ opacity: 0
257​ }
258​ PropertyChanges {
259​ target: hintLabel
260​ opacity: 0
261​ }
262​ PropertyChanges {
263​ target: queryField
264​ opacity: 1
265​ }
266​ }
267​ ] // states
268​ Keys.onPressed: {
269​ if (event.key == Qt.Key_Tab) {
270​ header.state = "query";
186 } 271​ }
187 } 272​ }
188} 273​}