Updated attachments to work with new dropzone

- Fixes existing broken attachment edit tabs.
- Redesigns area to move away from old tabbed interface.
- Integrates new dropzone system, for both addition and edit.

resources/views/attachments/manager-edit-form.blade.php

@@ -17,18 +17,35 @@
     </div>
 
     <div component="tabs" class="tab-container">
-        <div class="nav-tabs">
-            <button refs="tabs@toggleFile" type="button" class="tab-item {{ $attachment->external ? '' : 'selected' }}">{{ trans('entities.attachments_upload') }}</button>
-            <button refs="tabs@toggleLink" type="button" class="tab-item {{ $attachment->external ? 'selected' : '' }}">{{ trans('entities.attachments_set_link') }}</button>
+        <div class="nav-tabs" role="tablist">
+            <button id="attachment-edit-file-tab"
+                    type="button"
+                    aria-controls="attachment-edit-file-panel"
+                    aria-selected="{{ $attachment->external ? 'false' : 'true' }}"
+                    role="tab">{{ trans('entities.attachments_upload') }}</button>
+            <button id="attachment-edit-link-tab"
+                    type="button"
+                    aria-controls="attachment-edit-link-panel"
+                    aria-selected="{{ $attachment->external ? 'true' : 'false' }}"
+                    role="tab">{{ trans('entities.attachments_set_link') }}</button>
         </div>
-        <div refs="tabs@contentFile" class="mb-m {{ $attachment->external ? 'hidden' : '' }}">
-            @include('form.dropzone', [
+        <div id="attachment-edit-file-panel"
+             @if($attachment->external) hidden @endif
+             tabindex="0"
+             role="tabpanel"
+             aria-labelledby="attachment-edit-file-tab"
+             class="mb-m">
+            @include('form.simple-dropzone', [
                 'placeholder' => trans('entities.attachments_edit_drop_upload'),
                 'url' =>  url('/attachments/upload/' . $attachment->id),
                 'successMessage' => trans('entities.attachments_file_updated'),
             ])
         </div>
-        <div refs="tabs@contentLink" class="{{ $attachment->external ? '' : 'hidden' }}">
+        <div id="attachment-edit-link-panel"
+             @if(!$attachment->external) hidden @endif
+             tabindex="0"
+             role="tabpanel"
+             aria-labelledby="attachment-edit-link-tab">
             <div class="form-group">
                 <label for="attachment_edit_url">{{ trans('entities.attachments_link_url') }}</label>
                 <input type="text" id="attachment_edit_url"
@@ -43,6 +60,8 @@
     </div>
 
     <button component="event-emit-select"
-            option:event-emit-select:name="edit-back" type="button" class="button outline">{{ trans('common.back') }}</button>
+            option:event-emit-select:name="edit-back"
+            type="button"
+            class="button outline">{{ trans('common.back') }}</button>
     <button refs="ajax-form@submit" type="button" class="button">{{ trans('common.save') }}</button>
 </div>

resources/views/attachments/manager-link-form.blade.php

@@ -22,6 +22,9 @@
             <div class="text-neg text-small">{{ $errors->first('attachment_link_url') }}</div>
         @endif
     </div>
+    <button component="event-emit-select"
+            option:event-emit-select:name="edit-back"
+            type="button" class="button outline">{{ trans('common.cancel') }}</button>
     <button refs="ajax-form@submit"
             type="button"
             class="button">{{ trans('entities.attach') }}</button>

resources/views/attachments/manager.blade.php

@@ -6,66 +6,44 @@
      class="toolbox-tab-content">
 
     <h4>{{ trans('entities.attachments') }}</h4>
-    <div class="px-l files">
+    <div component="dropzone"
+         option:dropzone:url="{{ url('/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="*"
+         class="px-l files">
 
-        <div refs="attachments@listContainer">
+        <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>
 
-            <div component="tabs" refs="attachments@mainTabs" class="tab-container">
-                <div role="tablist">
-                    <button id="attachment-tab-items"
-                            role="tab"
-                            aria-selected="true"
-                            aria-controls="attachment-panel-items"
-                            type="button"
-                            class="tab-item">{{ trans('entities.attachments_items') }}</button>
-                    <button id="attachment-tab-upload"
-                            role="tab"
-                            aria-selected="false"
-                            aria-controls="attachment-panel-upload"
-                            type="button"
-                            class="tab-item">{{ trans('entities.attachments_upload') }}</button>
-                    <button id="attachment-tab-links"
-                            role="tab"
-                            aria-selected="false"
-                            aria-controls="attachment-panel-links"
-                            type="button"
-                            class="tab-item">{{ trans('entities.attachments_link') }}</button>
-                </div>
-                <div id="attachment-panel-items"
-                     tabindex="0"
-                     role="tabpanel"
-                     aria-labelledby="attachment-tab-items"
-                     refs="attachments@list">
-                    @include('attachments.manager-list', ['attachments' => $page->attachments->all()])
-                </div>
-                <div id="attachment-panel-upload"
-                     tabindex="0"
-                     role="tabpanel"
-                     hidden
-                     aria-labelledby="attachment-tab-upload">
-                    @include('form.dropzone', [
-                        'placeholder' => trans('entities.attachments_dropzone'),
-                        'url' =>  url('/attachments/upload?uploaded_to=' . $page->id),
-                        'successMessage' => trans('entities.attachments_file_uploaded'),
-                    ])
-                </div>
-                <div id="attachment-panel-links"
-                     tabindex="0"
-                     role="tabpanel"
-                     hidden
-                     aria-labelledby="attachment-tab-links"
-                     class="link-form-container">
-                    @include('attachments.manager-link-form', ['pageId' => $page->id])
-                </div>
+            <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>
+
+            <hr>
+
+            <div refs="attachments@list-panel">
+                @include('attachments.manager-list', ['attachments' => $page->attachments->all()])
             </div>
 
         </div>
 
-        <div refs="attachments@editContainer" class="hidden attachment-edit-container">
-
+        <div refs="attachments@links-container" hidden class="link-form-container">
+            @include('attachments.manager-link-form', ['pageId' => $page->id])
         </div>
 
+        <div refs="attachments@edit-container" hidden class="attachment-edit-container"></div>
+
     </div>
 </div>