Skip to content

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

Merged
ThisIs-Developer merged 2 commits intomainfrom
copilot/remove-navbar-and-improve-space-management
May 5, 2026
Merged

Remove dropzone banner; make full window the drag-and-drop target#82
ThisIs-Developer merged 2 commits intomainfrom
copilot/remove-navbar-and-improve-space-management

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 5, 2026

The dedicated "Drop your Markdown file here" banner between the tab bar and editor wasted vertical space and cluttered the UI. This removes it and makes the entire window the drop surface instead.

Changes

HTML (index.html, desktop-app/resources/index.html)

  • Removed #dropzone banner element and its close button
  • Added #drag-overlay — a full-screen overlay rendered inside .app-container, shown only during active file drags
  • Added .drop-hint element inside .editor-pane — subtle static hint visible only when editor is empty

CSS (styles.css, desktop-app/resources/styles.css)

  • Removed all .dropzone, .close-btn, .mobile-menu-panel .dropzone, and --dropzone-bg rules
  • Added #drag-overlay styles: fixed full-screen semi-transparent backdrop with centered dashed border box and pulse animation
  • Added .drop-hint styles: absolutely-positioned bottom-center text, hidden via :placeholder-shown when editor has content

JS (script.js, desktop-app/resources/js/script.js, desktop-app/resources/js/main.js)

  • Replaced dropzone-scoped drag listeners with document-level dragenter/dragover/dragleave/drop handlers
  • Uses a dragDepth counter (incremented on dragenter, decremented on dragleave) to reliably show/hide the overlay across nested DOM elements — both dragenter and dragleave guard against non-file drag events to prevent counter desync
  • Removed dropzone.style.display = "none" calls from importMarkdownFile and the Neutralinojs file open handler

Copilot AI and others added 2 commits May 5, 2026 05:27
…p overlay and subtle editor hint

Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/32f3ea84-25cb-422a-8e8f-941055bdd220

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
…depth counter desync

Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/32f3ea84-25cb-422a-8e8f-941055bdd220

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markdown-viwer Ready Ready Preview, Comment May 5, 2026 5:38am

@ThisIs-Developer ThisIs-Developer marked this pull request as ready for review May 5, 2026 05:40
Copilot AI review requested due to automatic review settings May 5, 2026 05:40
@ThisIs-Developer ThisIs-Developer merged commit 444d6a1 into main May 5, 2026
6 checks passed
@ThisIs-Developer ThisIs-Developer deleted the copilot/remove-navbar-and-improve-space-management branch May 5, 2026 05:40
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR removes the old inline dropzone banner and replaces it with a full-window drag-and-drop experience, keeping the root web app and duplicated Neutralino desktop resources aligned.

Changes:

  • Replaced the banner-style dropzone markup with a full-screen drag overlay and an empty-editor drop hint.
  • Reworked drag-and-drop handling from dropzone-scoped listeners to document-level file drag listeners with a depth counter.
  • Removed now-obsolete dropzone hide logic from file import paths in the desktop wrapper and shared script.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
styles.css Replaces dropzone styles with drag overlay/drop hint styling in the web UI.
script.js Switches shared web drag/drop logic to document-level overlay handling.
index.html Removes the old banner and adds overlay/hint markup in the web app.
desktop-app/resources/styles.css Mirrors the shared CSS drag/drop UI changes for the desktop app.
desktop-app/resources/js/script.js Mirrors the shared drag/drop JavaScript changes for the desktop app.
desktop-app/resources/js/main.js Removes obsolete desktop dropzone-hiding code when opening initial files.
desktop-app/resources/index.html Mirrors the shared HTML overlay/hint changes for the desktop app.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread styles.css
user-select: none;
}

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

.editor-pane:has(#markdown-editor:not(:placeholder-shown)) .drop-hint {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants