Allow for drag & drop when creating partition

babel.cfg

@@ -1,2 +1,5 @@
+[extractors]
+jinja2 = jinja2.ext:babel_extract
+
 [python: partitioncloud/**.py]
 [jinja2: partitioncloud/templates/**.html]

partitioncloud/static/style/style.css

@@ -718,3 +718,44 @@ midi-player {
     border-radius: 5px;
     background-color: var(--color-crust);
 }
+
+/** Input[file] */
+.file-area {
+    position: relative;
+}
+.file-area input[type=file] {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+  
+.file-area .file-dummy {
+    padding: 30px;
+    background: var(--color-mantle);
+    border: 2px dashed var(--color-red);
+    text-align: center;
+    transition: background 0.3s ease-in-out;
+}
+  
+.file-area .file-dummy .success {
+    display: none;
+}
+  
+.file-area:hover > .file-dummy {
+    background: var(--color-surface0);
+}
+  
+.file-area input[type=file]:valid + .file-dummy {
+    border-color: var(--color-green);
+}
+.file-area input[type=file]:valid + .file-dummy .success {
+    display: inline-block;
+}
+.file-area input[type=file]:valid + .file-dummy .default {
+    display: none;
+}

partitioncloud/templates/components/add_partition.html

@@ -7,7 +7,7 @@
   {% if partition_uuid %}
     <input name="partition-uuid" value="{{ partition_uuid }}" type="hidden">
   {% else %}
-    <input name="file" type="file" accept=".pdf" required=""><br/>
+    {% include 'components/input_file.html' %}
   {% endif %}
   <input type="submit" value="{{ _('Add') }}" />
 </form>

partitioncloud/templates/components/input_file.html

@@ -0,0 +1,7 @@
+<div class="file-area">
+  <input name="file" type="file" accept=".pdf" required="">
+  <div class="file-dummy">
+    <div class="success">{{ _("Your file is selected.") }}</div>
+    <div class="default">{{ _("Select or drag & drop your file (pdf).") }}</div>
+  </div>
+</div>

partitioncloud/translations/en/LC_MESSAGES/messages.po

@@ -532,6 +532,14 @@ msgstr "lyrics"
 msgid "Add"
 msgstr "Add"
 
+#: partitioncloud/templates/components/input_file.html:4
+msgid "Your file is selected."
+msgstr "Your file is selected."
+
+#: partitioncloud/templates/components/input_file.html:5
+msgid "Select or drag & drop your file (pdf)."
+msgstr "Select or drag & drop your file (pdf)."
+
 #: partitioncloud/templates/groupe/index.html:8
 #, python-format
 msgid "Add an album to group %(name)s"

partitioncloud/translations/fr/LC_MESSAGES/messages.po

@@ -538,6 +538,14 @@ msgstr "paroles"
 msgid "Add"
 msgstr "Ajouter"
 
+#: partitioncloud/templates/components/input_file.html:4
+msgid "Your file is selected."
+msgstr "Fichier sélectionné."
+
+#: partitioncloud/templates/components/input_file.html:5
+msgid "Select or drag & drop your file (pdf)."
+msgstr "Sélectionner ou déposer un fichier (pdf)."
+
 #: partitioncloud/templates/groupe/index.html:8
 #, python-format
 msgid "Add an album to group %(name)s"