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

Fix drag-n-drop indication

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-05-17 19:29:03 +03:00
parent 835d6566b4
commit 63730358b6
4 changed files with 11 additions and 8 deletions

View File

@ -20,7 +20,7 @@
*/
.notice {
@apply p-8 flex flex-col gap-2 mb-14 rounded-lg;
@apply p-8 flex flex-col gap-2 mb-14 mt-3 rounded-lg;
background-color: var(--noticeBackground);
border: 1px solid var(--boxShadow);
color: var(--textColorTertiary);

View File

@ -8,7 +8,7 @@ import { cssNames } from "../../utils";
interface Props extends HTMLAttributes<HTMLDivElement> {
children?: ReactNode;
index: number;
innerRef?: React.LegacyRef<HTMLDivElement>;
innerRef?: React.Ref<HTMLDivElement>;
}
export function HotbarCell({ innerRef, children, className, ...rest }: Props) {

View File

@ -21,10 +21,7 @@
.DropFileInput {
&.droppable {
box-shadow: 0 0 0 5px $primary; // fixme: might not work sometimes
> * {
pointer-events: none;
}
box-shadow: inset 0 0 0 6px $primary;
transition: all 0.3s;
}
}

View File

@ -39,15 +39,21 @@ export interface DropFileMeta<T extends HTMLElement = any> {
@observer
export class DropFileInput<T extends HTMLElement = any> extends React.Component<DropFileInputProps> {
@observable dropAreaActive = false;
dragCounter = 0; // Counter preventing firing onDragLeave() too early (https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element)
@autobind()
onDragEnter() {
this.dragCounter++;
this.dropAreaActive = true;
}
@autobind()
onDragLeave() {
this.dropAreaActive = false;
this.dragCounter--;
if (this.dragCounter == 0) {
this.dropAreaActive = false;
}
}
@autobind()