Issue #1193 : Design fixes

admin/tags.php

@@ -72,12 +72,13 @@ foreach ($orphan_tags as $tag)
 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).'"]\' 
+      class="icon-eye"
       data-url="'.get_root_url().'admin.php?page=tags&amp;action=delete_orphans&amp;pwg_token='.get_pwg_token().'">'
-      .l10n('See details').'</a>'
+      .l10n('Review').'</a>'
     );
 }
 

admin/themes/default/js/group_list.js

@@ -11,6 +11,11 @@ $(".CloseGroupPopup").click(function () {
   $(".Group_details-popup-container").hide();
 });
 
+//Number On Badge
+function updateBadge() {
+  $('.badge-number').html($('.GroupContainer').length - 2) //Less the add group div and the template
+}
+
 /*-------
  Add User toggle and reduces height of user list when add user form is visible
  -------*/
@@ -87,6 +92,7 @@ jQuery(document).ready(function () {
           groupBox = createGroup(group)
           groupBox.prependTo(".groups")
           setupGroupBox(groupBox);
+          updateBadge();
         } else {
           $("#addGroupForm .groupError").html(str_name_taken);
           $("#addGroupForm .groupError").fadeIn();
@@ -282,6 +288,7 @@ var deleteGroup = function (id) {
                       $(".DeleteGroupList div[data-id="+id+"]").remove()
                       $("#MergeOptionsChoices option[value="+ id +"]").remove()
                     }
+                    updateBadge();
                   },
                   error: function (err) {
                     console.log(err);
@@ -429,6 +436,7 @@ var duplicateAction = function(id) {
         let groupbox = createGroup(group)
         groupbox.insertAfter($("#group-"+id));
         setupGroupBox(groupbox);
+        updateBadge();
       }
     },
     error: function (err) {
@@ -608,6 +616,7 @@ $('.ConfirmMergeButton').on("click", function() {
             $("#group-"+dest_grp + " .group_number_users").html(
               number + " " + ((number > 1)? str_members_default:str_member_default)
             );
+            updateBadge();
           }
         })
       };
@@ -659,6 +668,7 @@ $('.ConfirmDeleteButton').on("click", function() {
           },
           ...jConfirm_alert_options
         });
+        updateBadge();
       }
     },
     error: function (err) {

admin/themes/default/js/tags.js

@@ -30,6 +30,11 @@ $('.tag-warning p a').on('click', () => {
   })
 })
 
+//Number On Badge
+function updateBadge() {
+  $('.badge-number').html($('.tag-box').length)
+}
+
 //Add a tag
 $('.add-tag-container').on('click', function() {
   $('#add-tag').addClass('input-mode');
@@ -87,6 +92,7 @@ function addTag(name) {
           newTag = createTagBox(data.result.id, name);
           $('.tag-container').prepend(newTag);
           setupTagbox(newTag);
+          updateBadge()
           resolve();
         } else {
           reject(str_already_exist.replace('%s', name));
@@ -231,6 +237,8 @@ function removeTag(id, name) {
           if (data.stat === "ok") {
             $('.tag-box[data-id='+id+']').remove();
           }
+          updateBadge()
+          hideLastTags()
         }
       })
     },
@@ -302,6 +310,8 @@ function duplicateTag(id, name) {
             newTag.find('.tag-dropdown-action.manage').show();
           }
           setupTagbox(newTag);
+          updateBadge()
+          hideLastTags()
           resolve(data);
         }
       },
@@ -505,8 +515,8 @@ function removeSelectedTags() {
         url: "ws.php?format=json&method=pwg.tags.delete",
         type: "POST",
         data: {
-          tag_id: ids,
-          pwg_token: pwg_token
+          'pwg_token': pwg_token,
+          'tag_id': ids
         },
         success: function (raw_data) {
           data = jQuery.parseJSON(raw_data);
@@ -515,6 +525,8 @@ function removeSelectedTags() {
               $('.tag-box[data-id='+id+']').remove();
             })
             updateListItem();
+            updateBadge()
+            hideLastTags()
           }
         }
       })
@@ -570,6 +582,8 @@ function mergeGroups(destination_id, merge_ids) {
             }
             $(".tag-box").attr("data-selected", '0');
             updateListItem();
+            updateBadge()
+            hideLastTags()
           }
         }
       })

admin/themes/default/template/group_list.tpl

@@ -95,7 +95,7 @@ var rootUrl = '{$ROOT_URL}'
 
 
 <div class="titrePage">
-  <h2>{'Group manager'|@translate}</h2>
+  <h2>{'Group management'|@translate} <span class="badge-number"> {count($groups)}</span></h2>
 </div>
 
 <div class="selection-mode-group-manager">
@@ -239,4 +239,4 @@ var rootUrl = '{$ROOT_URL}'
   </div>
 
 </div>
-</div>
+</div>

admin/themes/default/template/tags.tpl

@@ -35,8 +35,8 @@ var str_others_tags_available = '{'%s other tags available...'|@translate}'
       <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-trash delete'> {'Delete'|@translate}</a>
       <a class='tag-dropdown-action icon-docs duplicate'> {'Duplicate'|@translate}</a>
+      <a class='tag-dropdown-action icon-trash delete'> {'Delete'|@translate}</a>
     </div>
     <span class="select-checkbox in-selection-mode">
       <i class="icon-ok"> </i>
@@ -53,7 +53,7 @@ var str_others_tags_available = '{'%s other tags available...'|@translate}'
 {/function}
 
 <div class="titrePage">
-  <h2>{'Manage tags'|@translate}</h2>
+  <h2>{'Tag Manager'|@translate} <span class="badge-number"> {count($all_tags)}</span> </h2>
 </div>
 
 <div class="selection-mode-group-manager">
@@ -75,7 +75,7 @@ var str_others_tags_available = '{'%s other tags available...'|@translate}'
         
       </div>
       <div class="selection-other-tags"></div>
-      <button id="MergeSelectionMode" class="icon-object-group unavailable">{'Merge'|@translate}</button>
+      <button id="MergeSelectionMode" class="icon-object-group unavailable" title="{'At least 2 selected tags are needed to merge'|@translate}">{'Merge'|@translate}</button>
       <button id="DeleteSelectionMode" class="icon-trash-1">{'Delete'|@translate}</button>
     </div>
 
@@ -100,24 +100,26 @@ var str_others_tags_available = '{'%s other tags available...'|@translate}'
   </div>
   <form id='add-tag' class='not-in-selection-mode'>
     <span class='icon-cancel'></span>
-    <span class='icon-plus-circled icon-validate'></span>
-    <label class='add-tag-container'>
+    <label class='add-tag-label icon-plus-circled'>
       <p>{'Add a tag'|@translate}</p>
-      <input type='text' id='add-tag-input' placeholder="{'Add a tag'|@translate}">
-      <input type='submit' hidden>
+      <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>
+      </div>
     </label>
   </form>
   <div class='selection-controller in-selection-mode'>
-    <p>{'Select:'|@translate}</p>
-    <a id="selectAll" class="icon-star">{'All'|@translate}</a>
-    <a id="selectNone" class="icon-star-empty">{'None'|@translate}</a>
-    <a id="selectInvert" class="icon-exchange">{'Invert'|@translate}</a> 
+    <p>{'Select'|@translate}</p>
+    <a id="selectAll">{'All'|@translate}</a>
+    <a id="selectNone">{'None'|@translate}</a>
+    <a id="selectInvert">{'Invert'|@translate}</a> 
   </div>
   {if $warning_tags != ""}
-  <div class='tag-warning tag-info icon-attention'><p> {$warning_tags} </p></div>
+  <div class='tag-warning tag-info icon-attention not-in-selection-mode'><p> {$warning_tags} </p></div>
   {/if}
-  <div class='tag-message tag-info icon-ok' {if $message_tags != ""}style='display:flex'{/if}> <p> {$message_tags} </p> </div>
-  <div class='tag-error tag-info icon-cancel'> <p> </p> </div>
+  <div class='tag-message tag-info icon-ok not-in-selection-mode' {if $message_tags != ""}style='display:flex'{/if}> <p> {$message_tags} </p> </div>
+  <div class='tag-error tag-info icon-cancel not-in-selection-mode'> <p> </p> </div>
 </div>
 
 <div class='tag-container'>

admin/themes/default/theme.css

@@ -258,6 +258,10 @@ TABLE.doubleSelect SELECT.categoryList {
   margin: 4px;
 }
 
+.search-input:hover {
+  background-color: #f0f0f0 !important;
+}
+
 .search-icon {
   position: absolute;
   top: 50%;
@@ -265,6 +269,18 @@ TABLE.doubleSelect SELECT.categoryList {
   font-size: 18px;
 }
 
+.badge-number {
+  padding: 3px 6px;
+  border-radius: 8px;
+  background-color: rgb(44,132,195);
+  color: #CDE9FD;
+  font-size: 12px;
+  margin-left: 10px;
+  font-weight: 700;
+  position: absolute;
+  transform: translateY(4px);
+}
+
 .stat-legend-container {
   display: inline-block;
 }
@@ -3250,7 +3266,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .tag-header #search-tag{
   position: absolute;
-  right: 230px;
+  right: 240px;
 }
 
 .tag-header #add-tag {
@@ -3262,97 +3278,76 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   display: none;
 }
 
-.tag-header #add-tag .add-tag-container {
+.tag-header #add-tag .add-tag-label {
   position: relative;
   padding: 10px;
   background-color: #fafafa;
-  padding-left: 30px;
   box-shadow: 0px 2px #00000024;
   border-radius: 5px;
   font-weight: bold;
-  display: inline-flex;
-  transition: ease 0.2s;
+  display: flex;
+  align-items: baseline;
   cursor: pointer;
 }
 
-.tag-header #add-tag .add-tag-container:hover {
-  background-color: #f0f0f0;
+.tag-header #add-tag.input-mode .add-tag-label {
+  background: none;
+  box-shadow: none;
+  cursor: auto;
+  padding: 5px 10px;
+}
+
+.tag-header #add-tag .add-tag-label::before {
+  margin: auto;
+  font-size: 16px;
+  margin-right: 5px;
+}
+
+.tag-header #add-tag.input-mode .add-tag-label::before {
+  display: none;
+}
+
+.tag-header #add-tag .add-tag-label p{
+  margin: 0;
+}
+
+.tag-header #add-tag .add-tag-container {
+  display: none;
 }
 
 .tag-header #add-tag.input-mode .add-tag-container {
-  width: 200px;
-  cursor: auto;
+  display: flex;
 }
 
-.tag-header #add-tag input[type=text] {
-  position: absolute;
-  left: 5%;
-  background: none;
-  width: calc(90% - 40px);
+.tag-header #add-tag.input-mode .add-tag-container input {
+  padding: 5px;
   border: none;
-  opacity: 0;
+  margin-left: 10px;
+}
+
+.tag-header #add-tag span.icon-cancel{
   display: none;
-  transition: ease 0.2s;
-}
-
-.tag-header #add-tag span{
-  z-index: 100;
-  cursor: pointer;
-}
-
-.tag-header #add-tag.input-mode input[type=text] {
-  opacity: 1;
-  display: block;
-}
-
-.tag-header #add-tag .icon-validate {
   position: absolute;
+  right: 0;
   top: 50%;
-  transform: translate(5px, -50%);
-  font-size: 18px;
-  position: absolute;
-  left: 0;
-  right: auto;
-  transition: transform ease 0.8s, color ease 0.2s;
+  transform: translate(50%, -50%);
 }
 
-.tag-header #add-tag.input-mode .icon-validate{
-  transform: translate(180px, -50%) rotate(360deg);
-  color: #FFA646;
-  font-size: 22px;
+.tag-header #add-tag.input-mode span{
+  display: block;
+  margin: auto;
+  font-size: 20px;
   cursor: pointer;
 }
 
-.tag-header #add-tag.input-mode span:hover{
+.tag-header #add-tag span.icon-plus-circled {
+  color: #ffa744;
+}
+
+.tag-header #add-tag span:hover {
   color: #ff7700;
 }
 
-.tag-header #add-tag p {
-  margin: 0;
-  white-space: nowrap;
-}
-
-.tag-header #add-tag.input-mode p {
-  opacity: 0;
-}
-
-.tag-header #add-tag .icon-cancel {
-  position: absolute;
-  top: 50%;
-  transform: translate(209px, -50%);
-  font-size: 18px;
-  position: absolute;
-  left: 0;
-  transition: ease 0.2s;
-  display: none;
-  opacity: 0;
-}
-
-.tag-header #add-tag.input-mode .icon-cancel {
-  display: block;
-  opacity: 1;
-}
-
 .tag-header .selection-controller {
   display: none;
   align-items: baseline;
@@ -3371,15 +3366,16 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .tag-header .selection-controller a {
   margin: 0;
-  background-color: #fafafa;
+  background-color: #f0f0f0;
   padding: 10px;
-  box-shadow: 0px 2px #00000024;
   color: #777;
   font-weight: bold;
+  margin: 4px;
+  border-radius: 5px;
 }
 
 .tag-header .selection-controller a:hover {
-  background-color: #f0f0f0;
+  background-color: #ddd;
   color: #3A3A3A;
   text-decoration: none;
 }
@@ -3390,11 +3386,15 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   overflow: hidden;
   border-radius: 20px;
   display: flex;
-  padding: 0px 10px;
+  padding: 0px 10px 0px 0px;
   font-weight: bold;
   margin-left: 10px;
 }
 
+.tag-info.hide {
+  display: none;
+}
+
 .tag-info p {
   margin: auto;
   white-space: nowrap;
@@ -3430,6 +3430,10 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   animation-timing-function: ease;
 }
 
+.tag-info a:hover {
+  color: white;
+}
+
 @keyframes tag-error-appear {
   25% { transform: translateX(-10px)}
   50% { transform: translateX(10px)}
@@ -3448,21 +3452,22 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 .tag-container .tag-box{
   display: inline-flex;
   align-items: center;
-  padding: 10px;
+  padding: 5px 10px 5px 15px;
   background-color: #fafafa;
-  margin: 5px;
+  margin: 7px 5px;
   box-shadow: 0px 2px 1px #00000024;
   border-radius: 18px;
   position: relative;
 }
 
 .tag-container.selection .tag-box {
-  opacity: 0.6;
+  opacity: 0.8;
   cursor: pointer;
 }
 
-.tag-container .tag-box[data-selected='1'] {
+.tag-container.selection .tag-box[data-selected='1'] {
   opacity: 1;
+  background-color: #ffd7ad;
 }
 
 .tag-container .tag-box p {
@@ -3470,6 +3475,10 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   margin: 0;
 }
 
+.tag-container .tag-box[data-selected='1'] p {
+  color: #333;
+}
+
 .tag-container .tag-box.edit-name p {
   display: none;
 }
@@ -3516,28 +3525,29 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .tag-container .tag-box .select-checkbox {
   display: none;
-  width: 18.4px;
-  height: 19px;
-  background-color: #e7e7e7;
+  width: 15px;
+  height: 15px;
   border-radius: 100%;
   margin: 2px 0px;
-  margin-left: 0px;
-  margin-left: 4px;
+  margin-left: 3.4px;
+  border: solid #ffa646 2px;
+}
+
+.tag-container .tag-box:hover .select-checkbox, 
+.tag-container .tag-box[data-selected='1'] .select-checkbox {
+  background-color: #ffa646;
 }
 
 .tag-container .tag-box .select-checkbox.show {
   display: block;
 }
 
-.tag-container .tag-box[data-selected='1'] .select-checkbox {
-  background-color: #ddd;
-}
-
 .tag-container .tag-box .select-checkbox i {
   display: none;
-  font-size: 20px;
-  transform: translate(-12px , -6px);
+  font-size: 14px;
+  transform: translate(-9px , -3px);
   position: absolute;
+  color: #fafafa;
   animation-name: icon-check-animation;
   animation-duration: 0.4s;
   animation-timing-function: ease-out;
@@ -3549,13 +3559,13 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 @keyframes icon-check-animation {
   0% {
-    transform: translate(-12px , -6px) scale(0);
+    transform: translate(-9px , -3px) scale(0);
   }
   75% {
-    transform: translate(-12px , -6px) scale(1.3);
+    transform: translate(-9px , -3px) scale(1.3);
   }
   100% {
-    transform: translate(-12px , -6px);
+    transform: translate(-9px , -3px);
   }
 }