chore: refactor extensionpage, make extensible (#207)

* chore: refactor extensionpage, make extensible

* chore: typo in settingspage

js/src/admin/components/ByobuSettingsPage.tsx

@@ -2,70 +2,131 @@ import app from 'flarum/admin/app';
 import ExtensionPage from 'flarum/admin/components/ExtensionPage';
 import Badge from 'flarum/common/components/Badge';
 import icon from 'flarum/common/helpers/icon';
+import ItemList from 'flarum/common/utils/ItemList';
 
 import type Mithril from 'mithril';
 
-export default class ByobuSetingsPage extends ExtensionPage {
+export default class ByobuSettingsPage extends ExtensionPage {
   badgeDefault: string = 'fas fa-map';
   postActionDefault: string = 'far fa-map';
 
   content() {
-    const helpText = flarum.extensions['flarum-tags']
-      ? app.translator.trans('flarum-tags.admin.edit_tag.icon_text', {
-          a: <a href={app.refs.fontawesome} tabindex="-1" />,
-        })
-      : '';
-
     return (
       <div className="ByobuSettingsPage">
         <div className="container">
-          <div className="Form">
-            <div className="Form-group">
-              {this.buildSettingComponent({
-                type: 'string',
-                setting: 'fof-byobu.icon-badge',
-                label: app.translator.trans('fof-byobu.admin.settings.badge-icon'),
-                help: (
-                  <div>
-                    <Badge icon={this.setting('fof-byobu.icon-badge').toJSON() || this.badgeDefault}></Badge> {helpText}
-                  </div>
-                ),
-                placeholder: this.badgeDefault,
-              })}
-              {this.buildSettingComponent({
-                type: 'string',
-                setting: 'fof-byobu.icon-postAction',
-                label: app.translator.trans('fof-byobu.admin.settings.post-event-icon'),
-                help: (
-                  <div>
-                    {icon(this.setting('fof-byobu.icon-postAction').toJSON() || this.postActionDefault)} {helpText}
-                  </div>
-                ),
-                placeholder: this.postActionDefault,
-              })}
-              {this.buildSettingComponent({
-                type: 'boolean',
-                setting: 'fof-byobu.makePublic',
-                label: app.translator.trans('fof-byobu.admin.settings.enable-make-public-option'),
-                help: app.translator.trans('fof-byobu.admin.settings.enable-make-public-option-help'),
-              })}
-              {this.buildSettingComponent({
-                type: 'boolean',
-                setting: 'fof-byobu.delete_on_last_recipient_left',
-                label: app.translator.trans('fof-byobu.admin.settings.delete_on_last_recipient_left'),
-                help: app.translator.trans('fof-byobu.admin.settings.delete_on_last_recipient_left_help'),
-              })}
-              {this.buildSettingComponent({
-                type: 'boolean',
-                setting: 'fof-byobu.hide_from_all_discussions_page',
-                label: app.translator.trans('fof-byobu.admin.settings.hide_from_all_discussions_page'),
-                help: app.translator.trans('fof-byobu.admin.settings.hide_from_all_discussions_page_help'),
-              })}
+          <div className="ByobuSettingsTabPage ByobuSettingsPage--settings">
+            <div className="Form">
+              {this.settingsItems().toArray()}
+              <div className="Form-group">{this.submitButton()}</div>
             </div>
-            <div className="Form-group">{this.submitButton()}</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-byobu.admin.settings.general.heading')}</h3>
+        <p className="helpText">{app.translator.trans('fof-byobu.admin.settings.general.help')}</p>
+        {this.generalItems().toArray()}
+      </div>
+    );
+
+    items.add(
+      'icon',
+      <div className="Section">
+        <h3>{app.translator.trans('fof-byobu.admin.settings.icon.heading')}</h3>
+        <p className="helpText">{app.translator.trans('fof-byobu.admin.settings.icon.help')}</p>
+        {this.iconItems().toArray()}
+      </div>
+    );
+
+    return items;
+  }
+
+  generalItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'makePublic',
+      this.buildSettingComponent({
+        type: 'boolean',
+        setting: 'fof-byobu.makePublic',
+        label: app.translator.trans('fof-byobu.admin.settings.enable-make-public-option'),
+        help: app.translator.trans('fof-byobu.admin.settings.enable-make-public-option-help'),
+      })
+    );
+
+    items.add(
+      'deleteEmpty',
+      this.buildSettingComponent({
+        type: 'boolean',
+        setting: 'fof-byobu.delete_on_last_recipient_left',
+        label: app.translator.trans('fof-byobu.admin.settings.delete_on_last_recipient_left'),
+        help: app.translator.trans('fof-byobu.admin.settings.delete_on_last_recipient_left_help'),
+      })
+    );
+
+    items.add(
+      'hideAllDiscussions',
+      this.buildSettingComponent({
+        type: 'boolean',
+        setting: 'fof-byobu.hide_from_all_discussions_page',
+        label: app.translator.trans('fof-byobu.admin.settings.hide_from_all_discussions_page'),
+        help: app.translator.trans('fof-byobu.admin.settings.hide_from_all_discussions_page_help'),
+      })
+    );
+
+    return items;
+  }
+
+  iconItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'icon-badge',
+      this.buildSettingComponent({
+        type: 'string',
+        setting: 'fof-byobu.icon-badge',
+        label: app.translator.trans('fof-byobu.admin.settings.badge-icon'),
+        help: (
+          <div>
+            <Badge icon={this.setting('fof-byobu.icon-badge').toJSON() || this.badgeDefault}></Badge> {this.helpText()}
+          </div>
+        ),
+        placeholder: this.badgeDefault,
+      })
+    );
+
+    items.add(
+      'icon-postAction',
+      this.buildSettingComponent({
+        type: 'string',
+        setting: 'fof-byobu.icon-postAction',
+        label: app.translator.trans('fof-byobu.admin.settings.post-event-icon'),
+        help: (
+          <div>
+            {icon(this.setting('fof-byobu.icon-postAction').toJSON() || this.postActionDefault)} {this.helpText()}
+          </div>
+        ),
+        placeholder: this.postActionDefault,
+      })
+    );
+
+    return items;
+  }
+
+  helpText(): Mithril.Children | null {
+    return (
+      flarum.extensions['flarum-tags'] &&
+      app.translator.trans('flarum-tags.admin.edit_tag.icon_text', {
+        a: <a href={app.refs.fontawesome} tabindex="-1" />,
+      })
+    );
+  }
 }

js/src/admin/components/index.ts

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

js/src/admin/index.ts

@@ -2,14 +2,15 @@ import app from 'flarum/admin/app';
 import User from 'flarum/common/models/User';
 
 import addPrivateDiscussionPermission from './addPrivateDiscussionPermission';
-import ByobuSettings from './components/ByobuSettingsPage';
+import ByobuSettingsPage from './components/ByobuSettingsPage';
 
 export { default as extend } from './extend';
+export * from './components';
 
 app.initializers.add('fof-byobu', () => {
   app.store.models.recipients = User;
 
-  app.extensionData.for('fof-byobu').registerPage(ByobuSettings);
+  app.extensionData.for('fof-byobu').registerPage(ByobuSettingsPage);
 
   addPrivateDiscussionPermission();
 });

resources/less/admin.less

@@ -1,10 +1,49 @@
 .ByobuSettingsPage {
-    margin-top: 15px;
+  padding-top: 20px;
+
+  .Button {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+
+  .ByobuSettingsTabPage {
+    background: @control-bg;
+    padding: 20px;
+    border-radius: @border-radius;
+    box-shadow: 0 2px 4px @shadow-color;
+
+    h3 {
+      color: @primary-color;
+      margin-bottom: 10px;
+    }
+
+    .Section {
+      background: @body-bg;
+      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;
+        color: @text-color;
+        padding: 6px 12px;
+        border-radius: @border-radius;
+      }
+      input {
+          max-width: 300px;
+      }
+    }
+  }
+
+  &--settings {
+    margin: 0 auto;
 
     @media @desktop-up {
-        .container {
-          max-width: 600px;
-          margin: 0;
-        }
+      margin: 0;
     }
+  }
 }

resources/locale/en.yml

@@ -85,6 +85,12 @@ fof-byobu:
             view_private_discussions-when-flagged: View private discussions of other users if flagged
 
         settings:
+            general:
+                heading: General Settings
+                help: "These settings control the basic features of the byobu."
+            icon:
+                heading: Icon Settings
+                help: "These settings control the icons used byobu on the forum."
             badge-icon: Byobu Discussion Badge
             enable-make-public-option: Enable the "make public" ability
             enable-make-public-option-help: Adds the ability for those with permission to remove all recipients, assign a new tag and make the discussion publically visible (accoring to the visibility settings of the chosen tag).