related to #1609 possibility to add album at root + can add as first or last works + sort order btn

admin/themes/default/js/albums.js

@@ -212,6 +212,10 @@ $(document).ready(() => {
   // AddAlbumPopIn
   $(".AddAlbumErrors").hide();
   $(".DeleteAlbumErrors").hide();
+  $(".add-album-button").on("click", function () {
+    openAddAlbumPopIn();
+    $(".AddAlbumSubmit").data("a-parent", 0);
+  })
   $(".move-cat-add").on("click", function () {
     openAddAlbumPopIn();
     $(".AddAlbumSubmit").data("a-parent", $(this).data("aid"));
@@ -242,7 +246,8 @@ $(document).ready(() => {
       success: function (raw_data) {
         data = jQuery.parseJSON(raw_data);
         var parent_node = $('.tree').tree('getNodeById', newAlbumParent);
-        $('.tree').tree(
+        if (newAlbumPosition == "last") {
+          $('.tree').tree(
             'appendNode',
             {
               id: data.result.id,
@@ -250,7 +255,19 @@ $(document).ready(() => {
               name: newAlbumName
             },
             parent_node
-        );
+          );
+        } else {
+          $('.tree').tree(
+            'prependNode',
+            {
+              id: data.result.id,
+              isEmptyFolder: true,
+              name: newAlbumName
+            },
+            parent_node
+          );
+        }
+
 
         $(".move-cat-add").unbind("click").on("click", function () {
           openAddAlbumPopIn();

admin/themes/default/template/albums.tpl

@@ -100,13 +100,21 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
 </div>
 
 <div class="cat-move-header"> 
-  <div class="cat-move-info icon-help-circled"> {'Drag and drop to reorder albums'|@translate}</div>
+  <div class="add-album-button">
+    <label class="album-add-button-label icon-plus-circled">
+      <p>{'Add an album'|@translate}</p>
+    </label>
+  </div>
+  <div class="order-root-button">
+    <label class="order-root order-root-button-label icon-sort-name-up">
+      <p>{'Automatic sort order'|@translate}</p>
+    </label>
+  </div>
   <div class="albumsFilter"> 
     <span class="icon-search search-icon"></span>
     <span class="icon-cancel search-cancel"></span>
     <input class='search-input' type="text" placeholder="{'Search'|@translate}">
   </div>
-  <a class="order-root icon-sitemap"> {'Apply an automatic order to root albums'|@translate} </a>
 </div>
 
 <div id="AddAlbum" class="AddAlbumPopIn">
@@ -408,4 +416,27 @@ input[name="position"] {
 .deleteAlbumOptions input{
   margin-right: 5px;
 }
+
+.album-add-button-label, .order-root-button-label {
+  padding: 10px;
+  box-shadow: 0px 2px #00000024;
+  border-radius: 5px;
+  font-weight: bold;
+  display: flex;
+  align-items: baseline;
+  cursor: pointer;
+  font-size: 13px;
+  background-color: #fafafa;
+  height: 18px;
+}
+.album-add-button-label p,
+.order-root-button-label p {
+  white-space: nowrap;
+  margin: 0 !important;
+}
+
+.add-album-button,
+.order-root-button {
+  margin: 0 10px 0 0;
+}
 </style>

admin/themes/default/theme.css

@@ -2081,7 +2081,7 @@ h2:lang(en) { text-transform:capitalize; }
 }
 
 .pluginFilter {justify-content: end;position: absolute;right: 160px; z-index: 2; transform: translateY(6px);}
-.albumsFilter { margin-right: 20px; }
+.albumsFilter { margin-left: auto; }
 
 .pluginBox {
   display:flex;
@@ -4097,15 +4097,14 @@ FORM#categoryOrdering p.albumActions .userSeparator {margin:0 5px;}
 /* Move Album */
 .cat-move-header {
   display: flex;
-  margin: 0px 30px;
+  margin: 0px 20px;
   align-items: center;
   font-size: 14px;
-  justify-content: space-between;
   margin-top: 20px;
 }
 
 .cat-move-header .order-root::before {
-  font-size: 16px;
+  font-size: 13px;
 }
 
 .cat-move-header .cat-move-info {