← Back to branch summary

~zsombi/ubuntu-ui-toolkit/83-rtl-support

« back to all changes in this revision

Viewing changes to tests/resources/listitems/ListItemDragging.qml

  • Committer: Zsombor Egri
  • Date: 2015-02-25 11:54:57 UTC
  • mfrom: (1352.6.93 82-dragging-mode)
  • Revision ID: zsombor.egri@canonical.com-20150225115457-sf0p7yjxbcvkzedt
prereq sync

Show diffs side-by-side

added added

removed removed

Lines of Context:
tests/resources/listitems/ListItemDragging.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.2
 
19
import Ubuntu.Components.ListItems 1.0
 
20
import QtQml.Models 2.1
 
21
 
 
22
MainView {
 
23
    id: main
 
24
    width: units.gu(40)
 
25
    height: units.gu(71)
 
26
 
 
27
    property bool restrictDragging: true
 
28
 
 
29
    Action {
 
30
        id: deleteAction
 
31
        iconName: "delete"
 
32
    }
 
33
    property list<Action> contextualActions: [
 
34
        Action {
 
35
            iconName: "edit"
 
36
        },
 
37
        Action {
 
38
            iconName: "share"
 
39
        },
 
40
        Action {
 
41
            iconName: "stock_website"
 
42
        }
 
43
    ]
 
44
    Tabs {
 
45
        Tab {
 
46
            title: "Dragging with ListModel"
 
47
            page: Page {
 
48
                ListView {
 
49
                    onEnabledChanged: print("enabled", enabled)
 
50
                    anchors.fill: parent
 
51
                    ViewItems.selectMode: ViewItems.dragMode
 
52
                    ViewItems.onSelectedIndicesChanged: print(ViewItems.selectedIndices)
 
53
 
 
54
                    function handleDragStarted(event) {
 
55
                        if (!restrictDragging) {
 
56
                            return;
 
57
                        }
 
58
 
 
59
                        if (event.from < 3) {
 
60
                            // the first 3 items are not draggable
 
61
                            event.accept = false;
 
62
                        } else if (event.from >=3 && event.from <= 10) {
 
63
                            // dragging is limited between index 3 and 10
 
64
                            event.minimumIndex = 3;
 
65
                            event.maximumIndex = 10;
 
66
                        } else {
 
67
                            // prevent dragging above index 10
 
68
                            event.minimumIndex = 11;
 
69
                        }
 
70
                    }
 
71
                    function handleDragUpdates(event) {
 
72
                        if (restrictDragging) {
 
73
                            // deal only with indexes >= 3
 
74
                            if (event.to >= 3 && event.to <= 10 && event.from >= 3 && event.from <= 10) {
 
75
                                // live update
 
76
                                model.move(event.from, event.to, 1);
 
77
                            } else if (event.status == ListItemDrag.Dropped) {
 
78
                                model.move(event.from, event.to, 1);
 
79
                            } else {
 
80
                                event.accept = false;
 
81
                            }
 
82
                        } else {
 
83
                            // no restrictions, perform live update
 
84
                            model.move(event.from, event.to, 1);
 
85
                        }
 
86
                    }
 
87
 
 
88
                    ViewItems.onDragUpdated: {
 
89
                        if (event.status == ListItemDrag.Started) {
 
90
                            handleDragStarted(event);
 
91
                        } else {
 
92
                            handleDragUpdates(event);
 
93
                        }
 
94
                    }
 
95
 
 
96
                    model: ListModel {
 
97
                        Component.onCompleted: {
 
98
                            for (var i = 0; i < 3; i++) {
 
99
                                append({label: "List item #"+i, sectionData: "Locked"});
 
100
                            }
 
101
                            for (i = 3; i < 11; i++) {
 
102
                                append({label: "List item #"+i, sectionData: "Limited, live move"});
 
103
                            }
 
104
                            for (i = 11; i < 25; i++) {
 
105
                                append({label: "List item #"+i, sectionData: "Unlimited, drag'n'drop"});
 
106
                            }
 
107
                        }
 
108
                    }
 
109
 
 
110
                    section {
 
111
                        property: "sectionData"
 
112
                        criteria: ViewSection.FullString
 
113
                        delegate: Header {
 
114
                            text: section
 
115
                        }
 
116
                    }
 
117
 
 
118
                    moveDisplaced: Transition {
 
119
                        UbuntuNumberAnimation {
 
120
                            properties: "x,y"
 
121
                        }
 
122
                    }
 
123
 
 
124
                    delegate: ListItem {
 
125
                        id: item
 
126
                        objectName: "ListItem-" + index
 
127
                        leadingActions: ListItemActions {
 
128
                            actions: deleteAction
 
129
                        }
 
130
                        trailingActions: ListItemActions {
 
131
                            actions: contextualActions
 
132
                        }
 
133
 
 
134
                        Rectangle {
 
135
                            anchors.fill: parent
 
136
                            color: item.dragging ? UbuntuColors.blue : "#69aa69"
 
137
                        }
 
138
                        Label {
 
139
                            text: label + " from index #" + index
 
140
                        }
 
141
 
 
142
                        onPressAndHold: {
 
143
                            print("entering/leaving draggable mode")
 
144
                            ListView.view.ViewItems.dragMode = !ListView.view.ViewItems.dragMode;
 
145
                        }
 
146
                    }
 
147
                }
 
148
            }
 
149
        }
 
150
        Tab {
 
151
            title: "Using DelegateModel"
 
152
            page: Page {
 
153
                ListView {
 
154
                    anchors.fill: parent
 
155
                    model: DelegateModel {
 
156
                        model: ["apple", "pear", "plum", "peach", "nuts", "dates"]
 
157
                        delegate: ListItem { Label { text: modelData } onPressAndHold: dragMode = !dragMode; }
 
158
                    }
 
159
                    ViewItems.onDragUpdated: {
 
160
                        if (event.status == ListItemDrag.Moving) {
 
161
                            event.accept = false
 
162
                        } else if (event.status == ListItemDrag.Dropped) {
 
163
                            var fromData = model.model[event.from];
 
164
                            var list = model.model;
 
165
                            list.splice(event.from, 1);
 
166
                            list.splice(event.to, 0, fromData);
 
167
                            model.model = list;
 
168
                        }
 
169
                    }
 
170
                }
 
171
            }
 
172
        }
 
173
    }
 
174
}