Update UI for wizard themes further reading step (#7669)
This commit is contained in:
Penar Musaraj
GitHub
parent
f86a5bd5a9
commit
16982d2a69
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
];
|
||||
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{#each popular_components as |theme|}}
|
||||
<a class="popular-theme-item" href="{{theme.meta_url}}" target="_blank">
|
||||
{{theme.name}}
|
||||
</a>
|
||||
{{/each}}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Loading…
Reference in New Issue