mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-27 08:33:27 +08:00
19af83d39e
This commit introduces the concept of themeable site settings,
which is a new tool for theme authors that lives alongside theme
modifiers and theme settings. Here is a quick summary:
* Theme settings - These are custom settings used to control UI and functionality within your theme or component and provide configuration options. These cannot change core Discourse functionality.
* Theme modifiers - Allows a theme or a component to modify selected server-side functionality of core Discourse as an alternative to building a plugin.
* Themeable site settings (new) - Allows a theme (not components) to override a small subset of core site settings, which generally control parts of the UI and other minor functionality. This allows themes to have a greater control over the full site experience.
Themeable site settings will be shown for all themes, whether the theme
changes
the value or not, and have a similar UI to custom theme settings.
We are also introducing a new page at
`/admin/config/theme-site-settings` that
allows admins to see all possible themeable site settings, and which
themes
are changing the value from the default.
### Configuration
Theme authors can configure initial values themeable site settings using
a section in the `about.json` file like so:
```json
"theme_site_settings": {
"search_experience": "search_field"
}
```
These values will not change when the theme updates, because we cannot
know if admins have manually changed them.
### Limitations
Themeable site settings are only really intended to control elements of
the UI, and when retrieving their value we require a theme ID, so these
limitations apply:
- Themeable site settings cannot be used in Sidekiq jobs
- Themeable site settings cannot be used in markdown rules
- Themeable site settings will be cached separately to client site
settings using theme ID as a key
- Themeable site settings will override keys on the `siteSettings`
service on the client using the application preloader
- `SiteSetting.client_settings_json` will not include themeable site
settings, instead you can call `SiteSetting.theme_site_settings_json`
with a theme ID
### Initial settings
There are only two site settings that will be themeable to begin with:
* `enable_welcome_banner`
* `search_experience`
And our new Horizon theme will take advantage of both. Over time, more
settings that control elements of the UI will be exposed this way.
82 lines
1.4 KiB
SCSS
Vendored
82 lines
1.4 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.admin-controls.admin-site-settings-filter-controls
|
|
.controls
|
|
.admin-site-settings-filter-controls__input {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.admin-controls.admin-site-settings-filter-controls .menu-toggle {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.admin-plugin-config-area {
|
|
&__settings {
|
|
.admin-filtered-site-settings {
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
.setting-label {
|
|
margin-left: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.admin-changes-banner {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: fixed;
|
|
bottom: var(--space-3);
|
|
padding: var(--space-3);
|
|
background-color: var(--secondary);
|
|
border: 1px solid var(--primary-300);
|
|
border-radius: var(--d-border-radius);
|
|
box-shadow: var(--shadow-card);
|
|
z-index: 1;
|
|
|
|
@include viewport.until(sm) {
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
em {
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.admin-theme-site-settings-row {
|
|
&__setting {
|
|
.setting-label {
|
|
margin: 0;
|
|
}
|
|
|
|
.setting-description {
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
&__setting {
|
|
width: 40%;
|
|
}
|
|
|
|
&__default {
|
|
width: 10%;
|
|
}
|
|
|
|
&__overridden {
|
|
width: 50%;
|
|
}
|
|
}
|
|
}
|
