Merge pull request #237 from paviliondev/frontend_updates
Fix deprecations && invalid field handling
Dieser Commit ist enthalten in:
Marcos
GitHub
Commit
3fe42c4183
19 geänderte Dateien mit 73 neuen und 39 gelöschten Zeilen
|
|
@ -3,6 +3,7 @@ import discourseComputed from "discourse-common/utils/decorators";
|
|||
|
||||
export default DateInput.extend({
|
||||
useNativePicker: false,
|
||||
classNameBindings: ["fieldClass"],
|
||||
|
||||
@discourseComputed()
|
||||
placeholder() {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import DateTimeInput from "discourse/components/date-time-input";
|
|||
import discourseComputed from "discourse-common/utils/decorators";
|
||||
|
||||
export default DateTimeInput.extend({
|
||||
classNameBindings: ["fieldClass"],
|
||||
|
||||
@discourseComputed("timeFirst", "tabindex")
|
||||
timeTabindex(timeFirst, tabindex) {
|
||||
return timeFirst ? tabindex : tabindex + 1;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import Component from "@ember/component";
|
|||
import { observes } from "discourse-common/utils/decorators";
|
||||
|
||||
export default Component.extend({
|
||||
classNameBindings: ["fieldClass"],
|
||||
|
||||
@observes("time")
|
||||
setValue() {
|
||||
this.set("field.value", this.time.format(this.field.format));
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { computed } from "@ember/object";
|
|||
|
||||
export default Component.extend(UppyUploadMixin, {
|
||||
classNames: ["wizard-field-upload"],
|
||||
classNameBindings: ["isImage"],
|
||||
classNameBindings: ["isImage", "fieldClass"],
|
||||
uploading: false,
|
||||
type: computed(function () {
|
||||
return `wizard_${this.field.id}`;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import Component from "@ember/component";
|
||||
|
||||
export default Component.extend({});
|
||||
export default Component.extend({
|
||||
classNameBindings: ["fieldClass"],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import CustomWizard, {
|
|||
updateCachedWizard,
|
||||
} from "discourse/plugins/discourse-custom-wizard/discourse/models/custom-wizard";
|
||||
import { alias, not } from "@ember/object/computed";
|
||||
import discourseLater from "discourse-common/lib/later";
|
||||
|
||||
const alreadyWarned = {};
|
||||
|
||||
|
|
@ -110,29 +111,24 @@ export default Component.extend({
|
|||
},
|
||||
|
||||
autoFocus() {
|
||||
discourseLater(() => {
|
||||
schedule("afterRender", () => {
|
||||
const $invalid = $(
|
||||
".wizard-field.invalid:nth-of-type(1) .wizard-focusable"
|
||||
);
|
||||
|
||||
if ($invalid.length) {
|
||||
return $invalid.focus();
|
||||
}
|
||||
|
||||
if ($(".invalid .wizard-focusable").length) {
|
||||
this.animateInvalidFields();
|
||||
} else {
|
||||
$(".wizard-focusable:first").focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
animateInvalidFields() {
|
||||
schedule("afterRender", () => {
|
||||
let $element = $(
|
||||
".invalid input[type=text],.invalid textarea,.invalid input[type=checkbox],.invalid .select-kit"
|
||||
);
|
||||
|
||||
if ($element.length) {
|
||||
let $invalid = $(".invalid .wizard-focusable");
|
||||
if ($invalid.length) {
|
||||
$([document.documentElement, document.body]).animate(
|
||||
{
|
||||
scrollTop: $element.offset().top - 200,
|
||||
scrollTop: $invalid.offset().top - 200,
|
||||
},
|
||||
400
|
||||
);
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export default EmberObject.extend(ValidState, {
|
|||
valid = true;
|
||||
}
|
||||
|
||||
this.setValid(valid);
|
||||
this.setValid(Boolean(valid));
|
||||
|
||||
return valid;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{input
|
||||
type=inputType
|
||||
<Input
|
||||
@type={{this.inputType}}
|
||||
@value={{readonly this.value}}
|
||||
class="date-picker"
|
||||
placeholder=placeholder
|
||||
value=(readonly value)
|
||||
input=(action "onChangeDate")
|
||||
tabindex=tabindex
|
||||
placeholder={{this.placeholder}}
|
||||
tabindex={{this.tabindex}}
|
||||
{{on "input" (action "onChangeDate")}}
|
||||
autocomplete="off"
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="picker-container"></div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{{custom-wizard-category-selector
|
||||
categories=categories
|
||||
class=fieldClass
|
||||
whitelist=field.content
|
||||
onChange=(action (mut categories))
|
||||
tabindex=field.tabindex
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
{{input type="checkbox" id=field.id checked=field.value tabindex=field.tabindex}}
|
||||
<Input
|
||||
id={{this.field.id}}
|
||||
@type="checkbox"
|
||||
@checked={{this.field.value}}
|
||||
tabindex={{this.field.tabindex}}
|
||||
class={{this.fieldClass}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
field=field
|
||||
composer=composer
|
||||
wizard=wizard
|
||||
fieldClass=fieldClass
|
||||
groupsMentioned=(action "groupsMentioned")
|
||||
cannotSeeMention=(action "cannotSeeMention")
|
||||
importQuote=(action "importQuote")
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{{custom-wizard-group-selector
|
||||
groups=site.groups
|
||||
class=fieldClass
|
||||
field=field
|
||||
whitelist=field.content
|
||||
value=field.value
|
||||
|
|
|
|||
|
|
@ -1 +1,9 @@
|
|||
{{input type="number" step="0.01" id=field.id value=field.value tabindex=field.tabindex}}
|
||||
<Input
|
||||
id={{this.field.id}}
|
||||
step="0.01"
|
||||
@type="number"
|
||||
@value={{this.field.value}}
|
||||
tabindex={{this.field.tabindex}}
|
||||
class={{this.fieldClass}}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{{custom-wizard-tag-chooser
|
||||
tags=field.value
|
||||
class=fieldClass
|
||||
tabindex=field.tabindex
|
||||
tagGroups=field.tag_groups
|
||||
everyTag=true
|
||||
|
|
|
|||
|
|
@ -1 +1,8 @@
|
|||
{{input id=field.id value=field.value class=fieldClass placeholder=field.translatedPlaceholder tabindex=field.tabindex autocomplete=autocomplete}}
|
||||
<Input
|
||||
id={{this.field.id}}
|
||||
@value={{this.field.value}}
|
||||
tabindex={{this.field.tabindex}}
|
||||
class={{this.fieldClass}}
|
||||
placeholder={{this.field.translatedPlaceholder}}
|
||||
autocomplete={{this.autocomplete}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
{{textarea id=field.id value=field.value class=fieldClass placeholder=field.translatedPlaceholder tabindex=field.tabindex}}
|
||||
<Textarea
|
||||
id={{this.field.id}}
|
||||
@value={{this.field.value}}
|
||||
tabindex={{this.field.tabindex}}
|
||||
class={{this.fieldClass}}
|
||||
placeholder={{this.field.translatedPlaceholder}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1 +1,6 @@
|
|||
{{input type="text" id=field.id value=field.value tabindex=field.tabindex}}
|
||||
<Input
|
||||
id={{this.field.id}}
|
||||
@value={{this.field.value}}
|
||||
tabindex={{this.field.tabindex}}
|
||||
class={{this.fieldClass}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -32,15 +32,10 @@ body.custom-wizard {
|
|||
}
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="checkbox"],
|
||||
.select-kit {
|
||||
&.invalid .wizard-focusable {
|
||||
outline: 4px solid var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-field {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# frozen_string_literal: true
|
||||
# name: discourse-custom-wizard
|
||||
# about: Forms for Discourse. Better onboarding, structured posting, data enrichment, automated actions and much more.
|
||||
# version: 2.2.16
|
||||
# version: 2.2.17
|
||||
# authors: Angus McLeod, Faizaan Gagan, Robert Barrow, Keegan George, Kaitlin Maddever
|
||||
# url: https://github.com/paviliondev/discourse-custom-wizard
|
||||
# contact_emails: development@pavilion.tech
|
||||
|
|
|
|||
Laden …
In neuem Issue referenzieren