← Back to branch summary

~ci-train-bot/ubuntu-ui-toolkit/ubuntu-ui-toolkit-ubuntu-zesty-2478

« back to all changes in this revision

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

  • Committer: Tarmac
  • Author(s): Tim Peeters
  • Date: 2017-01-22 10:04:03 UTC
  • mfrom: (1982.3.17 toolbarScroll)
  • Revision ID: tarmac-20170122100403-75uiszx8bx3apn39
Toolbar visual refresh to scroll the icons instead of using an overflow panel. Fixes: https://bugs.launchpad.net/bugs/1558018.

Approved by ubuntu-sdk-build-bot, Zsombor Egri.

Show diffs side-by-side

added added

removed removed

Lines of Context:
examples/ubuntu-ui-toolkit-gallery/Toolbars.qml
 
1
/*
 
2
 * Copyright 2016 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: "toolbarTemplate"
 
22
    id: toolbarTemplate
 
23
 
 
24
    property list<Action> actionList:  [
 
25
        Action {
 
26
            iconName: "alarm-clock"
 
27
            text: "Tick tock"
 
28
        },
 
29
        Action {
 
30
            iconName: "appointment"
 
31
            text: "Date"
 
32
        },
 
33
        Action {
 
34
            iconName: "attachment"
 
35
            text: "Attach"
 
36
        },
 
37
        Action {
 
38
            iconName: "contact"
 
39
            text: "Contact"
 
40
        },
 
41
        Action {
 
42
            iconName: "like"
 
43
            text: "Like"
 
44
        },
 
45
        Action {
 
46
            iconName: "lock"
 
47
            text: "Lock"
 
48
        }
 
49
    ]
 
50
 
 
51
    property list<Action> longActionList:  [
 
52
        Action {
 
53
            iconName: "alarm-clock"
 
54
            text: "Tick tock"
 
55
            onTriggered: print("tock")
 
56
        },
 
57
        Action {
 
58
            iconName: "appointment"
 
59
            text: "Date"
 
60
            onTriggered: print("date")
 
61
        },
 
62
        Action {
 
63
            iconName: "attachment"
 
64
            text: "Attach"
 
65
            onTriggered: print("attach")
 
66
        },
 
67
        Action {
 
68
            iconName: "contact"
 
69
            text: "Contact"
 
70
            onTriggered: print("contact")
 
71
        },
 
72
        Action {
 
73
            iconName: "like"
 
74
            text: "Like"
 
75
            onTriggered: print("+1")
 
76
        },
 
77
        Action {
 
78
            iconName: "lock"
 
79
            text: "Lock"
 
80
            onTriggered: print("lock")
 
81
        },
 
82
        Action {
 
83
            iconName: "camcorder"
 
84
            text: "Camera"
 
85
            onTriggered: print("cam")
 
86
        },
 
87
        Action {
 
88
            iconName: "location"
 
89
            text: "Location"
 
90
            onTriggered: print("loc")
 
91
            enabled: false
 
92
        },
 
93
        Action {
 
94
            iconName: "message"
 
95
            text: "Message"
 
96
            onTriggered: print("msg")
 
97
        },
 
98
        Action {
 
99
            iconName: "livetv"
 
100
            text: "Television"
 
101
            onTriggered: print("tv")
 
102
        },
 
103
        Action {
 
104
            iconName: "lock-broken"
 
105
            text: "Unlock"
 
106
            onTriggered: print("unlock")
 
107
        },
 
108
        Action {
 
109
            iconName: "compose"
 
110
            text: "Edit"
 
111
            onTriggered: print("edit")
 
112
        },
 
113
        Action {
 
114
            iconName: "contact-new"
 
115
            text: "Add user"
 
116
            onTriggered: print("useradd")
 
117
        },
 
118
        Action {
 
119
            iconName: "crop"
 
120
            text: "Crop"
 
121
            onTriggered: print("crop")
 
122
        },
 
123
        Action {
 
124
            iconName: "edit-cut"
 
125
            text: "Cut"
 
126
            onTriggered: print("cut")
 
127
        },
 
128
        Action {
 
129
            iconName: "image-quality"
 
130
            text: "Image quality"
 
131
            onTriggered: print("image quality")
 
132
        },
 
133
        Action {
 
134
            iconName: "import"
 
135
            text: "Import"
 
136
            onTriggered: print("import")
 
137
        },
 
138
        Action {
 
139
            iconName: "history"
 
140
            text: "History"
 
141
            onTriggered: print("history")
 
142
        },
 
143
        Action {
 
144
            iconName: "media-eject"
 
145
            text: "Eject"
 
146
            onTriggered: print("eject")
 
147
        }
 
148
    ]
 
149
 
 
150
    property list<Action> deleteActionList: [
 
151
        Action {
 
152
            iconName: "delete"
 
153
            text: "Delete"
 
154
            onTriggered: print("delete")
 
155
        }
 
156
    ]
 
157
 
 
158
    header: PageHeader {
 
159
        id: h
 
160
        title: toolbarTemplate.title
 
161
        property bool longList: false
 
162
        extension: Toolbar {
 
163
            id: headerToolbar
 
164
            anchors {
 
165
                left: parent.left
 
166
                right: parent.right
 
167
                bottom: parent.bottom
 
168
            }
 
169
            leadingActionBar.actions: deleteActionList
 
170
            trailingActionBar.actions: h.longList ? longActionList : actionList
 
171
        }
 
172
        trailingActionBar.actions: [
 
173
            Action {
 
174
                iconName: h.longList ? "remove" : "add"
 
175
                text: h.longList ? "less" : "more"
 
176
                onTriggered: {
 
177
                    h.longList = !h.longList;
 
178
                }
 
179
            }
 
180
        ]
 
181
    }
 
182
 
 
183
    TemplateSection {
 
184
        title: "Toolbar"
 
185
        className: "Toolbar"
 
186
 
 
187
        TemplateRow {
 
188
            width: parent.width
 
189
            title: i18n.tr("Enabled")
 
190
            Toolbar {
 
191
                width: parent.width
 
192
                trailingActionBar.actions: actionList
 
193
                leadingActionBar.actions: deleteActionList
 
194
            }
 
195
        }
 
196
        TemplateRow {
 
197
            title: i18n.tr("Disabled")
 
198
            Toolbar {
 
199
                width: parent.width
 
200
                trailingActionBar.actions: actionList
 
201
                leadingActionBar.actions: deleteActionList
 
202
                enabled: false
 
203
            }
 
204
        }
 
205
    }
 
206
 
 
207
    TemplateSection {
 
208
        title: "Scrollable toolbar"
 
209
        className: "Toolbar"
 
210
 
 
211
        TemplateRow {
 
212
            title: i18n.tr("Enabled")
 
213
            Toolbar {
 
214
                width: parent.width
 
215
                trailingActionBar.actions: longActionList
 
216
                leadingActionBar.actions: deleteActionList
 
217
            }
 
218
        }
 
219
        TemplateRow {
 
220
            title: i18n.tr("Disabled")
 
221
            Toolbar {
 
222
                width: parent.width
 
223
                trailingActionBar.actions: longActionList
 
224
                leadingActionBar.actions: deleteActionList
 
225
                enabled: false
 
226
            }
 
227
        }
 
228
    }
 
229
 
 
230
    TemplateSection {
 
231
        title: "Colored"
 
232
        className: "ActionBarStyle"
 
233
 
 
234
        TemplateRow {
 
235
            title: "Green"
 
236
            Toolbar {
 
237
                width: parent.width
 
238
                trailingActionBar.actions: longActionList
 
239
                leadingActionBar.actions: deleteActionList
 
240
                StyleHints {
 
241
                    ignoreUnknownProperties: false
 
242
                    backgroundColor: UbuntuColors.green
 
243
                    buttons {
 
244
                        foregroundColor: "white"
 
245
                        disabledForegroundColor: UbuntuColors.silk
 
246
                        pressedBackgroundColor: UbuntuColors.ash
 
247
                        disabledBackgroundColor: UbuntuColors.slate
 
248
                    }
 
249
                }
 
250
            }
 
251
        }
 
252
    }
 
253
}