Skip to content

Remove dropzone banner; make full window the drag-and-drop target #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ThisIs-Developer merged 2 commits into from
May 5, 2026
Merged

Remove dropzone banner; make full window the drag-and-drop target #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d1904e
feat: replace dedicated dropzone banner with full-window drag-and-dro…
Copilot May 5, 2026
c7cfdd6
fix: guard dragleave handler against non-file drag events to prevent …
Copilot May 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions desktop-app/resources/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,16 +299,21 @@ <h5>Menu</h5>
</div>
</div>

<div id="dropzone" class="dropzone container-fluid mt-2">
<button id="close-dropzone" class="close-btn" title="Close dropzone">
<i class="bi bi-x-lg"></i>
</button>
<p class="mb-0"><i class="bi bi-cloud-arrow-up me-2"></i>Drop your Markdown file here or click to browse</p>
<!-- Full-screen drag overlay (shown when a file is dragged over the window) -->
<div id="drag-overlay" class="drag-overlay" aria-hidden="true">
<div class="drag-overlay-inner">
<i class="bi bi-cloud-arrow-up drag-overlay-icon"></i>
<p class="drag-overlay-text">Drop your Markdown file anywhere</p>
<p class="drag-overlay-sub">.md or .markdown files supported</p>
</div>
</div>

<div class="content-container">
<div class="editor-pane">
<textarea id="markdown-editor" placeholder="Type or paste your Markdown here..."></textarea>
<div class="drop-hint" aria-hidden="true">
<i class="bi bi-cloud-arrow-up me-1"></i>Drop a .md file anywhere to open it
</div>
</div>
<!-- Resize Divider - Story 1.3 -->
<div class="resize-divider" role="separator" aria-orientation="vertical" aria-label="Resize panes" tabindex="0">
Expand Down
2 changes: 0 additions & 2 deletions desktop-app/resources/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,11 +109,9 @@ if (NL_OS != "Darwin") {

function applyContent() {
const editor = document.getElementById('markdown-editor');
const dropzone = document.getElementById('dropzone');
if (!editor) return;
editor.value = content;
editor.dispatchEvent(new Event('input'));
if (dropzone) dropzone.style.display = 'none';
}

if (document.readyState === 'loading') {
Expand Down
70 changes: 33 additions & 37 deletions desktop-app/resources/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ document.addEventListener("DOMContentLoaded", function () {
const exportHtml = document.getElementById("export-html");
const exportPdf = document.getElementById("export-pdf");
const copyMarkdownButton = document.getElementById("copy-markdown-button");
const dropzone = document.getElementById("dropzone");
const closeDropzoneBtn = document.getElementById("close-dropzone");
const dragOverlay = document.getElementById("drag-overlay");
const toggleSyncButton = document.getElementById("toggle-sync");
const editorPane = document.getElementById("markdown-editor");
const previewPane = document.querySelector(".preview-pane");
Expand Down Expand Up @@ -976,7 +975,6 @@ This is a fully client-side application. Your content never leaves your browser
const reader = new FileReader();
reader.onload = function(e) {
newTab(e.target.result, file.name.replace(/\.md$/i, ''));
dropzone.style.display = "none";
};
reader.readAsText(file);
}
Expand Down Expand Up @@ -2776,44 +2774,42 @@ This is a fully client-side application. Your content never leaves your browser

loadFromShareHash();

const dropEvents = ["dragenter", "dragover", "dragleave", "drop"];
// Full-window drag-and-drop: track nesting level for reliable enter/leave detection
let dragDepth = 0;

dropEvents.forEach((eventName) => {
dropzone.addEventListener(eventName, preventDefaults, false);
document.body.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}

["dragenter", "dragover"].forEach((eventName) => {
dropzone.addEventListener(eventName, highlight, false);
});

["dragleave", "drop"].forEach((eventName) => {
dropzone.addEventListener(eventName, unhighlight, false);
});

function highlight() {
dropzone.classList.add("active");
}
document.addEventListener("dragenter", function(e) {
if (e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes("Files")) {
e.preventDefault();
dragDepth++;
dragOverlay.classList.add("active");
dragOverlay.setAttribute("aria-hidden", "false");
}
}, false);

function unhighlight() {
dropzone.classList.remove("active");
}
document.addEventListener("dragover", function(e) {
if (e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes("Files")) {
e.preventDefault();
}
}, false);

dropzone.addEventListener("drop", handleDrop, false);
dropzone.addEventListener("click", function (e) {
if (e.target !== closeDropzoneBtn && !closeDropzoneBtn.contains(e.target)) {
fileInput.click();
document.addEventListener("dragleave", function(e) {
if (e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.includes("Files")) {
dragDepth--;
if (dragDepth <= 0) {
dragDepth = 0;
dragOverlay.classList.remove("active");
dragOverlay.setAttribute("aria-hidden", "true");
}
}
});
closeDropzoneBtn.addEventListener("click", function(e) {
e.stopPropagation();
dropzone.style.display = "none";
});
}, false);

document.addEventListener("drop", function(e) {
e.preventDefault();
dragDepth = 0;
dragOverlay.classList.remove("active");
dragOverlay.setAttribute("aria-hidden", "true");
handleDrop(e);
}, false);

function handleDrop(e) {
const dt = e.dataTransfer;
Expand Down
138 changes: 60 additions & 78 deletions desktop-app/resources/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
--button-bg: #f6f8fa;
--button-hover: #e1e4e8;
--button-active: #d1d5da;
--dropzone-bg: rgba(255, 255, 255, 0.8);
--scrollbar-thumb: #c1c1c1;
--scrollbar-track: #f1f1f1;
--accent-color: #0366d6;
Expand All @@ -28,7 +27,6 @@
--button-bg: #21262d;
--button-hover: #30363d;
--button-active: #3b434b;
--dropzone-bg: rgba(13, 17, 23, 0.8);
--scrollbar-thumb: #484f58;
--scrollbar-track: #21262d;
--accent-color: #58a6ff;
Expand Down Expand Up @@ -315,28 +313,73 @@ body {
display: none;
}

.dropzone {
border: 2px dashed var(--border-color);
border-radius: 6px;
padding: 20px;
/* Drag overlay: full-screen drop target shown when user drags a file over the window */
.drag-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.45);
pointer-events: none;
align-items: center;
justify-content: center;
}

.drag-overlay.active {
display: flex;
pointer-events: auto;
}

.drag-overlay-inner {
border: 3px dashed var(--accent-color);
border-radius: 12px;
padding: 48px 64px;
text-align: center;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s ease;
background-color: var(--dropzone-bg);
color: #ffffff;
background-color: rgba(3, 102, 214, 0.15);
animation: overlayPulse 1.4s ease-in-out infinite;
}

.dropzone.active {
border-color: var(--accent-color);
background-color: rgba(var(--accent-color), 0.05);
.drag-overlay-icon {
display: block;
font-size: 3rem;
margin-bottom: 12px;
color: var(--accent-color);
}

.drag-overlay-text {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 4px;
}

.dropzone p {
transition: transform 0.2s ease;
.drag-overlay-sub {
font-size: 0.85rem;
opacity: 0.75;
margin-bottom: 0;
}

.dropzone:hover p {
transform: scale(1.02);
@keyframes overlayPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.015); }
}

/* Editor drop hint: subtle text at bottom of editor pane, shown only when empty */
.drop-hint {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
text-align: center;
font-size: 0.75rem;
color: var(--text-color);
opacity: 0.35;
pointer-events: none;
user-select: none;
}

.editor-pane:has(#markdown-editor:not(:placeholder-shown)) .drop-hint {
display: none;
}

/* Dropdown improvements */
Expand Down Expand Up @@ -590,62 +633,6 @@ a:focus {
opacity: 0.8;
}

.dropzone {
border: 2px dashed var(--border-color);
border-radius: 6px;
padding: 20px;
text-align: center;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s ease;
background-color: var(--dropzone-bg);
position: relative;
}

.dropzone.active {
border-color: var(--accent-color);
background-color: rgba(var(--accent-color), 0.05);
}

.dropzone p {
transition: transform 0.2s ease;
}

.dropzone:hover {
border: var(--accent-color) 2px dashed;
}

.dropzone:hover p {
transform: scale(1.02);
}

.close-btn {
position: absolute;
top: 5px;
right: 5px;
background: none;
border: none;
color: var(--text-color);
font-size: 1rem;
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 28px;
height: 28px;
opacity: 0.6;
transition: all 0.2s ease;
background-color: var(--button-bg);
border: 1px solid var(--border-color);
}

.close-btn:hover {
opacity: 1;
background-color: var(--color-danger-fg);
}

.editor-pane {
overflow: hidden;
}
Expand Down Expand Up @@ -772,11 +759,6 @@ a:focus {
font-size: 1rem;
}

/* ensure dropzone doesn’t cover menu */
.mobile-menu-panel .dropzone {
margin-bottom: 0;
}

/* Mobile document tabs section */
.mobile-tabs-section {
border-bottom: 1px solid var(--border-color);
Expand Down
15 changes: 10 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,16 +296,21 @@ <h5>Menu</h5>
</div>
</div>

<div id="dropzone" class="dropzone container-fluid mt-2">
<button id="close-dropzone" class="close-btn" title="Close dropzone">
<i class="bi bi-x-lg"></i>
</button>
<p class="mb-0"><i class="bi bi-cloud-arrow-up me-2"></i>Drop your Markdown file here or click to browse</p>
<!-- Full-screen drag overlay (shown when a file is dragged over the window) -->
<div id="drag-overlay" class="drag-overlay" aria-hidden="true">
<div class="drag-overlay-inner">
<i class="bi bi-cloud-arrow-up drag-overlay-icon"></i>
<p class="drag-overlay-text">Drop your Markdown file anywhere</p>
<p class="drag-overlay-sub">.md or .markdown files supported</p>
</div>
</div>

<div class="content-container">
<div class="editor-pane">
<textarea id="markdown-editor" placeholder="Type or paste your Markdown here..."></textarea>
<div class="drop-hint" aria-hidden="true">
<i class="bi bi-cloud-arrow-up me-1"></i>Drop a .md file anywhere to open it
</div>
</div>
<!-- Resize Divider - Story 1.3 -->
<div class="resize-divider" role="separator" aria-orientation="vertical" aria-label="Resize panes" tabindex="0">
Expand Down
Loading
Loading