1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Switch animate away direction on dragging

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-05-04 12:16:57 +03:00
parent 1af12fe59e
commit d42f4aa517
2 changed files with 26 additions and 2 deletions

View File

@ -47,6 +47,21 @@
&.isDraggingOver {
box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #fff;
&:not(.isDraggingOwner) {
z-index: 50;
> div:not(:empty) {
border-radius: 6px;
box-shadow: 0 0 9px #00000042;
}
&.animateUp {
> div {
transform: translate(0px, -40px)!important;
}
}
}
}
&.animating {

View File

@ -48,6 +48,12 @@ export class HotbarMenu extends React.Component<Props> {
HotbarStore.getInstance().restackItems(from, to);
}
getMoveAwayDirection(entityId: string, cellIndex: number) {
const draggableItemIndex = this.hotbar.items.findIndex(item => item?.entity.uid == entityId);
return draggableItemIndex > cellIndex ? "animateDown" : "animateUp";
}
renderGrid() {
return this.hotbar.items.map((item, index) => {
const entity = this.getEntity(item);
@ -59,11 +65,14 @@ export class HotbarMenu extends React.Component<Props> {
index={index}
key={entity ? entity.getId() : `cell${index}`}
innerRef={provided.innerRef}
className={cssNames({ isDraggingOver: snapshot.isDraggingOver })}
className={cssNames({
isDraggingOver: snapshot.isDraggingOver,
isDraggingOwner: snapshot.draggingOverWith == entity?.getId(),
}, this.getMoveAwayDirection(snapshot.draggingOverWith, index))}
{...provided.droppableProps}
>
{entity && (
<Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0}>
<Draggable draggableId={item.entity.uid} key={item.entity.uid} index={0} >
{(provided, snapshot) => {
const style = {
zIndex: defaultHotbarCells - index,