Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-09 11:52:54 +01:00
Add text-only field && make more elements optional && style changes
Dieser Commit ist enthalten in:
Ursprung
bb03477251
Commit
c0e0338f5f
6 geänderte Dateien mit 70 neuen und 13 gelöschten Zeilen
|
@ -9,6 +9,7 @@ export default {
|
|||
const ajax = requirejs('wizard/lib/ajax').ajax;
|
||||
const StepModel = requirejs('wizard/models/step').default;
|
||||
const WizardStep = requirejs('wizard/components/wizard-step').default;
|
||||
const WizardField = requirejs('wizard/components/wizard-field').default;
|
||||
const getUrl = requirejs('discourse-common/lib/get-url').default;
|
||||
const FieldModel = requirejs('wizard/models/wizard-field').default;
|
||||
const autocomplete = requirejs('discourse/lib/autocomplete').default;
|
||||
|
@ -139,6 +140,15 @@ export default {
|
|||
}
|
||||
});
|
||||
|
||||
WizardField.reopen({
|
||||
inputComponentName: function() {
|
||||
const type = this.get('field.type');
|
||||
const id = this.get('field.id');
|
||||
if (type === 'text-only') return false;
|
||||
return (type === 'component') ? Ember.String.dasherize(id) : `wizard-field-${type}`;
|
||||
}.property('field.type', 'field.id')
|
||||
});
|
||||
|
||||
FieldModel.reopen({
|
||||
check() {
|
||||
let valid = this.get('valid');
|
||||
|
|
19
assets/javascripts/wizard/templates/components/wizard-field.hbs
Normale Datei
19
assets/javascripts/wizard/templates/components/wizard-field.hbs
Normale Datei
|
@ -0,0 +1,19 @@
|
|||
<label for={{field.id}}>
|
||||
{{#if field.label}}
|
||||
<span class='label-value'>{{field.label}}</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if field.description}}
|
||||
<div class='field-description'>{{{field.description}}}</div>
|
||||
{{/if}}
|
||||
</label>
|
||||
|
||||
{{#if inputComponentName}}
|
||||
<div class='input-area'>
|
||||
{{component inputComponentName field=field step=step fieldClass=fieldClass wizard=wizard}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if field.errorDescription}}
|
||||
<div class='field-error-description'>{{{field.errorDescription}}}</div>
|
||||
{{/if}}
|
|
@ -3,14 +3,14 @@
|
|||
<h1 class='wizard-step-title'>{{step.title}}</h1>
|
||||
{{/if}}
|
||||
|
||||
{{#if bannerImage}}
|
||||
<img src={{bannerImage}} class="wizard-step-banner">
|
||||
{{/if}}
|
||||
|
||||
{{#if step.description}}
|
||||
<p class='wizard-step-description'>{{{step.description}}}</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if bannerImage}}
|
||||
<img src={{bannerImage}} class="wizard-step-banner">
|
||||
{{/if}}
|
||||
|
||||
{{#wizard-step-form step=step}}
|
||||
{{#each step.fields as |field|}}
|
||||
{{wizard-field field=field step=step wizard=wizard}}
|
||||
|
|
|
@ -67,6 +67,10 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.inline-list > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tip {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
@ -86,6 +90,7 @@
|
|||
width: initial;
|
||||
max-width: 660px;
|
||||
max-height: 300px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
|
@ -360,18 +365,16 @@ img.avatar {
|
|||
}
|
||||
}
|
||||
|
||||
.checkbox-field {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
.wizard-column .checkbox-field {
|
||||
float: left;
|
||||
|
||||
&> label {
|
||||
float: left;
|
||||
float: right;
|
||||
}
|
||||
|
||||
&> .input-area {
|
||||
float: right;
|
||||
margin: 0 20px !important;
|
||||
padding: 10px 0;
|
||||
float: left;
|
||||
margin: 15px 20px !important;
|
||||
|
||||
input {
|
||||
cursor: pointer;
|
||||
|
@ -380,6 +383,31 @@ img.avatar {
|
|||
}
|
||||
}
|
||||
|
||||
.wizard-column .wizard-field {
|
||||
clear: both;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.field-label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.field-description {
|
||||
color: #333;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-forever {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
class CustomWizard::Field
|
||||
def self.types
|
||||
@types ||= ['text', 'textarea', 'dropdown', 'image', 'checkbox', 'user-selector']
|
||||
@types ||= ['text', 'textarea', 'dropdown', 'image', 'checkbox', 'user-selector', 'text-only']
|
||||
end
|
||||
|
||||
def self.require_assets
|
||||
|
|
|
@ -131,7 +131,7 @@ end
|
|||
|
||||
def description
|
||||
return object.description if object.description
|
||||
I18n.t("#{object.key || i18n_key}.description", default: '')
|
||||
I18n.t("#{object.key || i18n_key}.description", default: '', base_url: Discourse.base_url)
|
||||
end
|
||||
|
||||
def placeholder
|
||||
|
|
Laden …
In neuem Issue referenzieren