Global redesign and bug fix

* Redesign of album manager to correspond to the group manager * Bug fix on move album : album can now be moved in first place * Design fixes on album edit, especially on thumbnail * Minor design fixes
Piwigo · Aug 13, 2020 · 69cee65 · 69cee65
1 parent e1dd8ab
commit 69cee65
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 45 deletions.
diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
@@ -327,7 +327,7 @@ p.albumTitle img {margin-bottom:-3px;}
 .groups .GroupContainer,
 .groups .showCreateGroup,
 .groups .addGroupFormBlock{
-  box-shadow: 0px 0px 5px #acacac;
+  box-shadow: 0px 2px 5px #00000024;
 }
 
 .groups #addGroupForm:hover  #addGroup,
@@ -648,7 +648,6 @@ table.dataTable thead th, table.dataTable.no-footer {
 
 FORM#categoryOrdering p.albumTitle a { color: #5B5B5B; }
 FORM#categoryOrdering p.albumActions a { border-left:1px solid #D6D6D6;  background-color: #E8E8E8;}
-.albumInfos {color: #999999;}
 FORM#categoryOrdering p.albumActions a:hover {background-color: #FFA844; color: #3A3A3A;}
 FORM#categoryOrdering p.albumActions .userSeparator {border: 1px solid #E1E1E1;}
 #addAlbumOpen, #autoOrderOpen {border: 1px solid #D6D6D6; color: #5B5B5B;}
@@ -742,15 +741,15 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 }
 
 .albumInfos {
-  color: #aaa;
+  color: #d5d5d5;
 }
 
 .albumActions a {
   color: #848484;
 }
 
 .albumActions a:hover {
-  color: #3c3c3c;
+  color: #FFA646;
   text-decoration: none;
 }
 

diff --git a/admin/themes/default/js/cat_move.js b/admin/themes/default/js/cat_move.js
@@ -30,7 +30,7 @@ $(document).ready(() => {
     cont.append($(icon.replace(/%icon%/g, 'icon-grip-vertical-solid')));
 
     if (node.children.length != 0) {
-      cont.append($(icon.replace(/%icon%/g, 'icon-flow-tree')));
+      cont.append($(icon.replace(/%icon%/g, 'icon-sitemap')));
     } else {
       cont.append($(icon.replace(/%icon%/g, 'icon-folder-open')));
     }
@@ -59,7 +59,7 @@ $(document).ready(() => {
 
     var colors = ["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"];
     var colorId = Number(node.id)%5;
-    cont.find(".icon-folder-open, .icon-flow-tree").addClass(colors[colorId]);  
+    cont.find(".icon-folder-open, .icon-sitemap").addClass(colors[colorId]);  
   }
 
   $('.tree').on( 'click', '.move-cat-toogler', function(e) {
@@ -134,7 +134,6 @@ $(document).ready(() => {
   $('.tree').on( 'click', '.move-cat-order', function(e) {
     var node_id = $(this).attr('data-id');
     var node = $('.tree').tree('getNodeById', node_id);
-    console.log(node);
     if (node) {
       $('.cat-move-order-popin').fadeIn();
       $('.cat-move-order-popin .album-name').html(getPathNode(node));
@@ -200,7 +199,9 @@ function applyMove(event) {
       moveParent = getId(target);
     }
     moveRank = 1;
-  }
+  } else if (event.move_info.position == 'before') {
+    moveRank = 1;
+  } 
   moveNode(id, moveRank, moveParent).then(() => {
     event.move_info.do_move();
     clearTimeout(waitingTimeout);

diff --git a/admin/themes/default/js/tags.js b/admin/themes/default/js/tags.js
@@ -302,8 +302,6 @@ function removeTag(id, name) {
 }
 
 function renameTag(id, new_name) {
-  console.log('problème');
-
   return new Promise((resolve, reject) => {
     jQuery.ajax({
       url: "ws.php?format=json&method=pwg.tags.rename",

diff --git a/admin/themes/default/template/cat_list.tpl b/admin/themes/default/template/cat_list.tpl
@@ -30,7 +30,7 @@ jQuery(document).ready(function(){
 
     <div class="albumIcon">
       <span class="
-      {if $category.NB_SUB_ALBUMS == 0}icon-flow-tree{else}icon-folder-open{/if} 
+      {if $category.NB_SUB_ALBUMS == 0}icon-folder-open{else}icon-sitemap{/if} 
       {$color_tab[$category.ID % 5]}
       "> </span>
     </div>
@@ -42,7 +42,7 @@ jQuery(document).ready(function(){
 
     <div class="albumActions">
       <a href="{$category.U_EDIT}" title="{'Edit'|@translate}"><span class="icon-pencil"></span>{'Edit'|@translate}</a>
-      <a href="{$category.U_CHILDREN}" class="actionTitle" title="{'sub-albums'|@translate}"><span class="icon-flow-tree"></span>{'sub-albums'|@translate}</a>
+      <a href="{$category.U_CHILDREN}" class="actionTitle" title="{'sub-albums'|@translate}"><span class="icon-sitemap"></span>{'sub-albums'|@translate}</a>
       {if cat_admin_access($category.ID)}
       <a href="{$category.U_JUMPTO}" title="{'Visit Gallery'|@translate}"><span class="icon-eye"></span>{'Visit Gallery'|@translate} </a>
       {else}

diff --git a/admin/themes/default/template/cat_modify.tpl b/admin/themes/default/template/cat_modify.tpl
@@ -45,7 +45,7 @@ jQuery(document).ready(function() {
       success:function(data) {
         var data = jQuery.parseJSON(data);
         if (data.stat == 'ok') {
-          console.log('plouk');
+          jQuery(".deleteRepresentative").show();
           
           jQuery(".albumThumbailImage, .albumThumbnailRandom").on('load', function () {
             cropImage();
@@ -55,9 +55,6 @@ jQuery(document).ready(function() {
             .attr('src', data.result.src)
             .end().show();
 
-
-          jQuery(".albumThumbnailEdit")
-            .attr('href', data.result.url)
           jQuery(".albumThumbnailRandom").hide();
         }
         else {
@@ -85,12 +82,9 @@ jQuery(document).ready(function() {
       success:function(data) {
         var data = jQuery.parseJSON(data);
         if (data.stat == 'ok') {
+          jQuery(".deleteRepresentative").hide();
           jQuery(".albumThumbnailImage").hide();
-          if (jQuery(".albumThumbnailActions").data('random_allowed') == '') {
-            jQuery(".deleteRepresentative").hide();
-          } else {
-            jQuery(".albumThumbnailRandom").show();
-          }
+          jQuery(".albumThumbnailRandom").show();
         }
         else {
           alert("error on "+method);
@@ -196,7 +190,7 @@ function cropImage() {
 
 
 <div class="titrePage">
-  <h2>{'Edit album'|@translate} #{$CAT_ID} <span style="letter-spacing:0">{$CATEGORIES_NAV}</span></h2>
+  <h2>{'Edit album'|@translate} <span title="{'Numeric identifier'|@translate}">#{$CAT_ID}</span> <span style="letter-spacing:0">{$CATEGORIES_NAV}</span></h2>
 </div>
 
 <div id="catModify">
@@ -208,27 +202,28 @@ function cropImage() {
 
   <div id="catHeader">
 
-  {if isset($representant) }
+
     <div class="catThumbnail">
       <div class="thumbnailContainer">
+        {if isset($representant) }
         <img class="albumThumbailImage" src="{$representant.picture.src}">
-        <img class="albumThumbnailRandom" style="{if isset($representant.picture)}display:none{/if}" src="{$ROOT_URL}{$themeconf.admin_icon_dir}/category_representant_random.png" alt="{'Random photo'|@translate}">
+        <div class="albumThumbnailRandom" style="{if isset($representant.picture)}display:none{/if}"><span class="icon-dice-solid"></span></div>
 
         <div class="albumThumbnailActions" data-random_allowed="{$representant.ALLOW_SET_RANDOM}">
           <div class="albumThumbnailActionContainer"> 
             {if $representant.ALLOW_SET_RANDOM }
-            <a href="#refresh" data-category_id="{$CAT_ID}" class="refreshRepresentative icon-ccw" title="{'Find a new representant by random'|@translate}">{'Refresh'|@translate}</a>
+            <a href="#refresh" data-category_id="{$CAT_ID}" class="refreshRepresentative icon-ccw" title="{'Find a new representant by random'|@translate}">{'Refresh thumbnail'|@translate}</a>
             {/if}
-            {if isset($representant.ALLOW_DELETE) }
-            <a href="#delete" data-category_id="{$CAT_ID}" class="deleteRepresentative icon-cancel" title="{'Delete Representant'|@translate}">{'Delete'|translate}</a>
+            {if isset($representant.ALLOW_DELETE)}
+            <a href="#delete" data-category_id="{$CAT_ID}" class="deleteRepresentative icon-cancel" title="{'Delete Representant'|@translate}" style="{if !isset($representant.picture)}display:none{/if}">{'Remove thumbnail'|translate}</a>
             {/if}
-            <a class="albumThumbnailEdit icon-pencil" style="{if !isset($representant.picture)}display:none{/if}" href="{$representant.picture.url}">{'Edit photo'|@translate}</a>           
           </div>
         </div>
+        {else}
+          <div class="albumThumbnailNoPhoto" title="{'No photos in the current album, no thumbnail available'|@translate}"><span class="icon-file-image"></span></div>
+        {/if}
       </div>
-
     </div>
-  {/if}
 
     <div class="catInfo">
       <div class="container">
@@ -242,7 +237,9 @@ function cropImage() {
         {if isset($INFO_DIRECT_SUB)}
           <span class="icon-blue">{$INFO_DIRECT_SUB}</span>
         {/if}
-        <span class="icon-green" >{$INFO_ID}</span>
+        {if isset($U_SYNC) }
+        <span class="icon-green" >{'Directory'|@translate} : {$CAT_FULL_DIR}</span>
+        {/if}
       </div>
     </div>
 
@@ -262,7 +259,7 @@ function cropImage() {
         <a class="icon-sitemap" href="{$U_CHILDREN}">{'manage sub-albums'|@translate}</a>
 
       {if isset($U_SYNC) }
-        <a class="icon-exchange" href="{$U_SYNC}">{'Synchronize'|@translate}</a> ({'Directory'|@translate} = {$CAT_FULL_DIR})
+        <a class="icon-exchange" href="{$U_SYNC}">{'Synchronize'|@translate}</a>
       {/if}
 
       {if isset($U_DELETE) }
@@ -274,19 +271,22 @@ function cropImage() {
     <div class="catLock">
     <div class="container">
       <div>
-        <strong>{'Publication'|@translate}</strong>
+        <strong>
+          {'Publication'|@translate}
+          <span class="icon-help-circled" title="{'Locked albums are disabled for maintenance. Only administrators can view them in the gallery. Lock this album will also lock his Sub-albums'|@translate}" style="cursor:help"></span>
+        </strong>
         <div class="switch-input">
-          <span class="label">{'Unlock'|@translate}</span>
+          <span class="label">{'Unlocked'|@translate}</span>
           <label class="switch">
-            <input type="checkbox" name="visible" id="toggleSelectionMode" value="true" {if $CAT_VISIBLE == "true"}checked{/if}>
+            <input type="checkbox" name="visible" id="toggleSelectionMode" value="true" {if $CAT_VISIBLE == "false"}checked{/if}>
             <span class="slider round"></span>
           </label>
-          <span class="label">{'Lock'|@translate}</span>
+          <span class="label">{'Locked'|@translate}</span>
         </div>    
       </div>
     {if isset($CAT_COMMENTABLE)}
       <div>
-        <strong>{'Comments'|@translate}</strong>
+        <strong>{'Comments'|@translate} <span class="icon-help-circled" title="{'A photo can receive comments from your visitors if it belongs to an album with comments activated.'|@translate}" style="cursor:help"></span></strong>
         <div class="switch-input">
           <span class="label">{'Forbidden'|@translate}</span>
           <label class="switch">
@@ -296,9 +296,11 @@ function cropImage() {
           <span class="label">{'Authorized'|@translate}</span>
         <div>
         <label id="applytoSubAction">
+        {if isset($INFO_DIRECT_SUB)}
         <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="apply_commentable_on_sub"></label>
           {'Apply to sub-albums'|@translate}
         </label>
+        {/if}
       </div>
     {/if}
       </div>

diff --git a/admin/themes/default/template/cat_move.tpl b/admin/themes/default/template/cat_move.tpl
@@ -78,7 +78,7 @@ var openCat = {$open_cat};
 
 <div class="cat-move-header"> 
   <div class="cat-move-info icon-help-circled"> {'Drag and drop to reorder albums'|@translate}</div>
-  <a class="order-root icon-flow-tree"> {'Apply an automatic order to root albums'|@translate} </a>
+  <a class="order-root icon-sitemap"> {'Apply an automatic order to root albums'|@translate} </a>
 </div>
 
 <div class='tree'> </div>
diff --git a/admin/themes/default/template/plugins_installed.tpl b/admin/themes/default/template/plugins_installed.tpl
@@ -146,7 +146,6 @@ jQuery(document).ready(function() {
         }
         searchNumber += searchNumberInBox;
       });
-      console.log(searchNumber);
       if (searchNumber == 0) {
           jQuery(".emptyResearch").fadeIn();
         } else {

diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
@@ -194,8 +194,10 @@ TABLE.languages TR TD { padding: 7px 20px; }
 
 .albumInfos {
   text-align: center;
-  color: #aaa;
   font-weight: 600;
+  font-size: 14px;
+  margin-top: 10px;
+  display: block;
 }
 
 .albumInfos p {
@@ -297,6 +299,11 @@ TABLE.languages TR TD { padding: 7px 20px; }
   display: inline-block;
   width: 159px;
   margin-top: 20px;
+  font-size: 15px;
+}
+
+.addAlbum form input::placeholder {
+  color: rgb(206, 206, 206);
 }
 
 .addAlbum button, .addAlbum a {
@@ -368,13 +375,27 @@ LI.menuLi {
   padding-top: 100%;
 }
 
-#catHeader .albumThumbailImage, #catHeader .albumThumbnailRandom, #catHeader .albumThumbnailActions, #catHeader .albumThumbnailActionContainer{
+#catHeader .albumThumbailImage, #catHeader .albumThumbnailRandom, #catHeader .albumThumbnailActions, #catHeader .albumThumbnailActionContainer, #catHeader .albumThumbnailNoPhoto{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 
+#catHeader .albumThumbnailRandom, #catHeader .albumThumbnailNoPhoto {
+  height: 100%;
+  width: 100%;
+  background-color: #fafafa;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#catHeader .albumThumbnailRandom span, #catHeader .albumThumbnailNoPhoto span {
+  font-size: 100px;
+  opacity: 0.4;
+}
+
 #catHeader .albumThumbnailActions {
   width: 101%;
   height: 100%;
@@ -398,6 +419,7 @@ LI.menuLi {
   white-space: nowrap;
   font-weight: bold;
   color: #3C3C3C;
+  text-align: center;
 }
 
 #catHeader .albumThumbnailActions a:hover {
@@ -413,6 +435,7 @@ LI.menuLi {
 #catHeader .catInfo {
   display: flex;
   justify-content: center;
+  padding: 10px
 }
 
 #catHeader .catInfo .container{
@@ -3012,7 +3035,6 @@ FORM#categoryOrdering p.albumActions a {
 	padding-top: 22px;
 }
 
-.albumInfos { font-size: 12px; }
 .actionTitle span {text-transform: capitalize;}
 
 FORM#categoryOrdering p.albumActions a:hover {text-decoration: none;}
@@ -3050,6 +3072,7 @@ FORM#categoryOrdering p.albumActions .userSeparator {margin:0 5px;}
 
 .tree {
   margin: 20px;
+  padding-top: 1px;
 }
 
 .move-cat-container {
@@ -3060,17 +3083,17 @@ FORM#categoryOrdering p.albumActions .userSeparator {margin:0 5px;}
   border-radius: 5px;
   color: #777;
   padding: 5px 10px;
-  padding-left: 20px;
+  padding-left: 28px;
 }
 
 .move-cat-container .icon-grip-vertical-solid {
   font-size: 16px;
   opacity: 0.5;
   position: absolute;
-  left: 0px;
+  left: 6px;
 }
 
-.move-cat-container .icon-folder-open, .move-cat-container .icon-flow-tree {
+.move-cat-container .icon-folder-open, .move-cat-container .icon-sitemap {
   display: inline-block;
   border-radius: 50%;
   font-size: 20px;
@@ -3103,6 +3126,10 @@ FORM#categoryOrdering p.albumActions .userSeparator {margin:0 5px;}
   font-weight: 600;
 }
 
+.move-cat-container .move-cat-toogler .icon-left-open{
+  transform: rotate(90deg);
+}
+
 .move-cat-action-cont {
   display: none;
   position: absolute;