From 5b0097cc7e4b19d68a4adcbc08e50aaba0088f0a Mon Sep 17 00:00:00 2001 From: Michael Bohlender Date: Sun, 19 Mar 2017 19:34:11 +0100 Subject: new people ui --- components/package/contents/ui/People.qml | 437 ++++++++++++++++++++---------- 1 file changed, 288 insertions(+), 149 deletions(-) (limited to 'components/package/contents') 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 @@ /* - Copyright (C) 2017 Michael Bohlender, + Copyright (C) 2017 Michael Bohlender, Copyright (C) 2017 Christian Mollekopf, 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 Popup { - id: popup - modal: true - property variant currentContact: null + property var currentContact - Controls.SplitView { - anchors.fill: parent + modal: true - Item { - id: contactList + Item { + id: peopleRoot - height: parent.height - width: Kirigami.Units.gridUnit * 14 + anchors.fill: parent - Item { - id: toolBar + ToolBar { + id: toolbar - width: parent.width - scroll.width - height: Kirigami.Units.gridUnit * 2 + width: parent.width - Rectangle { + Controls.ToolButton { - anchors.centerIn: parent + anchors.verticalCenter: parent.verticalCenter - height: Kirigami.Units.gridUnit * 1.5 - width: parent.width* 0.8 + iconName: "go-previous" - color: "#27ae60" - clip: true + onClicked: stack.pop() - Text { - anchors.centerIn: parent + visible: stack. depth > 1 + } - clip: true + TextField { + anchors.centerIn: parent - text: "New Contact" + placeholderText: "Search..." - color: "white" - } - } + width: parent.width * 0.5 } - ListView { - id: listView + Controls.ToolButton { anchors { - top: toolBar.bottom - left: parent.left right: parent.right - bottom: parent.bottom - topMargin: Kirigami.Units.smallSpacing + rightMargin: Kirigami.Units.smallSpacing + verticalCenter: parent.verticalCenter } - model: KubeFramework.PeopleModel{} - clip: true + iconName: "list-add-new" + } + } - ScrollBar.vertical: ScrollBar { - id: scroll - } + StackView { + id: stack - onCurrentItemChanged: { - popup.currentContact = currentItem.currentData.domainObject; - } + anchors { + top: toolbar.bottom + left: parent.left + right: parent.right + bottom: parent.bottom + } - delegate: Kirigami.AbstractListItem { - height: Kirigami.Units.gridUnit * 2.5 - width: listView.width - scroll.width - - property variant currentData: model - - clip: true - - states: [ - State { - name: "selected" - when: ListView.isCurrentItem - PropertyChanges {target: background; color: Kirigami.Theme.highlightColor} - PropertyChanges {target: name; color: Kirigami.Theme.highlightedTextColor} - }, - State { - name: "hovered" - when: mouseArea.containsMouse - PropertyChanges {target: background; color: Kirigami.Theme.buttonHoverColor; opacity: 0.7} - PropertyChanges {target: name; color: Kirigami.Theme.highlightedTextColor} - } - ] + initialItem: peoplePage + + clip: true + } + } + + Component { + id: peoplePage + + Rectangle { + id: peoplePageRoot + color: Kirigami.Theme.viewBackgroundColor + + Flickable { + + anchors.fill: parent + + ScrollBar.vertical: ScrollBar { } + contentHeight: content.height + clip: true + + Item { + id: content - Avatar { - id: avatar + Flow { anchors { - verticalCenter: parent.verticalCenter + top: parent.top + topMargin: Kirigami.Units.largeSpacing left: parent.left - leftMargin: Kirigami.Units.smallSpacing + leftMargin: Kirigami.Units.largeSpacing } - height: parent.height * 0.9 - width: height + spacing: Kirigami.Units.largeSpacing + width: peoplePageRoot.width - Kirigami.Units.largeSpacing * 2 - name: model.name - } + Repeater { - Text { - id: name + model: KubeFramework.PeopleModel{} - anchors { - left: avatar.right - leftMargin: Kirigami.Units.smallSpacing - verticalCenter: avatar.verticalCenter - } + delegate: Rectangle { + + height: Kirigami.Units.gridUnit * 3 + width: Kirigami.Units.gridUnit * 10 + + border.width: 1 + border.color: "lightgrey" + + MouseArea { + anchors.fill: parent + + onClicked: { + popup.currentContact = model.domainObject + stack.push(personPage) + } + } + + Rectangle { + id: avatarPlaceholder + + height: parent.height + width: height + + color: "lightgrey" + } + + Text { + anchors { + left: avatarPlaceholder.right + leftMargin: Kirigami.Units.smallSpacing + verticalCenter: parent.verticalCenter + } - text: model.name - color: Kirigami.Theme.textColor + color: Kirigami.Theme.textColor + text: model.name + } + } + } } } } } + } + + Component { + id: personPage + + Rectangle { + id: personPageRoot - Item { KubeFramework.ContactController { id: contactController contact: popup.currentContact } - height: parent.height - Layout.fillWidth: true - - ToolBar { - id: detailToolBar - - width: parent.width - height: Kirigami.Units.gridUnit * 2 - } + color: Kirigami.Theme.viewBackgroundColor - Rectangle { + Item { anchors { - top: detailToolBar.bottom + top: parent.top left: parent.left - right: parent.right - bottom: parent.bottom + leftMargin: Kirigami.Units.largeSpacing } - color: Kirigami.Theme.viewBackgroundColor + width: parent.width + height: parent.height - Row{ - id: avatar_row - height: avatar.height + Flickable { - anchors { - top: parent.top - left: parent.left - margins: Kirigami.Units.largeSpacing - } + anchors.fill: parent - spacing: Kirigami.Units.smallSpacing + ScrollBar.vertical: ScrollBar { } + contentHeight: contentColumn.height - Avatar { + clip: true + + ColumnLayout { + id: contentColumn + + width: personPageRoot.width + + spacing: Kirigami.Units.largeSpacing + + Item { + width: parent.width + height: Kirigami.Units.smallSpacing + } + + Item { + + height: Kirigami.Units.gridUnit * 8 + width: personPageRoot.width - Kirigami.Units.largeSpacing + + Rectangle { id: avatar - height: Kirigami.Units.gridUnit * 2.5 + height: parent.height width: height - name: contactController.name + color: "lightgrey" } - Text { + Kirigami.Heading { + id: nameLabel - anchors.verticalCenter: parent.verticalCenter + anchors { + top: avatar.top + left: avatar.right + leftMargin: Kirigami.Units.largeSpacing + } - color: Kirigami.Theme.textColor - opacity: 0.8 + text: contactController.name //"Michael Tester" + } - text: contactController.name + Text { + id: jobTitle - font.weight: Font.DemiBold + anchors { + top: nameLabel.bottom + left: avatar.right + leftMargin: Kirigami.Units.largeSpacing + } + + text: "CIO" } - } - Text { - id: email_label + Rectangle { + id: company - anchors { - top: avatar_row.bottom - left: avatar_row.left - leftMargin: Kirigami.Units.gridUnit * 2.5 - topMargin: Kirigami.Units.largeSpacing - } + anchors { + bottom: avatar.bottom + left: avatar.right + leftMargin: Kirigami.Units.largeSpacing + } - color: Kirigami.Theme.textColor - text: "Email" - font.weight: Font.DemiBold - opacity: 0.8 - } + height: Kirigami.Units.gridUnit * 3 + width: Kirigami.Units.gridUnit * 10 - ColumnLayout { + border.width: 1 + border.color: "lightgrey" - anchors { - top: email_label.bottom - left: email_label.left - } + Rectangle { + id: av - Repeater { - model: contactController.emails + height: parent.height + width: height - RowLayout { - Text { text: modelData } - Controls.ToolButton { - iconName: "edit-delete" + color: "lightgrey" + } - onClicked: { - contactController.removeEmail(modelData) + Text { + anchors { + verticalCenter: av.verticalCenter + left: av.right + leftMargin: Kirigami.Units.smallSpacing } + + text: "Sauerkraut AG" + + color: Kirigami.Theme.textColor } } } - RowLayout { - TextField { - id: newEmail + Flow { + id: emails + + width: personPageRoot.width - Kirigami.Units.largeSpacing + + Row { + spacing: Kirigami.Units.smallSpacing + Text { text: "(main)"} + Text { text: "testerson@kolabnow.com"; color: Kirigami.Theme.highlightColor } + Item { width: Kirigami.Units.smallSpacing; height: 1 } } - Button { - text: "Add email" + Row { + spacing: Kirigami.Units.smallSpacing + Text { text: "(alias)"} + Text { text: "test.testerson@gmail.com"; color: Kirigami.Theme.highlightColor } + Item { width: Kirigami.Units.smallSpacing; height: 1 } + } - onClicked: { - contactController.addEmail(newEmail.text) - newEmail.text = ""; - } + Row { + spacing: Kirigami.Units.smallSpacing + Text { text: "(private)"} + Text { text: "test@gmail.com"; color: Kirigami.Theme.highlightColor } + Item { width: Kirigami.Units.smallSpacing; height: 1 } + } + } + + Flow { + id: phone + + width: personPageRoot.width - Kirigami.Units.largeSpacing + spacing: Kirigami.Units.smallSpacing + + Row { + spacing: Kirigami.Units.smallSpacing + Text { text: "(inhouse)"} + Text { text: "+49812324932"; opacity: 0.6 } + Item { width: Kirigami.Units.smallSpacing; height: 1 } + } + Row { + spacing: Kirigami.Units.smallSpacing + Text { text: "(mobile)"} + Text { text: "+49812324932"; opacity: 0.6 } + Item { width: Kirigami.Units.smallSpacing; height: 1 } + } + Row { + spacing: Kirigami.Units.smallSpacing + Text { text: "(private)"} + Text { text: "+49812324932"; opacity: 0.6 } + Item { width: Kirigami.Units.smallSpacing; height: 1 } + } + } + + Column { + id: address + + width: personPageRoot.width - Kirigami.Units.largeSpacing + + Text { text: "Albertstrasse 35a"} + Text { text: "81767 Teststadt"} + Text { text: "GERMANY" } + } + +// Column { +// +// width: parent.width +// +// spacing: Kirigami.Units.smallSpacing +// +// Text { +// +// text: root.firstname + " is part of these groups:" +// } +// +// GroupGrid { +// id: groups +// +// width: root.width - Kirigami.Units.largeSpacing +// +// model: GroupModel1 {} +// } +// } + +// Column { +// +// width: parent.width +// +// spacing: Kirigami.Units.smallSpacing +// +// Text { +// id: commonPeopleLabel +// +// text: root.firstname + " is associated with:" +// } +// +// PeopleGrid { +// id: commonPeople +// +// width: root.width - Kirigami.Units.largeSpacing +// +// model: PeopleModel2 {} +// } +// } + + Item { + width: parent.width + height: Kirigami.Units.largeSpacing } } } -- cgit v1.2.3