github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-13 05:17:13 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Move colorItems to ItemList (#3186)

Browse Source
This commit is contained in:
Ian Morland 2021-12-02 16:16:50 +00:00 committed by GitHub
parent 17d25ba4ce
commit 6a909386b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
js/src/admin/components/AppearancePage.js
View File

@ -5,6 +5,7 @@ import EditCustomHeaderModal from './EditCustomHeaderModal';
import EditCustomFooterModal from './EditCustomFooterModal'; import EditCustomFooterModal from './EditCustomFooterModal';
import UploadImageButton from './UploadImageButton'; import UploadImageButton from './UploadImageButton';
import AdminPage from './AdminPage'; import AdminPage from './AdminPage';
import ItemList from '../../common/utils/ItemList';
export default class AppearancePage extends AdminPage { export default class AppearancePage extends AdminPage {
headerInfo() { headerInfo() {
@ -21,34 +22,7 @@ export default class AppearancePage extends AdminPage {
<div className="Form"> <div className="Form">
<fieldset className="AppearancePage-colors"> <fieldset className="AppearancePage-colors">
<legend>{app.translator.trans('core.admin.appearance.colors_heading')}</legend> <legend>{app.translator.trans('core.admin.appearance.colors_heading')}</legend>
<div className="helpText">{app.translator.trans('core.admin.appearance.colors_text')}</div> {this.colorItems().toArray()}
<div className="AppearancePage-colors-input">
{this.buildSettingComponent({
type: 'color-preview',
setting: 'theme_primary_color',
placeholder: '#aaaaaa',
})}
{this.buildSettingComponent({
type: 'color-preview',
setting: 'theme_secondary_color',
placeholder: '#aaaaaa',
})}
</div>
{this.buildSettingComponent({
type: 'switch',
setting: 'theme_dark_mode',
label: app.translator.trans('core.admin.appearance.dark_mode_label'),
})}
{this.buildSettingComponent({
type: 'switch',
setting: 'theme_colored_header',
label: app.translator.trans('core.admin.appearance.colored_header_label'),
})}
{this.submitButton()}
</fieldset> </fieldset>
</div>, </div>,
@ -102,6 +76,53 @@ export default class AppearancePage extends AdminPage {
]; ];
} }
colorItems() {
const items = new ItemList();
items.add('helpText', <div className="helpText">{app.translator.trans('core.admin.appearance.colors_text')}</div>, 80);
items.add(
'theme-colors',
<div className="AppearancePage-colors-input">
{this.buildSettingComponent({
type: 'color-preview',
setting: 'theme_primary_color',
placeholder: '#aaaaaa',
})}
{this.buildSettingComponent({
type: 'color-preview',
setting: 'theme_secondary_color',
placeholder: '#aaaaaa',
})}
</div>,
70
);
items.add(
'dark-mode',
this.buildSettingComponent({
type: 'switch',
setting: 'theme_dark_mode',
label: app.translator.trans('core.admin.appearance.dark_mode_label'),
}),
60
);
items.add(
'colored-header',
this.buildSettingComponent({
type: 'switch',
setting: 'theme_colored_header',
label: app.translator.trans('core.admin.appearance.colored_header_label'),
}),
50
);
items.add('submit', this.submitButton(), 0);
return items;
}
onsaved() { onsaved() {
window.location.reload(); window.location.reload();
} }