0
0
Fork 1
Spiegel von https://github.com/paviliondev/discourse-custom-wizard.git synchronisiert 2024-11-09 20:02:54 +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,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);

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

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,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;
}
}

Datei anzeigen

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