From 5d19c0d4c807a5b481dc946dcc859390aca415bf Mon Sep 17 00:00:00 2001
From: Matthieu Leproux <matthieu.leproux@gmail.com>
Date: Wed, 11 May 2022 12:39:46 +0200
Subject: [PATCH] [Tag Manager] If there are no tags, highlight the add tag btn

---
 admin/themes/default/js/tags.js        |  5 +++++
 admin/themes/default/template/tags.tpl |  2 +-
 admin/themes/default/theme.css         |  9 ++++++++-
 admin/themes/roma/theme.css            | 11 +++++++++++
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/admin/themes/default/js/tags.js b/admin/themes/default/js/tags.js
index c8481876b..e01ab59b7 100644
--- a/admin/themes/default/js/tags.js
+++ b/admin/themes/default/js/tags.js
@@ -86,6 +86,11 @@ function recycleTagBox(tagBox, id, name, url_name, count) {
 //Number On Badge
 function updateBadge() {
   $('.badge-number').html(dataTags.length);
+  if (dataTags.length == 0) {
+    $(".tag-header #add-tag .add-tag-label").addClass("highlight");
+  } else {
+    $(".tag-header #add-tag .add-tag-label").removeClass("highlight");
+  }
 }
 
 //Add a tag
diff --git a/admin/themes/default/template/tags.tpl b/admin/themes/default/template/tags.tpl
index 763962b12..f3f5369c1 100644
--- a/admin/themes/default/template/tags.tpl
+++ b/admin/themes/default/template/tags.tpl
@@ -116,7 +116,7 @@ var str_tag_found = '{'<b>%d</b> tag found'|@translate}';
   </div>
   <form id='add-tag' class='not-in-selection-mode'>
     <span class='icon-cancel-circled'></span>
-    <label class='add-tag-label icon-plus-circled'>
+    <label class='add-tag-label icon-plus-circled {if $total == 0} highlight {/if}'>
       <p>{'Add a tag'|@translate}</p>
       <div class='add-tag-container'>
         <input type='text' id='add-tag-input' placeholder="{'New tag'|@translate}">
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 5cfa75afa..ebb2b8b03 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -3335,11 +3335,18 @@ a#showPermissions:hover {text-decoration: none;}
   cursor: pointer;
 }
 
+.tag-header #add-tag .add-tag-label.highlight {
+  background: #ffa646;
+  box-shadow: 0 2px #af7200;
+  color: white;
+}
+
 .tag-header #add-tag.input-mode .add-tag-label {
   background: none;
   box-shadow: none;
   cursor: auto;
-  padding: 0px
+  padding: 0px;
+  color: inherit;
 }
 
 .tag-header #add-tag .add-tag-label::before {
diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
index 9cac21b75..0f74f943f 100644
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -1121,6 +1121,17 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   background-color: #333 !important;
 }
 
+.tag-header #add-tag .add-tag-label.highlight {
+  background: #f7a43c !important;
+  box-shadow: 0 2px #af7200;
+  color: #444 !important;
+}
+.tag-header #add-tag.input-mode .add-tag-label.highlight {
+  background: transparent !important;
+  box-shadow: none;
+  color: inherit !important;
+}
+
 .tag-container .tag-box p {
   color: #aaa;
 }