on xenial help sign in
New interaction method suggested by Design that looks more like what the Launcher does
3f7eff0Albert Astals
qml/Dash/ScopesListCategory.qml+30−13
@@ -61,15 +61,14 @@ Item {
61 width: parent.width
61 width: parent.width
62 interactive: false
62 interactive: false
63
63
64− removeDisplaced: Transition { UbuntuNumberAnimation { properties: "y" } }
65− move: Transition { UbuntuNumberAnimation { properties: "y" } }
66− moveDisplaced: Transition { UbuntuNumberAnimation { properties: "y" } }
67−
68 anchors.top: header.bottom
64 anchors.top: header.bottom
69 delegate: Loader {
65 delegate: Loader {
66+ id: loader
70 asynchronous: true
67 asynchronous: true
71 width: root.width
68 width: root.width
72 height: listItemHeight
69 height: listItemHeight
70+ clip: height != listItemHeight
71+ Behavior on height { enabled: visible; UbuntuNumberAnimation { } }
73 sourceComponent: ScopesListCategoryItem {
72 sourceComponent: ScopesListCategoryItem {
74 width: root.width
73 width: root.width
75
74
@@ -79,6 +78,8 @@ Item {
79 showStar: root.isFavoritesFeed || root.isOtherFeed
78 showStar: root.isFavoritesFeed || root.isOtherFeed
80 isFavorite: root.isFavoritesFeed
79 isFavorite: root.isFavoritesFeed
81
80
81+ hideChildren: dragItem.loaderToShrink == loader
82+
82 onClicked: {
83 onClicked: {
83 if (!editMode) {
84 if (!editMode) {
84 root.requestActivate(result);
85 root.requestActivate(result);
@@ -88,15 +89,18 @@ Item {
88 onPressed: {
89 onPressed: {
89 if (editMode) {
90 if (editMode) {
90 drag.target = dragItem;
91 drag.target = dragItem;
91− drag.maximumX = 0;
92+ drag.maximumX = units.gu(1);
92− drag.minimumX = 0;
93+ drag.minimumX = units.gu(1);
93 drag.minimumY = list.y - dragItem.height / 2;
94 drag.minimumY = list.y - dragItem.height / 2;
94 drag.maximumY = list.y + list.height - dragItem.height / 2
95 drag.maximumY = list.y + list.height - dragItem.height / 2
95 dragItem.icon = icon;
96 dragItem.icon = icon;
96 dragItem.text = text;
97 dragItem.text = text;
97 dragItem.subtext = subtext;
98 dragItem.subtext = subtext;
98− dragItem.y = mapToItem(root, 0, 0).y + units.gu(1)
99+ dragItem.originalY = mapToItem(root, 0, 0).y;
100+ dragItem.y = dragItem.originalY;
101+ dragItem.x = units.gu(1);
99 dragItem.visible = true;
102 dragItem.visible = true;
103+ dragItem.loaderToShrink = loader;
100 }
104 }
101 }
105 }
102 onPressAndHold: {
106 onPressAndHold: {
@@ -108,10 +112,12 @@ Item {
108 if (dragItem.visible) {
112 if (dragItem.visible) {
109 drag.target = undefined;
113 drag.target = undefined;
110 dragItem.visible = false;
114 dragItem.visible = false;
115+ dragMarker.visible = false;
111− if (dragMarker.index != index && dragMarker.index != index + 1) {
116+ if (dragMarker.index != index) {
112− var targetIndex = dragMarker.index > index ? dragMarker.index - 1 : dragMarker.index;
113− root.requestScopeMoveTo(model.scopeId, targetIndex);
117+ root.requestScopeMoveTo(model.scopeId, dragMarker.index);
114 }
118 }
119+ dragItem.loaderToShrink.height = listItemHeight;
120+ dragItem.loaderToShrink = null;
115 }
121 }
116 }
122 }
117 }
123 }
@@ -124,11 +130,11 @@ Item {
124 opacity: 0.3
130 opacity: 0.3
125 height: units.dp(2)
131 height: units.dp(2)
126 width: root.width
132 width: root.width
127− visible: dragItem.visible
133+ visible: false
128 property int index: {
134 property int index: {
129− var i = Math.round((dragItem.y - list.y) / listItemHeight);
135+ var i = Math.round((dragItem.y - list.y + dragItem.height/2) / listItemHeight);
130 if (i < 0) i = 0;
136 if (i < 0) i = 0;
131− if (i >= model.count) i = model.count;
137+ if (i >= model.count - 1) i = model.count - 1;
132 return i;
138 return i;
133 }
139 }
134 y: list.y + index * listItemHeight
140 y: list.y + index * listItemHeight
@@ -136,11 +142,22 @@ Item {
136
142
137 ScopesListCategoryItem {
143 ScopesListCategoryItem {
138 id: dragItem
144 id: dragItem
145+
146+ property real originalY
147+ property var loaderToShrink: null
148+
139 objectName: "dragItem"
149 objectName: "dragItem"
140 visible: false
150 visible: false
141 showStar: false
151 showStar: false
142 width: root.width
152 width: root.width
143 height: listItemHeight
153 height: listItemHeight
144 opacity: 0.9
154 opacity: 0.9
155+
156+ onYChanged: {
157+ if (!dragMarker.visible && Math.abs(y - originalY) > height / 2) {
158+ dragMarker.visible = true;
159+ loaderToShrink.height = 0;
160+ }
161+ }
145 }
162 }
146}
163}
qml/Dash/ScopesListCategoryItem.qml+4
@@ -27,6 +27,7 @@ MouseArea {
27 property alias showStar: star.visible
27 property alias showStar: star.visible
28
28
29 property bool isFavorite: false
29 property bool isFavorite: false
30+ property bool hideChildren: false
30
31
31 UbuntuShape {
32 UbuntuShape {
32 id: shape
33 id: shape
@@ -37,6 +38,7 @@ MouseArea {
37 }
38 }
38 width: units.gu(5)
39 width: units.gu(5)
39 height: units.gu(5)
40 height: units.gu(5)
41+ visible: !hideChildren
40 image: Image {
42 image: Image {
41 id: shapeImage
43 id: shapeImage
42 cache: true
44 cache: true
@@ -45,6 +47,7 @@ MouseArea {
45 }
47 }
46
48
47 ColumnLayout {
49 ColumnLayout {
50+ visible: !hideChildren
48 anchors {
51 anchors {
49 left: shape.right
52 left: shape.right
50 leftMargin: units.gu(1)
53 leftMargin: units.gu(1)
@@ -75,6 +78,7 @@ MouseArea {
75 width: height
78 width: height
76 anchors.right: parent.right
79 anchors.right: parent.right
77 enabled: !editMode
80 enabled: !editMode
81+ visible: !hideChildren
78 onClicked: root.requestFavorite(model.scopeId, !isFavorite);
82 onClicked: root.requestFavorite(model.scopeId, !isFavorite);
79 Icon {
83 Icon {
80 id: star
84 id: star