Merge lp:~majster-pl/ubuntu-calendar-app/new-event-page2 into lp:ubuntu-calendar-app

[Szymon Waliczek]

this is very first proposal for new Event Page, adding new guest is currently to be work on... but first implementation is done.

[Renato Araujo Oliveira Filho (renatofilho)]

Good work. Some small inline comments.

review: Needs Fixing

[Renato Araujo Oliveira Filho (renatofilho)]

Thanks for the work. I will create a new branch based on this one to fix some small problems.

Unmerged revisions

821. By Szymon Waliczek on 2016-04-11

First implementation of new designs for New Event page.

=== modified file 'ContactChoicePopup.qml'
--- ContactChoicePopup.qml	2016-02-04 13:37:00 +0000
+++ ContactChoicePopup.qml	2016-04-11 14:35:38 +0000
@@ -1,154 +1,297 @@
-/*
- * Copyright (C) 2013-2014 Canonical Ltd
- *
- * This file is part of Ubuntu Calendar App
- *
- * Ubuntu Calendar App is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * Ubuntu Calendar App 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, see <http://www.gnu.org/licenses/>.
- */
+///*
+// * Copyright (C) 2013-2014 Canonical Ltd
+// *
+// * This file is part of Ubuntu Calendar App
+// *
+// * Ubuntu Calendar App is free software: you can redistribute it and/or modify
+// * it under the terms of the GNU General Public License version 3 as
+// * published by the Free Software Foundation.
+// *
+// * Ubuntu Calendar App 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, see <http://www.gnu.org/licenses/>.
+// */
 import QtQuick 2.4
 import Ubuntu.Components 1.3
-import Ubuntu.Components.Popups 1.3
-import Ubuntu.Components.ListItems 1.0
-import Ubuntu.Components.Themes.Ambiance 1.0
-import QtOrganizer 5.0
 import QtContacts 5.0
 
-import "Defines.js" as Defines
-
-Popover {
+Item {
     id: root
-    objectName: "contactPopover"
+
+    width: parent.width
+    height: mainColumn.height
+
+    property bool contactOpen: false
+    property var openContanctObject
 
     signal contactSelected(var contact, string emailAddress);
 
-    Label {
-        id: noContact
-        anchors.centerIn: parent
-        text: i18n.tr("No contact")
-        visible: contactModel.contacts.length === 0
-    }
-
-    UnionFilter {
-        id: filter
-
-        property string searchString: ""
-
-        filters: [
-            DetailFilter{
-                detail: ContactDetail.Name
-                field: Name.FirstName
-                matchFlags: Filter.MatchContains
-                value: filter.searchString
-            },
-            DetailFilter{
-                detail: ContactDetail.Name
-                field: Name.LastName
-                matchFlags: Filter.MatchContains
-                value: filter.searchString
-            },
-            DetailFilter{
-                detail: ContactDetail.DisplayLabel
-                field: DisplayLabel.Label
-                matchFlags: Filter.MatchContains
-                value: filter.searchString
-            }
-        ]
-    }
+    onContactOpenChanged: {
+        positionDelay.start()
+    }
+
+    Timer {
+        id: positionDelay
+        interval: 300
+        onTriggered: suggestionsFlickable.contentY = openContanctObject.y
+    }
+
+    states: [
+        State {
+            name: "open"
+            PropertyChanges { target: contactsSuggestionItem; height: units.gu(10)}
+        },
+        State {
+            name: "close"
+            PropertyChanges { target: contactsSuggestionItem; height: 0}
+        }
+
+    ]
+
+    Behavior on height {
+        UbuntuNumberAnimation {}
+    }
+
 
     ContactModel {
         id: contactModel
         manager: "galera"
-        filter: filter
         autoUpdate: true
     }
 
-    Timer {
-        id: idleSearch
 
-        interval: 500
-        repeat: false
-        onTriggered: {
-            filter.searchString = searchBox.text
-        }
-    }
 
     Column {
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: units.gu(1)
+        id: mainColumn
+        width: parent.width
+        spacing: units.gu(1)
+
+        Item {
+            id: guestsAdded
+            width: parent.width
+
+        }
 
         TextField {
-            id: searchBox
-            objectName: "contactPopoverInput"
-            focus: true
+            id: addGuestTestField
+            objectName: "addGuestTestField"
+
             width: parent.width
-            placeholderText: i18n.tr("Search contact")
             inputMethodHints: Qt.ImhNoPredictiveText
-            primaryItem: Icon {
-                 height: parent.height*0.5
-                 width: parent.height*0.5
-                 anchors.verticalCenter: parent.verticalCenter
-                 name:"find"
-            }
-            onTextChanged: {
-                idleSearch.restart()
-            }
+            placeholderText: i18n.tr("Guests")
+
+            onActiveFocusChanged: {
+                if(addGuestTestField.activeFocus) {
+                    lol2.state = "open"
+                    flickable.makeMeVisible(addGuestListItem);
+                } else {
+                    lol2.state = "close"
+                }
+            }
+
         }
 
-        ListView {
-            id: contactList
-            objectName: "contactPopoverList"
-            width: parent.width
-            model: contactModel
-            height: units.gu(15)
-            clip: true
-            focus: false
-            delegate: Column {
-                width: contactList.width
-                Repeater {
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                    }
-                    height: childrenRect.height
-
-                    model: Math.max(1, contact.emails.length)
-                    delegate: ListItem {
-                        property string emailAddress: contact.emails.length > index ? contact.emails[index].emailAddress : ""
-
+        Component {
+            id: suggestionsDelegate
+            Item {
+                id: rootSug
+
+                clip: true
+                width: String(contact.displayLabel.label).toLowerCase().search(addGuestTestField.text.toLowerCase()) == - 1 ? 0 : mainGrid.width
+                height: mainGrid.height
+
+                ListModel {
+                    id: addressesModel
+                }
+
+
+                function getEmails() {
+                    for(var i=0; contact.emails.length > i; i++) {
+                        addressesModel.append({"email": contact.emails[i].emailAddress})
+                    }
+                }
+
+
+                Behavior on width {
+                    UbuntuNumberAnimation {}
+                }
+
+                Connections {
+                    target: root
+                    onContactOpenChanged: {
+                        if(!contactOpen) {
+                            emailAddressesColumn.state = "default"
+                        }
+                    }
+                }
+
+
+
+                Row {
+                    id: mainGrid
+
+                    AbstractButton {
+                        id: contactNameAbstractButton
+
+                        width: contactNameLabel.width + units.gu(1)
+                        height: contactNameLabel.height + units.gu(1)
                         activeFocusOnPress: false
-                        opacity: emailAddress.length > 0 ? 1.0 : 0.3
-                        width: contactList.width
-                        objectName: "contactPopoverList%1".arg(index)
-                        ListItemLayout {
-                            title.text: contact.displayLabel.label
-                            subtitle.text: emailAddress
-                        }
-                        MouseArea {
+                        enabled: contact.emails.length > 0
+
+                        Rectangle {
                             anchors.fill: parent
-                            onClicked: {
-                                if (emailAddress.length > 0) {
-                                    root.contactSelected(contact, emailAddress);
-                                    PopupUtils.close(root)
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
+                            color: (parent.pressed || (emailAddressesColumn.state === "open")) ? UbuntuColors.lightGrey : "transparent"
+                        }
+
+                        Label {
+                            id: contactNameLabel
+                            text: emailAddressesColumn.state === "open" ? contact.displayLabel.label+":" : contact.displayLabel.label
+                            anchors.centerIn: parent
+                            color: contact.emails.length > 0 ? "black" : UbuntuColors.lightGrey
+                            font.italic: contact.emails.length > 0 ? false : true
+                            fontSize: "medium"
+                        }
+                        onClicked: {
+                            if(contact.emails.length > 1) {
+//                                emailAddressesColumn.openClose()
+                                if(contactOpen) {
+                                    contactOpen = false
+                                } else {
+                                    emailAddressesColumn.openClose()
+                                    openContanctObject = rootSug
+                                }
+
+                            } else {
+                                root.contactSelected(contact, contact.email.emailAddress);
+                            }
+                        }
+                    }
+                    Column {
+                        id: emailAddressesColumn
+
+                        clip: true
+                        state: "default"
+
+                        function openClose() {
+                            if(emailAddressesColumn.state === "open") {
+                                emailAddressesColumn.state = "default"
+                            } else {
+                                emailAddressesColumn.state = "open"
+                            }
+                        }
+
+                        states: [
+                            State {
+                                name: "default"
+                                PropertyChanges { target: emailAddressesColumn; width: 0 }
+                            },
+                            State {
+                                name: "open"
+                                PropertyChanges { target: emailAddressesColumn; width: mainColumn.width - contactNameAbstractButton.width }
+                            }
+
+                        ]
+
+                        onStateChanged: {
+                            if(state === "open") {
+                                rootSug.getEmails()
+//                                suggestionsFlickable.contentY = rootSug.y
+                                contactOpen = true
+                            } else {
+                                addressesModel.clear()
+                            }
+                        }
+
+                        Repeater {
+                            model: addressesModel
+                            delegate: AbstractButton {
+                                width: contactEmailLabel.width + units.gu(2)
+                                height: contactEmailLabel.height + units.gu(1)
+                                activeFocusOnPress: false
+
+                                Rectangle {
+                                    anchors.fill: parent
+                                    color: parent.pressed ? UbuntuColors.lightGrey : "transparent"
+                                }
+
+                                Label {
+                                    id: contactEmailLabel
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    anchors.left: parent.left
+                                    anchors.leftMargin: units.gu(1)
+                                    text: email
+                                    color: contact.emails.length > 0 ? "black" : UbuntuColors.lightGrey
+                                    font.italic: contact.emails.length > 0 ? false : true
+                                    fontSize: "medium"
+                                    elide: Text.ElideRight
+                                }
+
+                                onClicked: {
+                                    root.contactSelected(contact, email);
+                                    emailAddressesColumn.state = "default"
+                                }
+                            }
+
+                        }
+
+                    }
+                }
+
+
+            }
+
+        }
+
+        Item {
+            id: contactsSuggestionItem
+            width: parent.width
+            clip: true
+
+            Flickable {
+                id: suggestionsFlickable
+                width: parent.width - units.gu(0)
+                height: parent.height - units.gu(1)
+                anchors.top: parent.top
+                anchors.topMargin: units.gu(1)
+//                anchors.horizontalCenter: parent.horizontalCenter
+                contentHeight: suggestionsListView.height + units.gu(1)
+
+                // animation on flickable contentY change
+                Behavior on contentY {
+                    UbuntuNumberAnimation {}
+                }
+
+                onFlickStarted: contactOpen = false
+//                contentY: contactOpen && !flicking ? openContanctObject.y : NaN
+
+
+                Flow {
+                    id: suggestionsListView
+                    width: parent.width
+                    spacing: units.gu(1.5)
+
+                    Repeater {
+                        model: contactModel
+                        delegate: suggestionsDelegate
+                    }
+
+                }
+            }
+
+            Scrollbar {
+                flickableItem: suggestionsFlickable
+                align: Qt.AlignTrailing
+            }
+        }
+
     }
 
-    Component.onCompleted: searchBox.forceActiveFocus()
+
+
+
 }
+

=== modified file 'KeyboardRectangle.qml'
--- KeyboardRectangle.qml	2016-02-03 19:53:46 +0000
+++ KeyboardRectangle.qml	2016-04-11 14:35:38 +0000
@@ -26,16 +26,18 @@
     anchors.bottom: parent.bottom
     height: Qt.inputMethod.visible ? Qt.inputMethod.keyboardRectangle.height : 0
 
-    states: [
-        State {
-            name: "hidden"
-            when: keyboardRect.height == 0
-        },
-        State {
-            name: "shown"
-            when: keyboardRect.height == Qt.inputMethod.keyboardRectangle.height
-        }
-    ]
+    property bool isVisible: Qt.inputMethod.visible
+
+//    states: [
+//        State {
+//            name: "hidden"
+//            when: keyboardRect.height == 0
+//        },
+//        State {
+//            name: "shown"
+//            when: keyboardRect.height == Qt.inputMethod.keyboardRectangle.height
+//        }
+//    ]
 
     function recursiveFindFocusedItem(parent) {
         if (parent.activeFocus) {

=== modified file 'NewEvent.qml'
--- NewEvent.qml	2016-04-06 18:46:29 +0000
+++ NewEvent.qml	2016-04-11 14:35:38 +0000
@@ -319,46 +319,69 @@
     }
 
     Keys.onEscapePressed: root.cancel()
+
     header: PageHeader {
         id: pageHeader
 
         flickable: null
-        title: isEdit ? i18n.tr("Edit Event"):i18n.tr("New Event")
-        leadingActionBar.actions: Action {
-            id: backAction
-
-            name: "cancel"
-            text: i18n.tr("Cancel")
-            iconName: isEdit ? "back" : "down"
-            onTriggered: root.cancel()
-        }
-
-        trailingActionBar.actions: [
-            Action {
-                text: i18n.tr("Delete");
-                objectName: "delete"
-                iconName: "delete"
-                visible : isEdit
-                onTriggered: {
-                    var dialog = PopupUtils.open(Qt.resolvedUrl("DeleteConfirmationDialog.qml"),root,{"event": event});
-                    dialog.deleteEvent.connect( function(eventId){
-                        model.removeItem(eventId);
-                        if (pageStack)
-                            pageStack.pop();
-                        root.eventDeleted(eventId);
-                    });
-                }
-            },
-            Action {
-                iconName: "ok"
-                objectName: "save"
-                text: i18n.tr("Save")
-                enabled: !!titleEdit.text.trim()
-                onTriggered: saveToQtPim();
-            }
-        ]
+        property Component delegate: Component {
+            AbstractButton {
+                id: button
+                action: modelData
+                width: label.width + units.gu(4)
+                height: parent.height
+                Rectangle {
+                    color: parent.pressed ? UbuntuColors.coolGrey : UbuntuColors.slate
+                    opacity: 0.1
+                    anchors.fill: parent
+                    visible: button.pressed
+                }
+                Label {
+                    anchors.centerIn: parent
+                    id: label
+                    text: action.text
+                    color: text === i18n.tr("Delete") ? UbuntuColors.red : Theme.palette.selected.fieldText
+                    font.weight: text === i18n.tr("Save") ? Font.Normal : Font.Light
+                }
+            }
+        }
+        leadingActionBar {
+            anchors.leftMargin: 0
+            actions: Action {
+                text: i18n.tr("Cancel")
+                iconName: "close"
+                onTriggered: root.cancel()
+            }
+            delegate: pageHeader.delegate
+        }
+        trailingActionBar {
+            anchors.rightMargin: 0
+            actions: [
+                Action {
+                    text: i18n.tr("Save")
+                    iconName: "tick"
+                    onTriggered: saveToQtPim();
+                },
+                Action {
+                    text: i18n.tr("Delete")
+                    iconName: "delete"
+                    visible : isEdit
+                    onTriggered: {
+                        var dialog = PopupUtils.open(Qt.resolvedUrl("DeleteConfirmationDialog.qml"),root,{"event": event});
+                        dialog.deleteEvent.connect( function(eventId){
+                            model.removeItem(eventId);
+                            if (pageStack)
+                                pageStack.pop();
+                            root.eventDeleted(eventId);
+                        });
+                    }
+                }
+            ]
+            delegate: pageHeader.delegate
+        }
     }
 
+
     Component{
         id: errorDlgComponent
         Dialog {
@@ -399,7 +422,7 @@
             // if it is not, try to scroll and make it visible
             var targetY = position.y + item.height - flickable.height
             if (targetY >= 0 && position.y) {
-                flickable.contentY = targetY;
+                flickable.contentY = targetY + units.gu(1);
             } else if (position.y < flickable.contentY) {
                 // if it is hidden at the top, also show it
                 flickable.contentY = position.y;
@@ -407,6 +430,11 @@
             flickable.returnToBounds()
         }
 
+        // animation on flickable contentY change
+        Behavior on contentY {
+            UbuntuNumberAnimation {}
+        }
+
         flickableDirection: Flickable.VerticalFlick
         anchors{
             left: parent.left
@@ -425,9 +453,8 @@
 
             NewEventTimePicker{
                 id: startDateTimeInput
-                objectName: "startDateTimeInput"
-
-                header: i18n.tr("From")
+                //TRANSLATORS: this referes to date. eg:  To: Wendsday, 9 March 2016
+                headerText: i18n.tr("From")
                 showTimePicker: !allDayEventCheckbox.checked
                 anchors {
                     left: parent.left
@@ -435,257 +462,277 @@
                 }
                 onDateTimeChanged: {
                     startDate = dateTime;
-                    endDateTimeInput.dateTime = new Date(startDate.getTime() + root.eventSize)
                 }
             }
 
             NewEventTimePicker{
                 id: endDateTimeInput
-                objectName: "endDateTimeInput"
-
-                header: i18n.tr("To")
+                //TRANSLATORS: this referes to date. eg:  From: Wendsday, 9 March 2016
+                headerText: i18n.tr("To")
                 showTimePicker: !allDayEventCheckbox.checked
                 anchors {
                     left: parent.left
                     right: parent.right
                 }
                 onDateTimeChanged: {
-                    if (dateTime.getTime() < startDate.getTime()) {
-                        root.eventSize = root.allDay ? 0 : root.millisecsInAnHour
-                        dateTime = new Date(startDate.getTime() + root.eventSize)
-                        return
-                    }
-
                     endDate = dateTime;
-                    if (allDay)
-                        root.eventSize = endDate.midnight().getTime() - startDate.midnight().getTime()
-                    else
-                        root.eventSize = endDate.getTime() - startDate.getTime()
-                }
-            }
-
-            ListItems.Standard {
-                anchors {
-                    left: parent.left
-                    right: parent.right
-                }
-
-                text: i18n.tr("All day event")
-                __foregroundColor: Theme.palette.normal.baseText
-                showDivider: false
-                control: CheckBox {
-                    objectName: "allDayEventCheckbox"
-                    id: allDayEventCheckbox
-                    checked: false
-                    onCheckedChanged: {
-                        if (checked)
-                            root.eventSize = Math.max(endDate.midnight().getTime() - startDate.midnight().getTime(), 0)
-                        else
-                            root.eventSize = Math.max(endDate.getTime() - startDate.getTime(), root.millisecsInAnHour)
-                    }
-                }
-            }
-
-            ListItems.ThinDivider {}
-
-            Column {
-                width: parent.width
-                spacing: units.gu(1)
-
-                ListItems.Header{
-                    text: i18n.tr("Event Details")
-                    __foregroundColor: Theme.palette.normal.baseText
-                }
-
-                TextField {
-                    id: titleEdit
-                    objectName: "newEventName"
-
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    placeholderText: i18n.tr("Event Name")
-                    onFocusChanged: {
-                        if(titleEdit.focus) {
-                            flickable.makeMeVisible(titleEdit);
-                        }
-                    }
-                }
-
-                TextArea{
-                    id: messageEdit
-                    objectName: "eventDescriptionInput"
-
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    placeholderText: i18n.tr("Description")
-                    onFocusChanged: {
-                        if(messageEdit.focus) {
-                            flickable.makeMeVisible(messageEdit);
-                        }
-                    }
-                }
-
-                TextField {
-                    id: locationEdit
-                    objectName: "eventLocationInput"
-
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    inputMethodHints: Qt.ImhNoPredictiveText
-                    placeholderText: i18n.tr("Location")
-
-                    onFocusChanged: {
-                        if(locationEdit.focus) {
-                            flickable.makeMeVisible(locationEdit);
-                        }
-                    }
-                }
-            }
-
-            Column {
-                width: parent.width
-                spacing: units.gu(1)
-
-                ListItems.Header {
-                    text: i18n.tr("Calendar")
-                    __foregroundColor: Theme.palette.normal.baseText
-                }
-
-                OptionSelector{
-                    id: calendarsOption
-                    objectName: "calendarsOption"
-
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    containerHeight: itemHeight * 4
-                    model: root.model ? root.model.getWritableAndSelectedCollections() : []
-
-                    delegate: OptionSelectorDelegate{
-                        text: modelData.name
-
-                        UbuntuShape{
-                            id: calColor
-                            width: height
-                            height: parent.height - units.gu(2)
-                            color: modelData.color
-                            anchors {
-                                right: parent.right
-                                rightMargin: units.gu(4)
-                                verticalCenter: parent.verticalCenter
-                            }
-                        }
-                    }
-                    onExpandedChanged: Qt.inputMethod.hide();
-                }
-            }
-
-            Column {
-                width: parent.width
-                spacing: units.gu(1)
-
-                ListItems.Header {
-                    text: i18n.tr("Guests")
-                    __foregroundColor: Theme.palette.normal.baseText
-                }
-
-                Button{
-                    id: addGuestButton
-                    objectName: "addGuestButton"
-
-                    property var contactsPopup: null
-
-                    text: i18n.tr("Add Guest")
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    onClicked: {
-                        if (contactsPopup)
-                            return
-
-                        flickable.makeMeVisible(addGuestButton)
-                        contactsPopup = PopupUtils.open(Qt.resolvedUrl("ContactChoicePopup.qml"), addGuestButton);
-                        contactsPopup.contactSelected.connect( function(contact, emailAddress) {
-                            if(!internal.isContactAlreadyAdded(contact, emailAddress) ) {
-                                var t = internal.contactToAttendee(contact, emailAddress);
-                                contactModel.append({"contact": t});
-                            }
-
-                        });
-                        contactsPopup.Component.onDestruction.connect( function() {
-                            addGuestButton.contactsPopup = null
-                        })
-                    }
-                }
-
-                UbuntuShape {
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        margins: units.gu(2)
-                    }
-
-                    height: contactList.height
-
-                    Column{
-                        id: contactList
-                        objectName: "guestList"
-
-                        spacing: units.gu(1)
-                        width: parent.width
-                        clip: true
-
-                        ListModel{
-                            id: contactModel
-                        }
-
-                        Repeater{
-                            model: contactModel
-                            delegate: ListItem {
-                                objectName: "eventGuest%1".arg(index)
-
-                                ListItemLayout {
-                                    title.text: contact.name
-                                    subtitle.text: contact.emailAddress
-                                }
-
-                                leadingActions: ListItemActions {
-                                    actions: Action {
-                                        iconName: "delete"
-                                        onTriggered: {
-                                            contactModel.remove(index)
-                                        }
+                }
+            }
+
+            // All day event ListItem with Switch
+            ListItem {
+                width: parent.width
+
+                ListItemLayout {
+                    title.text: i18n.tr("All day event")
+                    Switch {
+                        id: allDayEventCheckbox
+                        checked: false
+                        SlotsLayout.position: SlotsLayout.Trailing;
+                    }
+                }
+                onClicked: {
+//                    Haptics.play()
+                    allDayEventCheckbox.checked = !allDayEventCheckbox.checked
+                }
+
+            }
+
+            // ListItem which holds "Event details" label + TextField + TextArea + TextField
+            ListItem {
+                    height: eventDetailsColumn.height + (eventDetailsColumn.anchors.margins*2)
+
+                Column {
+                    id: eventDetailsColumn
+                    spacing: units.gu(2)
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        top: parent.top
+                        margins: units.gu(2)
+                    }
+
+                    Label {
+                        width: parent.width
+                        text: i18n.tr("Event details")
+                        elide: Text.ElideRight
+                    }
+
+                    TextField {
+                        id: titleEdit
+                        objectName: "newEventName"
+
+                        width: parent.width
+                        inputMethodHints: Qt.ImhNoPredictiveText
+                        placeholderText: i18n.tr("Event Name")
+
+                        onActiveFocusChanged: {
+                            if(titleEdit.activeFocus) {
+                                flickable.makeMeVisible(titleEdit);
+                            }
+                        }
+                    }
+
+                    TextArea{
+                        id: messageEdit
+                        objectName: "eventDescriptionInput"
+
+                        width: parent.width
+                        placeholderText: i18n.tr("Description")
+
+                        onActiveFocusChanged: {
+                            if(messageEdit.activeFocus) {
+                                flickable.makeMeVisible(messageEdit);
+                            }
+                        }
+                    }
+
+                    TextField {
+                        id: locationEdit
+                        objectName: "eventLocationInput"
+
+                        width: parent.width
+                        inputMethodHints: Qt.ImhNoPredictiveText
+                        placeholderText: i18n.tr("Location")
+
+                        onActiveFocusChanged: {
+                            if(locationEdit.activeFocus) {
+                                flickable.makeMeVisible(locationEdit);
+                            }
+                        }
+                    }
+                }
+            }
+
+            // ListItem to hold calendars selector
+            ListItem {
+                height: chooseCalendarColumn.height + (eventDetailsColumn.anchors.topMargin*2)
+
+                Column {
+                    id: chooseCalendarColumn
+                    spacing: units.gu(2)
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        top: parent.top
+                        topMargin: units.gu(2)
+                    }
+
+                    Label {
+                        width: parent.width
+                        anchors {
+                            left: parent.left
+                            leftMargin: units.gu(2)
+                            right: parent.right
+                            rightMargin: units.gu(2)
+                        }
+                        text: i18n.tr("Choose calendar")
+                        elide: Text.ElideRight
+                    }
+
+                    ListItems.ItemSelector {
+                        id: calendarsOption
+                        model: root.model.getWritableCollections();
+                        delegate: OptionSelectorDelegate { text: modelData.name }
+                    }
+
+                }
+            }
+
+
+            // add guest field
+            ListItem {
+                id: addGuestListItem
+                height: addGusestColumn.height + (addGusestColumn.anchors.margins*2)
+
+                Column {
+                    id: addGusestColumn
+//                    spacing: units.gu(2)
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        top: parent.top
+                        margins: units.gu(2)
+                    }
+
+                    Behavior on height {
+                        UbuntuNumberAnimation {}
+                    }
+
+                    Label {
+                        width: parent.width
+                        text: i18n.tr("Event details")
+                        elide: Text.ElideRight
+                    }
+
+                    Item {
+                        width: parent.width
+                        height: units.gu(1)
+                    }
+
+                    ListModel{
+                        id: contactModel
+                    }
+
+                    Component {
+                        id: addedGusestDelegate
+                        Item {
+                            width: delegateRow.width + units.gu(1)
+                            height: units.gu(3)
+
+                            Rectangle {
+                                anchors.fill: parent
+                                color: delegateMouseArea.pressed ? UbuntuColors.lightGrey : "transparent"
+                            }
+
+                            Row {
+                                id: delegateRow
+                                height: parent.height
+//                                width: rec.width + lab.width + units.gu(1)
+                                spacing: units.gu(0.5)
+                                anchors.horizontalCenter: parent.horizontalCenter
+
+                                UbuntuShape {
+                                    id: rec
+                                    height: parent.height - units.gu(0.5)
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    width: height
+                                    color: "green"
+                                    Text {
+                                        anchors.centerIn: parent
+                                        text: contact.name.charAt(0).toUpperCase()
+                                        font.bold: true
+                                        color: "white"
                                     }
                                 }
-                            }
-                        }
-                    }
-                }
-
-                ListItems.ThinDivider {
-                    visible: (event != undefined) && (event.itemType === Type.Event)
-                }
-
+                                Label {
+                                    id: lab
+//                                    id: delagateLabel
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    text: contact.name
+                                }
+                            }
+
+                            MouseArea {
+                                id: delegateMouseArea
+                                anchors.fill: parent
+                                onClicked: contactModel.remove(index)
+
+                            }
+
+                        }
+                    }
+
+                    // Add guest section (this is now in development)
+                    Item {
+                        width: parent.width
+//                        height: contactModel.count > 0 ? units.gu(5) : 0
+                        height: suggestionsListView.height + units.gu(0.5)
+                        Behavior on height {
+                            UbuntuNumberAnimation {}
+                        }
+
+                        Flow {
+                            id: suggestionsListView
+                            width: parent.width
+                            spacing: units.gu(1.5)
+                            move: Transition {
+                                NumberAnimation {
+                                    properties: "x,y"
+                                }
+                            }
+                            add: Transition {
+                                NumberAnimation {
+                                    properties: "x,y"
+                                }
+                            }
+
+                            Repeater {
+                                model: contactModel
+                                delegate: addedGusestDelegate
+                            }
+
+                        }
+
+                    }
+
+                    ContactChoicePopup {
+                        id: lol2
+                        width: parent.width
+
+                       onContactSelected: {
+                           if(!internal.isContactAlreadyAdded(contact, emailAddress) ) {
+                               var t = internal.contactToAttendee(contact, emailAddress);
+                               contactModel.append({"contact": t});
+                           }
+
+                       }
+                    }
+
+                }
             }
 
+
             ListItem {
                 id:thisHappens
                 objectName :"thisHappens"
@@ -768,6 +815,12 @@
         }
     }
 
+    // Scrollbar
+    Scrollbar{
+        flickableItem: flickable
+        align: Qt.AlignTrailing
+    }
+
     // used to keep the field visible when the keyboard appear or dismiss
     KeyboardRectangle {
         id: keyboardRectangle
@@ -783,14 +836,8 @@
                 PauseAnimation { duration: 200 }
                 ScriptAction {
                     script: {
-                        if (addGuestButton.contactsPopup) {
-                            // WORKAROUND: causes the popover to follow the buttom position when keyboard appears
-                            flickable.makeMeVisible(addGuestButton)
-                            addGuestButton.contactsPopup.caller = null
-                            addGuestButton.contactsPopup.caller = addGuestButton
-                        } else {
-                            flickable.makeMeVisible(flickable.activeItem)
-                        }
+                        flickable.makeMeVisible(flickable.activeItem)
+
                     }
                 }
             }
@@ -827,8 +874,7 @@
             return false;
         }
 
-        function attendeeFromData(id, name, emailAddress)
-        {
+        function attendeeFromData(id, name, emailAddress) {
             var attendee = Qt.createQmlObject("import QtOrganizer 5.0; EventAttendee{}", internal, "NewEvent.qml");
             attendee.name = name
             attendee.emailAddress = emailAddress

=== modified file 'NewEventTimePicker.qml'
--- NewEventTimePicker.qml	2016-03-22 20:09:08 +0000
+++ NewEventTimePicker.qml	2016-04-11 14:35:38 +0000
@@ -1,76 +1,117 @@
 import QtQuick 2.4
-import Ubuntu.Components.ListItems 1.0 as ListItem
+import Ubuntu.Components 1.3
 import Ubuntu.Components.Themes.Ambiance 1.0
-import Ubuntu.Components.Pickers 1.0
+import Ubuntu.Components.Pickers 1.3
+//import QtQuick.Layouts 1.1
 
-Column {
+ListItem {
     id: dateTimeInput
-    property alias header: listHeader.text
-
-    property date dateTime;
-    property bool showTimePicker;
+
+    property string headerText //header label ("From" or "To")
+    property date dateTime //keep date from DatePicker
+    property bool showTimePicker //if true then user is able to set time on event
+
+    // when new date set in DatePicker then this will be run.
+    onDateTimeChanged: {
+        layout.summary.text = dateTime.toLocaleDateString() // set date
+        secondLabel.text = Qt.formatTime(dateTime, "hh:mm AP").replace(/\./g, "") // set time
+    }
 
     function clearFocus() {
-        dateInput.focus = false;
-        timeInput.focus = false;
+        dateBG.focus = false;
+        timeBG.focus = false;
     }
 
+    // function to open date/time picker
     function openDatePicker (element, caller, callerProperty, mode) {
         element.highlighted = true;
         var picker = PickerPanel.openDatePicker(caller, callerProperty, mode);
         if (!picker) return;
-        picker.closed.connect(function () {
-            element.highlighted = false;
-        });
-    }
-
-    onDateTimeChanged: {
-        dateInput.text = dateTime.toLocaleDateString();
-        timeInput.text = Qt.formatTime(dateTime);
-    }
-
-    ListItem.Header {
-        id: listHeader
-        __foregroundColor: Theme.palette.normal.baseText
-    }
-
-    Item {
-        anchors {
-            left: parent.left
-            right: parent.right
-            margins: units.gu(2)
-        }
-
-        height: dateInput.height
-
-        NewEventEntryField{
-            id: dateInput
-            objectName: "dateInput"
-
-            text: ""
-            anchors.left: parent.left
-            width: !showTimePicker ? parent.width : 4 * parent.width / 5
-
-            MouseArea{
-                anchors.fill: parent
-                onClicked: openDatePicker(dateInput, dateTimeInput, "dateTime", "Years|Months|Days")
-            }
-        }
-
-        NewEventEntryField{
-            id: timeInput
-            objectName: "timeInput"
-
-            text: ""
-            anchors.right: parent.right
-            width: parent.width / 5
+        picker.closed.connect(function () { element.highlighted = false; });
+    }
+
+    height: layout.height + divider.height
+
+    // backgroud color of full date fabel, to be shown when user click on date and DatePicker is visable
+    Rectangle {
+        id: dateBG
+
+        property bool highlighted: false
+
+        height: layout.summary.height + units.gu(3.5)
+        width: showTimePicker ? layout.title.width + units.gu(3) : layout.width
+        anchors.bottom: parent.bottom
+        color: highlighted || abstractButtonDate.pressed ? UbuntuColors.lightGrey : "transparent"
+
+//        Behavior on color { ColorAnimation {} }
+    }
+
+    // backgroud color of time label, to be shown when user click on date and DatePicker is visable
+    Rectangle {
+        id: timeBG
+
+        property bool highlighted: false
+
+        height: dateBG.height
+        width: slot.width + units.gu(4)
+        anchors.bottom: parent.bottom
+        anchors.right: parent.right
+        color: (highlighted || abstractButtonTime.pressed) ? UbuntuColors.lightGrey : "transparent"
+
+//        Behavior on color { ColorAnimation {} }
+    }
+
+    // ListItemLayout to keep full date label and time label
+    ListItemLayout {
+        id: layout
+
+        title.text: headerText
+        title.color: Theme.palette.selected.overlayText
+        title.font.pixelSize: FontUtils.sizeToPixels("small")
+        subtitle.text: " "
+        summary.color: dateBG.highlighted ? "white" : Theme.palette.selected.fieldText
+        summary.font.pixelSize: FontUtils.sizeToPixels("medium")
+
+//        Behavior on summary.color { ColorAnimation {} }
+
+        // Item to hold Trailing tile label item
+        Item {
+            id: slot
+
+            width: secondLabel.width
+            height: parent.height
             visible: showTimePicker
-            horizontalAlignment: Text.AlignRight
-
-            MouseArea{
-                anchors.fill: parent
-                onClicked: openDatePicker(timeInput, dateTimeInput, "dateTime", "Hours|Minutes")
+            SlotsLayout.overrideVerticalPositioning: true
+
+            // label to keep time [ 10:20 AM ]
+            Label {
+                id: secondLabel
+
+                fontSize: "medium"
+                color: timeBG.highlighted ? "white" : Theme.palette.selected.fieldText
+                y: layout.mainSlot.y + layout.summary.y + layout.summary.baselineOffset - baselineOffset
+//                Behavior on color { ColorAnimation {} }
+//                Behavior on color { ColorAnimation {duration: 700} }
+
             }
         }
     }
+
+    // AbstractButton to be triggered when user click on full date
+    AbstractButton {
+        id: abstractButtonDate
+
+        anchors.fill: dateBG
+        onClicked: { openDatePicker(dateBG, dateTimeInput, "dateTime", "Years|Months|Days")}
+    }
+
+    // AbstractButton to be triggered when user click on time
+    AbstractButton {
+        id: abstractButtonTime
+
+        anchors.fill: timeBG
+        visible: showTimePicker
+        onClicked: { openDatePicker(timeBG, dateTimeInput, "dateTime", "Hours|Minutes")}
+    }
+
 }

=== modified file 'po/com.ubuntu.calendar.pot'
--- po/com.ubuntu.calendar.pot	2016-03-23 03:59:15 +0000
+++ po/com.ubuntu.calendar.pot	2016-04-11 14:35:38 +0000
@@ -1,6 +1,6 @@
 # SOME DESCRIPTIVE TITLE.
 # Copyright (C) YEAR Canonical Ltd.
-# This file is distributed under the same license as the PACKAGE package.
+# This file is distributed under the same license as the  package.
 # FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
 #
 #, fuzzy
@@ -8,7 +8,7 @@
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-03-23 00:58-0300\n"
+"POT-Creation-Date: 2016-04-11 15:19+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[e-mail]>\n"
@@ -18,7 +18,7 @@
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n"
 
-#: ../AgendaView.qml:50 ../calendar.qml:344 ../calendar.qml:576
+#: ../AgendaView.qml:50 ../calendar.qml:348 ../calendar.qml:580
 msgid "Agenda"
 msgstr ""
 
@@ -104,16 +104,12 @@
 msgstr ""
 
 #: ../ColorPickerDialog.qml:55 ../DeleteConfirmationDialog.qml:60
-#: ../EditEventConfirmationDialog.qml:53 ../NewEvent.qml:341
+#: ../EditEventConfirmationDialog.qml:53 ../NewEvent.qml:351
 msgid "Cancel"
 msgstr ""
 
-#: ../ContactChoicePopup.qml:37
-msgid "No contact"
-msgstr ""
-
-#: ../ContactChoicePopup.qml:96
-msgid "Search contact"
+#: ../ContactChoicePopup.qml:85
+msgid "Guests"
 msgstr ""
 
 #: ../DayView.qml:72 ../MonthView.qml:50 ../WeekView.qml:55 ../YearView.qml:57
@@ -154,11 +150,11 @@
 msgid "Delete this"
 msgstr ""
 
-#: ../DeleteConfirmationDialog.qml:51 ../NewEvent.qml:348
+#: ../DeleteConfirmationDialog.qml:51 ../NewEvent.qml:343 ../NewEvent.qml:366
 msgid "Delete"
 msgstr ""
 
-#: ../EditEventConfirmationDialog.qml:29 ../NewEvent.qml:336
+#: ../EditEventConfirmationDialog.qml:29
 msgid "Edit Event"
 msgstr ""
 
@@ -182,12 +178,12 @@
 
 #. TRANSLATORS: the first argument (%1) refers to a start time for an event,
 #. while the second one (%2) refers to the end time
-#: ../EventBubble.qml:100
+#: ../EventBubble.qml:136
 #, qt-format
 msgid "%1 - %2"
 msgstr ""
 
-#: ../EventDetails.qml:37 ../NewEvent.qml:484
+#: ../EventDetails.qml:37
 msgid "Event Details"
 msgstr ""
 
@@ -195,32 +191,35 @@
 msgid "Edit"
 msgstr ""
 
-#: ../EventDetails.qml:164 ../TimeLineHeader.qml:66
+#: ../EventDetails.qml:117
+msgid "Attending"
+msgstr ""
+
+#: ../EventDetails.qml:120
+msgid "Not Attending"
+msgstr ""
+
+#: ../EventDetails.qml:123
+msgid "Maybe"
+msgstr ""
+
+#: ../EventDetails.qml:126
+msgid "No Reply"
+msgstr ""
+
+#: ../EventDetails.qml:162 ../TimeLineHeader.qml:66
 msgid "All Day"
 msgstr ""
 
-#: ../EventDetails.qml:336 ../NewEvent.qml:549
-#: com.ubuntu.calendar_calendar.desktop.in.in.h:1
+#: ../EventDetails.qml:334 com.ubuntu.calendar_calendar.desktop.in.in.h:1
 msgid "Calendar"
 msgstr ""
 
-#: ../EventDetails.qml:369
-msgid "Not Attending"
-msgstr ""
-
-#: ../EventDetails.qml:373
-msgid "Attending"
-msgstr ""
-
-#: ../EventDetails.qml:377
-msgid "No Reply"
-msgstr ""
-
-#: ../EventDetails.qml:400 ../NewEvent.qml:515
+#: ../EventDetails.qml:391 ../NewEvent.qml:541
 msgid "Description"
 msgstr ""
 
-#: ../EventDetails.qml:418 ../EventReminder.qml:36 ../NewEvent.qml:711
+#: ../EventDetails.qml:409 ../NewEvent.qml:768 ../NewEvent.qml:807
 msgid "Reminder"
 msgstr ""
 
@@ -228,7 +227,7 @@
 #. and it is shown as the header of the page to choose repetition
 #. and as the header of the list item that shows the repetition
 #. summary in the page that displays the event details
-#: ../EventRepetition.qml:40 ../EventRepetition.qml:153
+#: ../EventRepetition.qml:40 ../EventRepetition.qml:152
 msgid "Repeat"
 msgstr ""
 
@@ -236,18 +235,18 @@
 msgid "Repeats On:"
 msgstr ""
 
-#: ../EventRepetition.qml:217
+#: ../EventRepetition.qml:218
 msgid "Recurring event ends"
 msgstr ""
 
 #. TRANSLATORS: this refers to how often a recurrent event repeats
 #. and it is shown as the header of the option selector to choose
 #. its repetition
-#: ../EventRepetition.qml:240 ../NewEvent.qml:685
+#: ../EventRepetition.qml:242 ../NewEvent.qml:744
 msgid "Repeats"
 msgstr ""
 
-#: ../EventRepetition.qml:265
+#: ../EventRepetition.qml:268
 msgid "Date"
 msgstr ""
 
@@ -288,7 +287,7 @@
 
 #. TRANSLATORS: This is shown in the month view as "Wk" as a title
 #. to indicate the week numbers. It should be a max of up to 3 characters.
-#: ../MonthComponent.qml:317
+#: ../MonthComponent.qml:316
 msgid "Wk"
 msgstr ""
 
@@ -297,52 +296,54 @@
 msgid "%1 %2"
 msgstr ""
 
-#: ../NewEvent.qml:179
+#: ../NewEvent.qml:185
 msgid "End time can't be before start time"
 msgstr ""
 
-#: ../NewEvent.qml:336 ../NewEventBottomEdge.qml:53
-msgid "New Event"
-msgstr ""
-
-#: ../NewEvent.qml:365
+#: ../NewEvent.qml:344 ../NewEvent.qml:361
 msgid "Save"
 msgstr ""
 
-#: ../NewEvent.qml:376
+#: ../NewEvent.qml:389
 msgid "Error"
 msgstr ""
 
-#: ../NewEvent.qml:378
+#: ../NewEvent.qml:391
 msgid "OK"
 msgstr ""
 
-#: ../NewEvent.qml:438
+#. TRANSLATORS: this referes to date. eg:  To: Wendsday, 9 March 2016
+#: ../NewEvent.qml:457
 msgid "From"
 msgstr ""
 
-#: ../NewEvent.qml:451
+#. TRANSLATORS: this referes to date. eg:  From: Wendsday, 9 March 2016
+#: ../NewEvent.qml:471
 msgid "To"
 msgstr ""
 
-#: ../NewEvent.qml:468
+#: ../NewEvent.qml:487
 msgid "All day event"
 msgstr ""
 
-#: ../NewEvent.qml:497
+#: ../NewEvent.qml:517 ../NewEvent.qml:624
+msgid "Event details"
+msgstr ""
+
+#: ../NewEvent.qml:527
 msgid "Event Name"
 msgstr ""
 
-#: ../NewEvent.qml:534
+#: ../NewEvent.qml:556
 msgid "Location"
 msgstr ""
 
 #: ../NewEvent.qml:589
-msgid "Guests"
+msgid "Choose calendar"
 msgstr ""
 
-#: ../NewEvent.qml:598
-msgid "Add Guest"
+#: ../NewEventBottomEdge.qml:53
+msgid "New Event"
 msgstr ""
 
 #: ../RecurrenceLabelDefines.qml:23
@@ -466,19 +467,19 @@
 "about them"
 msgstr ""
 
-#: ../calendar.qml:312 ../calendar.qml:492
+#: ../calendar.qml:316 ../calendar.qml:496
 msgid "Year"
 msgstr ""
 
-#: ../calendar.qml:320 ../calendar.qml:513
+#: ../calendar.qml:324 ../calendar.qml:517
 msgid "Month"
 msgstr ""
 
-#: ../calendar.qml:328 ../calendar.qml:534
+#: ../calendar.qml:332 ../calendar.qml:538
 msgid "Week"
 msgstr ""
 
-#: ../calendar.qml:336 ../calendar.qml:555
+#: ../calendar.qml:340 ../calendar.qml:559
 msgid "Day"
 msgstr ""