← Back to branch summary

~mterry/unity8/greeter-misc-cleanups

« back to all changes in this revision

Viewing changes to qml/Dash/DashNavigation.qml

  • Committer: Michael Terry
  • Date: 2014-08-07 15:30:54 UTC
  • mfrom: (1086.1.48 unity8)
  • Revision ID: michael.terry@canonical.com-20140807153054-nqahwmptl0dw9bum
Merge from trunk

Show diffs side-by-side

added added

removed removed

Lines of Context:
qml/Dash/DashNavigation.qml
15
15
 */
16
16
 
17
17
import QtQuick 2.2
18
 
import Ubuntu.Components 0.1
 
18
import Ubuntu.Components 1.1
19
19
 
20
20
AbstractButton {
21
21
    id: root
22
 
    objectName: "dashDepartments"
 
22
    objectName: "dashNavigation"
23
23
 
24
24
    property var scope: null
25
25
 
26
26
    property bool showList: false
27
27
 
28
 
    readonly property var currentDepartment: scope && scope.hasDepartments ? scope.getDepartment(scope.currentDepartmentId) : null
 
28
    readonly property var currentNavigation: scope && scope.hasNavigation ? scope.getNavigation(scope.currentNavigationId) : null
29
29
 
30
30
    property alias windowWidth: blackRect.width
31
31
    property alias windowHeight: blackRect.height
34
34
    // Are we drilling down the tree or up?
35
35
    property bool isGoingBack: false
36
36
 
37
 
    visible: root.currentDepartment != null
 
37
    visible: root.currentNavigation != null
38
38
 
39
39
    height: visible ? units.gu(5) : 0
40
40
 
41
41
    onClicked: {
 
42
        navigationListView.updateMaxHeight();
42
43
        root.showList = !root.showList;
43
44
    }
44
45
 
45
46
    Rectangle {
46
47
        id: blackRect
47
48
        color: "black"
48
 
        opacity: departmentListView.currentItem && departmentListView.currentItem.visible ? 0.3 : 0
 
49
        opacity: navigationListView.currentItem && navigationListView.currentItem.visible ? 0.3 : 0
49
50
        Behavior on opacity { UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration } }
50
 
        anchors.top: departmentListView.top
 
51
        anchors.top: navigationListView.top
51
52
        anchors.right: parent.right
52
53
        visible: opacity != 0
53
54
    }
78
79
        anchors.fill: parent
79
80
        anchors.margins: units.gu(2)
80
81
        verticalAlignment: Text.AlignVCenter
81
 
        text: root.currentDepartment ? root.currentDepartment.label : ""
 
82
        text: root.currentNavigation ? root.currentNavigation.label : ""
82
83
        color: root.scopeStyle ? root.scopeStyle.foreground : "grey"
83
84
    }
84
85
 
92
93
        color: root.scopeStyle ? root.scopeStyle.foreground : "grey"
93
94
    }
94
95
 
95
 
    //  departmentListView is outside root
 
96
    //  navigationListView is outside root
96
97
    ListView {
97
 
        id: departmentListView
98
 
        objectName: "departmentListView"
 
98
        id: navigationListView
 
99
        objectName: "navigationListView"
99
100
        orientation: ListView.Horizontal
100
101
        interactive: false
101
102
        clip: root.width != windowWidth
102
103
        model: ListModel {
103
 
            id: departmentModel
 
104
            id: navigationModel
104
105
            // We have two roles
105
 
            // departmentId: the department id of the department the list represents
106
 
            // nullifyDepartment: overrides departmentId to be null
 
106
            // navigationId: the navigation id of the navigation the list represents
 
107
            // nullifyNavigation: overrides navigationId to be null
107
108
            //                    This is used to "clear" the delegate when going "right" on the tree
108
109
        }
109
110
        anchors {
111
112
            right: parent.right
112
113
            top: root.bottom
113
114
        }
114
 
        readonly property int maxHeight: (windowHeight - mapToItem(null, root.x, root.y).y) - units.gu(8)
 
115
        property int maxHeight: -1
 
116
        Component.onCompleted: updateMaxHeight();
 
117
        function updateMaxHeight()
 
118
        {
 
119
            maxHeight = (windowHeight - mapToItem(null, 0, 0).y) - units.gu(8);
 
120
        }
115
121
        property int prevHeight: maxHeight
116
122
        height: currentItem ? currentItem.height : maxHeight
117
123
        onHeightChanged: {
120
126
            }
121
127
        }
122
128
        highlightMoveDuration: UbuntuAnimation.FastDuration
123
 
        delegate: DashDepartmentsList {
124
 
            objectName: "department" + index
 
129
        delegate: DashNavigationList {
 
130
            objectName: "navigation" + index
125
131
            visible: height != 0
126
 
            width: departmentListView.width
 
132
            width: navigationListView.width
127
133
            scopeStyle: root.scopeStyle
128
134
            property real desiredHeight: {
129
135
                if (root.showList) {
130
 
                    if (department && department.loaded && x == departmentListView.contentX)
 
136
                    if (navigation && navigation.loaded && x == navigationListView.contentX)
131
137
                    {
132
 
                        return Math.min(implicitHeight, departmentListView.maxHeight);
 
138
                        navigationListView.updateMaxHeight();
 
139
                        return Math.min(implicitHeight, navigationListView.maxHeight);
133
140
                    } else {
134
 
                        return departmentListView.prevHeight;
 
141
                        return navigationListView.prevHeight;
135
142
                    }
136
143
                } else {
137
144
                    return 0;
138
145
                }
139
146
            }
140
147
            height: desiredHeight
141
 
            department: (nullifyDepartment || !scope) ? null : scope.getDepartment(departmentId)
142
 
            currentDepartment: root.currentDepartment
143
 
            onEnterDepartment: {
144
 
                scope.loadDepartment(newDepartmentId);
 
148
            navigation: (nullifyNavigation || !scope) ? null : scope.getNavigation(navigationId)
 
149
            currentNavigation: root.currentNavigation
 
150
            onEnterNavigation: {
 
151
                scope.setNavigationState(newNavigationId, false);
145
152
                // We only need to add a new item to the model
146
153
                // if we have children, otherwise just load it
147
154
                if (hasChildren) {
148
155
                    isGoingBack = false;
149
 
                    departmentModel.append({"departmentId": newDepartmentId, "nullifyDepartment": false});
150
 
                    departmentListView.currentIndex++;
 
156
                    navigationModel.append({"navigationId": newNavigationId, "nullifyNavigation": false});
 
157
                    navigationListView.currentIndex++;
151
158
                } else {
152
159
                    showList = false;
153
160
                }
154
161
            }
155
162
            onGoBackToParentClicked: {
156
 
                scope.loadDepartment(department.parentDepartmentId);
 
163
                scope.setNavigationState(navigation.parentNavigationId, false);
157
164
                isGoingBack = true;
158
 
                departmentModel.setProperty(departmentListView.currentIndex - 1, "nullifyDepartment", false);
159
 
                departmentListView.currentIndex--;
 
165
                navigationModel.setProperty(navigationListView.currentIndex - 1, "nullifyNavigation", false);
 
166
                navigationListView.currentIndex--;
160
167
            }
161
 
            onAllDepartmentClicked: {
 
168
            onAllNavigationClicked: {
162
169
                showList = false;
163
 
                if (root.currentDepartment.parentDepartmentId == department.departmentId) {
 
170
                if (root.currentNavigation.parentNavigationId == navigation.navigationId) {
164
171
                    // For leaves we have to go to the parent too
165
 
                    scope.loadDepartment(root.currentDepartment.parentDepartmentId);
 
172
                    scope.setNavigationState(root.currentNavigation.parentNavigationId, false);
166
173
                }
167
174
            }
168
175
        }
169
176
        onContentXChanged: {
170
 
            if (contentX == width * departmentListView.currentIndex) {
 
177
            if (contentX == width * navigationListView.currentIndex) {
171
178
                if (isGoingBack) {
172
 
                    departmentModel.remove(departmentListView.currentIndex + 1);
 
179
                    navigationModel.remove(navigationListView.currentIndex + 1);
173
180
                } else {
174
 
                    departmentModel.setProperty(departmentListView.currentIndex - 1, "nullifyDepartment", true);
 
181
                    navigationModel.setProperty(navigationListView.currentIndex - 1, "nullifyNavigation", true);
175
182
                }
176
183
            }
177
184
        }
178
185
    }
179
186
 
180
187
    InverseMouseArea {
181
 
        anchors.fill: departmentListView
 
188
        anchors.fill: navigationListView
182
189
        enabled: root.showList
183
190
        onClicked: root.showList = false
184
191
    }
185
192
 
186
193
    onScopeChanged: {
187
 
        departmentModel.clear();
188
 
        if (scope && scope.hasDepartments) {
189
 
            departmentModel.append({"departmentId": scope.currentDepartmentId, "nullifyDepartment": false});
 
194
        navigationModel.clear();
 
195
        if (scope && scope.hasNavigation) {
 
196
            navigationModel.append({"navigationId": scope.currentNavigationId, "nullifyNavigation": false});
190
197
        }
191
198
    }
192
199
 
193
200
    Connections {
194
201
        target: scope
195
 
        onHasDepartmentsChanged: {
196
 
            if (scope.hasDepartments) {
197
 
                departmentModel.append({"departmentId": scope.currentDepartmentId, "nullifyDepartment": false});
 
202
        onHasNavigationChanged: {
 
203
            if (scope.hasNavigation) {
 
204
                navigationModel.append({"navigationId": scope.currentNavigationId, "nullifyNavigation": false});
198
205
            } else {
199
 
                departmentModel.clear();
 
206
                navigationModel.clear();
200
207
            }
201
208
        }
202
209
    }