hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Switch animate away direction on dragging

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/components/hotbar/hotbar-menu.scss
View File

@ -47,6 +47,21 @@
&.isDraggingOver { &.isDraggingOver {
box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #fff; 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 { &.animating {

13
src/renderer/components/hotbar/hotbar-menu.tsx
View File

@ -48,6 +48,12 @@ export class HotbarMenu extends React.Component<Props> {
HotbarStore.getInstance().restackItems(from, to); 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() { renderGrid() {
return this.hotbar.items.map((item, index) => { return this.hotbar.items.map((item, index) => {
const entity = this.getEntity(item); const entity = this.getEntity(item);
@ -59,11 +65,14 @@ export class HotbarMenu extends React.Component<Props> {
index={index} index={index}
key={entity ? entity.getId() : `cell${index}`} key={entity ? entity.getId() : `cell${index}`}
innerRef={provided.innerRef} 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} {...provided.droppableProps}
> >
{entity && ( {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) => { {(provided, snapshot) => {
const style = { const style = {
zIndex: defaultHotbarCells - index, zIndex: defaultHotbarCells - index,