Release v2.13.2

src/web/views/settings/media-library/list.hbs

@@ -1,43 +1,20 @@
 <div class="page-header">
   <div>
     <h2>Media library</h2>
-    <p>Upload shared images and videos for use across slides and templates.</p>
+    <p>Manage reusable images and videos for slides and templates.</p>
   </div>
 </div>
 
 <link rel="stylesheet" href="/assets/vendor/cropperjs/cropper.min.css" />
 
-{{#if (hasPermission currentUser 'media-library.create')}}
-<div class="card card-outline card-primary mb-4">
-  <div class="card-header"><h3 class="card-title">Upload media</h3></div>
-  <form method="post" action="/media-library" enctype="multipart/form-data">
-    <div class="card-body">
-      <div>
-        <label class="slide-image-region-upload-zone media-library-upload-zone" for="media-library-upload" data-media-library-upload-zone>
-            <input type="file" id="media-library-upload" name="file" class="visually-hidden" accept="{{#each uploadLimits.allowedMimeTypes}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}" data-media-library-upload data-image-max-bytes="{{uploadLimits.imageMaxBytes}}" data-video-max-bytes="{{uploadLimits.videoMaxBytes}}" required />
-            <span class="slide-image-region-upload-zone-content">
-              <span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>
-              <span class="slide-image-region-upload-zone-copy">
-                <strong>Drop an image or video here or click to upload</strong>
-                <span>Images and videos enabled in Media Uploads settings</span>
-                <span class="slide-image-region-upload-zone-limit">Images max {{uploadLimits.imageMaxLabel}}; videos max {{uploadLimits.videoMaxLabel}}</span>
-              </span>
-            </span>
-        </label>
-      </div>
-    </div>
-  </form>
-</div>
-{{/if}}
-
 <section class="media-gallery" data-media-gallery-offset="{{assets.length}}" data-media-gallery-has-more="{{#if hasMore}}true{{else}}false{{/if}}">
   <div class="media-gallery-toolbar">
-    <div>
-      <h3 class="h5 mb-1">Shared media</h3>
-      <p class="text-body-secondary small mb-0"><span data-media-gallery-count>{{assetTotal}}</span> item{{#unless (eq assetTotal 1)}}s{{/unless}}</p>
-    </div>
+    {{#if (hasPermission currentUser 'media-library.create')}}
+    <button type="button" class="btn btn-primary btn-sm text-nowrap" data-media-library-add><i class="bi bi-plus-lg me-1" aria-hidden="true"></i>Add media</button>
+    {{/if}}
     {{#if assets.length}}
     <div class="media-gallery-controls">
+      <p class="media-gallery-count text-body-secondary small mb-0"><span data-media-gallery-count>{{assetTotal}}</span> item{{#unless (eq assetTotal 1)}}s{{/unless}}</p>
       <div class="media-gallery-search d-flex flex-wrap gap-2">
       <label class="visually-hidden" for="media-gallery-search-input">Search media</label>
       <div class="input-group input-group-sm">
@@ -66,11 +43,13 @@
         <option value="size-asc">Smallest first</option>
       </select>
       {{#if (hasPermission currentUser 'media-library.delete')}}
-      <button type="button" class="btn btn-outline-secondary btn-sm" data-media-gallery-select-mode aria-pressed="false">Select</button>
-      <button type="button" class="btn btn-outline-danger btn-sm" data-media-gallery-delete-selected hidden disabled title="Delete selected media">Delete</button>
+      <button type="button" class="btn btn-secondary btn-sm" data-media-gallery-select-mode aria-pressed="false">Select</button>
+      <button type="button" class="btn btn-danger btn-sm" data-media-gallery-delete-selected hidden disabled title="Delete selected media">Delete</button>
       {{/if}}
       </div>
     </div>
+    {{else}}
+    <p class="media-gallery-count text-body-secondary small mb-0"><span data-media-gallery-count>{{assetTotal}}</span> item{{#unless (eq assetTotal 1)}}s{{/unless}}</p>
     {{/if}}
   </div>
 
@@ -114,7 +93,7 @@
   </div>
   <div class="media-gallery-empty text-body-secondary" data-media-gallery-no-results hidden>No media matches your search.</div>
   {{else}}
-  <div class="media-gallery-empty text-body-secondary">No shared media yet.</div>
+  <div class="media-gallery-empty text-body-secondary">No media yet.</div>
   {{/if}}
 </section>
 
@@ -126,6 +105,30 @@
   <div class="modal-body media-gallery-preview-modal-body" data-media-gallery-preview-body></div>
 {{/modal-shell}}
 
+{{#if (hasPermission currentUser 'media-library.create')}}
+{{#> modal-shell modalId="media-library-upload-modal" modalLabelId="media-library-upload-modal-label" modalDialogClass="modal-dialog-centered modal-lg"}}
+  <div class="modal-header">
+    <h2 class="modal-title fs-5" id="media-library-upload-modal-label">Add media</h2>
+    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+  </div>
+  <form method="post" action="/media-library" enctype="multipart/form-data">
+    <div class="modal-body">
+      <label class="slide-image-region-upload-zone media-library-upload-zone" for="media-library-upload" data-media-library-upload-zone>
+        <input type="file" id="media-library-upload" name="file" class="visually-hidden" accept="{{#each uploadLimits.allowedMimeTypes}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}" data-media-library-upload data-image-max-bytes="{{uploadLimits.imageMaxBytes}}" data-video-max-bytes="{{uploadLimits.videoMaxBytes}}" required />
+        <span class="slide-image-region-upload-zone-content">
+          <span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>
+          <span class="slide-image-region-upload-zone-copy">
+            <strong>Drop an image or video here or click to upload</strong>
+            <span>Images and videos enabled in Media Uploads settings</span>
+            <span class="slide-image-region-upload-zone-limit">Images max {{uploadLimits.imageMaxLabel}}; videos max {{uploadLimits.videoMaxLabel}}</span>
+          </span>
+        </span>
+      </label>
+    </div>
+  </form>
+{{/modal-shell}}
+{{/if}}
+
 {{#> modal-shell modalId="media-library-crop-modal" modalLabelId="media-library-crop-modal-label" modalDialogClass="modal-dialog-centered modal-xl" modalBackdropStatic=true modalKeyboardDisabled=true}}
   <div class="modal-header">
     <div>