Add basic theme support to custom wizards

assets/javascripts/discourse/models/custom-wizard.js.es6

@@ -10,7 +10,8 @@ const wizardProperties = [
   'after_time_scheduled',
   'required',
   'prompt_completion',
-  'min_trust'
+  'min_trust',
+  'theme_key'
 ];
 
 const CustomWizard = Discourse.Model.extend({

assets/javascripts/discourse/routes/admin-wizard.js.es6

@@ -31,10 +31,23 @@ export default Discourse.Route.extend({
   },
 
   afterModel(model) {
+    return Ember.RSVP.all([
+      this._getFieldTypes(model),
+      this._getThemes(model)
+    ]);
+  },
+
+  _getFieldTypes(model) {
     return ajax('/admin/wizards/field-types')
       .then((result) => model.set('fieldTypes', result.types));
   },
 
+  _getThemes(model) {
+    return this.store.findAll('theme').then((result) => {
+      model.set('themes', result.content);
+    });
+  },
+
   setupController(controller, model) {
     const newWizard = this.get('newWizard');
     const steps = model.get('steps') || [];

assets/javascripts/discourse/templates/admin-wizard.hbs

@@ -102,6 +102,15 @@
     </div>
   </div>
 
+  <div class="setting">
+    <div class="setting-label">
+      <h3>{{i18n 'admin.wizard.theme_key'}}</h3>
+    </div>
+    <div class="setting-value">
+      {{combo-box content=model.themes valueAttribute='key' value=model.theme_key none='admin.wizard.no_theme'}}
+    </div>
+  </div>
+
   <div class="setting full">
     <div class="setting-label">
       <h3>{{i18n 'admin.wizard.url'}}</h3>

config/locales/client.en.yml

@@ -34,6 +34,8 @@ en:
         prompt_completion_label: "Prompt user to complete wizard."
         min_trust: "Trust"
         min_trust_label: "Trust level required to access wizard."
+        theme_key: "Theme"
+        no_theme: "Select a Theme (optional)"
         save: "Save Changes"
         remove: "Delete Wizard"
         header: "Wizard"

controllers/wizard.rb

@@ -4,12 +4,20 @@ class CustomWizard::WizardController < ::ApplicationController
 
   before_action :ensure_logged_in
   helper_method :wizard_page_title
+  helper_method :theme_key
+
+  def wizard
+    PluginStore.get('custom_wizard', params[:wizard_id].underscore)
+  end
 
   def wizard_page_title
-    wizard = PluginStore.get('custom_wizard', params[:wizard_id].underscore)
     wizard ? (wizard['name'] || wizard['id']) : I18n.t('wizard.custom_title')
   end
 
+  def theme_key
+    wizard['theme_key']
+  end
+
   def index
     respond_to do |format|
       format.json do

views/layouts/wizard.html.erb

@@ -3,6 +3,9 @@
     <%= discourse_stylesheet_link_tag :wizard, theme_key: nil %>
     <%= stylesheet_link_tag "wizard_custom", media: "all", "data-turbolinks-track" => "reload" %>
     <%= stylesheet_link_tag "wizard_custom_mobile", media: "all", "data-turbolinks-track" => "reload" if mobile_view?%>
+    <%- if theme_key %>
+      <%= discourse_stylesheet_link_tag (mobile_view? ? :mobile_theme : :desktop_theme) %>
+    <%- end %>
     <%= preload_script "ember_jquery" %>
     <%= preload_script "wizard-vendor" %>
     <%= preload_script "wizard-application" %>
@@ -17,6 +20,7 @@
 
     <%= server_plugin_outlet "custom_wizard" %>
 
+    <meta name="discourse_theme_key" content="<%= theme_key %>">
     <meta name="discourse-base-uri" content="<%= Discourse.base_uri %>">
 
     <%= render partial: "layouts/head" %>