diff options
Diffstat (limited to 'components/package/contents/ui/FolderListView.qml')
-rw-r--r-- | components/package/contents/ui/FolderListView.qml | 202 |
1 files changed, 152 insertions, 50 deletions
diff --git a/components/package/contents/ui/FolderListView.qml b/components/package/contents/ui/FolderListView.qml index fafc1623..f660846d 100644 --- a/components/package/contents/ui/FolderListView.qml +++ b/components/package/contents/ui/FolderListView.qml | |||
@@ -46,72 +46,174 @@ Item { | |||
46 | } | 46 | } |
47 | } | 47 | } |
48 | 48 | ||
49 | TreeView { | 49 | Rectangle { |
50 | id: treeView | ||
51 | anchors { | 50 | anchors { |
52 | top: searchBox.bottom | 51 | top: searchBox.bottom |
53 | left: parent.left | 52 | left: parent.left |
54 | right: parent.right | 53 | right: parent.right |
55 | bottom: parent.bottom | 54 | bottom: parent.bottom |
56 | } | 55 | } |
57 | TableViewColumn { | 56 | color: "white" |
58 | title: "Name" | 57 | ScrollView { |
59 | role: "name" | 58 | anchors.fill: parent |
60 | width: treeView.width - 5 | 59 | ListView { |
61 | } | 60 | id: listView |
62 | model: KubeFramework.FolderListModel { id: folderListModel } | 61 | anchors.fill: parent |
63 | onCurrentIndexChanged: { | 62 | delegate: accountDelegate |
64 | model.fetchMore(currentIndex) | 63 | model: KubeFramework.AccountsModel { id: accountsModel } |
65 | root.currentFolder = model.data(currentIndex, KubeFramework.FolderListModel.DomainObject) | ||
66 | } | ||
67 | backgroundVisible: false | ||
68 | headerVisible: false | ||
69 | style: TreeViewStyle { | ||
70 | activateItemOnSingleClick: true | ||
71 | rowDelegate: Rectangle { | ||
72 | height: Unit.size * 10 | ||
73 | color: "transparent" | ||
74 | } | 64 | } |
75 | itemDelegate: Rectangle { | 65 | } |
76 | radius: 5 | 66 | } |
77 | border.width: 1 | 67 | |
78 | border.color: "lightgrey" | 68 | Component { |
79 | color: styleData.selected ? colorPalette.highlight : colorPalette.button | 69 | id: accountDelegate |
70 | |||
71 | Item { | ||
72 | id: wrapper | ||
73 | |||
74 | property var accountId: model.accountId | ||
75 | |||
76 | width: listView.width | ||
77 | height: 30 | ||
78 | |||
79 | Rectangle { | ||
80 | id: headerView | ||
81 | anchors.left: parent.left | ||
82 | anchors.right: parent.right | ||
83 | anchors.top: parent.top | ||
84 | |||
85 | height: 30 | ||
86 | |||
87 | color: "#333" | ||
88 | border.color: Qt.lighter(color, 1.2) | ||
80 | PlasmaCore.IconItem { | 89 | PlasmaCore.IconItem { |
81 | id: iconItem | 90 | id: iconItem |
82 | anchors { | 91 | anchors.left: parent.left |
83 | verticalCenter: parent.verticalCenter | 92 | anchors.verticalCenter: parent.verticalCenter |
84 | left: parent.left | 93 | anchors.leftMargin: 4 |
85 | leftMargin: Unit.size * 3 | ||
86 | } | ||
87 | source: model.icon | 94 | source: model.icon |
88 | } | 95 | } |
89 | Label { | 96 | Text { |
90 | anchors { | 97 | anchors.left: iconItem.right |
91 | verticalCenter: parent.verticalCenter | 98 | anchors.verticalCenter: parent.verticalCenter |
92 | left: iconItem.right | 99 | anchors.leftMargin: 4 |
93 | leftMargin: Unit.size * 3 | 100 | |
101 | font.pixelSize: parent.height-4 | ||
102 | color: '#fff' | ||
103 | |||
104 | text: name | ||
105 | } | ||
106 | } | ||
107 | |||
108 | MouseArea { | ||
109 | anchors.fill: parent | ||
110 | onClicked: { | ||
111 | if (parent.state != "expanded") { | ||
112 | parent.state = "expanded"; | ||
113 | } else { | ||
114 | parent.state = "" | ||
94 | } | 115 | } |
95 | renderType: Text.NativeRendering | ||
96 | text: styleData.value | ||
97 | font.pixelSize: 16 | ||
98 | font.bold: true | ||
99 | color: styleData.selected ? colorPalette.highlightedText : colorPalette.text | ||
100 | } | 116 | } |
101 | } | 117 | } |
102 | branchDelegate: Item { | 118 | |
103 | width: 16 | 119 | Item { |
104 | height: 16 | 120 | id: folderView |
105 | Text { | 121 | |
106 | visible: styleData.column === 0 && styleData.hasChildren | 122 | anchors.top: headerView.bottom |
107 | text: styleData.isExpanded ? "\u25bc" : "\u25b6" | 123 | anchors.left: parent.left |
108 | color: !control.activeFocus || styleData.selected ? styleData.textColor : "#666" | 124 | anchors.right: parent.right |
109 | font.pointSize: 10 | 125 | anchors.bottom: parent.bottom |
110 | renderType: Text.NativeRendering | 126 | |
111 | anchors.centerIn: parent | 127 | opacity: 0 |
112 | anchors.verticalCenterOffset: styleData.isExpanded ? 2 : 0 | 128 | visible: false |
129 | |||
130 | Rectangle { | ||
131 | anchors.fill: parent | ||
132 | TreeView { | ||
133 | anchors.fill: parent | ||
134 | id: treeView | ||
135 | TableViewColumn { | ||
136 | title: "Name" | ||
137 | role: "name" | ||
138 | width: treeView.width - 5 | ||
139 | } | ||
140 | model: KubeFramework.FolderListModel { id: folderListModel; accountId: wrapper.accountId } | ||
141 | onCurrentIndexChanged: { | ||
142 | model.fetchMore(currentIndex) | ||
143 | root.currentFolder = model.data(currentIndex, KubeFramework.FolderListModel.DomainObject) | ||
144 | } | ||
145 | backgroundVisible: false | ||
146 | headerVisible: false | ||
147 | style: TreeViewStyle { | ||
148 | activateItemOnSingleClick: true | ||
149 | rowDelegate: Rectangle { | ||
150 | height: Unit.size * 10 | ||
151 | color: "transparent" | ||
152 | } | ||
153 | itemDelegate: Rectangle { | ||
154 | radius: 5 | ||
155 | border.width: 1 | ||
156 | border.color: "lightgrey" | ||
157 | color: styleData.selected ? colorPalette.highlight : colorPalette.button | ||
158 | PlasmaCore.IconItem { | ||
159 | id: iconItem | ||
160 | anchors { | ||
161 | verticalCenter: parent.verticalCenter | ||
162 | left: parent.left | ||
163 | leftMargin: Unit.size * 3 | ||
164 | } | ||
165 | source: model.icon | ||
166 | } | ||
167 | Label { | ||
168 | anchors { | ||
169 | verticalCenter: parent.verticalCenter | ||
170 | left: iconItem.right | ||
171 | leftMargin: Unit.size * 3 | ||
172 | } | ||
173 | renderType: Text.NativeRendering | ||
174 | text: styleData.value | ||
175 | font.pixelSize: 16 | ||
176 | font.bold: true | ||
177 | color: styleData.selected ? colorPalette.highlightedText : colorPalette.text | ||
178 | } | ||
179 | } | ||
180 | branchDelegate: Item { | ||
181 | width: 16 | ||
182 | height: 16 | ||
183 | Text { | ||
184 | visible: styleData.column === 0 && styleData.hasChildren | ||
185 | text: styleData.isExpanded ? "\u25bc" : "\u25b6" | ||
186 | color: !control.activeFocus || styleData.selected ? styleData.textColor : "#666" | ||
187 | font.pointSize: 10 | ||
188 | renderType: Text.NativeRendering | ||
189 | anchors.centerIn: parent | ||
190 | anchors.verticalCenterOffset: styleData.isExpanded ? 2 : 0 | ||
191 | } | ||
192 | } | ||
193 | } | ||
194 | } | ||
113 | } | 195 | } |
114 | } | 196 | } |
197 | |||
198 | states: [ | ||
199 | State { | ||
200 | name: "expanded" | ||
201 | |||
202 | PropertyChanges { target: wrapper; height: listView.height - accountsModel.rowCount() * 30 } | ||
203 | PropertyChanges { target: folderView; opacity: 1; visible: true } | ||
204 | PropertyChanges { target: wrapper.ListView.view; contentY: wrapper.y; interactive: false } | ||
205 | } | ||
206 | ] | ||
207 | |||
208 | transitions: [ | ||
209 | Transition { | ||
210 | NumberAnimation { | ||
211 | duration: 150; | ||
212 | properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY" | ||
213 | } | ||
214 | } | ||
215 | ] | ||
115 | } | 216 | } |
116 | } | 217 | } |
218 | |||
117 | } | 219 | } |