forked from pingcap/discourse
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update UI for wizard themes further reading step (discourse#7669)
- Loading branch information
Showing
8 changed files
with
190 additions
and
100 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
app/assets/javascripts/discourse-common/helpers/popular-themes.js.es6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| ]; |
29 changes: 29 additions & 0 deletions
29
app/assets/javascripts/wizard/components/popular-themes.js.es6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| }); |
5 changes: 5 additions & 0 deletions
5
app/assets/javascripts/wizard/templates/components/popular-themes.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| {{#each popular_components as |theme|}} | ||
| <a class="popular-theme-item" href="{{theme.meta_url}}" target="_blank"> | ||
| {{theme.name}} | ||
| </a> | ||
| {{/each}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.