From 27c85e7f11d5de94308e91232e65bf65e4193aef Mon Sep 17 00:00:00 2001 From: Michael Bohlender Date: Wed, 28 Feb 2018 11:04:52 +0100 Subject: people composer ui --- views/people/qml/People.qml | 53 ++++++++ views/people/qml/PersonComposer.qml | 249 ++++++++++++++++++++++++++++++++++++ views/people/qml/PersonPage.qml | 2 +- views/people/qml/View.qml | 2 +- 4 files changed, 304 insertions(+), 2 deletions(-) create mode 100644 views/people/qml/PersonComposer.qml diff --git a/views/people/qml/People.qml b/views/people/qml/People.qml index 1a08d900..41acfba0 100644 --- a/views/people/qml/People.qml +++ b/views/people/qml/People.qml @@ -52,6 +52,10 @@ FocusScope { } text: "New Contact" visible: stack.depth == 1 + + onClicked: { + stack.push(personComposer) + } } Kube.IconButton { @@ -217,6 +221,55 @@ FocusScope { PersonPage { } + + Kube.Button { + + anchors { + bottom: parent.bottom + right: parent.right + margins: Kube.Units.largeSpacing + } + + text: "Edit" + + onClicked: { + stack.push(personComposer) + } + } + } + } + + + Component { + id: personComposer + + Rectangle { + id: personComposerRoot + + Kube.ContactController { + id: contactController + contact: "" + } + + color: Kube.Colors.viewBackgroundColor + + PersonComposer { + } + + Kube.PositiveButton { + + anchors { + bottom: parent.bottom + right: parent.right + margins: Kube.Units.largeSpacing + } + + text: "Save" + + onClicked: { + stack.pop() + } + } } } } diff --git a/views/people/qml/PersonComposer.qml b/views/people/qml/PersonComposer.qml new file mode 100644 index 00000000..e3140953 --- /dev/null +++ b/views/people/qml/PersonComposer.qml @@ -0,0 +1,249 @@ + /* + Copyright (C) 2017 Michael Bohlender, + Copyright (C) 2017 Christian Mollekopf, + + This program is free software; you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation; either version 2 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along + with this program; if not, write to the Free Software Foundation, Inc., + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. +*/ + +import QtQuick 2.7 +import QtQuick.Controls 2.0 as Controls2 +import QtQuick.Layouts 1.1 +import QtQuick.Dialogs 1.0 as Dialogs + + +import org.kube.framework 1.0 as Kube + + +Flickable { + id: personComposerFlickable + + anchors { + fill: parent + leftMargin: Kube.Units.largeSpacing + } + + Controls2.ScrollBar.vertical: Kube.ScrollBar { } + contentHeight: contentColumn.height + + clip: true + + Kube.ScrollHelper { + flickable: personComposerFlickable + anchors.fill: parent + } + + ColumnLayout { + id: contentColumn + + anchors { + left: parent.left + right: parent.right + } + + spacing: Kube.Units.largeSpacing + + Item { + width: parent.width + height: Kube.Units.smallSpacing + } + + + Item { + + height: Kube.Units.gridUnit * 8 + width: personComposerRoot.width - Kube.Units.largeSpacing + + Rectangle { + id: avatar + + height: parent.height + width: height + Kube.KubeImage { + anchors.fill: parent + visible: contactController.imageData != "" + imageData: contactController.imageData + } + Kube.Icon { + anchors.fill: parent + visible: contactController.imageData == "" + iconName: Kube.Icons.user + } + color: Kube.Colors.buttonColor + + Kube.AbstractButton { + anchors.fill: parent + + color: "#00000000" + + onClicked: { + fileDialogComponent.createObject(parent) + } + + Component { + id: fileDialogComponent + Dialogs.FileDialog { + id: fileDialog + visible: true + title: "Choose an Avatar" + selectFolder: false + onAccepted: { + //TODO + } + } + } + } + } + + Row { + id: nameRow + anchors { + left: avatar.right + leftMargin: Kube.Units.largeSpacing + } + + spacing: Kube.Units.smallSpacing + + Kube.TextField { + width: Kube.Units.gridUnit * 15 + placeholderText: qsTr("First Name") + } + + Kube.TextField { + width: Kube.Units.gridUnit * 15 + placeholderText: qsTr("Last Name") + } + } + + Kube.TextField { + id: jobTitle + + anchors { + top: nameRow.bottom + left: avatar.right + topMargin: Kube.Units.smallSpacing + leftMargin: Kube.Units.largeSpacing + } + + width: Kube.Units.gridUnit * 20 + text: contactController.jobTitle + placeholderText: qsTr("Job Title") + } + + Kube.TextField { + id: company + + anchors { + bottom: avatar.bottom + left: avatar.right + leftMargin: Kube.Units.largeSpacing + } + width: Kube.Units.gridUnit * 20 + + placeholderText: qsTr("Company") + text: contactController.company + } + } + + + Column { + width: personComposerRoot.width - Kube.Units.largeSpacing + spacing: Kube.Units.smallSpacing + + Kube.Label { + text: qsTr("Email") + } + Flow { + id: emails + + width: personComposerRoot.width - Kube.Units.largeSpacing + + Repeater { + model: contactController.emails + + delegate: Row { + spacing: Kube.Units.smallSpacing + Kube.Label { text: qsTr("(main)") } + Kube.TextField { text: modelData ; color: Kube.Colors.highlightColor } + Item { width: Kube.Units.smallSpacing; height: 1 } + } + } + } + Kube.Button { + text: qsTr("Add") + } + } + + Column { + width: personComposerRoot.width - Kube.Units.largeSpacing + spacing: Kube.Units.smallSpacing + + Kube.Label { + text: qsTr("Phone") + } + + Flow { + id: phone + + width: personComposerRoot.width - Kube.Units.largeSpacing + spacing: Kube.Units.smallSpacing + + Repeater { + model: contactController.phoneNumbers + + Row { + spacing: Kube.Units.smallSpacing + Kube.Label { text: qsTr("(main)") } + Kube.TextField { text: modelData ; opacity: 0.6 } + Item { width: Kube.Units.smallSpacing; height: 1 } + } + } + } + Kube.Button { + text: qsTr("Add") + } + } + + Column{ + id: address + + width: personComposerRoot.width - Kube.Units.largeSpacing + spacing: Kube.Units.smallSpacing + + Kube.Label { + text: "Address" + } + + Kube.TextField { + width: Kube.Units.gridUnit * 20 + text: contactController.street + placeholderText: qsTr("Street") + } + Kube.TextField { + width: Kube.Units.gridUnit * 20 + text: contactController.city + placeholderText: qsTr("City") + } + Kube.TextField { + width: Kube.Units.gridUnit * 20 + text: contactController.country + placeholderText: qsTr("Country") + } + } + Item { + width: parent.width + height: Kube.Units.largeSpacing + } + } +} diff --git a/views/people/qml/PersonPage.qml b/views/people/qml/PersonPage.qml index cd2a5d65..0b04a3d7 100644 --- a/views/people/qml/PersonPage.qml +++ b/views/people/qml/PersonPage.qml @@ -82,7 +82,7 @@ Flickable { color: Kube.Colors.buttonColor } - Kube.Heading { + Kube.Heading { id: nameLabel anchors { diff --git a/views/people/qml/View.qml b/views/people/qml/View.qml index 3f1b9261..800c4925 100644 --- a/views/people/qml/View.qml +++ b/views/people/qml/View.qml @@ -28,7 +28,7 @@ Item { Kube.Fabric.postMessage(Kube.Messages.synchronize, {"type": "contacts"}) } - Kube.People { + People { id: people anchors { fill: parent -- cgit v1.2.3