feat: Improve UX with bypass tag requirements (#153)

extensions/tags/.gitignore

@@ -4,3 +4,4 @@ composer.phar
 Thumbs.db
 node_modules
 js/dist/*
+composer.lock

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 <LoadingIndicator />;
     }
-  
+
     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 {
               </li>
             ))}
         </ul>
+        {!!app.forum.attribute('canBypassTagCounts') && (
+          <div className="TagDiscussionModal-controls">
+            <ToggleButton className="Button" onclick={() => this.bypassReqs = !this.bypassReqs} isToggled={this.bypassReqs}>
+              {app.translator.trans('flarum-tags.forum.choose_tags.bypass_requirements')}
+            </ToggleButton>
+          </div>
+        )}
       </div>
     ];
   }
 
   meetsRequirements(primaryCount, secondaryCount) {
-    if (app.forum.attribute('canBypassTagCounts')) {
+    if (this.bypassReqs) {
       return true;
     }
 

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 (
+      <Button {...attrs} icon={icon} className={classList([className, isToggled && 'Button--toggled'])}>
+        {vnode.children}
+      </Button>
+    );
+  }
+}

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);

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 {

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');
+}

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}"