Update UI for wizard themes further reading step (#7669)

app/assets/javascripts/admin/controllers/modals/admin-install-theme.js.es6

@@ -6,104 +6,10 @@ import {
   observes
 } from "ember-addons/ember-computed-decorators";
 import { THEMES, COMPONENTS } from "admin/models/theme";
+import { POPULAR_THEMES } from "discourse-common/helpers/popular-themes";
 
 const MIN_NAME_LENGTH = 4;
 
-// TODO: use a central repository for themes/components
-const POPULAR_THEMES = [
-  {
-    name: "Graceful",
-    value: "https://github.com/discourse/graceful",
-    preview: "https://theme-creator.discourse.org/theme/awesomerobot/graceful",
-    description: "A light and graceful theme for Discourse.",
-    meta_url:
-      "https://meta.discourse.org/t/a-graceful-theme-for-discourse/93040"
-  },
-  {
-    name: "Material Design Theme",
-    value: "https://github.com/discourse/material-design-stock-theme",
-    preview: "https://newmaterial.trydiscourse.com",
-    description:
-      "Inspired by Material Design, this theme comes with several color palettes (incl. a dark one).",
-    meta_url: "https://meta.discourse.org/t/material-design-stock-theme/47142"
-  },
-  {
-    name: "Minima",
-    value: "https://github.com/discourse/minima",
-    preview: "https://theme-creator.discourse.org/theme/awesomerobot/minima",
-    description: "A minimal theme with reduced UI elements and focus on text.",
-    meta_url:
-      "https://meta.discourse.org/t/minima-a-minimal-theme-for-discourse/108178"
-  },
-  {
-    name: "Sam's Simple Theme",
-    value: "https://github.com/discourse/discourse-simple-theme",
-    preview: "https://theme-creator.discourse.org/theme/sam/simple",
-    description:
-      "Simplified front page design with classic colors and typography.",
-    meta_url:
-      "https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552"
-  },
-  {
-    name: "Vincent",
-    value: "https://github.com/discourse/discourse-vincent-theme",
-    preview: "https://theme-creator.discourse.org/theme/awesomerobot/vincent",
-    description: "An elegant dark theme with a few color palettes.",
-    meta_url: "https://meta.discourse.org/t/discourse-vincent-theme/76662"
-  },
-  {
-    name: "Alternative Logos",
-    value: "https://github.com/discourse/discourse-alt-logo",
-    description: "Add alternative logos for dark / light themes.",
-    meta_url:
-      "https://meta.discourse.org/t/alternative-logo-for-dark-themes/88502",
-    component: true
-  },
-  {
-    name: "Brand Header Theme Component",
-    value: "https://github.com/discourse/discourse-brand-header",
-    description:
-      "Add an extra top header with your logo, navigation links and social icons.",
-    meta_url: "https://meta.discourse.org/t/brand-header-theme-component/77977",
-    component: true
-  },
-  {
-    name: "Custom Header Links",
-    value: "https://github.com/discourse/discourse-custom-header-links",
-    preview:
-      "https://theme-creator.discourse.org/theme/Johani/custom-header-links",
-    description: "Easily add custom text-based links to the header.",
-    meta_url: "https://meta.discourse.org/t/custom-header-links/90588",
-    component: true
-  },
-  {
-    name: "Category Banners",
-    value: "https://github.com/discourse/discourse-category-banners",
-    preview:
-      "https://theme-creator.discourse.org/theme/awesomerobot/discourse-category-banners",
-    description:
-      "Show banners on category pages using your existing category details.",
-    meta_url: "https://meta.discourse.org/t/discourse-category-banners/86241",
-    component: true
-  },
-  {
-    name: "Hamburger Theme Selector",
-    value: "https://github.com/discourse/discourse-hamburger-theme-selector",
-    description:
-      "Displays a theme selector in the hamburger menu provided there is more than one user-selectable theme.",
-    meta_url: "https://meta.discourse.org/t/hamburger-theme-selector/61210",
-    component: true
-  },
-  {
-    name: "Header submenus",
-    value: "https://github.com/discourse/discourse-header-submenus",
-    preview: "https://theme-creator.discourse.org/theme/Johani/header-submenus",
-    description: "Lets you build a header menu with submenus (dropdowns).",
-    meta_url: "https://meta.discourse.org/t/header-submenus/94584",
-    component: true
-  }
-];
-
 export default Ember.Controller.extend(ModalFunctionality, {
   popular: Ember.computed.equal("selection", "popular"),
   local: Ember.computed.equal("selection", "local"),

app/assets/javascripts/discourse-common/helpers/popular-themes.js.es6

@@ -0,0 +1,119 @@
+export const POPULAR_THEMES = [
+  {
+    name: "Graceful",
+    value: "https://github.com/discourse/graceful",
+    preview: "https://theme-creator.discourse.org/theme/awesomerobot/graceful",
+    description: "A light and graceful theme for Discourse.",
+    meta_url:
+      "https://meta.discourse.org/t/a-graceful-theme-for-discourse/93040"
+  },
+  {
+    name: "Material Design Theme",
+    value: "https://github.com/discourse/material-design-stock-theme",
+    preview: "https://newmaterial.trydiscourse.com",
+    description:
+      "Inspired by Material Design, this theme comes with several color palettes (incl. a dark one).",
+    meta_url: "https://meta.discourse.org/t/material-design-stock-theme/47142"
+  },
+  {
+    name: "Minima",
+    value: "https://github.com/discourse/minima",
+    preview: "https://theme-creator.discourse.org/theme/awesomerobot/minima",
+    description: "A minimal theme with reduced UI elements and focus on text.",
+    meta_url:
+      "https://meta.discourse.org/t/minima-a-minimal-theme-for-discourse/108178"
+  },
+  {
+    name: "Sam's Simple Theme",
+    value: "https://github.com/discourse/discourse-simple-theme",
+    preview: "https://theme-creator.discourse.org/theme/sam/simple",
+    description:
+      "Simplified front page design with classic colors and typography.",
+    meta_url:
+      "https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552"
+  },
+  {
+    name: "Vincent",
+    value: "https://github.com/discourse/discourse-vincent-theme",
+    preview: "https://theme-creator.discourse.org/theme/awesomerobot/vincent",
+    description: "An elegant dark theme with a few color palettes.",
+    meta_url: "https://meta.discourse.org/t/discourse-vincent-theme/76662"
+  },
+  {
+    name: "Brand Header",
+    value: "https://github.com/discourse/discourse-brand-header",
+    description:
+      "Add an extra top header with your logo, navigation links and social icons.",
+    meta_url: "https://meta.discourse.org/t/brand-header-theme-component/77977",
+    component: true
+  },
+  {
+    name: "Custom Header Links",
+    value: "https://github.com/discourse/discourse-custom-header-links",
+    preview:
+      "https://theme-creator.discourse.org/theme/Johani/custom-header-links",
+    description: "Easily add custom text-based links to the header.",
+    meta_url: "https://meta.discourse.org/t/custom-header-links/90588",
+    component: true
+  },
+  {
+    name: "Category Banners",
+    value: "https://github.com/discourse/discourse-category-banners",
+    preview:
+      "https://theme-creator.discourse.org/theme/awesomerobot/discourse-category-banners",
+    description:
+      "Show banners on category pages using your existing category details.",
+    meta_url: "https://meta.discourse.org/t/discourse-category-banners/86241",
+    component: true
+  },
+  {
+    name: "Kanban Board",
+    value: "https://github.com/discourse/discourse-kanban-theme",
+    preview: "https://theme-creator.discourse.org/theme/david/kanban",
+    description: "Display and organize topics using a Kanban board interface.",
+    meta_url:
+      "https://meta.discourse.org/t/kanban-board-theme-component/118164",
+    component: true
+  },
+  {
+    name: "Hamburger Theme Selector",
+    value: "https://github.com/discourse/discourse-hamburger-theme-selector",
+    description:
+      "Displays a theme selector in the hamburger menu provided there is more than one user-selectable theme.",
+    meta_url: "https://meta.discourse.org/t/hamburger-theme-selector/61210",
+    component: true
+  },
+  {
+    name: "Header Submenus",
+    value: "https://github.com/discourse/discourse-header-submenus",
+    preview: "https://theme-creator.discourse.org/theme/Johani/header-submenus",
+    description: "Lets you build a header menu with submenus (dropdowns).",
+    meta_url: "https://meta.discourse.org/t/header-submenus/94584",
+    component: true
+  },
+  {
+    name: "Alternative Logos",
+    value: "https://github.com/discourse/discourse-alt-logo",
+    description: "Add alternative logos for dark / light themes.",
+    meta_url:
+      "https://meta.discourse.org/t/alternative-logo-for-dark-themes/88502",
+    component: true
+  },
+  {
+    name: "Automatic Table of Contents",
+    value: "https://github.com/discourse/DiscoTOC",
+    description:
+      "Generates an interactive table of contents on the sidebar of your topic with a simple click in the composer.",
+    meta_url:
+      "https://meta.discourse.org/t/discotoc-automatic-table-of-contents/111143",
+    component: true
+  },
+  {
+    name: "Easy Responsive Footer",
+    value: "https://github.com/hnb-ku/Discourse-easy-footer",
+    preview: "https://theme-creator.discourse.org/theme/Johani/easy-footer",
+    description: "Add a fully responsive footer without writing any HTML.",
+    meta_url: "https://meta.discourse.org/t/easy-responsive-footer/95818",
+    component: true
+  }
+];

app/assets/javascripts/wizard/components/popular-themes.js.es6

@@ -0,0 +1,29 @@
+import { POPULAR_THEMES } from "discourse-common/helpers/popular-themes";
+
+export default Ember.Component.extend({
+  classNames: ["popular-themes"],
+
+  init() {
+    this._super(...arguments);
+
+    this.popular_components = this.selectedThemeComponents();
+  },
+
+  selectedThemeComponents() {
+    return this.shuffle()
+      .filter(theme => theme.component)
+      .slice(0, 5);
+  },
+
+  shuffle() {
+    let array = POPULAR_THEMES;
+
+    // https://stackoverflow.com/a/12646864
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+
+    return array;
+  }
+});

app/assets/javascripts/wizard/templates/components/popular-themes.hbs

@@ -0,0 +1,5 @@
+{{#each popular_components as |theme|}}
+  <a class="popular-theme-item" href="{{theme.meta_url}}" target="_blank">
+    {{theme.name}}
+  </a>
+{{/each}}

app/assets/stylesheets/wizard.scss

@@ -464,6 +464,25 @@ body.wizard {
   }
 }
 
+.wizard-step-themes-further-reading {
+  .wizard-field .input-area {
+    margin-top: 0;
+  }
+
+  .popular-themes {
+    display: flex;
+    a.popular-theme-item {
+      background: #F9F9F9;
+      padding: 8px;
+      margin: 0px 4px;
+      width: 25%;
+      &:hover {
+        background: #F3F3F3;
+      }
+    }
+  }
+}
+
 .textarea-field {
   textarea {
     width: 100%;
@@ -591,6 +610,16 @@ body.wizard {
   .wizard-column-contents {
     padding: 1em !important;
   }
+  .wizard-step-themes-further-reading {
+    .popular-themes {
+      a.popular-theme-item {
+        width: 33.3%;
+        &:nth-child(4), &:nth-child(5) {
+          display: none;
+        }
+      }
+    }
+  }
   .emoji-preview img {
     width: 16px !important;
     height: 16px !important;

config/locales/server.en.yml

@@ -4339,13 +4339,12 @@ en:
       themes_further_reading:
         title: "Further reading for themes"
         description:
-          "You can customize many aspects of your community's look-and-feel in just a few clicks (for example by adding a header or footer). Here is a useful list of resources to learn more about themes and theme components in Discourse:
+          "Discourse has a powerful theming system, here are some useful links to get you started:
           <ul>
-          <li><a href='https://meta.discourse.org/t/91966' target='_blank'>Beginner's guide to creating themes and theme components</a></li>
           <li><a href='https://meta.discourse.org/t/63682' target='_blank'>How do I install a theme or theme component?</a></li>
-          <li><a href='https://meta.discourse.org/t/110448' target='_blank'>Theme Developer Quick Reference Guide</a></li>
+          <li><a href='https://meta.discourse.org/t/110448' target='_blank'>Developer Quick Reference Guide</a></li>
           </ul>
-          And remember to visit the <a href='https://meta.discourse.org/c/theme' target='_blank'>#themes</a> category on <a href='https://meta.discourse.org' target='_blank'>meta.discourse.org</a> regularly to see the newest themes and components posted by staff and contributors."
+          And here are some popular components (for more, see <a href='https://meta.discourse.org/c/theme/l/latest' target='_blank'>#theme</a> category on meta):"
 
       logos:
         title: "Logos"

lib/wizard/builder.rb

@@ -198,7 +198,10 @@ class Wizard
         end
       end
 
-      @wizard.append_step('themes-further-reading')
+      @wizard.append_step('themes-further-reading') do |step|
+        step.banner = "further-reading.png"
+        step.add_field(id: 'popular-themes', type: 'component')
+      end
 
       @wizard.append_step('logos') do |step|
         step.add_field(id: 'logo', type: 'image', value: SiteSetting.site_logo_url)