PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use classNames instead of inline style

Browse source 
Theres no benefit to using inline styles
This commit is contained in:
lukebarnard 2018-01-18 18:08:18 +00:00
parent 3481283af8
commit d55d3658f0
2 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/views/rooms/DNDRoomTile.js
View file

@ -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}
>
<div style={this.getStyle(snapshot.isDragging)}>
<div className={this.getClassName(snapshot.isDragging)}>
<RoomTile {...props} />
</div>
</div>

9
src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
View file

@ -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;