Improve show/hide of similar topics results

assets/javascripts/wizard/components/similar-topics-validator.js.es6

@@ -15,7 +15,15 @@ export default WizardFieldValidator.extend({
   noSimilarTopics: computed('similarTopics', function() {
     return this.similarTopics !== null && this.similarTopics.length == 0;
   }),
-  showDefault: and('hasNotSearched', 'hasInput'),
+  showDefault: computed('hasNotSearched', 'hasInput', 'typing', function() {
+    return this.hasInput && (this.hasNotSearched || this.typing);
+  }),
+  showSimilarTopics: computed('typing', 'hasSimilarTopics', function() {
+    return this.hasSimilarTopics && !this.typing;
+  }),
+  showNoSimilarTopics: computed('typing', 'noSimilarTopics', function() {
+    return this.noSimilarTopics && !this.typing;
+  }),
   
   validate() {},
 
@@ -26,6 +34,8 @@ export default WizardFieldValidator.extend({
     if (!field.value) return;
     const value = field.value;
     
+    this.set("typing", true);
+    
     if (value && value.length < 5) {
       this.set('similarTopics', null);
       return;
@@ -41,6 +51,7 @@ export default WizardFieldValidator.extend({
       if (lastKeyUp !== this._lastKeyUp) {
         return;
       }
+      this.set("typing", false);
       
       this.updateSimilarTopics();
     }, 1000);

assets/javascripts/wizard/components/wizard-similar-topics.js.es6

@@ -0,0 +1,36 @@
+import Component from "@ember/component";
+import { bind } from "@ember/runloop";
+import { observes } from "discourse-common/utils/decorators";
+
+export default Component.extend({ 
+  classNames: ['wizard-similar-topics'],
+  showTopics: true,
+  
+  didInsertElement() {
+    $(document).on("click", bind(this, this.documentClick));
+  },
+
+  willDestroyElement() {
+    $(document).off("click", bind(this, this.documentClick));
+  },
+
+  documentClick(e) {
+    if (this._state == "destroying") return;
+    let $target = $(e.target);
+
+    if (!$target.hasClass('show-topics')) {
+      this.set('showTopics', false);
+    }
+  },
+  
+  @observes('topics')
+  toggleShowWhenTopicsChange() {
+    this.set('showTopics', true);
+  },
+  
+  actions: {
+    toggleShowTopics() {
+      this.set('showTopics', true);
+    }
+  }
+})

assets/javascripts/wizard/templates/components/similar-topics-validator.hbs

@@ -1,13 +1,9 @@
 {{#if loading}}
   <label>{{i18n 'realtime_validations.similar_topics.loading'}}</label>
-{{else if hasSimilarTopics}}
+{{else if showSimilarTopics}}
   <label>{{i18n 'realtime_validations.similar_topics.results'}}</label>
-  <ul class="wizard-similar-topics">
+  {{wizard-similar-topics topics=similarTopics}}
-    {{#each similarTopics as |similarTopic|}}
+{{else if showNoSimilarTopics}}
-      <li>{{wizard-similar-topic topic=similarTopic}}</li>
-    {{/each}}
-  </ul>
-{{else if noSimilarTopics}}
   <label>{{i18n 'realtime_validations.similar_topics.no_results'}}</label>
 {{else if showDefault}}
   <label>{{i18n 'realtime_validations.similar_topics.default'}}</label>

assets/javascripts/wizard/templates/components/wizard-similar-topics.hbs

@@ -0,0 +1,11 @@
+{{#if showTopics}}
+  <ul>
+    {{#each topics as |topic|}}
+      <li>{{wizard-similar-topic topic=topic}}</li>
+    {{/each}}
+  </ul>
+{{else}}
+  <a class="show-topics" {{action "toggleShowTopics"}}>
+    {{i18n 'realtime_validations.similar_topics.show'}}
+  </a>
+{{/if}}

assets/stylesheets/wizard/custom/validators.scss

@@ -1,31 +1,40 @@
 .similar-topics-validator {
   position: relative;
+  display: flex;
   
   label {
     min-height: 20px;
-    display: inline-block;
   }
 }
 
 .wizard-similar-topics {
-  background-color: var(--tertiary-low);
+  margin-left: 3px;
-  padding: 5px;
-  margin: 0;
-  list-style: none;
-  position: absolute;
-  top: 25px;
-  box-shadow: shadow("dropdown");
-  width: 100%;
-  box-sizing: border-box;
-  z-index: 100;
   
-  .title {
+  ul {
-    color: var(--primary);
+    background-color: var(--tertiary-low);
+    padding: 5px;
+    margin: 0;
+    list-style: none;
+    position: absolute;
+    left: 0;
+    top: 25px;
+    box-shadow: shadow("dropdown");
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 100;
+    
+    .title {
+      color: var(--primary);
+    }
+    
+    .blurb {
+      margin-left: 0.5em;
+      color: var(--primary-high);
+      font-size: $font-down-1;
+    }
   }
   
-  .blurb {
+  .show-topics {
-    margin-left: 0.5em;
+    cursor: pointer;
-    color: var(--primary-high);
-    font-size: $font-down-1;
   }
 }

config/locales/client.en.yml

@@ -520,9 +520,11 @@ en:
       yourself_confirm:
         title: "Did you forget to add recipients?"
         body: "Right now this message is only being sent to yourself!"
+    
     realtime_validations:
       similar_topics:
         default: "When you stop typing we'll look for similar topics."
         results: "Your topic is similar to..."
         no_results: "No similar topics."
         loading: "Looking for similar topics..."
+        show: "show"