Improve show/hide of similar topics results
Dieser Commit ist enthalten in:
Ursprung
db17a7d1ca
Commit
41be645c17
6 geänderte Dateien mit 91 neuen und 26 gelöschten Zeilen
|
@ -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);
|
||||
|
|
36
assets/javascripts/wizard/components/wizard-similar-topics.js.es6
Normale Datei
36
assets/javascripts/wizard/components/wizard-similar-topics.js.es6
Normale Datei
|
@ -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);
|
||||
}
|
||||
}
|
||||
})
|
|
@ -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">
|
||||
{{#each similarTopics as |similarTopic|}}
|
||||
<li>{{wizard-similar-topic topic=similarTopic}}</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else if noSimilarTopics}}
|
||||
{{wizard-similar-topics topics=similarTopics}}
|
||||
{{else if showNoSimilarTopics}}
|
||||
<label>{{i18n 'realtime_validations.similar_topics.no_results'}}</label>
|
||||
{{else if showDefault}}
|
||||
<label>{{i18n 'realtime_validations.similar_topics.default'}}</label>
|
||||
|
|
|
@ -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}}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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"
|
||||
|
|
Laden …
In neuem Issue referenzieren