~ubuntu-clock-dev/ubuntu-clock-app/reboot-packaging

« back to all changes in this revision

Viewing changes to app/worldclock/WorldCityList.qml

  • Committer: Nekhelesh Ramananthan
  • Date: 2014-07-15 12:50:49 UTC
  • mfrom: (20.1.24 10-world-clocks)
  • Revision ID: krnekhelesh@gmail.com-20140715125049-hhsn7hpe6tqrn3vz
- Added a page to select world cities. It provides search as you type using the new SDK SortFilterModel feature.
- Added a XML file with a list of popular cities.
- The local time at the cities are retrieved using QTimezone and QDateTime classes and used via a QAbstractListModel to automatically update the city list every second.

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
/*
 
2
 * Copyright (C) 2014 Canonical Ltd
 
3
 *
 
4
 * This program is free software: you can redistribute it and/or modify
 
5
 * it under the terms of the GNU General Public License version 3 as
 
6
 * published by the Free Software Foundation.
 
7
 *
 
8
 * This program is distributed in the hope that it will be useful,
 
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
11
 * GNU General Public License for more details.
 
12
 *
 
13
 * You should have received a copy of the GNU General Public License
 
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
15
 */
 
16
 
 
17
import QtQuick 2.0
 
18
import Timezone 1.0
 
19
import Ubuntu.Components 1.1
 
20
import Ubuntu.Components.ListItems 1.0 as ListItem
 
21
import "../components"
 
22
 
 
23
/*
 
24
  Page to display a list of cities from which the user can choose a city to add
 
25
  to his world clocks.
 
26
 
 
27
  NOTE: This page design should look exactly like the Address book app in terms
 
28
  of visual design. For instance it requires the fast scroll component, section
 
29
  headers, search mode etc.
 
30
*/
 
31
 
 
32
Page {
 
33
    id: worldCityList
 
34
 
 
35
    title: i18n.tr("Select a city")
 
36
    visible: false
 
37
 
 
38
    state: "default"
 
39
    states: [
 
40
        PageHeadState {
 
41
            name: "default"
 
42
            head: worldCityList.head
 
43
            actions: [
 
44
                Action {
 
45
                    iconName: "search"
 
46
                    text: i18n.tr("City")
 
47
                    onTriggered: {
 
48
                        worldCityList.state = "search"
 
49
                        searchField.forceActiveFocus()
 
50
                    }
 
51
                }
 
52
            ]
 
53
        },
 
54
 
 
55
        PageHeadState {
 
56
            name: "search"
 
57
            head: worldCityList.head
 
58
            backAction: Action {
 
59
                iconName: "back"
 
60
                text: i18n.tr("Back")
 
61
                onTriggered: {
 
62
                    searchField.text = ""
 
63
                    worldCityList.state = "default"
 
64
                }
 
65
            }
 
66
 
 
67
            contents: TextField {
 
68
                id: searchField
 
69
 
 
70
                anchors {
 
71
                    left: parent ? parent.left : undefined
 
72
                    right: parent ? parent.right : undefined
 
73
                    rightMargin: units.gu(2)
 
74
                }
 
75
 
 
76
                onTextChanged: {
 
77
                    sortedTimeZoneModel.filter.property = "city"
 
78
                    sortedTimeZoneModel.filter.pattern = RegExp(searchField.text, "gi")
 
79
                }
 
80
            }
 
81
        }
 
82
    ]
 
83
 
 
84
    XmlTimeZoneModel {
 
85
        id: timeZoneModel
 
86
        updateInterval: 1000
 
87
        source: Qt.resolvedUrl("world-city-list.xml")
 
88
    }
 
89
 
 
90
    SortFilterModel {
 
91
        id: sortedTimeZoneModel
 
92
        model: timeZoneModel
 
93
        sort.property: "city"
 
94
        sort.order: Qt.AscendingOrder
 
95
    }
 
96
 
 
97
    ListView {
 
98
        id: cityList
 
99
 
 
100
        anchors.fill: parent
 
101
 
 
102
        model: sortedTimeZoneModel
 
103
 
 
104
        section.property: "city"
 
105
        section.criteria: ViewSection.FirstCharacter
 
106
        section.labelPositioning: ViewSection.InlineLabels
 
107
 
 
108
        section.delegate: ListItem.Header {
 
109
            anchors.margins: units.gu(2)
 
110
            Label {
 
111
                /*
 
112
                  Ideally we wouldn't need this label inside a listitem header,
 
113
                  however the default header text is indented right 2 gu which
 
114
                  doesn't match design spec.
 
115
                */
 
116
                text: section
 
117
                anchors.verticalCenter: parent.verticalCenter
 
118
            }
 
119
        }
 
120
 
 
121
        delegate: SubtitledListItem {
 
122
            text: city
 
123
            subText: country
 
124
            showDivider: false
 
125
 
 
126
            Label {
 
127
                id: _localTime
 
128
                text: localTime
 
129
                fontSize: "medium"
 
130
                anchors {
 
131
                    right: parent.right
 
132
                    verticalCenter: parent.verticalCenter
 
133
                }
 
134
            }
 
135
 
 
136
            onClicked: {
 
137
                /*
 
138
                  #TODO: Add support for saving chosen city permanently to disk
 
139
                */
 
140
                console.log("#TODO: Add city to U1DB Model")
 
141
            }
 
142
        }
 
143
    }
 
144
}