Matrix-Mirrors/schildi-web
1
0
Fork 0
mirror of https://github.com/SchildiChat/element-web.git synced 2024-10-01 01:26:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

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 { Draggable } from 'react-beautiful-dnd';
import RoomTile from 'matrix-react-sdk/lib/components/views/rooms/RoomTile'; import RoomTile from 'matrix-react-sdk/lib/components/views/rooms/RoomTile';
import classNames from 'classnames';
export default class DNDRoomTile extends React.Component { export default class DNDRoomTile extends React.Component {
constructor() { constructor() {
super(); super();
this.getStyle = this.getStyle.bind(this); this.getClassName = this.getClassName.bind(this);
} }
getStyle(isDragging) { getClassName(isDragging) {
const result = { return classNames({
transform: isDragging ? "scale(1.05, 1.05)" : "none", "mx_DNDRoomTile": true,
transition: "transform 0.2s", "mx_DNDRoomTile_dragging": isDragging,
}; });
return result;
} }
render() { render() {
@ -49,7 +50,7 @@ export default class DNDRoomTile extends React.Component {
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<div style={this.getStyle(snapshot.isDragging)}> <div className={this.getClassName(snapshot.isDragging)}>
<RoomTile {...props} /> <RoomTile {...props} />
</div> </div>
</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; 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 { .mx_RoomTile:focus {
filter: none ! important; filter: none ! important;
background-color: $roomtile-focused-bg-color; background-color: $roomtile-focused-bg-color;