diff --git a/src/components/views/rooms/DNDRoomTile.js b/src/components/views/rooms/DNDRoomTile.js index 1adb2a79a3..129e3f4597 100644 --- a/src/components/views/rooms/DNDRoomTile.js +++ b/src/components/views/rooms/DNDRoomTile.js @@ -18,18 +18,19 @@ import React from 'react'; import { Draggable } from 'react-beautiful-dnd'; import RoomTile from 'matrix-react-sdk/lib/components/views/rooms/RoomTile'; +import classNames from 'classnames'; + export default class DNDRoomTile extends React.Component { constructor() { super(); - this.getStyle = this.getStyle.bind(this); + this.getClassName = this.getClassName.bind(this); } - getStyle(isDragging) { - const result = { - transform: isDragging ? "scale(1.05, 1.05)" : "none", - transition: "transform 0.2s", - }; - return result; + getClassName(isDragging) { + return classNames({ + "mx_DNDRoomTile": true, + "mx_DNDRoomTile_dragging": isDragging, + }); } render() { @@ -49,7 +50,7 @@ export default class DNDRoomTile extends React.Component { {...provided.draggableProps} {...provided.dragHandleProps} > -
+
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss index c9e7022e22..a59cd3e80b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss @@ -157,6 +157,15 @@ limitations under the License. background-color: $roomtile-selected-bg-color; } +.mx_DNDRoomTile { + transform: none; + transition: transform 0.2s; +} + +.mx_DNDRoomTile_dragging { + transform: scale(1.05, 1.05); +} + .mx_RoomTile:focus { filter: none ! important; background-color: $roomtile-focused-bg-color;