mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-05 07:57:46 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Davide Iadeluca
2025-04-18 10:12:10 +02:00
committed by GitHub
parent 2b08c30a22
commit 2339c23aae
1 changed files with 82 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
framework/core/js/src/admin/components/AppearancePage.tsx
View File

@@ -22,57 +22,91 @@ export default class AppearancePage extends AdminPage {
} }
content() { content() {
return ( return this.contentItems().toArray();
<> }
<Form>
<FieldSet
className="AppearancePage-colors"
label={app.translator.trans('core.admin.appearance.colors_heading')}
description={app.translator.trans('core.admin.appearance.colors_text')}
>
{this.colorItems().toArray()}
</FieldSet>
</Form>
<Form> contentItems(): ItemList<Mithril.Children> {
<div className="Form-group"> const items = new ItemList<Mithril.Children>();
<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 className="Form-group"> items.add(
<label>{app.translator.trans('core.admin.appearance.favicon_heading')}</label> 'colors',
<div className="helpText">{app.translator.trans('core.admin.appearance.favicon_text')}</div> <Form>
<UploadImageButton name="favicon" routePath="favicon" value={app.data.settings.favicon_path} url={app.forum.attribute('faviconUrl')} /> <FieldSet
</div> className="AppearancePage-colors"
label={app.translator.trans('core.admin.appearance.colors_heading')}
<div className="Form-group"> description={app.translator.trans('core.admin.appearance.colors_text')}
<label>{app.translator.trans('core.admin.appearance.custom_header_heading')}</label> >
<div className="helpText">{app.translator.trans('core.admin.appearance.custom_header_text')}</div> {this.colorItems().toArray()}
<Button className="Button" onclick={() => app.modal.show(EditCustomHeaderModal)}> </FieldSet>
{app.translator.trans('core.admin.appearance.edit_header_button')} </Form>,
</Button> 100
</div>
<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 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>
</>
); );
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>,
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>,
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>,
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>,
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>,
60
);
return items;
} }
colorItems() { colorItems() {