← Back to branch summary

~majster-pl/+junk/uShopper

« back to all changes in this revision

Viewing changes to ui/MainPage.qml

  • Committer: Szymon Waliczek
  • Date: 2015-11-23 21:27:03 UTC
  • Revision ID: majsterrr@gmail.com-20151123212703-2kl0wxd7kojpowfx
initial release, still long way to go... ;)

Show diffs side-by-side

added added

removed removed

Lines of Context:
ui/MainPage.qml
 
1
/*
 
2
 * Copyright (C) 2015 Szymon Waliczek.
 
3
 *
 
4
 * Authors:
 
5
 *  Szymon Waliczek <majsterrr@gmail.com>
 
6
 *
 
7
 * This file is part of SocketWorld app for Ubuntu Touch
 
8
 *
 
9
 * This program is free software; you can redistribute it and/or modify
 
10
 * it under the terms of the GNU Lesser General Public License as published by
 
11
 * the Free Software Foundation; version 3.
 
12
 *
 
13
 * This program is distributed in the hope that it will be useful,
 
14
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 
15
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 
16
 * GNU Lesser General Public License for more details.
 
17
 *
 
18
 * You should have received a copy of the GNU Lesser General Public License
 
19
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
20
 */
 
21
 
 
22
 
 
23
import QtQuick 2.4
 
24
import Ubuntu.Components 1.3
 
25
import Ubuntu.Components.Popups 1.0
 
26
//import QtQuick.XmlListModel 2.0
 
27
//import Ubuntu.Components.Pickers 0.1
 
28
//import "../backEnd/utils.js" as Utils
 
29
import "../components"
 
30
 
 
31
 
 
32
Page {
 
33
    id: root
 
34
    state: "default"
 
35
    title: "uShopper"
 
36
 
 
37
    property string randomColor: "#ee6d00"
 
38
 
 
39
 
 
40
    // fist of colors
 
41
    ListModel {
 
42
        id: colorsToUse
 
43
        ListElement {colorBG: "#f44336"}
 
44
        ListElement {colorBG: "#e91e63"}
 
45
        ListElement {colorBG: "#9c27b0"}
 
46
        ListElement {colorBG: "#673ab7"}
 
47
        ListElement {colorBG: "#3f51b5"}
 
48
        ListElement {colorBG: "#2196f3"}
 
49
        ListElement {colorBG: "#03a9f4"}
 
50
        ListElement {colorBG: "#00bcd4"}
 
51
        ListElement {colorBG: "#009688"}
 
52
        ListElement {colorBG: "#4caf50"}
 
53
        ListElement {colorBG: "#8bc34a"}
 
54
        ListElement {colorBG: "#cddc39"}
 
55
        ListElement {colorBG: "#ffeb3b"}
 
56
        ListElement {colorBG: "#ffc107"}
 
57
        ListElement {colorBG: "#ff9800"}
 
58
        ListElement {colorBG: "#ff5722"}
 
59
        ListElement {colorBG: "#795548"}
 
60
        ListElement {colorBG: "#9e9e9e"}
 
61
        ListElement {colorBG: "#607d8b"}
 
62
 
 
63
    }
 
64
 
 
65
 
 
66
    states: [
 
67
        PageHeadState {
 
68
            name: "default"
 
69
            head: root.head
 
70
            actions: [
 
71
                Action {
 
72
                    iconName: "add"
 
73
                    text: i18n.tr("Add")
 
74
                    onTriggered: addNewList()
 
75
                },
 
76
 
 
77
                Action {
 
78
                    iconName: "settings"
 
79
                    text: "restart welcome"
 
80
//                    onTriggered: firstRunDoc.contents = { firstrun: "true" }
 
81
                    onTriggered: {
 
82
                        main_shopping_list_MODEL.addItemToList()
 
83
                    }
 
84
                }
 
85
 
 
86
            ]
 
87
        },
 
88
        PageHeadState {
 
89
            name: "multiselection"
 
90
            head: root.head
 
91
            backAction: Action {
 
92
                iconName: "close"
 
93
                text: i18n.tr("Back")
 
94
                onTriggered: {
 
95
                    root.state = "default"
 
96
                    mainShoppingListView.ViewItems.selectMode = !mainShoppingListView.ViewItems.selectMode
 
97
                    mainShoppingListView.ViewItems.selectedIndices = []
 
98
                }
 
99
            }
 
100
 
 
101
            actions: [
 
102
                Action {
 
103
                    iconName: "select"
 
104
                    text: i18n.tr("Select All")
 
105
                    onTriggered: {
 
106
                        if(mainShoppingListView.ViewItems.selectedIndices.length <= 0) {
 
107
                            mainShoppingListView.ViewItems.selectedIndices = main_shopping_list_MODEL.mainListLengthInArray()
 
108
                        } else {
 
109
                            mainShoppingListView.ViewItems.selectedIndices = []
 
110
                        }
 
111
 
 
112
                    }
 
113
                },
 
114
 
 
115
                Action {
 
116
                    iconName: "delete"
 
117
                    text: i18n.tr("Delete Selected")
 
118
                    onTriggered: {
 
119
                        main_shopping_list_MODEL.removeMultipleMainLists(mainShoppingListView.ViewItems.selectedIndices)
 
120
                        mainShoppingListView.ViewItems.selectedIndices = []
 
121
                        mainShoppingListView.ViewItems.selectMode = !mainShoppingListView.ViewItems.selectMode
 
122
                        root.state = "default"
 
123
                    }
 
124
                }
 
125
            ]
 
126
 
 
127
        }
 
128
    ]
 
129
 
 
130
 
 
131
    ///// DIALOGS ////
 
132
    ////
 
133
 
 
134
    // LIST Info
 
135
    InfoMailListComponent {
 
136
        id: infoMainListDialog
 
137
    }
 
138
 
 
139
    // EDIT LIST NAME DIALOG
 
140
    EditListItelComponent {
 
141
        id: editMainListDialog
 
142
    }
 
143
 
 
144
    // Add new list Dialoge
 
145
    AddNewListItemComponent {
 
146
        id: addNewListDialoge
 
147
    }
 
148
 
 
149
 
 
150
    //\\
 
151
    ///// DIALOGS \\\\\
 
152
 
 
153
 
 
154
 
 
155
    // FUNCTIONS:
 
156
 
 
157
    // function to open Dialog
 
158
    function addNewList() {
 
159
        PopupUtils.open(addNewListDialoge)
 
160
        //get random backgroundColor
 
161
        var randomNumber = Math.floor((Math.random() * colorsToUse.count) + 1) - 1;
 
162
        randomColor = colorsToUse.get(randomNumber).colorBG
 
163
    }
 
164
 
 
165
 
 
166
    Rectangle {
 
167
        anchors.fill: parent
 
168
 
 
169
        ListView {
 
170
            id: mainShoppingListView
 
171
            width: parent.width
 
172
            height: parent.height
 
173
            clip: true
 
174
            model: main_shopping_list_MODEL
 
175
//            ViewItems.dragMode: true
 
176
            displaced: Transition {
 
177
                UbuntuNumberAnimation { property: "y"; duration: UbuntuAnimation.BriskDuration }
 
178
            }
 
179
 
 
180
            onCountChanged: {
 
181
                if(count === 0) {
 
182
                    root.state = "default"
 
183
                    mainShoppingListView.ViewItems.selectMode = false
 
184
                } else {
 
185
                    swipeItemDemo.enable()
 
186
                }
 
187
            }
 
188
 
 
189
 
 
190
            delegate: ListItem {
 
191
                id: listItem
 
192
 
 
193
                color: selected ? "#edffcf" : "transparent"
 
194
                onPressAndHold: {
 
195
//                    ListView.view.ViewItems.dragMode = !ListView.view.ViewItems.dragMode
 
196
//                    dragMode = !dragMode;
 
197
                    selectMode = !selectMode
 
198
                    root.state === "multiselection" ? root.state = "default" : root.state = "multiselection"
 
199
                    selected=!selected
 
200
                }
 
201
 
 
202
                onClicked: {
 
203
                    if(selectMode) {
 
204
                        selected=!selected
 
205
                    } else {
 
206
                        currentMainListIndex = index
 
207
                        mainPageStack.push(Qt.resolvedUrl("ShopListMain.qml"),{title: name, bgColor:def_color})
 
208
                    }
 
209
//                    mainView.backgroundColor = def_color
 
210
               }
 
211
 
 
212
                Item {
 
213
                    anchors.fill: parent
 
214
                    anchors.margins: units.gu(1)
 
215
 
 
216
 
 
217
                    Row {
 
218
                        height: parent.height
 
219
                        anchors.verticalCenter: parent.verticalCenter
 
220
                        spacing: units.gu(1)
 
221
                        UbuntuShape {
 
222
                            height: parent.height
 
223
                            width: height
 
224
                            backgroundColor: def_color === undefined ? "white" : def_color
 
225
                            radius: "medium"
 
226
 
 
227
                            Label {
 
228
                                anchors.centerIn: parent
 
229
                                text: name.match(/\b\w/g).join('').toUpperCase().slice(0,2)
 
230
                                color: "white"
 
231
                            }
 
232
                        }
 
233
 
 
234
 
 
235
                        Label {
 
236
//                            width: parent.width - parent.height - units.gu(2)
 
237
                            anchors.verticalCenter: parent.verticalCenter
 
238
                            fontSize: "large"
 
239
                            color: "black"
 
240
                            text: name
 
241
                        }
 
242
                    }
 
243
                }
 
244
 
 
245
 
 
246
                leadingActions: ListItemActions {
 
247
                    actions: [
 
248
                        Action {
 
249
                            iconName: "delete"
 
250
                            onTriggered: {
 
251
                                main_shopping_list_MODEL.removeMainList(index)
 
252
                                main_shopping_list_MODEL.remove(index)
 
253
                            }
 
254
                        }
 
255
                    ]
 
256
                }
 
257
                trailingActions: ListItemActions {
 
258
                    actions: [
 
259
                        Action {
 
260
                            iconName: "edit"
 
261
                            onTriggered: {
 
262
                                editListIndex = index
 
263
                                PopupUtils.open(editMainListDialog)
 
264
                            }
 
265
                        },
 
266
                        Action {
 
267
                            iconName: "info"
 
268
                            onTriggered: {
 
269
//                                print("INFO!")
 
270
                                editListIndex = index
 
271
                                PopupUtils.open(infoMainListDialog)
 
272
                            }
 
273
                        }
 
274
 
 
275
                    ]
 
276
                }
 
277
//                onPressAndHold: {
 
278
//                    ListView.view.ViewItems.selectMode = !ListView.view.ViewItems.selectMode
 
279
//                }
 
280
 
 
281
 
 
282
            }
 
283
        }
 
284
    }
 
285
 
 
286
 
 
287
 
 
288
 
 
289
 
 
290
 
 
291
 
 
292
 
 
293
 
 
294
    // No list added information (on the middle of the main page)
 
295
    Rectangle {
 
296
        id: noShoppingListInfo
 
297
        anchors.fill: parent
 
298
        color: "white"
 
299
        visible: main_shopping_list_MODEL.count != 0 ? false: true
 
300
 
 
301
        Item {
 
302
            anchors.fill: parent
 
303
            anchors.margins: units.gu(3)
 
304
            Column {
 
305
                width: parent.width
 
306
                anchors.verticalCenter: parent.verticalCenter
 
307
                spacing: units.gu(2)
 
308
 
 
309
                Label {
 
310
                    width: parent.width
 
311
                    wrapMode: Text.Wrap
 
312
                    horizontalAlignment: Text.AlignHCenter
 
313
                    font.pixelSize: units.gu(3)
 
314
                    color: "black"
 
315
                    text: i18n.tr("You have no shopping list added yet.")
 
316
                }
 
317
                Label {
 
318
                    width: parent.width
 
319
                    wrapMode: Text.Wrap
 
320
                    horizontalAlignment: Text.AlignHCenter
 
321
                    font.pixelSize: units.gu(2.5)
 
322
                    color: "#4e4e4e"
 
323
                    text: i18n.tr("Please tap anywhere or use <b>Plus</b> symbol on header to add new list.")
 
324
                }
 
325
 
 
326
            }
 
327
 
 
328
        }
 
329
 
 
330
 
 
331
        MouseArea {
 
332
            anchors.fill: parent
 
333
            onClicked: addNewList()
 
334
        }
 
335
 
 
336
    }
 
337
 
 
338
    // Swipe demo to be showen only once when user creates first shopping list. (left, right swipe)
 
339
    SwipeItemDemo {
 
340
        id: swipeItemDemo
 
341
 
 
342
        property bool parentActive: true
 
343
 
 
344
        parent: mainView
 
345
        anchors.fill: parent
 
346
        onStatusChanged: {
 
347
            if (status === Loader.Ready) {
 
348
                Qt.inputMethod.hide()
 
349
            }
 
350
        }
 
351
    }
 
352
 
 
353
 
 
354
 
 
355
}