0
0
Fork 1
Spiegel von https://github.com/paviliondev/discourse-custom-wizard.git synchronisiert 2024-11-22 17:30:29 +01:00

Improve show/hide of similar topics results

Dieser Commit ist enthalten in:
angusmcleod 2021-02-17 15:49:20 +11:00
Ursprung db17a7d1ca
Commit 41be645c17
6 geänderte Dateien mit 91 neuen und 26 gelöschten Zeilen

Datei anzeigen

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

Datei anzeigen

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

Datei anzeigen

@ -1,13 +1,9 @@
{{#if loading}} {{#if loading}}
<label>{{i18n 'realtime_validations.similar_topics.loading'}}</label> <label>{{i18n 'realtime_validations.similar_topics.loading'}}</label>
{{else if hasSimilarTopics}} {{else if showSimilarTopics}}
<label>{{i18n 'realtime_validations.similar_topics.results'}}</label> <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> <label>{{i18n 'realtime_validations.similar_topics.no_results'}}</label>
{{else if showDefault}} {{else if showDefault}}
<label>{{i18n 'realtime_validations.similar_topics.default'}}</label> <label>{{i18n 'realtime_validations.similar_topics.default'}}</label>

Datei anzeigen

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

Datei anzeigen

@ -1,18 +1,22 @@
.similar-topics-validator { .similar-topics-validator {
position: relative; position: relative;
display: flex;
label { label {
min-height: 20px; min-height: 20px;
display: inline-block;
} }
} }
.wizard-similar-topics { .wizard-similar-topics {
margin-left: 3px;
ul {
background-color: var(--tertiary-low); background-color: var(--tertiary-low);
padding: 5px; padding: 5px;
margin: 0; margin: 0;
list-style: none; list-style: none;
position: absolute; position: absolute;
left: 0;
top: 25px; top: 25px;
box-shadow: shadow("dropdown"); box-shadow: shadow("dropdown");
width: 100%; width: 100%;
@ -28,4 +32,9 @@
color: var(--primary-high); color: var(--primary-high);
font-size: $font-down-1; font-size: $font-down-1;
} }
}
.show-topics {
cursor: pointer;
}
} }

Datei anzeigen

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