chore: refactor settings, make extensible

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;
+  }
+}

js/src/admin/components/index.ts

@@ -0,0 +1,5 @@
+import PollsSettingsPage from './PollsSettingsPage';
+
+export const components = {
+  PollsSettingsPage,
+};

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',

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;
+      }
+    }
+}

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).