1
0
mirror of https://github.com/flarum/core.git synced 2025-08-04 23:47:32 +02:00

refactor(core): improve extensibility of AppearancePage (#4200)

This commit is contained in:
Davide Iadeluca
2025-04-18 10:12:10 +02:00
committed by GitHub
parent 2b08c30a22
commit 2339c23aae

View File

@@ -22,8 +22,14 @@ export default class AppearancePage extends AdminPage {
}
content() {
return (
<>
return this.contentItems().toArray();
}
contentItems(): ItemList<Mithril.Children> {
const items = new ItemList<Mithril.Children>();
items.add(
'colors',
<Form>
<FieldSet
className="AppearancePage-colors"
@@ -32,47 +38,75 @@ export default class AppearancePage extends AdminPage {
>
{this.colorItems().toArray()}
</FieldSet>
</Form>
</Form>,
100
);
<Form>
items.add('branding', <Form>{this.brandingItems().toArray()}</Form>, 90);
return items;
}
brandingItems(): ItemList<Mithril.Children> {
const items = new ItemList<Mithril.Children>();
items.add(
'logo',
<div className="Form-group">
<label>{app.translator.trans('core.admin.appearance.logo_heading')}</label>
<div className="helpText">{app.translator.trans('core.admin.appearance.logo_text')}</div>
<UploadImageButton name="logo" routePath="logo" value={app.data.settings.logo_path} url={app.forum.attribute('logoUrl')} />
</div>
</div>,
100
);
items.add(
'favicon',
<div className="Form-group">
<label>{app.translator.trans('core.admin.appearance.favicon_heading')}</label>
<div className="helpText">{app.translator.trans('core.admin.appearance.favicon_text')}</div>
<UploadImageButton name="favicon" routePath="favicon" value={app.data.settings.favicon_path} url={app.forum.attribute('faviconUrl')} />
</div>
</div>,
90
);
items.add(
'custom-header',
<div className="Form-group">
<label>{app.translator.trans('core.admin.appearance.custom_header_heading')}</label>
<div className="helpText">{app.translator.trans('core.admin.appearance.custom_header_text')}</div>
<Button className="Button" onclick={() => app.modal.show(EditCustomHeaderModal)}>
{app.translator.trans('core.admin.appearance.edit_header_button')}
</Button>
</div>
</div>,
80
);
items.add(
'custom-footer',
<div className="Form-group">
<label>{app.translator.trans('core.admin.appearance.custom_footer_heading')}</label>
<div className="helpText">{app.translator.trans('core.admin.appearance.custom_footer_text')}</div>
<Button className="Button" onclick={() => app.modal.show(EditCustomFooterModal)}>
{app.translator.trans('core.admin.appearance.edit_footer_button')}
</Button>
</div>
</div>,
70
);
items.add(
'custom-css',
<div className="Form-group">
<label>{app.translator.trans('core.admin.appearance.custom_styles_heading')}</label>
<div className="helpText">{app.translator.trans('core.admin.appearance.custom_styles_text')}</div>
<Button className="Button" onclick={() => app.modal.show(EditCustomCssModal)}>
{app.translator.trans('core.admin.appearance.edit_css_button')}
</Button>
</div>
</Form>
</>
</div>,
60
);
return items;
}
colorItems() {