From 4ab2cbb1ff7684145fd5dbfebee63c4ca767be8f Mon Sep 17 00:00:00 2001 From: Angus McLeod Date: Mon, 5 Mar 2018 09:52:15 +0800 Subject: [PATCH] Cook step descriptions && add image type && style updates --- .../components/wizard-custom-field.hbs | 9 ++ .../wizard/initializers/custom.js.es6 | 9 ++ .../templates/components/wizard-field.hbs | 6 +- .../templates/components/wizard-step.hbs | 2 +- assets/stylesheets/wizard/wizard_custom.scss | 110 ++++++++++-------- .../wizard/wizard_custom_mobile.scss | 13 --- config/locales/client.en.yml | 6 +- lib/builder.rb | 1 + lib/wizard_edits.rb | 13 ++- 9 files changed, 103 insertions(+), 66 deletions(-) diff --git a/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs b/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs index b00452c3..ca469a11 100644 --- a/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs +++ b/assets/javascripts/discourse/templates/components/wizard-custom-field.hbs @@ -34,6 +34,15 @@ +
+
+

{{i18n 'admin.wizard.field.image'}}

+
+
+ {{input name="image" value=field.image placeholderKey="admin.wizard.field.image_placeholder"}} +
+
+

{{i18n 'admin.wizard.type'}}

diff --git a/assets/javascripts/wizard/initializers/custom.js.es6 b/assets/javascripts/wizard/initializers/custom.js.es6 index d078da25..6c81fa4a 100644 --- a/assets/javascripts/wizard/initializers/custom.js.es6 +++ b/assets/javascripts/wizard/initializers/custom.js.es6 @@ -13,6 +13,7 @@ export 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; + const cook = requirejs('discourse/plugins/discourse-custom-wizard/wizard/lib/text-lite').cook; $.fn.autocomplete = autocomplete; @@ -57,6 +58,10 @@ export default { return index === 0 && !required; }.property('step.index', 'wizard.required'), + cookedDescription: function() { + return cook(this.get('step.description')); + }.property('step.description'), + bannerImage: function() { const src = this.get('step.banner'); if (!src) return; @@ -153,6 +158,10 @@ export default { WizardField.reopen({ classNameBindings: ['field.id'], + cookedDescription: function() { + return cook(this.get('field.description')); + }.property('field.description'), + inputComponentName: function() { const type = this.get('field.type'); const id = this.get('field.id'); diff --git a/assets/javascripts/wizard/templates/components/wizard-field.hbs b/assets/javascripts/wizard/templates/components/wizard-field.hbs index d01d1fdb..cb03a5bc 100644 --- a/assets/javascripts/wizard/templates/components/wizard-field.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-field.hbs @@ -3,8 +3,12 @@ {{field.label}} {{/if}} + {{#if field.image}} +
+ {{/if}} + {{#if field.description}} -
{{{field.description}}}
+
{{cookedDescription}}
{{/if}} diff --git a/assets/javascripts/wizard/templates/components/wizard-step.hbs b/assets/javascripts/wizard/templates/components/wizard-step.hbs index 028bf686..41cc336a 100644 --- a/assets/javascripts/wizard/templates/components/wizard-step.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-step.hbs @@ -4,7 +4,7 @@ {{/if}} {{#if step.description}} -

{{{step.description}}}

+
{{cookedDescription}}
{{/if}} {{#if bannerImage}} diff --git a/assets/stylesheets/wizard/wizard_custom.scss b/assets/stylesheets/wizard/wizard_custom.scss index 8c8b0e67..fd023ad7 100644 --- a/assets/stylesheets/wizard/wizard_custom.scss +++ b/assets/stylesheets/wizard/wizard_custom.scss @@ -2,12 +2,14 @@ .custom-wizard { background-color: initial; + font-size: 1.1em; .wizard-step-contents { position: relative; display: flex; flex-direction: column; width: 100%; + min-height: initial; } .wizard-step-title { @@ -15,11 +17,14 @@ } .wizard-step-description { - line-height: 1.7; - margin-top: 0; - margin-bottom: 1em; flex: 0; + p { + line-height: 1.7; + margin-top: 0; + margin-bottom: 0; + } + i { margin-right: 7px; } @@ -76,6 +81,15 @@ } } + .wizard-step-banner { + width: initial; + margin-bottom: 1em; + + img { + max-height: 300px; + } + } + .wizard-step-form { flex: auto; display: flex; @@ -84,39 +98,64 @@ } .wizard-field { - margin-bottom: 1em; - &.tip { margin-top: auto; } - .field-label { - font-weight: 400; - } + label { + display: flex; + flex-flow: wrap; + align-items: center; - .field-description { - color: #333; - - img { - width: 40px; - height: 40px; - vertical-align: middle; - padding-bottom: 10px; - margin-right: 10px; + .field-label { + width: 100%; } - input { - margin: 0 5px; + .field-image { + margin-right: 10px; + + img { + width: 30px; + height: 30px; + } + } + + .field-description { + flex: 1; + color: #333; + margin-top: 0; + + p { + margin: 0; + line-height: 1.3em; + } + + img { + height: 15px; + width: 15px; + margin: 0 5px; + } } } } - .wizard-column .wizard-step-banner { - width: initial; - margin-bottom: 0; + .checkbox-field { + display: flex; + align-items: center; - img { - max-height: 300px; + &> label { + order: 1; + flex: 1; + } + + &> .input-area { + order: 0; + margin: 15px 20px !important; + + input { + cursor: pointer; + transform: scale(1.3); + } } } @@ -392,29 +431,6 @@ img.avatar { } } -.wizard-column .checkbox-field { - display: flex; - - &> label { - order: 1; - flex: 1; - - .field-description { - margin-top: 0; - } - } - - &> .input-area { - order: 0; - margin: 15px 20px !important; - - input { - cursor: pointer; - transform: scale(1.3); - } - } -} - .checkbox-field.invalid .input-area { padding: 3px; border: 4px solid red; diff --git a/assets/stylesheets/wizard/wizard_custom_mobile.scss b/assets/stylesheets/wizard/wizard_custom_mobile.scss index 4014c92c..f4f4b762 100644 --- a/assets/stylesheets/wizard/wizard_custom_mobile.scss +++ b/assets/stylesheets/wizard/wizard_custom_mobile.scss @@ -38,17 +38,4 @@ input, textarea { border: 1px solid #919191; } - - .wizard-column .wizard-field .field-description { - display: flex; - align-items: center; - - img { - float: none; - } - - i, span { - flex: 1; - } - } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 81138fd0..eeb1bca5 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -71,6 +71,8 @@ en: header: "Fields" label: "Label" description: "Description" + image: "Image" + image_placeholder: "Image url" dropdown_none: "None" dropdown_none_placeholder: "Translation Key" choices_label: "Dropdown Choices" @@ -159,8 +161,8 @@ en: none: "There is no wizard here." wizard_composer: - show_preview: "Show Preview" - hide_preview: "Hide Preview" + show_preview: "Show Post Preview" + hide_preview: "Hide Post Preview" quote_post_title: "Quote whole post" bold_label: "B" bold_title: "Strong" diff --git a/lib/builder.rb b/lib/builder.rb index 58610a9e..9b9f4269 100644 --- a/lib/builder.rb +++ b/lib/builder.rb @@ -67,6 +67,7 @@ class CustomWizard::Builder params[:label] = f['label'] if f['label'] params[:description] = f['description'] if f['description'] + params[:image] = f['image'] if f['image'] params[:key] = f['key'] if f['key'] if @submissions.last && @wizard.unfinished? diff --git a/lib/wizard_edits.rb b/lib/wizard_edits.rb index fc9c56ff..9d8f9949 100644 --- a/lib/wizard_edits.rb +++ b/lib/wizard_edits.rb @@ -24,7 +24,7 @@ require_dependency 'wizard/step' end ::Wizard::Field.class_eval do - attr_reader :label, :description, :key, :min_length + attr_reader :label, :description, :image, :key, :min_length attr_accessor :dropdown_none def initialize(attrs) @@ -35,6 +35,7 @@ end @required = !!attrs[:required] @label = attrs[:label] @description = attrs[:description] + @image = attrs[:image] @key = attrs[:key] @min_length = attrs[:min_length] @value = attrs[:value] @@ -122,7 +123,7 @@ end end ::WizardFieldSerializer.class_eval do - attributes :dropdown_none + attributes :dropdown_none, :image def label return object.label if object.label @@ -134,6 +135,14 @@ end I18n.t("#{object.key || i18n_key}.description", default: '', base_url: Discourse.base_url) end + def image + object.image + end + + def include_image? + object.image.present? + end + def placeholder I18n.t("#{object.key || i18n_key}.placeholder", default: '') end