X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/a6633642232efd164d4708967ab59e498fbff896..refs/pull/5313/head:/resources/views/attachments/manager.blade.php

diff --git a/resources/views/attachments/manager.blade.php b/resources/views/attachments/manager.blade.php
index 4628f7495..6cbfd1aae 100644
--- a/resources/views/attachments/manager.blade.php
+++ b/resources/views/attachments/manager.blade.php
@@ -1,39 +1,50 @@
-<div style="display: block;" toolbox-tab-content="files"
+<div style="display: block;"
+     refs="editor-toolbox@tab-content"
+     data-tab-content="files"
      component="attachments"
-     option:attachments:page-id="{{ $page->id ?? 0 }}">
+     option:attachments:page-id="{{ $page->id ?? 0 }}"
+     class="toolbox-tab-content">
 
     <h4>{{ trans('entities.attachments') }}</h4>
-    <div class="px-l files">
-
-        <div refs="attachments@listContainer">
-            <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
-
-            <div component="tabs" refs="attachments@mainTabs" class="tab-container">
-                <div class="nav-tabs">
-                    <button refs="tabs@toggleItems" type="button" class="selected tab-item">{{ trans('entities.attachments_items') }}</button>
-                    <button refs="tabs@toggleUpload" type="button" class="tab-item">{{ trans('entities.attachments_upload') }}</button>
-                    <button refs="tabs@toggleLinks" type="button" class="tab-item">{{ trans('entities.attachments_link') }}</button>
-                </div>
-                <div refs="tabs@contentItems attachments@list">
-                    @include('attachments.manager-list', ['attachments' => $page->attachments->all()])
-                </div>
-                <div refs="tabs@contentUpload" class="hidden">
-                    @include('components.dropzone', [
-                        'placeholder' => trans('entities.attachments_dropzone'),
-                        'url' =>  url('/http/source.bookstackapp.com/attachments/upload?uploaded_to=' . $page->id),
-                        'successMessage' => trans('entities.attachments_file_uploaded'),
-                    ])
-                </div>
-                <div refs="tabs@contentLinks" class="hidden link-form-container">
-                    @include('attachments.manager-link-form', ['pageId' => $page->id])
-                </div>
+    <div component="dropzone"
+         option:dropzone:url="{{ url('/http/source.bookstackapp.com/attachments/upload?uploaded_to=' . $page->id) }}"
+         option:dropzone:success-message="{{ trans('entities.attachments_file_uploaded') }}"
+         option:dropzone:error-message="{{ trans('errors.attachment_upload_error') }}"
+         option:dropzone:upload-limit="{{ config('app.upload_limit') }}"
+         option:dropzone:upload-limit-message="{{ trans('errors.server_upload_limit') }}"
+         option:dropzone:zone-text="{{ trans('entities.attachments_dropzone') }}"
+         option:dropzone:file-accept="*"
+         option:dropzone:allow-multiple="true"
+         class="px-l files">
+
+        <div refs="attachments@list-container dropzone@drop-target" class="relative">
+            <p class="text-muted small">{{ trans('entities.attachments_explain') }} <span
+                        class="text-warn">{{ trans('entities.attachments_explain_instant_save') }}</span></p>
+
+            <hr class="mb-s">
+
+            <div class="flex-container-row">
+                <button refs="dropzone@select-button" type="button" class="button outline small">{{ trans('entities.attachments_upload') }}</button>
+                <button refs="attachments@attach-link-button" type="button" class="button outline small">{{ trans('entities.attachments_link') }}</button>
             </div>
+            <div>
+                <p class="text-muted text-small">{{ trans('entities.attachments_upload_drop') }}</p>
+            </div>
+            <div refs="dropzone@status-area" class="fixed top-right px-m py-m"></div>
 
-        </div>
+            <hr>
 
-        <div refs="attachments@editContainer" class="hidden attachment-edit-container">
+            <div refs="attachments@list-panel">
+                @include('attachments.manager-list', ['attachments' => $page->attachments->all()])
+            </div>
 
         </div>
+    </div>
 
+    <div id="link-form-container" refs="attachments@links-container" hidden class="px-l">
+        @include('attachments.manager-link-form', ['pageId' => $page->id])
     </div>
+
+    <div id="edit-form-container" refs="attachments@edit-container" hidden class="px-l"></div>
+
 </div>
\ No newline at end of file