diff --git a/app/assets/javascripts/discourse/app/components/tag-groups-form.js b/app/assets/javascripts/discourse/app/components/tag-groups-form.js index 8bf218f1cb9..dde6b73ef09 100644 --- a/app/assets/javascripts/discourse/app/components/tag-groups-form.js +++ b/app/assets/javascripts/discourse/app/components/tag-groups-form.js @@ -5,9 +5,11 @@ import PermissionType from "discourse/models/permission-type"; import bootbox from "bootbox"; import { bufferedProperty } from "discourse/mixins/buffered-content"; import discourseComputed from "discourse-common/utils/decorators"; +import { inject as service } from "@ember/service"; import { isEmpty } from "@ember/utils"; export default Component.extend(bufferedProperty("model"), { + router: service(), tagName: "", allGroups: null, @@ -36,15 +38,6 @@ export default Component.extend(bufferedProperty("model"), { ); }, - @discourseComputed("buffered.permissions") - showPrivateChooser(permissions) { - if (!permissions) { - return true; - } - - return permissions.everyone !== PermissionType.READONLY; - }, - @discourseComputed("buffered.permissions", "allGroups") selectedGroupIds(permissions, allGroups) { if (!permissions || !allGroups) { @@ -140,6 +133,8 @@ export default Component.extend(bufferedProperty("model"), { if (this.onSave) { this.onSave(); + } else { + this.router.transitionTo("tagGroups.index"); } }); }, diff --git a/app/assets/javascripts/discourse/app/controllers/tag-groups-new.js b/app/assets/javascripts/discourse/app/controllers/tag-groups-new.js index e0adbb21fdf..5487e1c94b8 100644 --- a/app/assets/javascripts/discourse/app/controllers/tag-groups-new.js +++ b/app/assets/javascripts/discourse/app/controllers/tag-groups-new.js @@ -8,7 +8,7 @@ export default Controller.extend({ const tagGroups = this.tagGroups.model; tagGroups.pushObject(this.model); - this.transitionToRoute("tagGroups.edit", this.model); + this.transitionToRoute("tagGroups.index"); }, }, }); diff --git a/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs b/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs index 2291f06dd93..d7dcb9aa8f5 100644 --- a/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/tag-groups-form.hbs @@ -1,106 +1,123 @@ -
-

{{text-field value=buffered.name}}

-
+
+ +
{{text-field value=buffered.name}}
+
-
-
- {{tag-chooser - tags=buffered.tag_names - everyTag=true - allowCreate=true - unlimitedTagCount=true - excludeSynonyms=true}} -
+
+
+ {{tag-chooser + tags=buffered.tag_names + everyTag=true + allowCreate=true + unlimitedTagCount=true + excludeSynonyms=true + options=(hash + filterPlaceholder="tagging.groups.tags_placeholder" + ) + }} +
-
- +
+ +
{{tag-chooser tags=buffered.parent_tag_name everyTag=true maximum=1 allowCreate=true - excludeSynonyms=true}} - {{i18n "tagging.groups.parent_tag_description"}} -
+ excludeSynonyms=true + options=(hash + filterPlaceholder="tagging.groups.parent_tag_placeholder" + ) + }} +
+
{{i18n "tagging.groups.parent_tag_description"}}
+ -
-
+ +
+ {{d-button + class="btn-primary" + action=(action "save") + disabled=buffered.isSaving + label="tagging.groups.save"}} + + {{d-button + class="btn-danger" + action=(action "destroy") + disabled=buffered.isNew + icon="far-trash-alt" + label="tagging.groups.delete"}}
diff --git a/app/assets/javascripts/discourse/app/templates/tag-groups-edit.hbs b/app/assets/javascripts/discourse/app/templates/tag-groups-edit.hbs index b6b0e9adb10..31f2b720fa2 100644 --- a/app/assets/javascripts/discourse/app/templates/tag-groups-edit.hbs +++ b/app/assets/javascripts/discourse/app/templates/tag-groups-edit.hbs @@ -1 +1,4 @@ -{{tag-groups-form model=model onDestroy=(action "onDestroy")}} +
+

{{i18n "tagging.groups.edit_title"}}

+ {{tag-groups-form model=model onDestroy=(action "onDestroy")}} +
diff --git a/app/assets/javascripts/discourse/app/templates/tag-groups-index.hbs b/app/assets/javascripts/discourse/app/templates/tag-groups-index.hbs index 937ff10b870..c89053199df 100644 --- a/app/assets/javascripts/discourse/app/templates/tag-groups-index.hbs +++ b/app/assets/javascripts/discourse/app/templates/tag-groups-index.hbs @@ -1,3 +1,19 @@
-

{{i18n "tagging.groups.about"}}

+

+ {{#if model}} + {{i18n "tagging.groups.about_heading"}} + {{else}} + {{i18n "tagging.groups.about_heading_empty"}} + {{/if}} +

+
+

{{i18n "tagging.groups.about_description"}}

+
+
+ {{#unless model}} + {{#link-to "tagGroups.new" class="btn btn-primary"}} + {{d-icon "plus"}} {{i18n "tagging.groups.new"}} + {{/link-to}} + {{/unless}} +
diff --git a/app/assets/javascripts/discourse/app/templates/tag-groups-new.hbs b/app/assets/javascripts/discourse/app/templates/tag-groups-new.hbs index 172d8c77482..e59ca7a4634 100644 --- a/app/assets/javascripts/discourse/app/templates/tag-groups-new.hbs +++ b/app/assets/javascripts/discourse/app/templates/tag-groups-new.hbs @@ -1 +1,4 @@ -{{tag-groups-form model=model onSave=(action "onSave")}} +
+

{{i18n "tagging.groups.new_title"}}

+ {{tag-groups-form model=model onSave=(action "onSave")}} +
diff --git a/app/assets/javascripts/discourse/app/templates/tag-groups.hbs b/app/assets/javascripts/discourse/app/templates/tag-groups.hbs index 8bbc36c2299..0ae7affe5fa 100644 --- a/app/assets/javascripts/discourse/app/templates/tag-groups.hbs +++ b/app/assets/javascripts/discourse/app/templates/tag-groups.hbs @@ -1,27 +1,33 @@

{{i18n "tagging.groups.title"}}

-
- + {{#if this.siteSettings.tagging_enabled}} + {{#if model}} +
+
    + {{#each model as |tagGroup|}} +
  • + {{#link-to "tagGroups.edit" tagGroup}} + {{tagGroup.name}} + {{/link-to}} +
    • + {{/each}} +
- {{#if this.siteSettings.tagging_enabled}} - {{d-button - class="btn-default" - action=(action "newTagGroup") - icon="plus" - label="tagging.groups.new"}} + {{d-button + class="btn-default" + action=(action "newTagGroup") + icon="plus" + label="tagging.groups.new" + }} +
{{/if}} -
- {{outlet}} + {{outlet}} + {{else}} +
+
{{i18n "tagging.groups.disabled"}}
+
+ {{/if}} -
diff --git a/app/assets/javascripts/discourse/tests/acceptance/tag-groups-test.js b/app/assets/javascripts/discourse/tests/acceptance/tag-groups-test.js index 27c30938fc5..352f6746e06 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/tag-groups-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/tag-groups-test.js @@ -39,18 +39,20 @@ acceptance("Tag Groups", function (needs) { }); test("tag groups can be saved and deleted", async function (assert) { - const tags = selectKit(".tag-chooser"); + const tags = selectKit(".group-tags-list .tag-chooser"); await visit("/tag_groups"); - await click(".content-list .btn"); + await click(".tag-group-content .btn.btn-primary"); + + await fillIn(".tag-group-content .group-name input", "test tag group"); - await fillIn(".tag-group-content h1 input", "test tag group"); await tags.expand(); await tags.selectRowByValue("monkey"); + await click(".tag-group-content .btn.btn-primary"); + await click(".tag-groups-sidebar li:first-child a"); + await tags.expand(); - await click(".tag-group-content .btn.btn-default"); - - await click(".tag-chooser .choice:nth-of-type(1)"); + await click(".group-tags-list .tag-chooser .choice:nth-of-type(1)"); assert.ok(!queryAll(".tag-group-content .btn.btn-danger")[0].disabled); }); @@ -59,9 +61,9 @@ acceptance("Tag Groups", function (needs) { const groups = selectKit(".group-chooser"); await visit("/tag_groups"); - await click(".content-list .btn"); + await click(".tag-group-content .btn.btn-primary"); - await fillIn(".tag-group-content h1 input", "test tag group"); + await fillIn(".tag-group-content .group-name input", "test tag group"); await tags.expand(); await tags.selectRowByValue("monkey"); @@ -69,9 +71,12 @@ acceptance("Tag Groups", function (needs) { await groups.expand(); await groups.selectRowByIndex(1); await groups.selectRowByIndex(0); - assert.ok(!queryAll(".tag-group-content .btn.btn-default")[0].disabled); - await click(".tag-group-content .btn.btn-default"); + assert.ok(!queryAll(".tag-group-content .btn.btn-primary")[0].disabled); + + await click(".tag-group-content .btn.btn-primary"); + await click(".tag-groups-sidebar li:first-child a"); + assert.ok( exists("#visible-permission:checked"), "selected permission does not change after saving" diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss index 22a1ca6ab4e..d4ce41fd511 100644 --- a/app/assets/stylesheets/common/base/tagging.scss +++ b/app/assets/stylesheets/common/base/tagging.scss @@ -211,53 +211,84 @@ header .discourse-tag { } .tag-groups-container { - margin-top: 20px; - .content-list { - width: 20%; - float: left; - margin: 20px 0; - ul { - margin-bottom: 10px; - } - .btn { - margin-left: 10px; + display: grid; + grid-template-columns: 1fr 5fr; + grid-template-rows: auto auto; + grid-template-areas: "header header" "sidebar content" "fullwidth fullwidth"; + padding-bottom: 3em; + + > h2 { + grid-area: header; + background: var(--primary-very-low); + padding: 20px; + margin-bottom: 1em; + } + .tag-groups-sidebar { + grid-area: sidebar; + // generic .content-list overrides + width: auto; + float: none; + ul li:last-child { + margin-bottom: 1em; } } + + .tag-groups-sidebar + .tag-group-content { + grid-area: content; + } .tag-group-content { - width: 75%; - float: right; + grid-area: fullwidth; + section { - margin-bottom: 20px; + margin-bottom: 1.5em; } + + h3, + section, + .tag-group-controls { + padding-left: 20px; + } + label { - font-size: $font-0; + font-size: var(--font-0); display: inline-block; - margin-right: 10px; + margin-right: 5px; + &.radio { + padding-left: 0px; + } } .btn { margin-right: 10px; } - h1 input { - width: 100%; - } .group-access-control { - margin-left: 44px; - margin-bottom: 10px; + margin-left: 26px; + margin-bottom: 1em; + } + input[type="radio"] ~ .group-access-control { + display: none; + } + input[type="radio"]:checked ~ .group-access-control { + display: block; } } .tag-group-controls { display: flex; + justify-content: space-between; } .group-tags-list .tag-chooser { - width: 100%; + width: calc(100% - 1em); } .saving { margin-left: 20px; } .parent-tag-section { .tag-chooser { - width: 200px; - margin-right: 10px; + width: 210px; + } + .description { + color: var(--primary-medium); + margin-top: 0.5em; + font-size: var(--font-down-1); } } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 63adc3abb4a..60adec1b7c4 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -3704,14 +3704,18 @@ en: groups: title: "Tag Groups" - about: "Add tags to groups to manage them more easily." + about_heading: "Select a tag group or create a new one" + about_heading_empty: "Create a new tag group to get started" + about_description: "Tag groups help you manage permissions for many tags in one place." new: "New Group" - tags_label: "Tags in this group:" - parent_tag_label: "Parent tag:" - parent_tag_description: "Tags from this group can't be used unless the parent tag is present." + new_title: "Create New Group" + edit_title: "Edit Tag Group" + tags_label: "Tags in this group" + parent_tag_label: "Parent tag" + parent_tag_description: "Tags from this group can only be used if the parent tag is present." one_per_topic_label: "Limit one tag per topic from this group" new_name: "New Tag Group" - name_placeholder: "Tag Group Name" + name_placeholder: "Name" save: "Save" delete: "Delete" confirm_delete: "Are you sure you want to delete this tag group?" @@ -3719,6 +3723,10 @@ en: usable_only_by_groups: "Tags are visible to everyone, but only the following groups can use them" visible_only_to_groups: "Tags are visible only to the following groups" cannot_save: "Cannot save tag group. Make sure that there is at least one tag present, tag group name is not empty, and a group is selected for tags permission." + tags_placeholder: "Search or create tags" + parent_tag_placeholder: "Optional" + select_groups_placeholder: "Select groups..." + disabled: "Tagging is disabled. " topics: none: