chore: refactor settings, make extensible

FriendsOfFlarum · Oct 17, 2024 · 2f1d068 · 2f1d068
1 parent e859ea4
commit 2f1d068
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 39 deletions.
diff --git a/js/src/admin/components/PollsSettingsPage.tsx b/js/src/admin/components/PollsSettingsPage.tsx
@@ -0,0 +1,139 @@
+import app from 'flarum/admin/app';
+import ExtensionPage from 'flarum/admin/components/ExtensionPage';
+import ItemList from 'flarum/common/utils/ItemList';
+import Mithril from 'mithril';
+
+export default class PollsSettingsPage extends ExtensionPage {
+ content() {
+ return (
+ <div className="PollsSettingsPage">
+ <div className="container">
+ <div className="PollsSettingsTabPage PollsSettingsPage--settings">
+ <div className="Form">
+ {this.settingsItems().toArray()}
+ <div className="Form-group">{this.submitButton()}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+ settingsItems(): ItemList<Mithril.Children> {
+ const items = new ItemList<Mithril.Children>();
+
+ items.add(
+ 'general',
+ <div className="Section">
+ <h3>{app.translator.trans('fof-polls.admin.settings.general.heading')}</h3>
+ <p className="helpText">{app.translator.trans('fof-polls.admin.settings.general.help')}</p>
+ {this.generalItems().toArray()}
+ </div>
+ );
+
+ items.add(
+ 'globalPolls',
+ <div className="Section">
+ <h3>{app.translator.trans('fof-polls.admin.settings.global_polls.heading')}</h3>
+ <p className="helpText">{app.translator.trans('fof-polls.admin.settings.global_polls.help')}</p>
+ {this.globalPollsItems().toArray()}
+ </div>
+ );
+
+ items.add(
+ 'image',
+ <div className="Section">
+ <h3>{app.translator.trans('fof-polls.admin.settings.image.heading')}</h3>
+ <p className="helpText">{app.translator.trans('fof-polls.admin.settings.image.help')}</p>
+ {this.imageItems().toArray()}
+ </div>
+ );
+
+ return items;
+ }
+
+ generalItems(): ItemList<Mithril.Children> {
+ const items = new ItemList<Mithril.Children>();
+
+ items.add(
+ 'colorBlend',
+ this.buildSettingComponent({
+ setting: 'fof-polls.optionsColorBlend',
+ type: 'switch',
+ label: app.translator.trans('fof-polls.admin.settings.options_color_blend'),
+ help: app.translator.trans('fof-polls.admin.settings.options_color_blend_help'),
+ })
+ );
+
+ items.add(
+ 'maxOptions',
+ this.buildSettingComponent({
+ setting: 'fof-polls.maxOptions',
+ type: 'number',
+ label: app.translator.trans('fof-polls.admin.settings.max_options'),
+ min: 2,
+ })
+ );
+
+ return items;
+ }
+
+ globalPollsItems(): ItemList<Mithril.Children> {
+ const items = new ItemList<Mithril.Children>();
+
+ items.add(
+ 'enableGlobalPolls',
+ this.buildSettingComponent({
+ setting: 'fof-polls.enableGlobalPolls',
+ type: 'boolean',
+ label: app.translator.trans('fof-polls.admin.settings.enable_global_polls'),
+ help: app.translator.trans('fof-polls.admin.settings.enable_global_polls_help'),
+ })
+ );
+
+ return items;
+ }
+
+ imageItems(): ItemList<Mithril.Children> {
+ const items = new ItemList<Mithril.Children>();
+
+ items.add(
+ 'allowOptionImage',
+ this.buildSettingComponent({
+ setting: 'fof-polls.allowOptionImage',
+ type: 'switch',
+ label: app.translator.trans('fof-polls.admin.settings.allow_option_image'),
+ })
+ );
+
+ items.add(
+ 'allowImageUploads',
+ this.buildSettingComponent({
+ setting: 'fof-polls.allowImageUploads',
+ type: 'switch',
+ label: app.translator.trans('fof-polls.admin.settings.allow_image_uploads'),
+ help: app.translator.trans('fof-polls.admin.settings.allow_image_uploads_help'),
+ })
+ );
+
+ items.add(
+ 'imageHeight',
+ this.buildSettingComponent({
+ setting: 'fof-polls.image_height',
+ type: 'number',
+ label: app.translator.trans('fof-polls.admin.settings.image_height'),
+ })
+ );
+
+ items.add(
+ 'imageWidth',
+ this.buildSettingComponent({
+ setting: 'fof-polls.image_width',
+ type: 'number',
+ label: app.translator.trans('fof-polls.admin.settings.image_width'),
+ })
+ );
+
+ return items;
+ }
+}
diff --git a/js/src/admin/components/index.ts b/js/src/admin/components/index.ts
@@ -0,0 +1,5 @@
+import PollsSettingsPage from './PollsSettingsPage';
+
+export const components = {
+ PollsSettingsPage,
+};
diff --git a/js/src/admin/index.ts b/js/src/admin/index.ts
@@ -1,47 +1,12 @@
 import app from 'flarum/admin/app';
+import PollsSettingsPage from './components/PollsSettingsPage';
+
+export * from './components';
 
 app.initializers.add('fof/polls', () => {
  app.extensionData
  .for('fof-polls')
- .registerSetting({
- setting: 'fof-polls.allowOptionImage',
- type: 'switch',
- label: app.translator.trans('fof-polls.admin.settings.allow_option_image'),
- })
- .registerSetting({
- setting: 'fof-polls.optionsColorBlend',
- type: 'switch',
- label: app.translator.trans('fof-polls.admin.settings.options_color_blend'),
- help: app.translator.trans('fof-polls.admin.settings.options_color_blend_help'),
- })
- .registerSetting({
- setting: 'fof-polls.maxOptions',
- type: 'number',
- label: app.translator.trans('fof-polls.admin.settings.max_options'),
- min: 2,
- })
- .registerSetting({
- setting: 'fof-polls.allowImageUploads',
- type: 'switch',
- label: app.translator.trans('fof-polls.admin.settings.allow_image_uploads'),
- help: app.translator.trans('fof-polls.admin.settings.allow_image_uploads_help'),
- })
- .registerSetting({
- setting: 'fof-polls.enableGlobalPolls',
- type: 'boolean',
- label: app.translator.trans('fof-polls.admin.settings.enable_global_polls'),
- help: app.translator.trans('fof-polls.admin.settings.enable_global_polls_help'),
- })
- .registerSetting({
- setting: 'fof-polls.image_height',
- type: 'number',
- label: app.translator.trans('fof-polls.admin.settings.image_height'),
- })
- .registerSetting({
- setting: 'fof-polls.image_width',
- type: 'number',
- label: app.translator.trans('fof-polls.admin.settings.image_width'),
- })
+ .registerPage(PollsSettingsPage)
  .registerPermission(
  {
  icon: 'fas fa-poll',

diff --git a/resources/less/admin.less b/resources/less/admin.less
@@ -0,0 +1,50 @@
+.PollsSettingsPage {
+ padding-top: 20px;
+
+ .Button {
+ margin-right: 10px;
+ margin-bottom: 10px;
+ }
+
+ .PollsSettingsTabPage {
+ background: @control-bg; // Use control background for coherence
+ padding: 20px;
+ border-radius: @border-radius; // Consistent border radius
+ box-shadow: 0 2px 4px @shadow-color; // Subtle shadow for depth
+
+ h3 {
+ color: @primary-color; // Primary color for headings
+ margin-bottom: 10px;
+ }
+
+ .Section {
+ background: @body-bg; // Contrast with the section background
+ border-radius: @border-radius;
+ box-shadow: 0 1px 3px @shadow-color;
+ padding: 15px;
+ margin-bottom: 20px;
+ }
+
+ .Form {
+ .control {
+ background: @body-bg;
+ border: 1px solid @muted-color; // Defines the input fields
+ color: @text-color;
+ padding: 6px 12px;
+ border-radius: @border-radius;
+ }
+ input {
+ max-width: 300px;
+ }
+ }
+ }
+
+ &--settings {
+ //max-width: 720px;
+ margin: 0 auto; // Center align for better presentation
+
+ @media @desktop-up {
+ margin: 0;
+ }
+ }
+}
diff --git a/resources/locale/en.yml b/resources/locale/en.yml
@@ -1,6 +1,15 @@
 fof-polls:
  admin:
  settings:
+ general:
+ heading: General Settings
+ help: These settings control the basic features of the Polls extension.
+ global_polls:
+ heading: Global Polls
+ help: These settings control the global polls feature.
+ image:
+ heading: Image Settings
+ help: These settings control the image settings for polls.
  allow_option_image: Allow an image URL to be provided for each poll option
  allow_image_uploads: Allow image uploads for polls and their options
  allow_image_uploads_help: If enabled, users will be able to upload images alongside also providing an image URL (if enabled for options, always enabled for the poll itself).