From b01ded9c896ee248b1140b08a56e0d1f6de43933 Mon Sep 17 00:00:00 2001 From: Kris Date: Fri, 3 Dec 2021 10:22:05 -0500 Subject: [PATCH] UX: Improve tag info style (#15177) --- .../app/templates/components/d-navigation.hbs | 2 +- .../app/templates/components/tag-info.hbs | 61 +++++++-------- .../discourse/tests/acceptance/tags-test.js | 4 +- .../stylesheets/common/base/tagging.scss | 76 +++++++++++++------ config/locales/client.en.yml | 5 +- 5 files changed, 91 insertions(+), 57 deletions(-) diff --git a/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs b/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs index acec052510d..bd309747dbd 100644 --- a/app/assets/javascripts/discourse/app/templates/components/d-navigation.hbs +++ b/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}} diff --git a/app/assets/javascripts/discourse/app/templates/components/tag-info.hbs b/app/assets/javascripts/discourse/app/templates/components/tag-info.hbs index 92aa9d2e9c9..ca465bf1a47 100644 --- a/app/assets/javascripts/discourse/app/templates/components/tag-info.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/tag-info.hbs @@ -17,24 +17,11 @@
{{discourse-tag tagInfo.name tagName="div" size="large"}} {{#if canAdminTag}} - {{d-icon "pencil-alt"}} + {{d-button action=(action "edit") class="btn-flat edit-tag" title=(i18n "tagging.edit_tag") icon="pencil-alt" }} {{/if}}
- {{#if canAdminTag}} -
- {{tagInfo.description}} -
- {{/if}} - {{/if}} - - {{#if canAdminTag}} - {{plugin-outlet name="tag-custom-settings" args=(hash tag=tagInfo) connectorTagName="" tagName="section"}} - -
- {{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}} +
+ {{tagInfo.description}}
{{/if}}
@@ -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}} @@ -81,20 +71,31 @@ {{#if editSynonymsMode}}
- {{tag-chooser - id="add-synonyms" - tags=newSynonyms - blockedTags=(array tagInfo.name) - everyTag=true - excludeSynonyms=true - excludeHasSynonyms=true - unlimitedTagCount=true}} +
+ {{tag-chooser + id="add-synonyms" + tags=newSynonyms + blockedTags=(array tagInfo.name) + everyTag=true + excludeSynonyms=true + excludeHasSynonyms=true + unlimitedTagCount=true}} + {{d-button + class="ok" + action=(action "addSynonyms") + disabled=addSynonymsDisabled + icon="check"}} +
- {{d-button - class="btn-default" - action=(action "addSynonyms") - disabled=addSynonymsDisabled - label="tagging.add_synonyms"}} + {{/if}} + {{#if canAdminTag}} + {{plugin-outlet name="tag-custom-settings" args=(hash tag=tagInfo) connectorTagName="" tagName="section"}} +
+ {{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}} +
{{/if}} {{/if}} {{#if loading}} diff --git a/app/assets/javascripts/discourse/tests/acceptance/tags-test.js b/app/assets/javascripts/discourse/tests/acceptance/tags-test.js index 42dfe9e3d0f..357c26c759e 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/tags-test.js +++ b/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"); diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss index 9d8a9223fbd..d40df6de863 100644 --- a/app/assets/stylesheets/common/base/tagging.scss +++ b/app/assets/stylesheets/common/base/tagging.scss @@ -340,51 +340,83 @@ section.tag-info { .edit-tag-wrapper { display: flex; - - input { + flex-wrap: wrap; + 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; - } - .tag-name-wrapper a { - color: var(--primary-high); - margin-left: 0.5em; + font-size: var(--font-up-1); } - .tag-name-wrapper a { - font-size: var(--font-up-3); - } - - .tag-name .discourse-tag { - display: block; + .tag-box { + display: flex; + align-items: center; + margin-bottom: 0.25em; + a { + margin-left: 0.5em; + } } .tag-description-wrapper { margin-bottom: 1em; } - .synonyms-list, - .add-synonyms, .tag-associations { - margin-top: 1em; - @include clearfix; + margin-bottom: 1em; } - .synonyms-list { - margin: 2em 0 0; + .tag-actions { + 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; } } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 4895e58255c..3f6b5e59d45 100644 --- a/config/locales/client.en.yml +++ b/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 tag group." + default_info: "This tag isn't restricted to any categories, and has no synonyms." + staff_info: "To add restrictions, put this tag in a tag group." 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 %{base_tag_name}." @@ -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: