← Back to team overview

ubuntu-touch-coreapps-reviewers team mailing list archive

Re: [Merge] lp:~majster-pl/ubuntu-calendar-app/new-event-page into lp:ubuntu-calendar-app

 

Great work.
I added some small comments but in general the code looks great. 



Diff comments:

> 
> === modified file 'EventRepetition.qml'
> --- EventRepetition.qml	2016-03-07 17:57:04 +0000
> +++ EventRepetition.qml	2016-03-15 13:00:49 +0000
> @@ -19,14 +19,14 @@
>  import QtQuick 2.4
>  import QtOrganizer 5.0
>  import Ubuntu.Components 1.3
> -import Ubuntu.Components.ListItems 1.0 as ListItem
> +import Ubuntu.Components.ListItems 1.0 as ListItems

Do we still using the old ListItem? Can we remove this import?

>  import Ubuntu.Components.Pickers 1.0
>  import QtOrganizer 5.0
>  import "Defines.js" as Defines
>  import "Recurrence.js" as Recurrence
>  
>  Page {
> -    id: repetition
> +    id: root
>  
>      property var weekDays : [];
>      property var eventRoot;
> @@ -37,7 +37,20 @@
>      // 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
> -    title: i18n.tr("Repeat")
> +//    title:

missing comment? "//    title:"

> +
> +    header: PageHeader {
> +        title: i18n.tr("Repeat")
> +
> +        leadingActionBar.actions: [
> +            Action {
> +                iconName: "back"
> +                text: "Back"
> +                shortcut: "Esc"
> +                onTriggered: onBackClicked()
> +            }
> +        ]
> +    }
>  
>      EventUtils{
>          id:eventUtils
> @@ -92,67 +105,77 @@
>          recurrenceOption.selectedIndex = index;
>      }
>  
> -    head.backAction: Action{
> -        id:backAction
> -        iconName: "back"
> -        onTriggered: {
> -            var recurrenceRule = Defines.recurrenceValue[ recurrenceOption.selectedIndex ];
> -
> -            if (recurrenceRule !== RecurrenceRule.Invalid) {
> -                if (eventRoot.rule === null || eventRoot.rule === undefined ){
> -                    eventRoot.rule = Qt.createQmlObject("import QtOrganizer 5.0; RecurrenceRule {}", eventRoot.event.recurrence,"EventRepetition.qml");
> -                }
> -
> -                var rule = eventRoot.rule;
> -                rule.frequency = recurrenceRule;
> -                switch(recurrenceOption.selectedIndex){
> -                case 1: //daily
> -                case 2: //weekly
> -                case 3: //weekly
> -                case 4: //weekly
> -                case 5: //weekly
> -                    rule.daysOfWeek = eventUtils.getDaysOfWeek(recurrenceOption.selectedIndex, weekDays );
> -                    break;
> -                case 6: //monthly
> -                    rule.daysOfMonth = [eventRoot.date.getDate()];
> -                    break;
> -                case 7: //yearly
> -                    rule.monthsOfYear = [eventRoot.date.getMonth()];
> -                    rule.daysOfMonth = [eventRoot.date.getDate()];
> -                    break;
> -                case 0: //once
> -                default:
> -                    //it should not come here
> -                    break;
> -                }
> -
> -                if (limitOptions.selectedIndex === 1
> -                        && recurrenceOption.selectedIndex > 0
> -                        && limitCount.text != "") {
> -                    rule.limit =  parseInt(limitCount.text);
> -                }
> -                else if (limitOptions.selectedIndex === 2 && recurrenceOption.selectedIndex > 0) {
> -                    rule.limit =  datePick.date;
> -                }
> -                else {
> -                    rule.limit = undefined;
> -                }
> +    function onBackClicked() {
> +        var recurrenceRule = Defines.recurrenceValue[ recurrenceOption.selectedIndex ];
> +
> +        if (recurrenceRule !== RecurrenceRule.Invalid) {
> +            if (eventRoot.rule === null || eventRoot.rule === undefined ){
> +                eventRoot.rule = Qt.createQmlObject("import QtOrganizer 5.0; RecurrenceRule {}", eventRoot.event.recurrence,"EventRepetition.qml");
> +            }
> +
> +            var rule = eventRoot.rule;
> +            rule.frequency = recurrenceRule;
> +            switch(recurrenceOption.selectedIndex){
> +            case 1: //daily
> +            case 2: //weekly
> +            case 3: //weekly
> +            case 4: //weekly
> +            case 5: //weekly
> +                rule.daysOfWeek = eventUtils.getDaysOfWeek(recurrenceOption.selectedIndex, weekDays );
> +                break;
> +            case 6: //monthly
> +                rule.daysOfMonth = [eventRoot.date.getDate()];
> +                break;
> +            case 7: //yearly
> +                rule.monthsOfYear = [eventRoot.date.getMonth()];
> +                rule.daysOfMonth = [eventRoot.date.getDate()];
> +                break;
> +            case 0: //once
> +            default:
> +                //it should not come here
> +                break;
> +            }
> +
> +            if (limitOptions.selectedIndex === 1
> +                    && recurrenceOption.selectedIndex > 0
> +                    && limitCount.text != "") {
> +                rule.limit =  parseInt(limitCount.text);
> +            }
> +            else if (limitOptions.selectedIndex === 2 && recurrenceOption.selectedIndex > 0) {
> +                rule.limit =  datePick.date;
>              }
>              else {
> -                eventRoot.rule = null;
> +                rule.limit = undefined;
>              }
> -            pop()
> -        }
> +        }
> +        else {
> +            eventRoot.rule = null;
> +        }
> +        pop()
>      }
>  
> +

extra new line.

>      Column{
>          id:repeatColumn
>  
> -        anchors.fill: parent
> +        anchors {
> +            top: root.header.bottom
> +            bottom: root.bottom
> +            left: root.left
> +            right: root.right
> +        }
> +

Do we want fixed header? 
If not just set the 'flickable' property in the header it will flickable on the page.
If yes you need to set the 'header.flickable' property to null and a better way to anchor the page is: 
anchors { fill: root (or parent); topMargin: header.height; }

>          spacing: units.gu(1)
>  
> -        ListItem.Header{
> -            text: i18n.tr("Repeat")
> +        ListItem {
> +            height: repeatListItem.height
> +            divider.visible: false
> +
> +            ListItemLayout {
> +                id: repeatListItem
> +                title.text: i18n.tr("Repeat")
> +                title.color: Theme.palette.selected.overlayText
> +            }
>          }
>  
>          OptionSelector{
> 
> === modified file 'NewEvent.qml'
> --- NewEvent.qml	2016-03-07 17:57:04 +0000
> +++ NewEvent.qml	2016-03-15 13:00:49 +0000
> @@ -333,44 +336,50 @@
>  
>      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"
> +        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
> +                    font.weight: text === i18n.tr("Save") ? Font.Normal : Font.Light
> +                }
> +            }
> +        }
> +        leadingActionBar {
> +            anchors.leftMargin: 0
> +            actions: Action {
> +                text: i18n.tr("Cancel")
> +                iconName: "close"
> +                shortcut: "Esc"
> +                onTriggered: root.cancel()
> +            }
> +            delegate: pageHeader.delegate
> +        }
> +        trailingActionBar {
> +            anchors.rightMargin: 0
> +            actions: Action {
>                  text: i18n.tr("Save")
> +                iconName: "tick"
> +                shortcut: "Ctrl+S"
>                  enabled: !!titleEdit.text.trim()
> -                onTriggered: saveToQtPim();
> +                onTriggered: saveToQtPim()
>              }
> -        ]
> +            delegate: pageHeader.delegate
> +        }
>      }
>  
> +

extra new line.

>      Component{
>          id: errorDlgComponent
>          Dialog {
> @@ -387,6 +396,9 @@
>          id:eventUtils
>      }
>  
> +
> +
> +

extra new lines.

>      Flickable{
>          id: flickable
>          clip: true
> @@ -422,14 +434,15 @@
>          flickableDirection: Flickable.VerticalFlick
>          anchors{
>              left: parent.left
> -            top: parent.top
> -            topMargin: pageHeader.height
> +            top: root.header.bottom

is parent and root the same object? Can we use only one name here? (parent if possible)

>              right: parent.right
>              bottom: keyboardRectangle.top
>          }
>          contentWidth: width
>          contentHeight: column.height
>  
> +
> +

extra new lines.

>          Column {
>              id: column
>  
> @@ -461,184 +476,210 @@
>                  }
>              }
>  
> -            ListItems.Standard {
> -                anchors {
> -                    left: parent.left
> -                    right: parent.right
> -                }
> -
> -                text: i18n.tr("All day event")
> -                showDivider: false
> -                control: CheckBox {
> -                    objectName: "allDayEventCheckbox"
> -                    id: allDayEventCheckbox
> -                    checked: false
> -                }
> -            }
> -
> -            ListItems.ThinDivider {}
> -
> -            Column {
> -                width: parent.width
> -                spacing: units.gu(1)
> -
> -                ListItems.Header{
> -                    text: i18n.tr("Event Details")
> -                }
> -
> -                TextField {
> -                    id: titleEdit
> -                    objectName: "newEventName"
> -
> -                    anchors {
> -                        left: parent.left
> -                        right: parent.right
> -                        margins: units.gu(2)
> -                    }
> -
> -                    inputMethodHints: Qt.ImhNoPredictiveText
> -                    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")
> -                }
> -
> -                OptionSelector{
> -                    id: calendarsOption
> -                    objectName: "calendarsOption"
> -
> -                    anchors {
> -                        left: parent.left
> -                        right: parent.right
> -                        margins: units.gu(2)
> -                    }
> -
> -                    containerHeight: itemHeight * 4
> -                    model: root.model.getWritableCollections();
> -
> -                    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")
> -                }
> -
> -                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
> +            // 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")
> +
> +                        onFocusChanged: {
> +                            if(titleEdit.focus) {
> +                                flickable.makeMeVisible(titleEdit);
> +                            }
> +                        }
> +                    }
> +
> +                    TextArea{
> +                        id: messageEdit
> +                        objectName: "eventDescriptionInput"
> +
> +                        width: parent.width
> +                        placeholderText: i18n.tr("Description")
> +
> +                        onFocusChanged: {
> +                            if(messageEdit.focus) {
> +                                flickable.makeMeVisible(messageEdit);
> +                            }
> +                        }
> +                    }
> +
> +                    TextField {
> +                        id: locationEdit
> +                        objectName: "eventLocationInput"
> +
> +                        width: parent.width
> +                        inputMethodHints: Qt.ImhNoPredictiveText
> +                        placeholderText: i18n.tr("Location")
> +
> +                        onFocusChanged: {
> +                            if(locationEdit.focus) {
> +                                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 }
> +                    }
> +
> +                }
> +            }
> +
> +
> +            ListItem {
> +                height: guestsColumn.height + (guestsColumn.anchors.margins*2)
> +
> +                Column {
> +                    id: guestsColumn
> +                    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("Guests")
> +                        elide: Text.ElideRight
> +                    }
> +
> +                    // Below TextField is from new designs but because designs are not completed we have to keep old
> +                    // add guest solution.
> +//                    TextField {
> +//                        id: guestsEdit
> +//                        objectName: "eventLocationInput"
> +
> +//                        width: parent.width
> +//                        inputMethodHints: Qt.ImhNoPredictiveText
> +//                        placeholderText: i18n.tr("Add guests")
> +
> +//                        onFocusChanged: {
> +//                            if(guestsEdit.focus) {
> +//                                flickable.makeMeVisible(guestsEdit);
> +//                            }
> +//                        }
> +//                    }
> +
> +                    ////////////
> +                    // TODO: add guest button is from old design and have to be updated when we receive new designs
> +
> +                    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)

missing code?

> +                        }
> +
> +                        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
> +                            })
> +                        }
> +                    }
> +
>  
>                      Column{
>                          id: contactList
>                          objectName: "guestList"
>  
> -                        spacing: units.gu(1)
> -                        width: parent.width
> +                        anchors {
> +                            left: parent.left;
> +                            leftMargin: units.gu(-2);
> +                            right: parent.right;
> +                            rightMargin: units.gu(-2);
> +
> +                        }
>                          clip: true
>  
>                          ListModel{
> @@ -666,27 +711,28 @@
>                              }
>                          }
>                      }
> -                }
> -
> -                ListItems.ThinDivider {
> -                    visible: (event != undefined) && (event.itemType === Type.Event)
> -                }
> -
> +
> +                    //TODO//
> +                    /////////////////
> +
> +                }

TODO??????

>              }
>  
> -            ListItems.Subtitled{
> +
> +            ListItem {
>                  id:thisHappens
>                  objectName :"thisHappens"
>  
> -                anchors {
> -                    left: parent.left
> +                height: thisHappensLayout.height
> +
> +                ListItemLayout {
> +                    id: thisHappensLayout
> +                    title.text: i18n.tr("Repeats")
> +                    summary.text: (event != undefined) && (event.itemType === Type.Event) ? rule === null ? i18n.tr(Defines.recurrenceLabel[0])
> +                                                                                                          : eventUtils.getRecurrenceString(rule)
> +                                                                                            : ""
> +                    ProgressionSlot {}
>                  }
> -
> -                showDivider: false
> -                progression: true
> -                visible: (event != undefined) && (event.itemType === Type.Event)
> -                text: i18n.tr("Repeats")
> -                subText: (event != undefined) && (event.itemType === Type.Event) ? rule === null ? Defines.recurrenceLabel[0] : eventUtils.getRecurrenceString(rule) : ""
>                  onClicked: {
>                      var stack = pageStack
>                      if (!stack)
> 
> === modified file 'NewEventTimePicker.qml'
> --- NewEventTimePicker.qml	2016-01-25 17:52:33 +0000
> +++ NewEventTimePicker.qml	2016-03-15 13:00:49 +0000
> @@ -1,75 +1,113 @@
>  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 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
>  
> -    property date dateTime;
> -    property bool showTimePicker;
> +    // 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
> -    }
> -
> -    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
> +//    divider.height: units.gu(0.1)

missing code?

> +
> +

extra empty lines?

> +    // 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 ? 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 ? 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 {} }
> +

extra empty lines.

> +
> +        // 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 {} }
>              }
>          }
>      }
> +
> +    // AbstractButton to be triggered when user click on full date
> +    AbstractButton {
> +        anchors.fill: dateBG
> +        onClicked: { openDatePicker(dateBG, dateTimeInput, "dateTime", "Years|Months|Days")}
> +    }
> +
> +    // AbstractButton to be triggered when user click on time
> +    AbstractButton {
> +        anchors.fill: timeBG
> +        visible: showTimePicker
> +        onClicked: { openDatePicker(timeBG, dateTimeInput, "dateTime", "Hours|Minutes")}
> +    }
> +
>  }


-- 
https://code.launchpad.net/~majster-pl/ubuntu-calendar-app/new-event-page/+merge/288637
Your team Ubuntu Calendar Developers is subscribed to branch lp:ubuntu-calendar-app.


References