Make GroupTile avatar draggable
This commit is contained in:
parent
74c8a74e7d
commit
3850b552a5
1 changed files with 29 additions and 3 deletions
|
@ -17,10 +17,12 @@ limitations under the License.
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {MatrixClient} from 'matrix-js-sdk';
|
import {MatrixClient} from 'matrix-js-sdk';
|
||||||
|
import { Draggable } from 'react-beautiful-dnd';
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
import dis from '../../../dispatcher';
|
import dis from '../../../dispatcher';
|
||||||
import FlairStore from '../../../stores/FlairStore';
|
import FlairStore from '../../../stores/FlairStore';
|
||||||
|
|
||||||
|
|
||||||
const GroupTile = React.createClass({
|
const GroupTile = React.createClass({
|
||||||
displayName: 'GroupTile',
|
displayName: 'GroupTile',
|
||||||
|
|
||||||
|
@ -78,9 +80,33 @@ const GroupTile = React.createClass({
|
||||||
profile.avatarUrl, avatarHeight, avatarHeight, "crop",
|
profile.avatarUrl, avatarHeight, avatarHeight, "crop",
|
||||||
) : null;
|
) : null;
|
||||||
return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
|
return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
|
||||||
|
<Draggable
|
||||||
|
key={"GroupTile " + this.props.groupId}
|
||||||
|
draggableId={"GroupTile " + this.props.groupId}
|
||||||
|
index={this.props.groupId}
|
||||||
|
type="draggable-TagTile"
|
||||||
|
>
|
||||||
|
{ (provided, snapshot) => (
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
ref={provided.innerRef}
|
||||||
|
{...provided.draggableProps}
|
||||||
|
{...provided.dragHandleProps}
|
||||||
|
>
|
||||||
<div className="mx_GroupTile_avatar">
|
<div className="mx_GroupTile_avatar">
|
||||||
<BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
|
<BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
{ /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
|
||||||
|
{ provided.placeholder ?
|
||||||
|
<div className="mx_GroupTile_avatar">
|
||||||
|
<BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
|
||||||
|
</div> :
|
||||||
|
<div />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
) }
|
||||||
|
</Draggable>
|
||||||
<div className="mx_GroupTile_profile">
|
<div className="mx_GroupTile_profile">
|
||||||
<div className="mx_GroupTile_name">{ name }</div>
|
<div className="mx_GroupTile_name">{ name }</div>
|
||||||
{ descElement }
|
{ descElement }
|
||||||
|
|
Loading…
Reference in a new issue