mirror of
https://github.com/discourse/discourse.git
synced 2024-11-29 06:33:44 +08:00
a3e8c3cd7b
This feature introduces the concept of themes. Themes are an evolution
of site customizations.
Themes introduce two very big conceptual changes:
- A theme may include other "child themes", children can include grand
children and so on.
- A theme may specify a color scheme
The change does away with the idea of "enabled" color schemes.
It also adds a bunch of big niceties like
- You can source a theme from a git repo
- History for themes is much improved
- You can only have a single enabled theme. Themes can be selected by
users, if you opt for it.
On a technical level this change comes with a whole bunch of goodies
- All CSS is now compiled using a custom pipeline that uses libsass
see /lib/stylesheet
- There is a single pipeline for css compilation (in the past we used
one for customizations and another one for the rest of the app
- The stylesheet pipeline is now divorced of sprockets, there is no
reliance on sprockets for CSS bundling
- CSS is generated with source maps everywhere (including themes) this
makes debugging much easier
- Our "live reloader" is smarter and avoid a flash of unstyled content
we run a file watcher in "puma" in dev so you no longer need to run
rake autospec to watch for CSS changes
113 lines
4.0 KiB
Handlebars
113 lines
4.0 KiB
Handlebars
<div class="show-current-style">
|
|
<h2>
|
|
{{#if editingName}}
|
|
{{text-field value=model.name autofocus="true"}}
|
|
{{d-button action="finishedEditingName" class="btn-primary btn-small submit-edit" icon="check"}}
|
|
{{d-button action="cancelEditingName" class="btn-small cancel-edit" icon="times"}}
|
|
{{else}}
|
|
{{model.name}} <a {{action "startEditingName"}}>{{fa-icon "pencil"}}</a>
|
|
{{/if}}
|
|
</h2>
|
|
|
|
{{#if model.remote_theme}}
|
|
<p>
|
|
<a href="{{model.remote_theme.about_url}}">{{i18n "admin.customize.theme.about_theme"}}</a>
|
|
</p>
|
|
{{#if model.remote_theme.license_url}}
|
|
<p>
|
|
<a href="{{model.remote_theme.license_url}}">{{i18n "admin.customize.theme.license"}} {{fa-icon "copyright"}}</a>
|
|
</p>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
|
|
<p>
|
|
{{inline-edit-checkbox action="applyDefault" labelKey="admin.customize.theme.is_default" checked=model.default}}
|
|
{{inline-edit-checkbox action="applyUserSelectable" labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable}}
|
|
</p>
|
|
|
|
{{#if showSchemes}}
|
|
<h3>{{i18n "admin.customize.theme.color_scheme"}}</h3>
|
|
<p>{{i18n "admin.customize.theme.color_scheme_select"}}</p>
|
|
<p>{{combo-box content=colorSchemes
|
|
nameProperty="name"
|
|
value=colorSchemeId
|
|
valueAttribute="id"}}
|
|
{{#if colorSchemeChanged}}
|
|
{{d-button action="changeScheme" class="btn-primary btn-small submit-edit" icon="check"}}
|
|
{{d-button action="cancelChangeScheme" class="btn-small cancel-edit" icon="times"}}
|
|
{{/if}}
|
|
</p>
|
|
{{#link-to 'adminCustomize.colors' class="btn edit"}}{{i18n 'admin.customize.colors.edit'}}{{/link-to}}
|
|
{{/if}}
|
|
|
|
<h3>{{i18n "admin.customize.theme.css_html"}}</h3>
|
|
{{#if hasEditedFields}}
|
|
|
|
<p>{{i18n "admin.customize.theme.custom_sections"}}</p>
|
|
<ul>
|
|
{{#each editedDescriptions as |desc|}}
|
|
<li>{{desc}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
{{else}}
|
|
<p>
|
|
{{i18n "admin.customize.theme.edit_css_html_help"}}
|
|
</p>
|
|
{{/if}}
|
|
<p>
|
|
{{#if model.remote_theme}}
|
|
{{#if model.remote_theme.commits_behind}}
|
|
{{#d-button action="updateToLatest" icon="download"}}{{i18n "admin.customize.theme.update_to_latest"}}{{/d-button}}
|
|
{{else}}
|
|
{{#d-button action="checkForThemeUpdates" icon="refresh"}}{{i18n "admin.customize.theme.check_for_updates"}}{{/d-button}}
|
|
{{/if}}
|
|
{{/if}}
|
|
{{#d-button action="editTheme" class="btn edit"}}{{i18n 'admin.customize.theme.edit_css_html'}}{{/d-button}}
|
|
{{#if model.remote_theme}}
|
|
<span class='status-message'>
|
|
{{#if updatingRemote}}
|
|
{{i18n 'admin.customize.theme.updating'}}
|
|
{{else}}
|
|
{{#if model.remote_theme.commits_behind}}
|
|
{{i18n 'admin.customize.theme.commits_behind' count=model.remote_theme.commits_behind}}
|
|
{{else}}
|
|
{{i18n 'admin.customize.theme.up_to_date'}} {{format-date model.remote_theme.updated_at leaveAgo="true"}}
|
|
{{/if}}
|
|
{{/if}}
|
|
</span>
|
|
{{/if}}
|
|
</p>
|
|
|
|
{{#if availableChildThemes}}
|
|
<h3>{{i18n "admin.customize.theme.included_themes"}}</h3>
|
|
{{#unless model.childThemes.length}}
|
|
<p>
|
|
<label class='checkbox-label'>
|
|
{{input type="checkbox" checked=allowChildThemes}}
|
|
{{i18n "admin.customize.theme.child_themes_check"}}
|
|
</label>
|
|
</p>
|
|
{{else}}
|
|
<ul>
|
|
{{#each model.childThemes as |child|}}
|
|
<li>{{child.name}} {{d-button action="removeChildTheme" actionParam=child class="btn-small cancel-edit" icon="times"}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
{{/unless}}
|
|
{{#if selectableChildThemes}}
|
|
<p>{{combo-box content=selectableChildThemes
|
|
nameProperty="name"
|
|
value=selectedChildThemeId
|
|
valueAttribute="id"}}
|
|
|
|
{{#d-button action="addChildTheme" icon="plus"}}{{i18n "admin.customize.theme.add"}}{{/d-button}}
|
|
</p>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
<a class="btn export" target="_blank" href={{downloadUrl}}>{{fa-icon "download"}} {{i18n 'admin.export_json.button_text'}}</a>
|
|
|
|
{{d-button action="destroy" label="admin.customize.delete" icon="trash" class="btn-danger"}}
|
|
</div>
|