feat: allow dragging files on opened document

davidenke · Oct 11, 2024 · 973ae3a · 973ae3a
1 parent 20b637b
commit 973ae3a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/root/root.component.css b/src/components/root/root.component.css
@@ -17,11 +17,6 @@
   font-style: normal;
 }
 
-:host(:not([has-document])) {
-  cursor: default;
-  user-select: none;
-}
-
 main {
   display: flex;
   flex-flow: row nowrap;
@@ -31,16 +26,28 @@ main {
   justify-content: center;
 }
 
-xlp-title-bar {
+:host(:not([has-document])) {
+  cursor: default;
+  user-select: none;
+}
+
+:host(:not([has-document])) xlp-title-bar {
   z-index: 1;
 }
 
-xlp-tool-bar {
+:host([has-document]) xlp-tool-bar {
   position: fixed;
   inset: 10px 10px auto auto;
+  z-index: 1;
+}
+
+:host([has-document]) xlp-select-file {
+  position: fixed;
+  inset: 0;
+  z-index: 2;
 }
 
-xlp-preview {
+:host([has-document]) xlp-preview {
   flex: 1;
   min-height: 100svh;
   min-width: 0;

diff --git a/src/components/root/root.component.ts b/src/components/root/root.component.ts
@@ -151,6 +151,7 @@ export class Root extends LitElement {
           `,
           () => html`
             <xlp-preview>${unsafeHTML(this.contents)}</xlp-preview>
+            <xlp-select-file background @path="${this.loadFile}"><xlp-icon>upload_file</xlp-icon></xlp-select-file>
             <xlp-tool-bar role="navigation" hide-after="2000">
               <xlp-numeric-stepper
                 @change="${this.setVisibilityLevel}"