Cook step descriptions && add image type && style updates

assets/javascripts/discourse/templates/components/wizard-custom-field.hbs

@@ -34,6 +34,15 @@
   </div>
 </div>
 
+<div class="setting">
+  <div class="setting-label">
+    <h3>{{i18n 'admin.wizard.field.image'}}</h3>
+  </div>
+  <div class="setting-value">
+    {{input name="image" value=field.image placeholderKey="admin.wizard.field.image_placeholder"}}
+  </div>
+</div>
+
 <div class="setting">
   <div class="setting-label">
     <h3>{{i18n 'admin.wizard.type'}}</h3>

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');

assets/javascripts/wizard/templates/components/wizard-field.hbs

@@ -3,8 +3,12 @@
     <span class='label-value'>{{field.label}}</span>
   {{/if}}
 
+  {{#if field.image}}
+    <div class="field-image"><img src="{{field.image}}"></div>
+  {{/if}}
+
   {{#if field.description}}
-    <div class='field-description'>{{{field.description}}}</div>
+    <div class='field-description'>{{cookedDescription}}</div>
   {{/if}}
 </label>
 

assets/javascripts/wizard/templates/components/wizard-step.hbs

@@ -4,7 +4,7 @@
   {{/if}}
 
   {{#if step.description}}
-    <p class='wizard-step-description'>{{{step.description}}}</p>
+    <div class='wizard-step-description'>{{cookedDescription}}</div>
   {{/if}}
 
   {{#if bannerImage}}

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 {
+    label {
-      font-weight: 400;
+      display: flex;
-    }
+      flex-flow: wrap;
+      align-items: center;
 
-    .field-description {
+      .field-label {
-      color: #333;
+        width: 100%;
-
-      img {
-        width: 40px;
-        height: 40px;
-        vertical-align: middle;
-        padding-bottom: 10px;
-        margin-right: 10px;
       }
 
-      input {
+      .field-image {
-        margin: 0 5px;
+        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 {
+  .checkbox-field {
-    width: initial;
+    display: flex;
-    margin-bottom: 0;
+    align-items: center;
 
-    img {
+    &> label {
-      max-height: 300px;
+      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;

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

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"
+      show_preview: "Show Post Preview"
-      hide_preview: "Hide Preview"
+      hide_preview: "Hide Post Preview"
       quote_post_title: "Quote whole post"
       bold_label: "B"
       bold_title: "Strong"

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?

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