ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-06-05 06:47:27 +00:00
Code Issues Projects Releases Wiki Activity

feat: add drag and drop support to Upload Style area (#1852)

Browse Source 
## Feat: Add drag and drop support to Upload Style area

Closes #911

---

### Problem
The Upload Style area only supported click-to-upload. Users could not
drag and drop a JSON file directly onto it.

### Fix
Added `onDragOver` and `onDrop` event handlers to the Upload Style area.
The dropped file is passed to the existing file reading logic already
used by the Upload button. A visual highlight is shown when dragging
over the area.
This commit is contained in:
Kanish Jeba Mathew M
2026-05-06 19:41:17 +05:30
committed by GitHub
parent a588f3e08c
commit 93596b3540
14 changed files with 145 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/_modal.scss
+41
View File
@@ -88,6 +88,47 @@
@extend .maputnik-big-button !optional; /* stylelint-disable-line */
}
.maputnik-upload-dropzone {
border: 2px dashed vars.$color-midgray;
border-radius: 6px;
padding: vars.$margin-4 vars.$margin-3;
text-align: center;
cursor: pointer;
transition: border-color 120ms ease, background-color 120ms ease;
&:hover,
&:focus-visible {
border-color: vars.$color-lowgray;
background-color: rgba(255, 255, 255, 0.03);
}
&:focus-visible {
outline: 2px solid vars.$color-lowgray;
outline-offset: 2px;
}
}
.maputnik-upload-dropzone--active {
border-color: vars.$color-lowgray;
background-color: rgba(255, 255, 255, 0.04);
}
.maputnik-upload-dropzone-content {
display: flex;
flex-direction: column;
align-items: center;
}
.maputnik-upload-dropzone-icon {
font-size: 28px;
color: vars.$color-midgray;
}
.maputnik-upload-dropzone-text {
margin: vars.$margin-2 0 0;
color: vars.$color-lowgray;
}
.maputnik-style-gallery-container {
flex-shrink: 1;
}