From 453b7d1007dd5bd043d27b6bfb5cf3340555488d Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Wed, 14 Feb 2018 16:37:32 +0000
Subject: [PATCH 1/3] Implement riot-web side of dragging GroupTile avatars to
 TagPanel

for adding groups to the TagPanel.
---
 src/components/structures/LeftPanel.js        | 72 ++++---------------
 .../structures/_MyGroups.scss                 |  4 ++
 2 files changed, 17 insertions(+), 59 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index cf101669..7f59db7d 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -19,7 +19,6 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { DragDropContext } from 'react-beautiful-dnd';
 import { MatrixClient } from 'matrix-js-sdk';
 import { KeyCode } from 'matrix-react-sdk/lib/Keyboard';
 import sdk from 'matrix-react-sdk';
@@ -27,8 +26,6 @@ import dis from 'matrix-react-sdk/lib/dispatcher';
 import VectorConferenceHandler from '../../VectorConferenceHandler';
 
 import SettingsStore from 'matrix-react-sdk/lib/settings/SettingsStore';
-import TagOrderActions from 'matrix-react-sdk/lib/actions/TagOrderActions';
-import RoomListActions from 'matrix-react-sdk/lib/actions/RoomListActions';
 
 
 var LeftPanel = React.createClass({
@@ -170,47 +167,6 @@ var LeftPanel = React.createClass({
         this.setState({ searchFilter: term });
     },
 
-    onDragEnd: function(result) {
-        // Dragged to an invalid destination, not onto a droppable
-        if (!result.destination) {
-            return;
-        }
-
-        const dest = result.destination.droppableId;
-
-        if (dest === 'tag-panel-droppable') {
-            // Dispatch synchronously so that the TagPanel receives an
-            // optimistic update from TagOrderStore before the previous
-            // state is shown.
-            dis.dispatch(TagOrderActions.moveTag(
-                this.context.matrixClient,
-                result.draggableId,
-                result.destination.index,
-            ), true);
-        } else {
-            this.onRoomTileEndDrag(result);
-        }
-    },
-
-    onRoomTileEndDrag: function(result) {
-        let newTag = result.destination.droppableId.split('_')[1];
-        let prevTag = result.source.droppableId.split('_')[1];
-        if (newTag === 'undefined') newTag = undefined;
-        if (prevTag === 'undefined') prevTag = undefined;
-
-        const roomId = result.draggableId.split('_')[1];
-
-        const oldIndex = result.source.index;
-        const newIndex = result.destination.index;
-
-        dis.dispatch(RoomListActions.tagRoom(
-            this.context.matrixClient,
-            this.context.matrixClient.getRoom(roomId),
-            prevTag, newTag,
-            oldIndex, newIndex,
-        ), true);
-    },
-
     collectRoomList: function(ref) {
         this._roomList = ref;
     },
@@ -250,21 +206,19 @@ var LeftPanel = React.createClass({
         );
 
         return (
-            <DragDropContext onDragEnd={this.onDragEnd}>
-                <div className={containerClasses}>
-                    { tagPanel }
-                    <aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
-                        { topBox }
-                        <CallPreview ConferenceHandler={VectorConferenceHandler} />
-                        <RoomList
-                            ref={this.collectRoomList}
-                            collapsed={this.props.collapsed}
-                            searchFilter={this.state.searchFilter}
-                            ConferenceHandler={VectorConferenceHandler} />
-                        <BottomLeftMenu collapsed={this.props.collapsed}/>
-                    </aside>
-                </div>
-            </DragDropContext>
+            <div className={containerClasses}>
+                { tagPanel }
+                <aside className={classes} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
+                    { topBox }
+                    <CallPreview ConferenceHandler={VectorConferenceHandler} />
+                    <RoomList
+                        ref={this.collectRoomList}
+                        collapsed={this.props.collapsed}
+                        searchFilter={this.state.searchFilter}
+                        ConferenceHandler={VectorConferenceHandler} />
+                    <BottomLeftMenu collapsed={this.props.collapsed}/>
+                </aside>
+            </div>
         );
     }
 });
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
index 3fa86133..3de9ecf4 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
@@ -115,6 +115,10 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_GroupTile_avatar {
+    cursor: -webkit-grab;
+}
+
 .mx_GroupTile_profile {
     margin-left: 10px;
     display: flex;

From 594d510f4fa54676969a79880932e1df07f340e7 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Wed, 14 Feb 2018 17:54:29 +0000
Subject: [PATCH 2/3] Simplify MyGroups hierachy

---
 .../vector/css/matrix-react-sdk/structures/_MyGroups.scss     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
index 3de9ecf4..685deffc 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
@@ -94,7 +94,7 @@ limitations under the License.
     text-align: center;
 }
 
-.mx_MyGroups_joinedGroups .gm-scroll-view {
+.mx_MyGroups_joinedGroups {
     border-top: 1px solid $primary-hairline-color;
     overflow-x: hidden;
 
@@ -104,7 +104,7 @@ limitations under the License.
     align-content: flex-start;
 }
 
-.mx_MyGroups_joinedGroups .gm-scroll-view .mx_GroupTile {
+.mx_MyGroups_joinedGroups .mx_GroupTile {
     min-width: 300px;
     max-width: 33%;
     flex: 1 0 300px;

From f64fefa9ae59a201f24070eefdba19e88959ba2a Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Thu, 15 Feb 2018 10:52:10 +0000
Subject: [PATCH 3/3] Use `grab` as some browsers e.g. firefox support it

---
 src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
index 685deffc..576ea123 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
@@ -116,7 +116,7 @@ limitations under the License.
 }
 
 .mx_GroupTile_avatar {
-    cursor: -webkit-grab;
+    cursor: grab, -webkit-grab;
 }
 
 .mx_GroupTile_profile {