summaryrefslogtreecommitdiffstats
path: root/components/package/contents/ui
diff options
context:
space:
mode:
authorMichael Bohlender <michael.bohlender@kdemail.net>2017-03-19 19:34:11 +0100
committerMichael Bohlender <michael.bohlender@kdemail.net>2017-03-19 19:34:11 +0100
commit5b0097cc7e4b19d68a4adcbc08e50aaba0088f0a (patch)
tree53ea374e12138ba9534e03cb0ad64842af5bde92 /components/package/contents/ui
parentdf994a3b30d350e62ba644277b88edb6f1a51a50 (diff)
downloadkube-5b0097cc7e4b19d68a4adcbc08e50aaba0088f0a.tar.gz
kube-5b0097cc7e4b19d68a4adcbc08e50aaba0088f0a.zip
new people ui
Diffstat (limited to 'components/package/contents/ui')
-rw-r--r--components/package/contents/ui/People.qml437
1 files changed, 288 insertions, 149 deletions
diff --git a/components/package/contents/ui/People.qml b/components/package/contents/ui/People.qml
index ec017f1b..41529d2a 100644
--- a/components/package/contents/ui/People.qml
+++ b/components/package/contents/ui/People.qml
@@ -1,5 +1,5 @@
1 /* 1 /*
2 Copyright (C) 2017 Michael Bohlender, <michael.bohlender@kdemail.net> 2 Copyright (C) 2017 Michael Bohlender, <bohlender@kolabsys.com>
3 Copyright (C) 2017 Christian Mollekopf, <mollekopf@kolabsys.com> 3 Copyright (C) 2017 Christian Mollekopf, <mollekopf@kolabsys.com>
4 4
5 This program is free software; you can redistribute it and/or modify 5 This program is free software; you can redistribute it and/or modify
@@ -27,237 +27,376 @@ import org.kube.framework.domain 1.0 as KubeFramework
27 27
28 28
29Popup { 29Popup {
30
31 id: popup 30 id: popup
32 modal: true
33 31
34 property variant currentContact: null 32 property var currentContact
35 33
36 Controls.SplitView { 34 modal: true
37 anchors.fill: parent
38 35
39 Item { 36 Item {
40 id: contactList 37 id: peopleRoot
41 38
42 height: parent.height 39 anchors.fill: parent
43 width: Kirigami.Units.gridUnit * 14
44 40
45 Item { 41 ToolBar {
46 id: toolBar 42 id: toolbar
47 43
48 width: parent.width - scroll.width 44 width: parent.width
49 height: Kirigami.Units.gridUnit * 2
50 45
51 Rectangle { 46 Controls.ToolButton {
52 47
53 anchors.centerIn: parent 48 anchors.verticalCenter: parent.verticalCenter
54 49
55 height: Kirigami.Units.gridUnit * 1.5 50 iconName: "go-previous"
56 width: parent.width* 0.8
57 51
58 color: "#27ae60" 52 onClicked: stack.pop()
59 clip: true
60 53
61 Text { 54 visible: stack. depth > 1
62 anchors.centerIn: parent 55 }
63 56
64 clip: true 57 TextField {
58 anchors.centerIn: parent
65 59
66 text: "New Contact" 60 placeholderText: "Search..."
67 61
68 color: "white" 62 width: parent.width * 0.5
69 }
70 }
71 } 63 }
72 64
73 ListView { 65 Controls.ToolButton {
74 id: listView
75 66
76 anchors { 67 anchors {
77 top: toolBar.bottom
78 left: parent.left
79 right: parent.right 68 right: parent.right
80 bottom: parent.bottom 69 rightMargin: Kirigami.Units.smallSpacing
81 topMargin: Kirigami.Units.smallSpacing 70 verticalCenter: parent.verticalCenter
82 } 71 }
83 72
84 model: KubeFramework.PeopleModel{} 73 iconName: "list-add-new"
85 clip: true 74 }
75 }
86 76
87 ScrollBar.vertical: ScrollBar { 77 StackView {
88 id: scroll 78 id: stack
89 }
90 79
91 onCurrentItemChanged: { 80 anchors {
92 popup.currentContact = currentItem.currentData.domainObject; 81 top: toolbar.bottom
93 } 82 left: parent.left
83 right: parent.right
84 bottom: parent.bottom
85 }
94 86
95 delegate: Kirigami.AbstractListItem { 87 initialItem: peoplePage
96 height: Kirigami.Units.gridUnit * 2.5 88
97 width: listView.width - scroll.width 89 clip: true
98 90 }
99 property variant currentData: model 91 }
100 92
101 clip: true 93 Component {
102 94 id: peoplePage
103 states: [ 95
104 State { 96 Rectangle {
105 name: "selected" 97 id: peoplePageRoot
106 when: ListView.isCurrentItem 98 color: Kirigami.Theme.viewBackgroundColor
107 PropertyChanges {target: background; color: Kirigami.Theme.highlightColor} 99
108 PropertyChanges {target: name; color: Kirigami.Theme.highlightedTextColor} 100 Flickable {
109 }, 101
110 State { 102 anchors.fill: parent
111 name: "hovered" 103
112 when: mouseArea.containsMouse 104 ScrollBar.vertical: ScrollBar { }
113 PropertyChanges {target: background; color: Kirigami.Theme.buttonHoverColor; opacity: 0.7} 105 contentHeight: content.height
114 PropertyChanges {target: name; color: Kirigami.Theme.highlightedTextColor} 106 clip: true
115 } 107
116 ] 108 Item {
109 id: content
117 110
118 Avatar { 111 Flow {
119 id: avatar
120 112
121 anchors { 113 anchors {
122 verticalCenter: parent.verticalCenter 114 top: parent.top
115 topMargin: Kirigami.Units.largeSpacing
123 left: parent.left 116 left: parent.left
124 leftMargin: Kirigami.Units.smallSpacing 117 leftMargin: Kirigami.Units.largeSpacing
125 } 118 }
126 119
127 height: parent.height * 0.9 120 spacing: Kirigami.Units.largeSpacing
128 width: height 121 width: peoplePageRoot.width - Kirigami.Units.largeSpacing * 2
129 122
130 name: model.name 123 Repeater {
131 }
132 124
133 Text { 125 model: KubeFramework.PeopleModel{}
134 id: name
135 126
136 anchors { 127 delegate: Rectangle {
137 left: avatar.right 128
138 leftMargin: Kirigami.Units.smallSpacing 129 height: Kirigami.Units.gridUnit * 3
139 verticalCenter: avatar.verticalCenter 130 width: Kirigami.Units.gridUnit * 10
140 } 131
132 border.width: 1
133 border.color: "lightgrey"
134
135 MouseArea {
136 anchors.fill: parent
137
138 onClicked: {
139 popup.currentContact = model.domainObject
140 stack.push(personPage)
141 }
142 }
143
144 Rectangle {
145 id: avatarPlaceholder
146
147 height: parent.height
148 width: height
149
150 color: "lightgrey"
151 }
152
153 Text {
154 anchors {
155 left: avatarPlaceholder.right
156 leftMargin: Kirigami.Units.smallSpacing
157 verticalCenter: parent.verticalCenter
158 }
141 159
142 text: model.name 160 color: Kirigami.Theme.textColor
143 color: Kirigami.Theme.textColor 161 text: model.name
162 }
163 }
164 }
144 } 165 }
145 } 166 }
146 } 167 }
147 } 168 }
169 }
170
171 Component {
172 id: personPage
173
174 Rectangle {
175 id: personPageRoot
148 176
149 Item {
150 KubeFramework.ContactController { 177 KubeFramework.ContactController {
151 id: contactController 178 id: contactController
152 contact: popup.currentContact 179 contact: popup.currentContact
153 } 180 }
154 181
155 height: parent.height 182 color: Kirigami.Theme.viewBackgroundColor
156 Layout.fillWidth: true
157
158 ToolBar {
159 id: detailToolBar
160
161 width: parent.width
162 height: Kirigami.Units.gridUnit * 2
163 }
164 183
165 Rectangle { 184 Item {
166 185
167 anchors { 186 anchors {
168 top: detailToolBar.bottom 187 top: parent.top
169 left: parent.left 188 left: parent.left
170 right: parent.right 189 leftMargin: Kirigami.Units.largeSpacing
171 bottom: parent.bottom
172 } 190 }
173 191
174 color: Kirigami.Theme.viewBackgroundColor 192 width: parent.width
193 height: parent.height
175 194
176 Row{
177 id: avatar_row
178 195
179 height: avatar.height 196 Flickable {
180 197
181 anchors { 198 anchors.fill: parent
182 top: parent.top
183 left: parent.left
184 margins: Kirigami.Units.largeSpacing
185 }
186 199
187 spacing: Kirigami.Units.smallSpacing 200 ScrollBar.vertical: ScrollBar { }
201 contentHeight: contentColumn.height
188 202
189 Avatar { 203 clip: true
204
205 ColumnLayout {
206 id: contentColumn
207
208 width: personPageRoot.width
209
210 spacing: Kirigami.Units.largeSpacing
211
212 Item {
213 width: parent.width
214 height: Kirigami.Units.smallSpacing
215 }
216
217 Item {
218
219 height: Kirigami.Units.gridUnit * 8
220 width: personPageRoot.width - Kirigami.Units.largeSpacing
221
222 Rectangle {
190 id: avatar 223 id: avatar
191 224
192 height: Kirigami.Units.gridUnit * 2.5 225 height: parent.height
193 width: height 226 width: height
194 227
195 name: contactController.name 228 color: "lightgrey"
196 } 229 }
197 230
198 Text { 231 Kirigami.Heading {
232 id: nameLabel
199 233
200 anchors.verticalCenter: parent.verticalCenter 234 anchors {
235 top: avatar.top
236 left: avatar.right
237 leftMargin: Kirigami.Units.largeSpacing
238 }
201 239
202 color: Kirigami.Theme.textColor 240 text: contactController.name //"Michael Tester"
203 opacity: 0.8 241 }
204 242
205 text: contactController.name 243 Text {
244 id: jobTitle
206 245
207 font.weight: Font.DemiBold 246 anchors {
247 top: nameLabel.bottom
248 left: avatar.right
249 leftMargin: Kirigami.Units.largeSpacing
250 }
251
252 text: "CIO"
208 } 253 }
209 }
210 254
211 Text { 255 Rectangle {
212 id: email_label 256 id: company
213 257
214 anchors { 258 anchors {
215 top: avatar_row.bottom 259 bottom: avatar.bottom
216 left: avatar_row.left 260 left: avatar.right
217 leftMargin: Kirigami.Units.gridUnit * 2.5 261 leftMargin: Kirigami.Units.largeSpacing
218 topMargin: Kirigami.Units.largeSpacing 262 }
219 }
220 263
221 color: Kirigami.Theme.textColor 264 height: Kirigami.Units.gridUnit * 3
222 text: "Email" 265 width: Kirigami.Units.gridUnit * 10
223 font.weight: Font.DemiBold
224 opacity: 0.8
225 }
226 266
227 ColumnLayout { 267 border.width: 1
268 border.color: "lightgrey"
228 269
229 anchors { 270 Rectangle {
230 top: email_label.bottom 271 id: av
231 left: email_label.left
232 }
233 272
234 Repeater { 273 height: parent.height
235 model: contactController.emails 274 width: height
236 275
237 RowLayout { 276 color: "lightgrey"
238 Text { text: modelData } 277 }
239 Controls.ToolButton {
240 iconName: "edit-delete"
241 278
242 onClicked: { 279 Text {
243 contactController.removeEmail(modelData) 280 anchors {
281 verticalCenter: av.verticalCenter
282 left: av.right
283 leftMargin: Kirigami.Units.smallSpacing
244 } 284 }
285
286 text: "Sauerkraut AG"
287
288 color: Kirigami.Theme.textColor
245 } 289 }
246 } 290 }
247 } 291 }
248 292
249 RowLayout { 293 Flow {
250 TextField { 294 id: emails
251 id: newEmail 295
296 width: personPageRoot.width - Kirigami.Units.largeSpacing
297
298 Row {
299 spacing: Kirigami.Units.smallSpacing
300 Text { text: "(main)"}
301 Text { text: "testerson@kolabnow.com"; color: Kirigami.Theme.highlightColor }
302 Item { width: Kirigami.Units.smallSpacing; height: 1 }
252 } 303 }
253 304
254 Button { 305 Row {
255 text: "Add email" 306 spacing: Kirigami.Units.smallSpacing
307 Text { text: "(alias)"}
308 Text { text: "test.testerson@gmail.com"; color: Kirigami.Theme.highlightColor }
309 Item { width: Kirigami.Units.smallSpacing; height: 1 }
310 }
256 311
257 onClicked: { 312 Row {
258 contactController.addEmail(newEmail.text) 313 spacing: Kirigami.Units.smallSpacing
259 newEmail.text = ""; 314 Text { text: "(private)"}
260 } 315 Text { text: "test@gmail.com"; color: Kirigami.Theme.highlightColor }
316 Item { width: Kirigami.Units.smallSpacing; height: 1 }
317 }
318 }
319
320 Flow {
321 id: phone
322
323 width: personPageRoot.width - Kirigami.Units.largeSpacing
324 spacing: Kirigami.Units.smallSpacing
325
326 Row {
327 spacing: Kirigami.Units.smallSpacing
328 Text { text: "(inhouse)"}
329 Text { text: "+49812324932"; opacity: 0.6 }
330 Item { width: Kirigami.Units.smallSpacing; height: 1 }
331 }
332 Row {
333 spacing: Kirigami.Units.smallSpacing
334 Text { text: "(mobile)"}
335 Text { text: "+49812324932"; opacity: 0.6 }
336 Item { width: Kirigami.Units.smallSpacing; height: 1 }
337 }
338 Row {
339 spacing: Kirigami.Units.smallSpacing
340 Text { text: "(private)"}
341 Text { text: "+49812324932"; opacity: 0.6 }
342 Item { width: Kirigami.Units.smallSpacing; height: 1 }
343 }
344 }
345
346 Column {
347 id: address
348
349 width: personPageRoot.width - Kirigami.Units.largeSpacing
350
351 Text { text: "Albertstrasse 35a"}
352 Text { text: "81767 Teststadt"}
353 Text { text: "GERMANY" }
354 }
355
356// Column {
357//
358// width: parent.width
359//
360// spacing: Kirigami.Units.smallSpacing
361//
362// Text {
363//
364// text: root.firstname + " is part of these groups:"
365// }
366//
367// GroupGrid {
368// id: groups
369//
370// width: root.width - Kirigami.Units.largeSpacing
371//
372// model: GroupModel1 {}
373// }
374// }
375
376// Column {
377//
378// width: parent.width
379//
380// spacing: Kirigami.Units.smallSpacing
381//
382// Text {
383// id: commonPeopleLabel
384//
385// text: root.firstname + " is associated with:"
386// }
387//
388// PeopleGrid {
389// id: commonPeople
390//
391// width: root.width - Kirigami.Units.largeSpacing
392//
393// model: PeopleModel2 {}
394// }
395// }
396
397 Item {
398 width: parent.width
399 height: Kirigami.Units.largeSpacing
261 } 400 }
262 } 401 }
263 } 402 }
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-29 22:33:16 +0000