← Back to branch summary

~zsombi/ubuntu-ui-toolkit/listitemSelectModeBugs

« back to all changes in this revision

Viewing changes to examples/ubuntu-ui-toolkit-gallery/ListItemLayouts.qml

  • Committer: Zsombor Egri
  • Date: 2015-11-16 06:35:05 UTC
  • mfrom: (1664.1.1 listitemSelectModeBugs)
  • Revision ID: zsombor.egri@canonical.com-20151116063505-cwn2qfks7qzk10g9
re-sync

Show diffs side-by-side

added added

removed removed

Lines of Context:
examples/ubuntu-ui-toolkit-gallery/ListItemLayouts.qml
 
1
/*
 
2
 * Copyright 2015 Canonical Ltd.
 
3
 *
 
4
 * This program is free software; you can redistribute it and/or modify
 
5
 * it under the terms of the GNU Lesser General Public License as published by
 
6
 * the Free Software Foundation; version 3.
 
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 Lesser General Public License for more details.
 
12
 *
 
13
 * You should have received a copy of the GNU Lesser General Public License
 
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
15
 */
 
16
 
 
17
import QtQuick 2.4
 
18
import Ubuntu.Components 1.3
 
19
 
 
20
Template {
 
21
    objectName: "listItemLayoutTemplate"
 
22
 
 
23
    TemplateSection {
 
24
        className: "ListItemLayout"
 
25
        title: "Examples of core apps list items"
 
26
        // no spacing between the list items in the Column
 
27
        spacing: 0
 
28
 
 
29
        ListItem {
 
30
            id: addressbookListItem
 
31
            height: addressbookLayout.height + (divider.visible ? divider.height : 0)
 
32
 
 
33
            ListItemLayout {
 
34
                id: addressbookLayout
 
35
 
 
36
                title.color: UbuntuColors.lightAubergine
 
37
                title.text: "Address book list item: Name goes here"
 
38
 
 
39
                Rectangle {
 
40
                    SlotsLayout.position: SlotsLayout.Leading
 
41
                    color: "pink"
 
42
                    height: units.gu(6)
 
43
                    width: height
 
44
                    visible: width > 0
 
45
                }
 
46
            }
 
47
        }
 
48
 
 
49
        ListItem {
 
50
            id: addressbookDetailsListItem
 
51
            height: addressbookDetailsLayout.height + (divider.visible ? divider.height : 0)
 
52
            ListItemLayout {
 
53
                id: addressbookDetailsLayout
 
54
 
 
55
                title.color: UbuntuColors.lightAubergine
 
56
                title.text: "+12 3456789012"
 
57
                subtitle.text: "Mobile"
 
58
 
 
59
                Icon {
 
60
                    name: "message"
 
61
                    height: units.gu(2)
 
62
                }
 
63
 
 
64
                Icon {
 
65
                    name: "call-start"
 
66
                    height: units.gu(2)
 
67
                }
 
68
            }
 
69
 
 
70
        }
 
71
 
 
72
 
 
73
        ListItem {
 
74
            id: telegramContactsListItem
 
75
 
 
76
            height: telegramContactsLayout.height + (divider.visible ? divider.height : 0)
 
77
 
 
78
            ListItemLayout {
 
79
                id: telegramContactsLayout
 
80
                title.text: "Telegram Name goes here"
 
81
                subtitle.text: "last seen 12:02"
 
82
 
 
83
                Rectangle {
 
84
                    id: imageShape
 
85
                    SlotsLayout.position: SlotsLayout.Leading
 
86
                    height: units.gu(6)
 
87
                    width: height
 
88
                    color: "red"
 
89
                }
 
90
            }
 
91
        }
 
92
 
 
93
        ListItem {
 
94
            id: systemSettings1
 
95
            height: systemSettings1_layout.height + (divider.visible ? divider.height : 0)
 
96
 
 
97
            ListItemLayout {
 
98
                id: systemSettings1_layout
 
99
                title.text: "Call forwarding"
 
100
 
 
101
                ProgressionSlot {}
 
102
 
 
103
                Text {
 
104
                    font.pixelSize: FontUtils.sizeToPixels("medium")
 
105
                    text: "Off"
 
106
                    color: "#525252"
 
107
                }
 
108
            }
 
109
        }
 
110
 
 
111
        ListItem {
 
112
            id: systemSettings2
 
113
            height: systemSettings2_layout.height + (divider.visible ? divider.height : 0)
 
114
 
 
115
            ListItemLayout {
 
116
                id: systemSettings2_layout
 
117
                title.text: "Flight mode"
 
118
 
 
119
                //see http://bazaar.launchpad.net/~ubuntu-branches/ubuntu/wily/ubuntu-system-settings/wily-proposed/view/head:/src/qml/EntryComponent.qml
 
120
                Icon {
 
121
                    SlotsLayout.position: SlotsLayout.Leading
 
122
                    width: units.gu(6);
 
123
                    height: units.gu(6);
 
124
                    name: "airplane-mode"
 
125
                }
 
126
                Switch { }
 
127
            }
 
128
        }
 
129
 
 
130
        ListItem {
 
131
            id: systemSettings3
 
132
            height: systemSettings3_layout.height + (divider.visible ? divider.height : 0)
 
133
 
 
134
            ListItemLayout {
 
135
                id: systemSettings3_layout
 
136
                title.text: "الفيسبوك"
 
137
                subtitle.text: "الفيسبوك"
 
138
 
 
139
                LayoutMirroring.enabled: true
 
140
                LayoutMirroring.childrenInherit: true
 
141
 
 
142
                ProgressionSlot {}
 
143
 
 
144
                Icon {
 
145
                    SlotsLayout.position: SlotsLayout.Leading
 
146
                    width: units.gu(6);
 
147
                    height: units.gu(6);
 
148
                    name: "facebook"
 
149
                }
 
150
            }
 
151
        }
 
152
    }
 
153
 
 
154
    TemplateSection {
 
155
        className: "ListItemLayout"
 
156
        title: "Custom labels properties"
 
157
        spacing: 0
 
158
 
 
159
        ListItem {
 
160
            height: customLabelsLayout.height + (divider.visible ? divider.height : 0)
 
161
 
 
162
            ListItemLayout {
 
163
                id: customLabelsLayout
 
164
                title.text: "Lorem ipsum..."
 
165
                title.color: "blue"
 
166
                title.horizontalAlignment: Text.AlignHCenter
 
167
 
 
168
                subtitle.text: "..dolor sit amet, consectetur adipiscing elit..."
 
169
                subtitle.color: "red"
 
170
                subtitle.horizontalAlignment: Text.AlignHCenter
 
171
 
 
172
                summary.text: "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." +
 
173
                    "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi" +
 
174
                    "ut aliquip ex ea commodo consequat."
 
175
                summary.color: "green"
 
176
                summary.horizontalAlignment: Text.AlignHCenter
 
177
            }
 
178
        }
 
179
    }
 
180
 
 
181
    TemplateSection {
 
182
        className: "ListItemLayout"
 
183
        title: "With swiping actions"
 
184
        // no spacing between the list items in the Column
 
185
        spacing: 0
 
186
 
 
187
        ListItemActions {
 
188
            id: exampleLeadingActions
 
189
            actions: [
 
190
                Action {
 
191
                    iconName: "delete"
 
192
                }
 
193
            ]
 
194
        }
 
195
        ListItemActions {
 
196
            id: exampleTrailingActions
 
197
            actions: [
 
198
                Action {
 
199
                    iconName: "edit"
 
200
                },
 
201
                Action {
 
202
                    iconName: "save-to"
 
203
                }
 
204
            ]
 
205
        }
 
206
 
 
207
        ListItemWithLabel {
 
208
            title.text: i18n.tr("Leading and trailing actions")
 
209
            leadingActions: exampleLeadingActions
 
210
            trailingActions: exampleTrailingActions
 
211
        }
 
212
 
 
213
    }
 
214
 
 
215
    TemplateSection {
 
216
        className: "ListItemLayout"
 
217
        title: "Custom vertical positioning of slots"
 
218
        // no spacing between the list items in the Column
 
219
        spacing: 0
 
220
 
 
221
        ListItem {
 
222
            id: dialerHistoryListItem
 
223
            height: dialerHistoryLayout.height + (divider.visible ? divider.height : 0)
 
224
 
 
225
            ListItemLayout {
 
226
                id: dialerHistoryLayout
 
227
 
 
228
                title.text: "+12 3456789012 (3)"
 
229
                title.color: UbuntuColors.lightAubergine
 
230
                subtitle.text: "Mobile"
 
231
 
 
232
                Rectangle {
 
233
                    SlotsLayout.position: SlotsLayout.Leading
 
234
                    color: "pink"
 
235
                    height: units.gu(6)
 
236
                    width: height
 
237
                    visible: width > 0
 
238
                }
 
239
 
 
240
                Item {
 
241
                    id: slot
 
242
                    width: label2.width
 
243
                    height: parent.height
 
244
                    //as we want to position labels to align with title and subtitle
 
245
                    SlotsLayout.overrideVerticalPositioning: true
 
246
 
 
247
                    Label {
 
248
                        id: lab
 
249
                        anchors.right: label2.right
 
250
                        text: "19:17"
 
251
                        fontSize: "small"
 
252
                        y: dialerHistoryLayout.mainSlot.y + dialerHistoryLayout.title.y
 
253
                           + dialerHistoryLayout.title.baselineOffset - baselineOffset
 
254
                    }
 
255
 
 
256
                    Label {
 
257
                        id: label2
 
258
                        text: "Outgoing"
 
259
                        fontSize: "small"
 
260
                        y: dialerHistoryLayout.mainSlot.y + dialerHistoryLayout.subtitle.y
 
261
                           + dialerHistoryLayout.subtitle.baselineOffset - baselineOffset
 
262
                    }
 
263
                }
 
264
            }
 
265
        }
 
266
    }
 
267
}