imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Give each GroupTile avatar its own droppable

Browse source 
so that they can be dragged and dropped
without interacting with each other, as
they would do if GroupView contained
one droppable to contain them all.
This commit is contained in:
Luke Barnard 2018-02-14 17:53:54 +00:00
parent 389d96bc46
commit 3948ee8ca1
2 changed files with 35 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/structures/MyGroups.js
View file

@ -17,7 +17,6 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import GeminiScrollbar from 'react-gemini-scrollbar';
import { Droppable } from 'react-beautiful-dnd';
import sdk from '../../index';
import { _t } from '../../languageHandler';
import dis from '../../dispatcher';
@ -74,14 +73,10 @@ export default withMatrixClient(React.createClass({
});
contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
content = groupNodes.length > 0 ?
<GeminiScrollbar className="mx_MyGroups_joinedGroups">
<Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
{ (provided, snapshot) => (
<div ref={provided.innerRef}>
<GeminiScrollbar>
<div className="mx_MyGroups_joinedGroups">
{ groupNodes }
</div>
) }
</Droppable>
</GeminiScrollbar> :
<div className="mx_MyGroups_placeholder">
{ _t(

8
src/components/views/groups/GroupTile.js
View file

@ -17,7 +17,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import {MatrixClient} from 'matrix-js-sdk';
import { Draggable } from 'react-beautiful-dnd';
import { Draggable, Droppable } from 'react-beautiful-dnd';
import sdk from '../../../index';
import dis from '../../../dispatcher';
import FlairStore from '../../../stores/FlairStore';
@ -80,6 +80,9 @@ const GroupTile = React.createClass({
profile.avatarUrl, avatarHeight, avatarHeight, "crop",
) : null;
return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
<Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
{ (droppableProvided, droppableSnapshot) => (
<div ref={droppableProvided.innerRef}>
<Draggable
key={"GroupTile " + this.props.groupId}
draggableId={"GroupTile " + this.props.groupId}
@ -107,6 +110,9 @@ const GroupTile = React.createClass({
</div>
) }
</Draggable>
</div>
) }
</Droppable>
<div className="mx_GroupTile_profile">
<div className="mx_GroupTile_name">{ name }</div>
{ descElement }