Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: advanced page and localized driver settings #3905

Merged
merged 5 commits into from
Oct 21, 2023
Merged

feat: advanced page and localized driver settings #3905

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
85ff08c
feat: advanced page and localized driver settings
SychO9 Oct 21, 2023
d099293
chore: remove todo
SychO9 Oct 21, 2023
01375b7
Apply fixes from StyleCI
StyleCIBot Oct 21, 2023
53060ec
fix: show nothing if advanced page is empty
SychO9 Oct 21, 2023
6840b1f
chore: phpstan
SychO9 Oct 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions extensions/nicknames/js/src/admin/index.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Loading