diff --git a/extensions/tags/.gitignore b/extensions/tags/.gitignore index 7f43257e7..6d7bdf860 100644 --- a/extensions/tags/.gitignore +++ b/extensions/tags/.gitignore @@ -4,3 +4,4 @@ composer.phar Thumbs.db node_modules js/dist/* +composer.lock diff --git a/extensions/tags/js/src/forum/components/TagDiscussionModal.js b/extensions/tags/js/src/forum/components/TagDiscussionModal.js index 3b020b1ac..59c6a73b8 100644 --- a/extensions/tags/js/src/forum/components/TagDiscussionModal.js +++ b/extensions/tags/js/src/forum/components/TagDiscussionModal.js @@ -12,6 +12,7 @@ import tagLabel from '../../common/helpers/tagLabel'; import tagIcon from '../../common/helpers/tagIcon'; import sortTags from '../../common/utils/sortTags'; import getSelectableTags from '../utils/getSelectableTags'; +import ToggleButton from './ToggleButton'; export default class TagDiscussionModal extends Modal { oninit(vnode) { @@ -28,6 +29,8 @@ export default class TagDiscussionModal extends Modal { this.minSecondary = app.forum.attribute('minSecondaryTags'); this.maxSecondary = app.forum.attribute('maxSecondaryTags'); + this.bypassReqs = false; + this.navigator = new KeyboardNavigatable(); this.navigator .onUp(() => this.setIndex(this.getCurrentNumericIndex() - 1, true)) @@ -109,7 +112,7 @@ export default class TagDiscussionModal extends Modal { } getInstruction(primaryCount, secondaryCount) { - if (app.forum.attribute('canBypassTagCounts')) { + if (this.bypassReqs) { return ''; } @@ -128,7 +131,7 @@ export default class TagDiscussionModal extends Modal { if (this.tagsLoading) { return ; } - + let tags = this.tags; const filter = this.filter().toLowerCase(); const primaryCount = this.primaryCount(); @@ -143,11 +146,11 @@ export default class TagDiscussionModal extends Modal { // If the number of selected primary/secondary tags is at the maximum, then // we'll filter out all other tags of that type. - if (primaryCount >= this.maxPrimary && !app.forum.attribute('canBypassTagCounts')) { + if (primaryCount >= this.maxPrimary && !this.bypassReqs) { tags = tags.filter(tag => !tag.isPrimary() || this.selected.includes(tag)); } - if (secondaryCount >= this.maxSecondary && !app.forum.attribute('canBypassTagCounts')) { + if (secondaryCount >= this.maxSecondary && !this.bypassReqs) { tags = tags.filter(tag => tag.isPrimary() || this.selected.includes(tag)); } @@ -225,12 +228,19 @@ export default class TagDiscussionModal extends Modal { ))} + {!!app.forum.attribute('canBypassTagCounts') && ( +
+ this.bypassReqs = !this.bypassReqs} isToggled={this.bypassReqs}> + {app.translator.trans('flarum-tags.forum.choose_tags.bypass_requirements')} + +
+ )} ]; } meetsRequirements(primaryCount, secondaryCount) { - if (app.forum.attribute('canBypassTagCounts')) { + if (this.bypassReqs) { return true; } diff --git a/extensions/tags/js/src/forum/components/ToggleButton.js b/extensions/tags/js/src/forum/components/ToggleButton.js new file mode 100644 index 000000000..cbf4904ff --- /dev/null +++ b/extensions/tags/js/src/forum/components/ToggleButton.js @@ -0,0 +1,19 @@ +import Component from 'flarum/common/Component'; +import Button from 'flarum/common/components/Button'; +import classList from 'flarum/common/utils/classList'; + +/** + * @TODO move to core + */ +export default class ToggleButton extends Component { + view(vnode) { + const { className, isToggled, ...attrs } = this.attrs; + const icon = isToggled ? 'far fa-check-circle' : 'far fa-circle'; + + return ( + + ); + } +} diff --git a/extensions/tags/less/forum.less b/extensions/tags/less/forum.less index 49f48a7d6..f1a34a8e2 100644 --- a/extensions/tags/less/forum.less +++ b/extensions/tags/less/forum.less @@ -4,6 +4,7 @@ @import "forum/TagDiscussionModal"; @import "forum/TagHero"; @import "forum/TagTiles"; +@import "forum/ToggleButton"; .Button--tagColored { --button-primary-bg: var(--color); diff --git a/extensions/tags/less/forum/TagDiscussionModal.less b/extensions/tags/less/forum/TagDiscussionModal.less index 39e0f1c53..50e6f62f1 100644 --- a/extensions/tags/less/forum/TagDiscussionModal.less +++ b/extensions/tags/less/forum/TagDiscussionModal.less @@ -22,6 +22,10 @@ padding: 1px 0 0; text-align: left; } + + &-controls { + padding: 20px; + } } @media @tablet, @desktop, @desktop-hd { diff --git a/extensions/tags/less/forum/ToggleButton.less b/extensions/tags/less/forum/ToggleButton.less new file mode 100644 index 000000000..35d43a222 --- /dev/null +++ b/extensions/tags/less/forum/ToggleButton.less @@ -0,0 +1,7 @@ +:root { + .Button--color-vars(@control-bg, @control-color, 'button-toggled'); +} + +.Button--toggled { + .Button--color-auto('button-toggled'); +} diff --git a/extensions/tags/locale/en.yml b/extensions/tags/locale/en.yml index b20404341..b7656c550 100644 --- a/extensions/tags/locale/en.yml +++ b/extensions/tags/locale/en.yml @@ -66,6 +66,7 @@ flarum-tags: # These translations are used by the Choose Tags modal dialog. choose_tags: + bypass_requirements: Bypass tag requirements choose_primary_placeholder: "{count, plural, one {Choose a primary tag} other {Choose # primary tags}}" choose_secondary_placeholder: "{count, plural, one {Choose 1 more tag} other {Choose # more tags}}" edit_title: "Edit Tags for {title}"