Closes #598: Add new buttonOnTop option to medias, files and browser …

…form fields
area17 · Jul 15, 2020 · 964c99a · 964c99a
1 parent cf8ead0
commit 964c99a
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 9 deletions.
diff --git a/...ssets/admin/css/chunk-common.4188ad52.css → ...ssets/admin/css/chunk-common.720da74b.css b/...ssets/admin/css/chunk-common.4188ad52.css → ...ssets/admin/css/chunk-common.720da74b.css
diff --git a/dist/assets/admin/js/chunk-common.e1bd8318.js b/dist/assets/admin/js/chunk-common.e1bd8318.js
diff --git a/dist/assets/admin/js/chunk-common.fbbfd626.js b/dist/assets/admin/js/chunk-common.fbbfd626.js
diff --git a/dist/assets/admin/twill-manifest.json b/dist/assets/admin/twill-manifest.json
@@ -11,8 +11,8 @@
   "Inter-MediumItalic.woff2": "/assets/admin/fonts/Inter-MediumItalic.7a7fd735.woff2",
   "Inter-Regular.woff": "/assets/admin/fonts/Inter-Regular.aebfbb3c.woff",
   "Inter-Regular.woff2": "/assets/admin/fonts/Inter-Regular.bffaed79.woff2",
-  "chunk-common.css": "/assets/admin/css/chunk-common.4188ad52.css",
-  "chunk-common.js": "/assets/admin/js/chunk-common.e1bd8318.js",
+  "chunk-common.css": "/assets/admin/css/chunk-common.720da74b.css",
+  "chunk-common.js": "/assets/admin/js/chunk-common.fbbfd626.js",
   "chunk-vendors.css": "/assets/admin/css/chunk-vendors.e0f3ef32.css",
   "chunk-vendors.js": "/assets/admin/js/chunk-vendors.aa8e5164.js",
   "icons-files.svg": "/assets/admin/icons/icons-files.3cdbddfb2725088d.svg",

diff --git a/frontend/js/components/BrowserField.vue b/frontend/js/components/BrowserField.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="browserField">
+    <div class="browserField__trigger" v-if="buttonOnTop && remainingItems">
+      <a17-button type="button" variant="ghost" @click="openBrowser">{{ addLabel }}</a17-button>
+      <input type="hidden" :name="name" :value="itemsIds"/>
+      <span class="browserField__note f--small"><slot></slot></span>
+    </div>
     <table class="browserField__table" v-if="items.length">
       <draggable :tag="'tbody'" v-model="items">
         <a17-browseritem v-for="(item, index) in items" :key="item.endpointType + '_' + item.id" class="item__content"
@@ -8,7 +13,7 @@
                          :showType="endpoints.length > 0" />
       </draggable>
     </table>
-    <div class="browserField__trigger" v-if="remainingItems">
+    <div class="browserField__trigger" v-if="!buttonOnTop && remainingItems">
       <a17-button type="button" variant="ghost" @click="openBrowser">{{ addLabel }}</a17-button>
       <input type="hidden" :name="name" :value="itemsIds"/>
       <span class="browserField__note f--small"><slot></slot></span>
@@ -63,6 +68,10 @@
       wide: {
         type: Boolean,
         default: false
+      },
+      buttonOnTop: {
+        type: Boolean,
+        default: false
       }
     },
     data: function () {

diff --git a/frontend/js/components/MediaFieldTranslated.vue b/frontend/js/components/MediaFieldTranslated.vue
@@ -10,6 +10,7 @@
                    :cropContext="cropContext"
                    :max="max"
                    :required="required"
+                   :buttonOnTop="buttonOnTop"
                    :withAddInfo="withAddInfo"
                    :withVideoUrl="withVideoUrl"
                    :withCaption="withCaption"
@@ -57,6 +58,10 @@
       max: {
         type: Number,
         default: 1
+      },
+      buttonOnTop: {
+        type: Boolean,
+        default: false
       }
     }
   }

diff --git a/frontend/js/components/Slideshow.vue b/frontend/js/components/Slideshow.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="slideshow">
-    <div class="slideshow__trigger" v-if="remainingSlides > 0">
+    <div class="slideshow__trigger" v-if="buttonOnTop && remainingSlides > 0">
       <a17-button type="button" variant="ghost" @click="openMediaLibrary(remainingSlides)">{{ addLabel }}</a17-button>
       <span class="slideshow__note f--small"><slot></slot></span>
     </div>
@@ -27,6 +27,10 @@
         </div>
       </transition-group>
     </draggable>
+    <div class="slideshow__trigger" v-if="!buttonOnTop && remainingSlides > 0">
+      <a17-button type="button" variant="ghost" @click="openMediaLibrary(remainingSlides)">{{ addLabel }}</a17-button>
+      <span class="slideshow__note f--small"><slot></slot></span>
+    </div>
   </div>
 </template>
 
@@ -58,6 +62,10 @@
       max: {
         type: Number,
         default: 10
+      },
+      buttonOnTop: {
+        type: Boolean,
+        default: false
       }
     },
     data: function () {

diff --git a/frontend/js/components/files/FileField.vue b/frontend/js/components/files/FileField.vue
@@ -1,12 +1,17 @@
 <template>
   <a17-inputframe :error="error" :label="label" :locale="locale" @localize="updateLocale" :size="size" :name="name" :note="fieldNote">
     <div class="fileField">
+      <div class="fileField__trigger" v-if="buttonOnTop && remainingItems">
+        <input type="hidden" :name="name" :value="itemsIds"/>
+        <a17-button type="button" variant="ghost" @click="openMediaLibrary(remainingItems)">{{ addLabel }}</a17-button>
+        <span class="fileField__note f--small">{{ note }}</span>
+      </div>
       <table class="fileField__list" v-if="items.length">
         <draggable :tag="'tbody'" v-model="items">
           <a17-fileitem v-for="(item, index) in items" :key="item.id" class="item__content" :name="`${name}_${item.id}`" :draggable="isDraggable" :item="item" @delete="deleteItem(index)"></a17-fileitem>
         </draggable>
       </table>
-      <div class="fileField__trigger" v-if="remainingItems">
+      <div class="fileField__trigger" v-if="!buttonOnTop && remainingItems">
         <input type="hidden" :name="name" :value="itemsIds"/>
         <a17-button type="button" variant="ghost" @click="openMediaLibrary(remainingItems)">{{ addLabel }}</a17-button>
         <span class="fileField__note f--small">{{ note }}</span>
@@ -67,6 +72,10 @@
       filesizeMax: {
         type: Number,
         default: 0
+      },
+      buttonOnTop: {
+        type: Boolean,
+        default: false
       }
     },
     data: () => {

diff --git a/views/partials/form/_browser.blade.php b/views/partials/form/_browser.blade.php
@@ -19,6 +19,7 @@
     $fieldNote = $fieldNote ?? '';
     $sortable = $sortable ?? true;
     $wide = $wide ?? false;
+    $buttonOnTop = $buttonOnTop ?? false;
 @endphp
 
 <a17-inputframe label="{{ $label }}" name="browsers.{{ $name }}" note="{{ $fieldNote }}">
@@ -31,6 +32,7 @@
         :endpoints="{{ json_encode($endpoints) }}"
         modal-title="{{ twillTrans('twill::lang.fields.browser.attach') . ' ' . strtolower($label) }}"
         :draggable="{{ json_encode($sortable) }}"
+        @if ($buttonOnTop) :button-on-top="true" @endif
     >{{ $note }}</a17-browserfield>
 </a17-inputframe>
 

diff --git a/views/partials/form/_files.blade.php b/views/partials/form/_files.blade.php
@@ -4,18 +4,20 @@
     $note = $note ?? 'Add' . ($max > 1 ? " up to $max $itemLabel" : ' one ' . Str::singular($itemLabel));
     $fieldNote = $fieldNote ?? '';
     $filesizeMax = $filesizeMax ?? 0;
+    $buttonOnTop = $buttonOnTop ?? false;
 @endphp
 
 <a17-locale
     type="a17-filefield"
     :attributes="{
         label: '{{ $label }}',
         itemLabel: '{{ $itemLabel }}',
-        @include('twill::partials.form.utils._field_name', ['asAttributes' => true])
         note: '{{ $note }}',
         fieldNote: '{{ $fieldNote }}',
         max: {{ $max }},
-        filesizeMax: {{ $filesizeMax }}
+        filesizeMax: {{ $filesizeMax }},
+        @if ($buttonOnTop) buttonOnTop: true, @endif
+        @include('twill::partials.form.utils._field_name', ['asAttributes' => true])
     }"
 ></a17-locale>
 

diff --git a/views/partials/form/_medias.blade.php b/views/partials/form/_medias.blade.php
@@ -12,6 +12,7 @@
     $multiple = $max > 1 || $max == 0;
     $widthMin = $widthMin ?? 0;
     $heightMin = $heightMin ?? 0;
+    $buttonOnTop = $buttonOnTop ?? false;
 @endphp
 
 @if (config('twill.media_library.translated_form_fields', $translated ?? false) && ($translated ?? true))
@@ -30,6 +31,7 @@
             @if (!$withAddInfo) withAddInfo: false, @endif
             @if (!$withVideoUrl) withVideoUrl: false, @endif
             @if (!$withCaption) withCaption: false, @endif
+            @if ($buttonOnTop) buttonOnTop: true, @endif
             @include('twill::partials.form.utils._field_name', ['asAttributes' => true])
         }"
     ></a17-locale>
@@ -58,6 +60,7 @@
             @if (!$withCaption) :with-caption="false" @endif
             @if ($altTextMaxLength) :alt-text-max-length="{{ $altTextMaxLength }}" @endif
             @if ($captionMaxLength) :caption-max-length="{{ $captionMaxLength }}" @endif
+            @if ($buttonOnTop) :button-on-top="true" @endif
         >{{ $note }}@if($multiple) </a17-slideshow> @else </a17-mediafield> @endif
     </a17-inputframe>