Issue #1193 : Design fixes

* Change and universalize dropdown design * Add a button for clearing search input and universalize it * Minor design fix on tag manager
Piwigo · Jun 24, 2020 · ec2c36e · ec2c36e
1 parent 67c1c13
commit ec2c36e
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 29 deletions.
diff --git a/admin/tags.php b/admin/tags.php
@@ -72,7 +72,7 @@
 if (count($orphan_tag_names) > 0)
 {
   $warning_tags = sprintf(
-    l10n('You have %d orphan tags %s.'),
+    l10n('You have %d orphan tags %s'),
     count($orphan_tag_names),
     '<a 
       data-tags=\'["'.implode('" ,"', $orphan_tag_names).'"]\' 

diff --git a/admin/themes/default/js/common.js b/admin/themes/default/js/common.js
@@ -127,6 +127,11 @@ function sprintf() {
   return o.join('');
 }
 
+$('.search-cancel').on('click', function () {
+  $('.search-input').val('');
+  $('.search-input').trigger ("input");
+})
+
 // Class to implement a temporary state and reverse it
 class TemporaryState {
   //Arrays to reverse changes

diff --git a/admin/themes/default/js/tags.js b/admin/themes/default/js/tags.js
@@ -25,6 +25,9 @@ $('.tag-warning p a').on('click', () => {
       },
       keep : {
         text:str_keep_them,
+        action: function() {
+          $('.tag-warning').hide();
+        }
       }
     }
   })
@@ -38,10 +41,12 @@ function updateBadge() {
 //Add a tag
 $('.add-tag-container').on('click', function() {
   $('#add-tag').addClass('input-mode');
+  $('.tag-info').hide();
 })
 
-$('#add-tag .icon-cancel').on('click', function() {
+$('#add-tag .icon-cancel-circled').on('click', function() {
   $('#add-tag').removeClass('input-mode');
+  $('.tag-info').hide();
 })
 
 //Display/Hide tag option
@@ -330,6 +335,7 @@ maxItemDisplayed = 5;
 $("#toggleSelectionMode").attr("checked", false)
 $("#toggleSelectionMode").click(function () {
   selectionMode($(this).is(":checked"))
+  $('.tag-info').hide()
 });
 
 function selectionMode(isSelection) {
@@ -593,7 +599,10 @@ function mergeGroups(destination_id, merge_ids) {
             })
             if (data.result.images_in_merged_tag.length > 0) {
               tagBox = $('.tag-box[data-id='+data.result.destination_tag+']')
-              tagBox.find('.tag-dropdown-action.view, .tag-dropdown-action.manage').show();
+              tagBox.find('.tag-dropdown-action.view,'+ 
+              '.tag-dropdown-action.manage,'+
+              '.tag-dropdown-header i').show();
+              $('.tag-dropdown-header i').html(str_number_photos.replace('%d', data.result.images_in_merged_tag.length))
             }
             $(".tag-box").attr("data-selected", '0');
             updateListItem();

diff --git a/admin/themes/default/template/group_list.tpl b/admin/themes/default/template/group_list.tpl
@@ -215,6 +215,7 @@ var rootUrl = '{$ROOT_URL}'
         </div>
         <div class='search-user'>
           <span class="icon-filter search-icon"></span>
+          <span class="icon-cancel search-cancel"></span>
           <input class="input-user-name search-input" type="text" name="username" maxlength="50" size="20" placeholder="{'Filter'|@translate}">
         </div>
       </div>

diff --git a/admin/themes/default/template/plugins_installed.tpl b/admin/themes/default/template/plugins_installed.tpl
@@ -1,4 +1,5 @@
 {combine_script id='jquery.ajaxmanager' load='footer' require='jquery' path='themes/default/js/plugins/jquery.ajaxmanager.js' }
+{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
 
 {footer_script require='jquery.ajaxmanager'}
 /* incompatible message */
@@ -190,6 +191,7 @@ jQuery(".pluginMiniBox").each(function(index){
 
 <div class="pluginFilter"> 
   <span class="icon-filter search-icon"></span>
+  <span class="icon-cancel search-cancel"></span>
   <input class='search-input' type="text" placeholder="{'Filter'|@translate}">
 </div>
 

diff --git a/admin/themes/default/template/tags.tpl b/admin/themes/default/template/tags.tpl
@@ -18,6 +18,7 @@ var str_other_copy = '{' (copy %s)'|@translate}';
 var str_merged_into = '{'Tag(s) \{%s1\} succesfully merged into "%s2"'|@translate}';
 var str_and_others_tags = '{'and %s others'|@translate}';
 var str_others_tags_available = '{'%s other tags available...'|@translate}'
+var str_number_photos = '{'%d photos'}'
 {/footer_script}
 
 {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
@@ -32,8 +33,12 @@ var str_others_tags_available = '{'%s other tags available...'|@translate}'
     <p class='tag-name'>{$tag_name}</p>
     <a class="icon-ellipsis-vert showOptions"></a>
     <div class="tag-dropdown-block">
-      <a class='tag-dropdown-action icon-eye view' href="{$tag_U_VIEW}" {if !$has_image} style='display:none' {/if}>{'View in gallery'|@translate}</a>
-      <a class='tag-dropdown-action icon-picture manage' href="{$tag_U_EDIT}" {if !$has_image} style='display:none' {/if}>{'Manage photos'|@translate}</a>
+      <div class='tag-dropdown-header'>
+        <b>{$tag_name}</b>
+        <i>{if !$has_image}{'no photo'|@translate}{else}{'%d photos'|@translate:$tag_count}{/if}</i>
+      </div>
+      <a class='tag-dropdown-action icon-eye view' href="{$tag_U_VIEW}" {if !$has_image} style='display:none' {/if}> {'View in gallery'|@translate}</a>
+      <a class='tag-dropdown-action icon-picture manage' href="{$tag_U_EDIT}" {if !$has_image} style='display:none' {/if}> {'Manage photos'|@translate}</a>
       <a class='tag-dropdown-action icon-pencil edit'> {'Edit'|@translate}</a>
       <a class='tag-dropdown-action icon-docs duplicate'> {'Duplicate'|@translate}</a>
       <a class='tag-dropdown-action icon-trash delete'> {'Delete'|@translate}</a>
@@ -96,16 +101,17 @@ var str_others_tags_available = '{'%s other tags available...'|@translate}'
 <div class='tag-header'>
   <div id='search-tag'>
     <span class='icon-filter search-icon'> </span>
+    <span class="icon-cancel search-cancel"></span>
     <input class='search-input' type='text' placeholder='{'Filter'|@translate}'>
   </div>
   <form id='add-tag' class='not-in-selection-mode'>
-    <span class='icon-cancel'></span>
+    <span class='icon-cancel-circled'></span>
     <label class='add-tag-label icon-plus-circled'>
       <p>{'Add a tag'|@translate}</p>
       <div class='add-tag-container'>
         <input type='text' id='add-tag-input' placeholder="{'New tag'|@translate}">
         <input type='submit' hidden>
-        <span class='icon-plus-circled icon-validate'></span>
+        <span class='icon-plus icon-validate'></span>
       </div>
     </label>
   </form>
@@ -130,6 +136,7 @@ var str_others_tags_available = '{'%s other tags available...'|@translate}'
         tag_U_VIEW=$tag.U_VIEW 
         tag_U_EDIT=$tag.U_EDIT
         has_image=($tag.counter > 0)
+        tag_count=$tag.counter
       }
   </div>
   {/foreach}
@@ -143,5 +150,6 @@ var str_others_tags_available = '{'%s other tags available...'|@translate}'
     tag_U_VIEW='%U_VIEW%' 
     tag_U_EDIT='%U_EDIT%'
     has_image=false
+    tag_count='%count%'
   }
 </div> 
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
@@ -262,6 +262,20 @@ TABLE.doubleSelect SELECT.categoryList {
   background-color: #f0f0f0 !important;
 }
 
+.search-cancel {
+  right: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.4;
+  cursor: pointer;
+  position: absolute;
+  font-size: 18px;
+}
+
+.search-cancel:hover {
+  opacity: 1;
+}
+
 .search-icon {
   position: absolute;
   top: 50%;
@@ -3309,42 +3323,51 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .tag-header #add-tag.input-mode .add-tag-container {
   display: flex;
+  margin-right: 35px;
 }
 
 .tag-header #add-tag.input-mode .add-tag-container input {
-  padding: 10px;
+  padding: 9.5px;
   margin-left: 10px;
   border: solid 2px #ffa744;
   background: none;
+  width: 100px;
 }
 
 .tag-header #add-tag.input-mode .add-tag-container input:hover {
   background-color: #f0f0f0 !important;
 }
 
-.tag-header #add-tag span.icon-cancel{
+.tag-header #add-tag span.icon-cancel-circled{
   display: none;
   position: absolute;
-  right: 0;
+  right: 15px;
   top: 50%;
-  transform: translate(30px, -53%);
+  transform: translate(15px, -53%);
   z-index: 2;
+  font-size: 25px !important;
+  cursor: pointer;
 }
 
-.tag-header #add-tag.input-mode span{
+.tag-header #add-tag.input-mode .icon-cancel-circled {
   display: block;
-  margin: auto 5px;
-  font-size: 26px;
-  cursor: pointer;
-  margin-right: 20px;
 }
 
-.tag-header #add-tag span.icon-plus-circled {
-  color: #ffa744;
+.tag-header #add-tag span.icon-cancel-circled:hover {
+  color: #ff7700;
 }
 
-.tag-header #add-tag span:hover {
-  color: #ff7700;
+.tag-header #add-tag.input-mode .icon-validate{
+  display: block;
+  margin: auto 5px;
+  font-size: 20px;
+  cursor: pointer;
+  background-color: #ffa744;
+  padding: 5.5px;
+}
+
+.tag-header #add-tag span.icon-validate:hover {
+  background-color: #ff7700;
 }
 
 .tag-header .selection-controller {
@@ -3399,7 +3422,6 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  max-width: 300px;
   text-align: initial;
 }
 
@@ -3497,15 +3519,15 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .tag-container .tag-box .tag-dropdown-block {
   display:none;
-  position:absolute;
+  position: absolute;
   right: 0;
-  top: 30px;
-  background-color:white;
-  z-index:2;
-  padding:5px 0px;
-  box-shadow: 0px 0px 5px #d7d7d7;
+  top: 25px;
+  z-index: 2;
+  padding: 5px 0px;
   border-radius: 10px;
   transform: translateX(85%);
+  background: linear-gradient(151.2deg, rgb(255, 31, 30) 0%, rgb(247, 104, 58) 32%, rgb(255, 166, 70) 100%);
+  color: white;
 }
 
 .tag-container .tag-box .tag-dropdown-block .tag-dropdown-action {
@@ -3514,12 +3536,32 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   padding: 5px 10px;
   font-size: 13px;
   padding-right: 15px;
+  color: white;
+  font-weight: bold;
 }
 
 .tag-container .tag-box .tag-dropdown-block .tag-dropdown-action:hover {
-  color: #3A3A3A;
   text-decoration: none;
-  background-color: #e7e7e7;
+  background-color: #ffffff4f;
+}
+
+.tag-container .tag-box .tag-dropdown-block .tag-dropdown-header {
+  white-space: nowrap;
+  width: 85%;
+  display: flex;
+  margin: auto;
+  justify-content: space-between;
+  color: white;
+  border-bottom: solid 1px #ffffff17;
+  padding: 3px;
+}
+
+.tag-container .tag-box .tag-dropdown-header b {
+  font-weight: bold;
+  margin-right: 2px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .tag-container .tag-box .select-checkbox {