diff --git a/assets/javascripts/wizard/initializers/custom.js.es6 b/assets/javascripts/wizard/initializers/custom.js.es6 index 0eb864e8..392cf264 100644 --- a/assets/javascripts/wizard/initializers/custom.js.es6 +++ b/assets/javascripts/wizard/initializers/custom.js.es6 @@ -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'); diff --git a/assets/javascripts/wizard/templates/components/wizard-field.hbs b/assets/javascripts/wizard/templates/components/wizard-field.hbs new file mode 100644 index 00000000..d01d1fdb --- /dev/null +++ b/assets/javascripts/wizard/templates/components/wizard-field.hbs @@ -0,0 +1,19 @@ + + +{{#if inputComponentName}} +
+ {{component inputComponentName field=field step=step fieldClass=fieldClass wizard=wizard}} +
+{{/if}} + +{{#if field.errorDescription}} +
{{{field.errorDescription}}}
+{{/if}} diff --git a/assets/javascripts/wizard/templates/components/wizard-step.hbs b/assets/javascripts/wizard/templates/components/wizard-step.hbs index e1381d0d..a28a6fac 100644 --- a/assets/javascripts/wizard/templates/components/wizard-step.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-step.hbs @@ -3,14 +3,14 @@

{{step.title}}

{{/if}} - {{#if bannerImage}} - - {{/if}} - {{#if step.description}}

{{{step.description}}}

{{/if}} + {{#if bannerImage}} + + {{/if}} + {{#wizard-step-form step=step}} {{#each step.fields as |field|}} {{wizard-field field=field step=step wizard=wizard}} diff --git a/assets/stylesheets/wizard/wizard_custom.scss b/assets/stylesheets/wizard/wizard_custom.scss index 45b70b25..183a24cf 100644 --- a/assets/stylesheets/wizard/wizard_custom.scss +++ b/assets/stylesheets/wizard/wizard_custom.scss @@ -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); diff --git a/lib/field.rb b/lib/field.rb index 385e9f76..95ff547e 100644 --- a/lib/field.rb +++ b/lib/field.rb @@ -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 diff --git a/lib/wizard_edits.rb b/lib/wizard_edits.rb index 8018a9c9..fc9c56ff 100644 --- a/lib/wizard_edits.rb +++ b/lib/wizard_edits.rb @@ -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