Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-14 13:52:54 +01:00
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,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);
|
||||||
|
|
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}}
|
{{#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>
|
||||||
|
|
|
@ -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,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;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -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"
|
||||||
|
|
Laden …
In neuem Issue referenzieren