UX: Improve tag info style (#15177)

app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs

@@ -31,7 +31,7 @@
 
   {{#if tag}}
     {{#if showToggleInfo}}
-      {{d-button icon="wrench" class="btn-default" ariaLabel="tagging.info" action=toggleInfo id="show-tag-info"}}
+      {{d-button icon=(if currentUser.staff "wrench" "info-circle") class="btn-default" ariaLabel="tagging.info" action=toggleInfo id="show-tag-info"}}
     {{/if}}
   {{/if}}
 

app/assets/javascripts/discourse/app/templates/components/tag-info.hbs

@@ -17,24 +17,11 @@
         <div class="tag-name-wrapper">
           {{discourse-tag tagInfo.name tagName="div" size="large"}}
           {{#if canAdminTag}}
-            <a href {{action "edit"}} id="edit-tag" title={{i18n "tagging.edit_tag"}}>{{d-icon "pencil-alt"}}</a>
+            {{d-button action=(action "edit") class="btn-flat edit-tag" title=(i18n "tagging.edit_tag") icon="pencil-alt" }}
           {{/if}}
         </div>
-        {{#if canAdminTag}}
+        <div class="tag-description-wrapper">
-          <div class="tag-description-wrapper">
+          {{tagInfo.description}}
-            {{tagInfo.description}}
-          </div>
-        {{/if}}
-      {{/if}}
-
-      {{#if canAdminTag}}
-        {{plugin-outlet name="tag-custom-settings" args=(hash tag=tagInfo) connectorTagName="" tagName="section"}}
-
-        <div class="tag-actions">
-          {{d-button class="btn-default" action=(action "toggleEditControls") icon="cog" label="tagging.edit_synonyms" id="edit-synonyms"}}
-          {{#if deleteAction}}
-            {{d-button class="btn-danger delete-tag" action=(action "deleteTag") icon="far-trash-alt" label="tagging.delete_tag" id="delete-tag"}}
-          {{/if}}
         </div>
       {{/if}}
     </div>
@@ -53,7 +40,10 @@
         {{#if tagInfo.category_restricted}}
           {{i18n "tagging.category_restricted"}}
         {{else}}
-          {{html-safe (i18n "tagging.default_info" basePath=(base-path))}}
+          {{html-safe (i18n "tagging.default_info")}}
+          {{#if canAdminTag}}
+            {{html-safe (i18n "tagging.staff_info" basePath=(base-path))}}
+          {{/if}}
         {{/if}}
       {{/if}}
     </div>
@@ -81,20 +71,31 @@
     {{#if editSynonymsMode}}
       <section class="add-synonyms field">
         <label for="add-synonyms">{{i18n "tagging.add_synonyms_label"}}</label>
-        {{tag-chooser
+        <div>
-          id="add-synonyms"
+          {{tag-chooser
-          tags=newSynonyms
+            id="add-synonyms"
-          blockedTags=(array tagInfo.name)
+            tags=newSynonyms
-          everyTag=true
+            blockedTags=(array tagInfo.name)
-          excludeSynonyms=true
+            everyTag=true
-          excludeHasSynonyms=true
+            excludeSynonyms=true
-          unlimitedTagCount=true}}
+            excludeHasSynonyms=true
+            unlimitedTagCount=true}}
+          {{d-button
+            class="ok"
+            action=(action "addSynonyms")
+            disabled=addSynonymsDisabled
+            icon="check"}}
+        </div>
       </section>
-      {{d-button
+    {{/if}}
-        class="btn-default"
+    {{#if canAdminTag}}
-        action=(action "addSynonyms")
+      {{plugin-outlet name="tag-custom-settings" args=(hash tag=tagInfo) connectorTagName="" tagName="section"}}
-        disabled=addSynonymsDisabled
+      <div class="tag-actions">
-        label="tagging.add_synonyms"}}
+        {{d-button class="btn-default" action=(action "toggleEditControls") icon="cog" label="tagging.edit_synonyms" id="edit-synonyms"}}
+        {{#if deleteAction}}
+          {{d-button class="btn-danger delete-tag" action=(action "deleteTag") icon="far-trash-alt" label="tagging.delete_tag" id="delete-tag"}}
+        {{/if}}
+      </div>
     {{/if}}
   {{/if}}
   {{#if loading}}

app/assets/javascripts/discourse/tests/acceptance/tags-test.js

@@ -441,7 +441,7 @@ acceptance("Tag info", function (needs) {
     await click("#show-tag-info");
     assert.ok(exists(".tag-info .tag-name"), "show tag");
 
-    await click("#edit-tag");
+    await click(".edit-tag");
     assert.strictEqual(
       query("#edit-name").value,
       "happy-monkey",
@@ -470,7 +470,7 @@ acceptance("Tag info", function (needs) {
     assert.strictEqual(count("#show-tag-info"), 1);
 
     await click("#show-tag-info");
-    assert.ok(exists("#edit-tag"), "can rename tag");
+    assert.ok(exists(".edit-tag"), "can rename tag");
     assert.ok(exists("#edit-synonyms"), "can edit synonyms");
     assert.ok(exists("#delete-tag"), "can delete tag");
 

app/assets/stylesheets/common/base/tagging.scss

@@ -340,51 +340,83 @@ section.tag-info {
 
   .edit-tag-wrapper {
     display: flex;
-
+    flex-wrap: wrap;
-    input {
+    margin-bottom: 1em;
+    #edit-name {
+      flex: 1 1 auto;
       margin-right: 0.5em;
     }
+    #edit-description {
+      flex: 10 1 auto;
+    }
+    .edit-controls {
+      width: 100%;
+    }
   }
-  .tag-name-wrapper,
+
+  .tag-name-wrapper {
+    display: flex;
+    font-size: var(--font-up-4);
+    align-items: baseline;
+    button {
+      font-size: var(--font-down-1);
+      .d-icon {
+        color: var(--primary-high);
+      }
+      .discourse-no-touch & {
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+  }
+
   .tag-description-wrapper {
     display: flex;
-  }
+    font-size: var(--font-up-1);
-  .tag-name-wrapper a {
-    color: var(--primary-high);
-    margin-left: 0.5em;
   }
 
-  .tag-name-wrapper a {
+  .tag-box {
-    font-size: var(--font-up-3);
+    display: flex;
-  }
+    align-items: center;
-
+    margin-bottom: 0.25em;
-  .tag-name .discourse-tag {
+    a {
-    display: block;
+      margin-left: 0.5em;
+    }
   }
 
   .tag-description-wrapper {
     margin-bottom: 1em;
   }
 
-  .synonyms-list,
-  .add-synonyms,
   .tag-associations {
-    margin-top: 1em;
+    margin-bottom: 1em;
-    @include clearfix;
   }
 
-  .synonyms-list {
+  .tag-actions {
-    margin: 2em 0 0;
+    margin-top: 2em;
+  }
+
+  .add-synonyms {
+    margin-top: 1em;
+    div {
+      display: flex;
+    }
+    .ok {
+      margin-left: 0.5em;
+      display: none;
+    }
+    .has-selection + .ok {
+      display: flex;
+    }
   }
 
   .tag-list {
-    margin: 1em 0 0 0;
+    margin: 0.5em 0 1em;
     padding: 0;
     border: none;
-    @include clearfix;
     a {
       color: var(--primary-medium);
-      margin-left: 0.25em;
     }
   }
 }

config/locales/client.en.yml

@@ -3792,7 +3792,8 @@ en:
         one: "select at least %{count} tag..."
         other: "select at least %{count} tags..."
       info: "Info"
-      default_info: "This tag isn't restricted to any categories, and has no synonyms. To add restrictions, put this tag in a <a href=%{basePath}/tag_groups>tag group</a>."
+      default_info: "This tag isn't restricted to any categories, and has no synonyms."
+      staff_info: "To add restrictions, put this tag in a <a href=%{basePath}/tag_groups>tag group</a>."
       category_restricted: "This tag is restricted to categories you don't have permission to access."
       synonyms: "Synonyms"
       synonyms_description: "When the following tags are used, they will be replaced with <b>%{base_tag_name}</b>."
@@ -3803,7 +3804,7 @@ en:
       category_restrictions:
         one: "It can only be used in this category:"
         other: "It can only be used in these categories:"
-      edit_synonyms: "Manage Synonyms"
+      edit_synonyms: "Edit Synonyms"
       add_synonyms_label: "Add synonyms:"
       add_synonyms: "Add"
       add_synonyms_explanation: