@@ -15,7 +15,7 @@
1515 */
1616
1717import QtQuick 2.0
18−import Ubuntu.Components 1.1;
18+import Ubuntu.Components 1.1
1919import Dash 0.1
2020import "../Components/ListItems" as ListItems
2121
@@ -27,8 +27,11 @@ Item {
2727 property bool isFavoriteFeeds: false
2828 property bool editMode: false
2929
30+ visible: !editMode || isFavoriteFeeds
31+
3032 signal requestFavorite(string scopeId, bool favorite)
3133 signal requestEditMode()
34+ signal requestScopeMoveTo(string scopeId, int index)
3235
3336 implicitHeight: childrenRect.height
3437
@@ -43,10 +46,12 @@ Item {
4346 property var myTemplate: JSON.parse('{"card-layout":"horizontal","card-size":"small","category-layout":"grid","collapsed-rows":2}')
4447 property var myComponents: JSON.parse('{"art":{"aspect-ratio":1,"field":"art"},"title":{"field":"title"},"attributes":{}}')
4548
49+ readonly property double listItemHeight: units.gu(6)
50+
4651 ListView {
4752 id: list
4853
49− readonly property double targetHeight: model.count * units.gu(6)
54+ readonly property double targetHeight: model.count * listItemHeight
5055 clip: height != targetHeight
5156 height: targetHeight
5257 Behavior on height { enabled: visible; UbuntuNumberAnimation { } }
@@ -59,59 +64,63 @@ Item {
5964 delegate: Loader {
6065 asynchronous: true
6166 width: root.width
62− height: units.gu(6)
63− sourceComponent: MouseArea {
67+ height: listItemHeight
68+ sourceComponent: ScopesListCategoryItem {
6469 width: root.width
65− UbuntuShape {
66− id: shape
67− anchors {
68− left: parent.left
69− leftMargin: units.gu(1)
70− verticalCenter: parent.verticalCenter
71− }
72− width: units.gu(5)
73− height: units.gu(5)
74− image: Image {
75− source: model["art"] || ""
76− cache: true
77− fillMode: Image.PreserveAspectCrop
78− }
79− }
80− Label {
81− id: titleLabel
82− anchors {
83− left: shape.right
84− leftMargin: units.gu(1)
85− right: star.right
86− rightMargin: units.gu(1)
87− verticalCenter: parent.verticalCenter
70+
71+ icon: model.art || ""
72+ text: model.title || ""
73+ showStar: model.scopeId != "clickscope"
74+
75+ onRequestFavorite: root.requestFavorite(model.scopeId, favorite);
76+ onPressAndHold: {
77+ if (!editMode) {
78+ root.requestEditMode();
79+ } else {
80+ dragItem.icon = icon;
81+ dragItem.text = text;
82+ dragItem.x = units.gu(1)
83+ dragItem.y = mapToItem(root, 0, 0).y + units.gu(1)
84+ drag.target = dragItem;
85+ dragItem.visible = true;
8886 }
89− text: model["title"] || ""
90− elide: Text.ElideRight
91− wrapMode: Text.Wrap
92− maximumLineCount: 1
93− verticalAlignment: Text.AlignHCenter
9487 }
95− Icon {
96− id: star
97− anchors {
98− right: parent.right
99− rightMargin: units.gu(1)
100− verticalCenter: parent.verticalCenter
101− }
102− height: units.gu(2)
103− width: units.gu(2)
104− visible: model.scopeId != "clickscope" && (isFavoriteFeeds || !editMode)
105− // TODO is view-grid-symbolic what we really want here? Looks good but seems semantically wrong
106− source: editMode ? "image://theme/view-grid-symbolic" : isFavoriteFeeds ? "image://theme/starred" : "image://theme/non-starred"
107− MouseArea {
108− anchors.fill: parent
109− onClicked: root.requestFavorite(model.scopeId, !isFavoriteFeeds);
88+ onReleased: {
89+ if (dragItem.visible) {
90+ dragItem.visible = false;
91+ if (dragMarker.index != index && dragMarker.index != index + 1) {
92+ var targetIndex = dragMarker.index > index ? dragMarker.index - 1 : dragMarker.index;
93+ root.requestScopeMoveTo(model.scopeId, targetIndex);
94+ }
11095 }
11196 }
112−
113− onPressAndHold: root.requestEditMode();
11497 }
11598 }
11699 }
100+
101+ Rectangle {
102+ id: dragMarker
103+ color: "black"
104+ opacity: 0.3
105+ height: units.dp(2)
106+ width: root.width
107+ visible: dragItem.visible
108+ property int index: {
109+ var i = Math.round((dragItem.y - list.y) / listItemHeight);
110+ if (i <= 0) i = 1;
111+ if (i >= model.count) i = model.count;
112+ return i;
113+ }
114+ y: list.y + index * listItemHeight
115+ }
116+
117+ ScopesListCategoryItem {
118+ id: dragItem
119+ objectName: "dragItem"
120+ visible: false
121+ showStar: false
122+ width: root.width
123+ height: listItemHeight
124+ opacity: 0.9
125+ }
117126}