Skip to content

Commit

Permalink
feat: advanced page and localized driver settings (#3905)
Browse files Browse the repository at this point in the history
  • Loading branch information
SychO9 authored Oct 21, 2023
1 parent 2e903e0 commit 3069498
Show file tree
Hide file tree
Showing 18 changed files with 337 additions and 110 deletions.
7 changes: 7 additions & 0 deletions extensions/nicknames/js/src/admin/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import app from 'flarum/admin/app';
import Alert from 'flarum/common/components/Alert';
import Link from 'flarum/common/components/Link';
import BasicsPage from 'flarum/admin/components/BasicsPage';
import extractText from 'flarum/common/utils/extractText';
import { extend } from 'flarum/common/extend';

app.initializers.add('flarum/nicknames', () => {
app.extensionData
Expand Down Expand Up @@ -55,4 +58,8 @@ app.initializers.add('flarum/nicknames', () => {
},
'start'
);

extend(BasicsPage.prototype, 'driverLocale', function (locale) {
locale.display_name['nickname'] = extractText(app.translator.trans('flarum-nicknames.admin.basics.display_name_driver_options.nickname'));
});
});
3 changes: 3 additions & 0 deletions extensions/nicknames/locale/en.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
flarum-nicknames:
admin:
basics:
display_name_driver_options:
nickname: Nickname
permissions:
edit_own_nickname_label: Edit own nickname
settings:
Expand Down
80 changes: 41 additions & 39 deletions extensions/tags/js/src/admin/components/TagsPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Form from 'flarum/common/components/Form';
import EditTagModal from './EditTagModal';
import tagIcon from '../../common/helpers/tagIcon';
import sortTags from '../../common/utils/sortTags';
import FormSectionGroup, { FormSection } from '@flarum/core/src/admin/components/FormSectionGroup';

function tagItem(tag) {
return (
Expand Down Expand Up @@ -66,17 +67,15 @@ export default class TagsPage extends ExtensionPage {
<div className="TagsContent">
<div className="TagsContent-list">
<div className="container" key={this.forcedRefreshKey} oncreate={this.onListOnCreate.bind(this)}>
<div className="SettingsGroups">
<div className="TagGroup">
<label>{app.translator.trans('flarum-tags.admin.tags.primary_heading')}</label>
<FormSectionGroup>
<FormSection className="TagGroup" label={app.translator.trans('flarum-tags.admin.tags.primary_heading')}>
<ol className="TagList TagList--primary">{tags.filter((tag) => tag.position() !== null && !tag.isChild()).map(tagItem)}</ol>
<Button className="Button TagList-button" icon="fas fa-plus" onclick={() => app.modal.show(EditTagModal, { primary: true })}>
{app.translator.trans('flarum-tags.admin.tags.create_primary_tag_button')}
</Button>
</div>
</FormSection>

<div className="TagGroup TagGroup--secondary">
<label>{app.translator.trans('flarum-tags.admin.tags.secondary_heading')}</label>
<FormSection className="TagGroup TagGroup--secondary" label={app.translator.trans('flarum-tags.admin.tags.secondary_heading')}>
<ul className="TagList">
{tags
.filter((tag) => tag.position() === null)
Expand All @@ -86,41 +85,44 @@ export default class TagsPage extends ExtensionPage {
<Button className="Button TagList-button" icon="fas fa-plus" onclick={() => app.modal.show(EditTagModal, { primary: false })}>
{app.translator.trans('flarum-tags.admin.tags.create_secondary_tag_button')}
</Button>
</div>
<Form label={app.translator.trans('flarum-tags.admin.tags.settings_heading')}>
<div className="Form-group">
<label>{app.translator.trans('flarum-tags.admin.tag_settings.required_primary_heading')}</label>
<div className="helpText">{app.translator.trans('flarum-tags.admin.tag_settings.required_primary_text')}</div>
<div className="TagSettings-rangeInput">
<input
className="FormControl"
type="number"
min="0"
value={minPrimaryTags()}
oninput={withAttr('value', this.setMinTags.bind(this, minPrimaryTags, maxPrimaryTags))}
/>
{app.translator.trans('flarum-tags.admin.tag_settings.range_separator_text')}
<input className="FormControl" type="number" min={minPrimaryTags()} bidi={maxPrimaryTags} />
</FormSection>

<FormSection label={app.translator.trans('flarum-tags.admin.tags.settings_heading')}>
<Form>
<div className="Form-group">
<label>{app.translator.trans('flarum-tags.admin.tag_settings.required_primary_heading')}</label>
<div className="helpText">{app.translator.trans('flarum-tags.admin.tag_settings.required_primary_text')}</div>
<div className="TagSettings-rangeInput">
<input
className="FormControl"
type="number"
min="0"
value={minPrimaryTags()}
oninput={withAttr('value', this.setMinTags.bind(this, minPrimaryTags, maxPrimaryTags))}
/>
{app.translator.trans('flarum-tags.admin.tag_settings.range_separator_text')}
<input className="FormControl" type="number" min={minPrimaryTags()} bidi={maxPrimaryTags} />
</div>
</div>
</div>
<div className="Form-group">
<label>{app.translator.trans('flarum-tags.admin.tag_settings.required_secondary_heading')}</label>
<div className="helpText">{app.translator.trans('flarum-tags.admin.tag_settings.required_secondary_text')}</div>
<div className="TagSettings-rangeInput">
<input
className="FormControl"
type="number"
min="0"
value={minSecondaryTags()}
oninput={withAttr('value', this.setMinTags.bind(this, minSecondaryTags, maxSecondaryTags))}
/>
{app.translator.trans('flarum-tags.admin.tag_settings.range_separator_text')}
<input className="FormControl" type="number" min={minSecondaryTags()} bidi={maxSecondaryTags} />
<div className="Form-group">
<label>{app.translator.trans('flarum-tags.admin.tag_settings.required_secondary_heading')}</label>
<div className="helpText">{app.translator.trans('flarum-tags.admin.tag_settings.required_secondary_text')}</div>
<div className="TagSettings-rangeInput">
<input
className="FormControl"
type="number"
min="0"
value={minSecondaryTags()}
oninput={withAttr('value', this.setMinTags.bind(this, minSecondaryTags, maxSecondaryTags))}
/>
{app.translator.trans('flarum-tags.admin.tag_settings.range_separator_text')}
<input className="FormControl" type="number" min={minSecondaryTags()} bidi={maxSecondaryTags} />
</div>
</div>
</div>
<div className="Form-group Form-controls">{this.submitButton()}</div>
</Form>
</div>
<div className="Form-group Form-controls">{this.submitButton()}</div>
</Form>
</FormSection>
</FormSectionGroup>
<div className="TagsContent-footer">
<p>{app.translator.trans('flarum-tags.admin.tags.about_tags_text')}</p>
</div>
Expand Down
88 changes: 23 additions & 65 deletions extensions/tags/less/admin/TagsPage.less
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@

.TagsContent-list {
padding: 20px 0 0;

}

.TagList,
Expand All @@ -22,6 +21,7 @@
padding: 0;
color: var(--muted-color);
font-size: 13px;
margin-top: 0;

>li {
display: inline-block;
Expand Down Expand Up @@ -80,77 +80,35 @@ li:not(.sortable-dragging)>.TagListItem-info:hover>.Button {
height: 34px;
}

.SettingsGroups {
display: flex;
column-count: 3;
column-gap: 30px;
flex-wrap: wrap;

@media (@tablet-up) {
.TagGroup--secondary {
max-width: 250px !important;
}
@media (@tablet-up) {
.TagGroup--secondary {
max-width: 250px !important;
}
}

.Form {
min-width: 300px;
max-height: 500px;

>label {
margin-bottom: 10px;
}
.TagList-button {
background: none;
border: 1px dashed var(--control-bg);
height: 40px;
margin: auto auto 0 0;
}

.TagSettings-rangeInput {
input {
width: 80px;
display: inline;
margin: 0 5px;
.TagSettings-rangeInput {
input {
width: 80px;
display: inline;
margin: 0 5px;

&:first-child {
margin-left: 0;
}
}
&:first-child {
margin-left: 0;
}
}
}

.TagGroup,
.Form {
display: inline-grid;
padding: 10px 20px;
min-height: 20vh;
max-width: 400px;
grid-template-rows: min-content;
border: 1px solid var(--control-bg);
border-radius: var(--border-radius);
flex: 1 1 160px;

@media (max-width: 1209px) {
margin-bottom: 20px;
}

>ol {
>li {
margin-top: 8px;

.Button {
float: right;
visibility: hidden;
margin: -8px -16px -8px 16px;
}
}
}

.TagList-button {
background: none;
border: 1px dashed var(--control-bg);
height: 40px;
margin: auto auto 0 0;
}

>label {
float: left;
font-weight: bold;
color: var(--muted-color);
.TagGroup {
ol {
> li:not(:first-child) {
margin-top: 8px;
}
}
}
2 changes: 2 additions & 0 deletions framework/core/js/src/admin/AdminApplication.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ export interface AdminApplicationData extends ApplicationData {
modelStatistics: Record<string, { total: number }>;
displayNameDrivers: string[];
slugDrivers: Record<string, string[]>;
searchDrivers: Record<string, string[]>;
permissions: Record<string, string[]>;
advancedPageEmpty: boolean;
}

export default class AdminApplication extends Application {
Expand Down
10 changes: 10 additions & 0 deletions framework/core/js/src/admin/components/AdminNav.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,16 @@ export default class AdminNav extends Component {
50
);

if (app.data.settings.show_advanced_settings && !app.data.advancedPageEmpty) {
items.add(
'advanced',
<LinkButton href={app.route('advanced')} icon="fas fa-cog" title={app.translator.trans('core.admin.nav.advanced_title')}>
{app.translator.trans('core.admin.nav.advanced_button')}
</LinkButton>,
40
);
}

items.add(
'search',
<div className="Search-input">
Expand Down
9 changes: 9 additions & 0 deletions framework/core/js/src/admin/components/AdminPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import ColorPreviewInput from '../../common/components/ColorPreviewInput';
import ItemList from '../../common/utils/ItemList';
import type { IUploadImageButtonAttrs } from './UploadImageButton';
import UploadImageButton from './UploadImageButton';
import extractText from '../../common/utils/extractText';

export interface AdminHeaderOptions {
title: Mithril.Children;
Expand Down Expand Up @@ -410,4 +411,12 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt

return saveSettings(this.dirty()).then(this.onsaved.bind(this));
}

modelLocale(): Record<string, string> {
return {
'Flarum\\Discussion\\Discussion': extractText(app.translator.trans('core.admin.models.discussions')),
'Flarum\\User\\User': extractText(app.translator.trans('core.admin.models.users')),
'Flarum\\Post\\Post': extractText(app.translator.trans('core.admin.models.posts')),
};
}
}
73 changes: 73 additions & 0 deletions framework/core/js/src/admin/components/AdvancedPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import app from '../../admin/app';
import AdminPage from './AdminPage';
import type { IPageAttrs } from '../../common/components/Page';
import type Mithril from 'mithril';
import Form from '../../common/components/Form';
import extractText from '../../common/utils/extractText';
import FormSectionGroup, { FormSection } from './FormSectionGroup';

export default class AdvancedPage<CustomAttrs extends IPageAttrs = IPageAttrs> extends AdminPage<CustomAttrs> {
searchDriverOptions: Record<string, Record<string, string>> = {};

oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
super.oninit(vnode);

const locale = this.driverLocale();

Object.keys(app.data.searchDrivers).forEach((model) => {
this.searchDriverOptions[model] = {};

app.data.searchDrivers[model].forEach((option) => {
this.searchDriverOptions[model][option] = locale.search[option] || option;
});
});
}

headerInfo() {
return {
className: 'AdvancedPage',
icon: 'fas fa-cog',
title: app.translator.trans('core.admin.advanced.title'),
description: app.translator.trans('core.admin.advanced.description'),
};
}

content() {
return [
<Form className="AdvancedPage-container">
<FormSectionGroup>
<FormSection label={app.translator.trans('core.admin.advanced.search.section_label')}>
<Form>
{Object.keys(this.searchDriverOptions).map((model) => {
const options = this.searchDriverOptions[model];
const modelLocale = this.modelLocale()[model] || model;

if (Object.keys(options).length > 1) {
return this.buildSettingComponent({
type: 'select',
setting: `search_driver_${model}`,
options,
label: app.translator.trans('core.admin.advanced.search.driver_heading', { model: modelLocale }),
help: app.translator.trans('core.admin.advanced.search.driver_text', { model: modelLocale }),
});
}

return null;
})}
</Form>
</FormSection>
</FormSectionGroup>

<div className="Form-group Form-controls">{this.submitButton()}</div>
</Form>,
];
}

driverLocale(): Record<string, Record<string, string>> {
return {
search: {
default: extractText(app.translator.trans('core.admin.advanced.search.driver_options.default')),
},
};
}
}
Loading

0 comments on commit 3069498

Please sign in to comment.