diff --git a/assets/javascripts/wizard/components/similar-topics-validator.js.es6 b/assets/javascripts/wizard/components/similar-topics-validator.js.es6 index 2375f434..aa490169 100644 --- a/assets/javascripts/wizard/components/similar-topics-validator.js.es6 +++ b/assets/javascripts/wizard/components/similar-topics-validator.js.es6 @@ -15,8 +15,16 @@ 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() {}, @observes("field.value") @@ -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); diff --git a/assets/javascripts/wizard/components/wizard-similar-topics.js.es6 b/assets/javascripts/wizard/components/wizard-similar-topics.js.es6 new file mode 100644 index 00000000..8bdc1416 --- /dev/null +++ b/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); + } + } +}) \ No newline at end of file diff --git a/assets/javascripts/wizard/templates/components/similar-topics-validator.hbs b/assets/javascripts/wizard/templates/components/similar-topics-validator.hbs index 5fda22b8..c19bc8c2 100644 --- a/assets/javascripts/wizard/templates/components/similar-topics-validator.hbs +++ b/assets/javascripts/wizard/templates/components/similar-topics-validator.hbs @@ -1,13 +1,9 @@ {{#if loading}} -{{else if hasSimilarTopics}} +{{else if showSimilarTopics}} - -{{else if noSimilarTopics}} + {{wizard-similar-topics topics=similarTopics}} +{{else if showNoSimilarTopics}} {{else if showDefault}} diff --git a/assets/javascripts/wizard/templates/components/wizard-similar-topics.hbs b/assets/javascripts/wizard/templates/components/wizard-similar-topics.hbs new file mode 100644 index 00000000..045f973d --- /dev/null +++ b/assets/javascripts/wizard/templates/components/wizard-similar-topics.hbs @@ -0,0 +1,11 @@ +{{#if showTopics}} + +{{else}} + + {{i18n 'realtime_validations.similar_topics.show'}} + +{{/if}} \ No newline at end of file diff --git a/assets/stylesheets/wizard/custom/validators.scss b/assets/stylesheets/wizard/custom/validators.scss index be1f3b3f..f5227688 100644 --- a/assets/stylesheets/wizard/custom/validators.scss +++ b/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); - padding: 5px; - margin: 0; - list-style: none; - position: absolute; - top: 25px; - box-shadow: shadow("dropdown"); - width: 100%; - box-sizing: border-box; - z-index: 100; + margin-left: 3px; - .title { - color: var(--primary); + ul { + 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 { - margin-left: 0.5em; - color: var(--primary-high); - font-size: $font-down-1; + .show-topics { + cursor: pointer; } } \ No newline at end of file diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 3a2756e0..46633fc2 100644 --- a/config/locales/client.en.yml +++ b/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"