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

Fix drag-n-drop indication

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

2
src/renderer/components/+extensions/notice.module.css
View File

@ -20,7 +20,7 @@
*/ */
.notice { .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); background-color: var(--noticeBackground);
border: 1px solid var(--boxShadow); border: 1px solid var(--boxShadow);
color: var(--textColorTertiary); color: var(--textColorTertiary);

2
src/renderer/components/hotbar/hotbar-cell.tsx
View File

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

7
src/renderer/components/input/drop-file-input.scss
View File

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

8
src/renderer/components/input/drop-file-input.tsx
View File

@ -39,15 +39,21 @@ export interface DropFileMeta<T extends HTMLElement = any> {
@observer @observer
export class DropFileInput<T extends HTMLElement = any> extends React.Component<DropFileInputProps> { export class DropFileInput<T extends HTMLElement = any> extends React.Component<DropFileInputProps> {
@observable dropAreaActive = false; @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() @autobind()
onDragEnter() { onDragEnter() {
this.dragCounter++;
this.dropAreaActive = true; this.dropAreaActive = true;
} }
@autobind() @autobind()
onDragLeave() { onDragLeave() {
this.dropAreaActive = false; this.dragCounter--;
if (this.dragCounter == 0) {
this.dropAreaActive = false;
}
} }
@autobind() @autobind()