From 8b4566a63481bd616b92cb421eaa553a9becb5f3 Mon Sep 17 00:00:00 2001
From: blek <me@blek.codes>
Date: Sat, 30 Sep 2023 01:04:48 +1000
Subject: [PATCH] finish off drag and drop styl

---
 filed/static/paint.css            | 13 ++++++++++++-
 filed/static/tab-new-symbolic.svg |  6 ++++++
 filed/templates/index.html        | 13 ++++++++-----
 3 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 filed/static/tab-new-symbolic.svg

diff --git a/filed/static/paint.css b/filed/static/paint.css
index 9db8b41..f0ed3d6 100644
--- a/filed/static/paint.css
+++ b/filed/static/paint.css
@@ -130,15 +130,26 @@ p {
 
 
 .file-drag-n-drop {
+    display: block;
     width: 400px;
     height: 400px;
     background: var(--header-sec-color);
     border-radius: 16px;
     padding: var(--header-padding-x);
 }
-.file-drag-n-drop-inside {
+.file-drag-n-drop * { display: block }
+.file-drag-n-drop object { display: initial }
+.file-drag-n-drop .file-drag-n-drop-inside {
     padding: var(--header-padding-x);
     border: 4px dotted #656565;
     height: calc(100% - 32px - 8px);
     border-radius: 16px;
+}
+.file-drag-n-drop .file-drag-n-drop-inside .file-drag-n-drop-inside-text {
+    margin: 0;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    text-align: center;
+    line-height: 32px;
 }
\ No newline at end of file
diff --git a/filed/static/tab-new-symbolic.svg b/filed/static/tab-new-symbolic.svg
new file mode 100644
index 0000000..3e07c35
--- /dev/null
+++ b/filed/static/tab-new-symbolic.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" fill='#eee'>
+    <path d="m 3 0 c -1.644531 0 -3 1.355469 -3 3 v 10 c 0 1.644531 1.355469 3 3 3 h 10 c 1.644531 0 3 -1.355469 3 -3 v -10 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 10 c 0.570312 0 1 0.429688 1 1 v 10 c 0 0.570312 -0.429688 1 -1 1 h -10 c -0.570312 0 -1 -0.429688 -1 -1 v -10 c 0 -0.570312 0.429688 -1 1 -1 z m 0 0"/>
+    <path d="m 4 7 h 8 v 2 h -8 z m 0 0"/>
+    <path d="m 9 4 v 8 h -2 v -8 z m 0 0"/>
+</svg>
\ No newline at end of file
diff --git a/filed/templates/index.html b/filed/templates/index.html
index 434c32f..062f780 100644
--- a/filed/templates/index.html
+++ b/filed/templates/index.html
@@ -30,11 +30,14 @@
                 <p>
                     <input type="file" name="file" id="bfile-formupload-file" style="display: none" />
                     <label for="bfile-formupload-file">
-                        <div class="file-drag-n-drop">
-                            <div class="file-drag-n-drop-inside">
-                                
-                            </div>
-                        </div>
+                        <span class="file-drag-n-drop">
+                            <span class="file-drag-n-drop-inside">
+                                <span class="file-drag-n-drop-inside-text">
+                                    <object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/>
+                                    Drag & drop your files here!
+                                </span>
+                            </span>
+                        </span>
                     </label>
                 </p>
             </form>