Rough implementation of appearance settings

js/admin/src/components/AppearancePage.js

@@ -1,9 +1,81 @@
 import Component from 'flarum/Component';
+import Button from 'flarum/components/Button';
+import Switch from 'flarum/components/Switch';
+import EditCustomCssModal from 'flarum/components/EditCustomCssModal';
+import saveConfig from 'flarum/utils/saveConfig';
 
 export default class AppearancePage extends Component {
+  constructor(...args) {
+    super(...args);
+
+    this.primaryColor = m.prop(app.config.theme_primary_color);
+    this.secondaryColor = m.prop(app.config.theme_secondary_color);
+    this.darkMode = m.prop(app.config.theme_dark_mode === '1');
+    this.coloredHeader = m.prop(app.config.theme_colored_header === '1');
+  }
+
   view() {
     return (
-      <div className="AppearancePage"/>
+      <div className="AppearancePage">
+        <div className="container">
+          <form onsubmit={this.onsubmit.bind(this)}>
+            <fieldset className="AppearancePage-colors">
+              <legend>Colors</legend>
+              <div className="helpText">
+                Choose two colors to theme your forum with. The first will be used as a highlight color, while the second will be used to style background elements.
+              </div>
+
+              <div className="AppearancePage-colors-input">
+                <input className="FormControl" placeholder="#aaaaaa" value={this.primaryColor()} onchange={m.withAttr('value', this.primaryColor)}/>
+                <input className="FormControl" placeholder="#aaaaaa" value={this.secondaryColor()} onchange={m.withAttr('value', this.secondaryColor)}/>
+              </div>
+
+              {Switch.component({
+                state: this.darkMode(),
+                children: 'Dark Mode',
+                onchange: this.darkMode
+              })}
+
+              {Switch.component({
+                state: this.coloredHeader(),
+                children: 'Colored Header',
+                onchange: this.coloredHeader
+              })}
+
+              {Button.component({
+                className: 'Button Button--primary',
+                children: 'Save Changes',
+                loading: this.loading
+              })}
+            </fieldset>
+          </form>
+
+          <fieldset>
+            <legend>Custom Styles</legend>
+            <div className="helpText">
+              Customize your forum's appearance by adding your own LESS/CSS code to be applied on top of Flarum's default styles.
+            </div>
+            {Button.component({
+              className: 'Button',
+              children: 'Edit Custom CSS',
+              onclick: () => app.modal.show(new EditCustomCssModal())
+            })}
+          </fieldset>
+        </div>
+      </div>
     );
   }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    this.loading = true;
+
+    saveConfig({
+      theme_primary_color: this.primaryColor(),
+      theme_secondary_color: this.secondaryColor(),
+      theme_dark_mode: this.darkMode(),
+      theme_colored_header: this.coloredHeader()
+    }).then(() => window.location.reload());
+  }
 }

js/admin/src/components/EditCustomCssModal.js

@@ -0,0 +1,51 @@
+import Modal from 'flarum/components/Modal';
+import Button from 'flarum/components/Button';
+import saveConfig from 'flarum/utils/saveConfig';
+
+export default class EditCustomCssModal extends Modal {
+  constructor(...args) {
+    super(...args);
+
+    this.customLess = m.prop(app.config.custom_less || '');
+  }
+
+  className() {
+    return 'EditCustomCssModal Modal--large';
+  }
+
+  title() {
+    return 'Edit Custom CSS';
+  }
+
+  content() {
+    return (
+      <div className="Modal-body">
+        <p>Customize your forum's appearance by adding your own LESS/CSS code to be applied on top of Flarum's default styles. <a href="">Read the documentation</a> for more information.</p>
+
+        <div className="Form">
+          <div className="Form-group">
+            <textarea className="FormControl" rows="30" value={this.customLess()} onchange={m.withAttr('value', this.customLess)}/>
+          </div>
+
+          <div className="Form-group">
+            {Button.component({
+              className: 'Button Button--primary',
+              children: 'Save Changes',
+              loading: this.loading
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  onsubmit(e) {
+    e.preventDefault();
+
+    this.loading = true;
+
+    saveConfig({
+      custom_less: this.customLess()
+    }).then(() => window.location.reload());
+  }
+}