Changed "Advanced" to "Mail"

+ Added labels above inputs
-  Removed Placeholders

js/admin/dist/app.js

@@ -17293,11 +17293,11 @@ System.register('flarum/components/AdminNav', ['flarum/Component', 'flarum/compo
               description: app.translator.trans('core.admin.nav.extensions_text')
             }));
 
-            items.add('advanced', AdminLinkButton.component({
-              href: app.route('advanced'),
-              icon: 'cog',
-              children: app.translator.trans('core.admin.nav.advanced_button'),
-              description: app.translator.trans('core.admin.nav.advanced_text')
+            items.add('mail', AdminLinkButton.component({
+              href: app.route('mail'),
+              icon: 'envelope',
+              children: app.translator.trans('core.admin.nav.mail_button'),
+              description: app.translator.trans('core.admin.nav.mail_text')
             }));
 
             return items;
@@ -17312,140 +17312,6 @@ System.register('flarum/components/AdminNav', ['flarum/Component', 'flarum/compo
 });;
 'use strict';
 
-System.register('flarum/components/AdvancedPage', ['flarum/components/Page', 'flarum/components/FieldSet', 'flarum/components/Button', 'flarum/components/Alert', 'flarum/utils/saveSettings', 'flarum/utils/ItemList'], function (_export, _context) {
-  var Page, FieldSet, Button, Alert, saveSettings, ItemList, AdvancedPage;
-  return {
-    setters: [function (_flarumComponentsPage) {
-      Page = _flarumComponentsPage.default;
-    }, function (_flarumComponentsFieldSet) {
-      FieldSet = _flarumComponentsFieldSet.default;
-    }, function (_flarumComponentsButton) {
-      Button = _flarumComponentsButton.default;
-    }, function (_flarumComponentsAlert) {
-      Alert = _flarumComponentsAlert.default;
-    }, function (_flarumUtilsSaveSettings) {
-      saveSettings = _flarumUtilsSaveSettings.default;
-    }, function (_flarumUtilsItemList) {
-      ItemList = _flarumUtilsItemList.default;
-    }],
-    execute: function () {
-      AdvancedPage = function (_Page) {
-        babelHelpers.inherits(AdvancedPage, _Page);
-
-        function AdvancedPage() {
-          babelHelpers.classCallCheck(this, AdvancedPage);
-          return babelHelpers.possibleConstructorReturn(this, Object.getPrototypeOf(AdvancedPage).apply(this, arguments));
-        }
-
-        babelHelpers.createClass(AdvancedPage, [{
-          key: 'init',
-          value: function init() {
-            var _this2 = this;
-
-            babelHelpers.get(Object.getPrototypeOf(AdvancedPage.prototype), 'init', this).call(this);
-
-            this.loading = false;
-
-            this.fields = ['mail_driver', 'mail_host', 'mail_from', 'mail_port', 'mail_username', 'mail_password', 'mail_encryption'];
-            this.values = {};
-
-            var settings = app.settings;
-            this.fields.forEach(function (key) {
-              return _this2.values[key] = m.prop(settings[key]);
-            });
-
-            this.localeOptions = {};
-            var locales = app.locales;
-            for (var i in locales) {
-              this.localeOptions[i] = locales[i] + ' (' + i + ')';
-            }
-          }
-        }, {
-          key: 'view',
-          value: function view() {
-            return m(
-              'div',
-              { className: 'AdvancedPage' },
-              m(
-                'div',
-                { className: 'container' },
-                m(
-                  'form',
-                  { onsubmit: this.onsubmit.bind(this) },
-                  FieldSet.component({
-                    label: app.translator.trans('core.admin.advanced.mail_heading'),
-                    className: 'AdvancedPage-MailSettings',
-                    children: [m(
-                      'div',
-                      { className: 'helpText' },
-                      app.translator.trans('core.admin.advanced.mail_text')
-                    ), m(
-                      'div',
-                      { className: 'AdvancedPage-mailSettings-input' },
-                      m('input', { className: 'FormControl', value: this.values.mail_driver() || '', oninput: m.withAttr('value', this.values.mail_driver), placeholder: app.translator.trans('core.admin.advanced.mail_driver') }),
-                      m('input', { className: 'FormControl', value: this.values.mail_host() || '', oninput: m.withAttr('value', this.values.mail_host), placeholder: app.translator.trans('core.admin.advanced.mail_host') }),
-                      m('input', { className: 'FormControl', value: this.values.mail_from() || '', oninput: m.withAttr('value', this.values.mail_from), placeholder: app.translator.trans('core.admin.advanced.mail_from') }),
-                      m('input', { className: 'FormControl', value: this.values.mail_port() || '', oninput: m.withAttr('value', this.values.mail_port), placeholder: app.translator.trans('core.admin.advanced.mail_port') }),
-                      m('input', { className: 'FormControl', value: this.values.mail_username() || '', oninput: m.withAttr('value', this.values.mail_username), placeholder: app.translator.trans('core.admin.advanced.mail_username') }),
-                      m('input', { className: 'FormControl', value: this.values.mail_password() || '', oninput: m.withAttr('value', this.values.mail_password), placeholder: app.translator.trans('core.admin.advanced.mail_password') }),
-                      m('input', { className: 'FormControl', value: this.values.mail_encryption() || '', oninput: m.withAttr('value', this.values.mail_encryption), placeholder: app.translator.trans('core.admin.advanced.mail_encryption') })
-                    )]
-                  }),
-                  Button.component({
-                    type: 'submit',
-                    className: 'Button Button--primary',
-                    children: app.translator.trans('core.admin.advanced.submit_button'),
-                    loading: this.loading,
-                    disabled: !this.changed()
-                  })
-                )
-              )
-            );
-          }
-        }, {
-          key: 'changed',
-          value: function changed() {
-            var _this3 = this;
-
-            return this.fields.some(function (key) {
-              return _this3.values[key]() !== app.settings[key];
-            });
-          }
-        }, {
-          key: 'onsubmit',
-          value: function onsubmit(e) {
-            var _this4 = this;
-
-            e.preventDefault();
-
-            if (this.loading) return;
-
-            this.loading = true;
-            app.alerts.dismiss(this.successAlert);
-
-            var settings = {};
-
-            this.fields.forEach(function (key) {
-              return settings[key] = _this4.values[key]();
-            });
-
-            saveSettings(settings).then(function () {
-              app.alerts.show(_this4.successAlert = new Alert({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') }));
-            }).catch(function () {}).then(function () {
-              _this4.loading = false;
-              m.redraw();
-            });
-          }
-        }]);
-        return AdvancedPage;
-      }(Page);
-
-      _export('default', AdvancedPage);
-    }
-  };
-});;
-'use strict';
-
 System.register('flarum/components/Alert', ['flarum/Component', 'flarum/components/Button', 'flarum/helpers/listItems', 'flarum/utils/extract'], function (_export, _context) {
   var Component, Button, listItems, extract, Alert;
   return {
@@ -19069,6 +18935,175 @@ System.register('flarum/components/LoadingModal', ['flarum/components/Modal'], f
 });;
 'use strict';
 
+System.register('flarum/components/MailPage', ['flarum/components/Page', 'flarum/components/FieldSet', 'flarum/components/Button', 'flarum/components/Alert', 'flarum/utils/saveSettings', 'flarum/utils/ItemList'], function (_export, _context) {
+  var Page, FieldSet, Button, Alert, saveSettings, ItemList, MailPage;
+  return {
+    setters: [function (_flarumComponentsPage) {
+      Page = _flarumComponentsPage.default;
+    }, function (_flarumComponentsFieldSet) {
+      FieldSet = _flarumComponentsFieldSet.default;
+    }, function (_flarumComponentsButton) {
+      Button = _flarumComponentsButton.default;
+    }, function (_flarumComponentsAlert) {
+      Alert = _flarumComponentsAlert.default;
+    }, function (_flarumUtilsSaveSettings) {
+      saveSettings = _flarumUtilsSaveSettings.default;
+    }, function (_flarumUtilsItemList) {
+      ItemList = _flarumUtilsItemList.default;
+    }],
+    execute: function () {
+      MailPage = function (_Page) {
+        babelHelpers.inherits(MailPage, _Page);
+
+        function MailPage() {
+          babelHelpers.classCallCheck(this, MailPage);
+          return babelHelpers.possibleConstructorReturn(this, Object.getPrototypeOf(MailPage).apply(this, arguments));
+        }
+
+        babelHelpers.createClass(MailPage, [{
+          key: 'init',
+          value: function init() {
+            var _this2 = this;
+
+            babelHelpers.get(Object.getPrototypeOf(MailPage.prototype), 'init', this).call(this);
+
+            this.loading = false;
+
+            this.fields = ['mail_driver', 'mail_host', 'mail_from', 'mail_port', 'mail_username', 'mail_password', 'mail_encryption'];
+            this.values = {};
+
+            var settings = app.settings;
+            this.fields.forEach(function (key) {
+              return _this2.values[key] = m.prop(settings[key]);
+            });
+
+            this.localeOptions = {};
+            var locales = app.locales;
+            for (var i in locales) {
+              this.localeOptions[i] = locales[i] + ' (' + i + ')';
+            }
+          }
+        }, {
+          key: 'view',
+          value: function view() {
+            return m(
+              'div',
+              { className: 'MailPage' },
+              m(
+                'div',
+                { className: 'container' },
+                m(
+                  'form',
+                  { onsubmit: this.onsubmit.bind(this) },
+                  FieldSet.component({
+                    label: app.translator.trans('core.admin.mail.heading'),
+                    className: 'MailPage-MailSettings',
+                    children: [m(
+                      'div',
+                      { className: 'helpText' },
+                      app.translator.trans('core.admin.mail.text')
+                    ), m(
+                      'div',
+                      { className: 'MailPage-MailSettings-input' },
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.driver')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_driver() || '', oninput: m.withAttr('value', this.values.mail_driver) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.host')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_host() || '', oninput: m.withAttr('value', this.values.mail_host) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.from')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_from() || '', oninput: m.withAttr('value', this.values.mail_from) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.port')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_port() || '', oninput: m.withAttr('value', this.values.mail_port) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.username')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_username() || '', oninput: m.withAttr('value', this.values.mail_username) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.password')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_password() || '', oninput: m.withAttr('value', this.values.mail_password) }),
+                      m(
+                        'label',
+                        null,
+                        app.translator.trans('core.admin.mail.encryption')
+                      ),
+                      m('input', { className: 'FormControl', value: this.values.mail_encryption() || '', oninput: m.withAttr('value', this.values.mail_encryption) })
+                    )]
+                  }),
+                  Button.component({
+                    type: 'submit',
+                    className: 'Button Button--primary',
+                    children: app.translator.trans('core.admin.mail.submit_button'),
+                    loading: this.loading,
+                    disabled: !this.changed()
+                  })
+                )
+              )
+            );
+          }
+        }, {
+          key: 'changed',
+          value: function changed() {
+            var _this3 = this;
+
+            return this.fields.some(function (key) {
+              return _this3.values[key]() !== app.settings[key];
+            });
+          }
+        }, {
+          key: 'onsubmit',
+          value: function onsubmit(e) {
+            var _this4 = this;
+
+            e.preventDefault();
+
+            if (this.loading) return;
+
+            this.loading = true;
+            app.alerts.dismiss(this.successAlert);
+
+            var settings = {};
+
+            this.fields.forEach(function (key) {
+              return settings[key] = _this4.values[key]();
+            });
+
+            saveSettings(settings).then(function () {
+              app.alerts.show(_this4.successAlert = new Alert({ type: 'success', children: app.translator.trans('core.admin.basics.saved_message') }));
+            }).catch(function () {}).then(function () {
+              _this4.loading = false;
+              m.redraw();
+            });
+          }
+        }]);
+        return MailPage;
+      }(Page);
+
+      _export('default', MailPage);
+    }
+  };
+});;
+'use strict';
+
 System.register('flarum/components/Modal', ['flarum/Component', 'flarum/components/Alert', 'flarum/components/Button'], function (_export, _context) {
   var Component, Alert, Button, Modal;
   return {
@@ -21087,8 +21122,8 @@ System.register('flarum/initializers/preload', ['flarum/Session'], function (_ex
 });;
 'use strict';
 
-System.register('flarum/initializers/routes', ['flarum/components/DashboardPage', 'flarum/components/BasicsPage', 'flarum/components/PermissionsPage', 'flarum/components/AppearancePage', 'flarum/components/ExtensionsPage', 'flarum/components/AdvancedPage'], function (_export, _context) {
-  var DashboardPage, BasicsPage, PermissionsPage, AppearancePage, ExtensionsPage, AdvancedPage;
+System.register('flarum/initializers/routes', ['flarum/components/DashboardPage', 'flarum/components/BasicsPage', 'flarum/components/PermissionsPage', 'flarum/components/AppearancePage', 'flarum/components/ExtensionsPage', 'flarum/components/MailPage'], function (_export, _context) {
+  var DashboardPage, BasicsPage, PermissionsPage, AppearancePage, ExtensionsPage, MailPage;
 
   _export('default', function (app) {
     app.routes = {
@@ -21097,7 +21132,7 @@ System.register('flarum/initializers/routes', ['flarum/components/DashboardPage'
       'permissions': { path: '/permissions', component: PermissionsPage.component() },
       'appearance': { path: '/appearance', component: AppearancePage.component() },
       'extensions': { path: '/extensions', component: ExtensionsPage.component() },
-      'advanced': { path: '/advanced', component: AdvancedPage.component() }
+      'mail': { path: '/mail', component: MailPage.component() }
     };
   });
 
@@ -21112,8 +21147,8 @@ System.register('flarum/initializers/routes', ['flarum/components/DashboardPage'
       AppearancePage = _flarumComponentsAppearancePage.default;
     }, function (_flarumComponentsExtensionsPage) {
       ExtensionsPage = _flarumComponentsExtensionsPage.default;
-    }, function (_flarumComponentsAdvancedPage) {
-      AdvancedPage = _flarumComponentsAdvancedPage.default;
+    }, function (_flarumComponentsMailPage) {
+      MailPage = _flarumComponentsMailPage.default;
     }],
     execute: function () {}
   };

js/admin/src/components/AdminNav.js

@@ -67,11 +67,11 @@ export default class AdminNav extends Component {
       description: app.translator.trans('core.admin.nav.extensions_text')
     }));
 
-    items.add('advanced', AdminLinkButton.component({
-      href: app.route('advanced'),
-      icon: 'cog',
-      children: app.translator.trans('core.admin.nav.advanced_button'),
-      description: app.translator.trans('core.admin.nav.advanced_text')
+    items.add('mail', AdminLinkButton.component({
+      href: app.route('mail'),
+      icon: 'envelope',
+      children: app.translator.trans('core.admin.nav.mail_button'),
+      description: app.translator.trans('core.admin.nav.mail_text')
     }))
 
     return items;

js/admin/src/components/MailPage.js

@@ -5,7 +5,7 @@ import Alert from 'flarum/components/Alert';
 import saveSettings from 'flarum/utils/saveSettings';
 import ItemList from 'flarum/utils/ItemList';
 
-export default class AdvancedPage extends Page {
+export default class MailPage extends Page {
   init() {
     super.init();
 
@@ -34,24 +34,31 @@ export default class AdvancedPage extends Page {
 
   view() {
     return (
-      <div className="AdvancedPage">
+      <div className="MailPage">
         <div className="container">
           <form onsubmit={this.onsubmit.bind(this)}>
             {FieldSet.component({
-              label: app.translator.trans('core.admin.advanced.mail_heading'),
-              className: 'AdvancedPage-MailSettings',
+              label: app.translator.trans('core.admin.mail.heading'),
+              className: 'MailPage-MailSettings',
               children: [
                 <div className="helpText">
-                  {app.translator.trans('core.admin.advanced.mail_text')}
+                  {app.translator.trans('core.admin.mail.text')}
                 </div>,
-                <div className="AdvancedPage-mailSettings-input">
-                  <input className="FormControl" value={this.values.mail_driver() || ''} oninput={m.withAttr('value', this.values.mail_driver)} placeholder={app.translator.trans('core.admin.advanced.mail_driver')}/>
-                  <input className="FormControl" value={this.values.mail_host() || ''} oninput={m.withAttr('value', this.values.mail_host)} placeholder={app.translator.trans('core.admin.advanced.mail_host')}/>
-                  <input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} placeholder={app.translator.trans('core.admin.advanced.mail_from')}/>
-                  <input className="FormControl" value={this.values.mail_port() || ''} oninput={m.withAttr('value', this.values.mail_port)} placeholder={app.translator.trans('core.admin.advanced.mail_port')}/>
-                  <input className="FormControl" value={this.values.mail_username() || ''} oninput={m.withAttr('value', this.values.mail_username)} placeholder={app.translator.trans('core.admin.advanced.mail_username')}/>
-                  <input className="FormControl" value={this.values.mail_password() || ''} oninput={m.withAttr('value', this.values.mail_password)} placeholder={app.translator.trans('core.admin.advanced.mail_password')}/>
-                  <input className="FormControl" value={this.values.mail_encryption() || ''} oninput={m.withAttr('value', this.values.mail_encryption)} placeholder={app.translator.trans('core.admin.advanced.mail_encryption')}/>
+                <div className="MailPage-MailSettings-input">
+                  <label>{app.translator.trans('core.admin.mail.driver')}</label>
+                  <input className="FormControl" value={this.values.mail_driver() || ''} oninput={m.withAttr('value', this.values.mail_driver)} />
+                  <label>{app.translator.trans('core.admin.mail.host')}</label>
+                  <input className="FormControl" value={this.values.mail_host() || ''} oninput={m.withAttr('value', this.values.mail_host)} />
+                  <label>{app.translator.trans('core.admin.mail.from')}</label>
+                  <input className="FormControl" value={this.values.mail_from() || ''} oninput={m.withAttr('value', this.values.mail_from)} />
+                  <label>{app.translator.trans('core.admin.mail.port')}</label>
+                  <input className="FormControl" value={this.values.mail_port() || ''} oninput={m.withAttr('value', this.values.mail_port)} />
+                  <label>{app.translator.trans('core.admin.mail.username')}</label>
+                  <input className="FormControl" value={this.values.mail_username() || ''} oninput={m.withAttr('value', this.values.mail_username)} />
+                  <label>{app.translator.trans('core.admin.mail.password')}</label>
+                  <input className="FormControl" value={this.values.mail_password() || ''} oninput={m.withAttr('value', this.values.mail_password)} />
+                  <label>{app.translator.trans('core.admin.mail.encryption')}</label>
+                  <input className="FormControl" value={this.values.mail_encryption() || ''} oninput={m.withAttr('value', this.values.mail_encryption)} />
                 </div>
               ]
             })}
@@ -59,7 +66,7 @@ export default class AdvancedPage extends Page {
             {Button.component({
               type: 'submit',
               className: 'Button Button--primary',
-              children: app.translator.trans('core.admin.advanced.submit_button'),
+              children: app.translator.trans('core.admin.mail.submit_button'),
               loading: this.loading,
               disabled: !this.changed()
             })}

js/admin/src/initializers/routes.js

@@ -3,7 +3,7 @@ import BasicsPage from 'flarum/components/BasicsPage';
 import PermissionsPage from 'flarum/components/PermissionsPage';
 import AppearancePage from 'flarum/components/AppearancePage';
 import ExtensionsPage from 'flarum/components/ExtensionsPage';
-import AdvancedPage from 'flarum/components/AdvancedPage';
+import MailPage from 'flarum/components/MailPage';
 
 /**
  * The `routes` initializer defines the admin app's routes.
@@ -17,6 +17,6 @@ export default function(app) {
     'permissions': {path: '/permissions', component: PermissionsPage.component()},
     'appearance': {path: '/appearance', component: AppearancePage.component()},
     'extensions': {path: '/extensions', component: ExtensionsPage.component()},
-    'advanced': {path: '/advanced', component: AdvancedPage.component()}
+    'mail': {path: '/mail', component: MailPage.component()}
   };
 }

less/admin/MailPage.less

@@ -1,4 +1,4 @@
-.AdvancedPage {
+.MailPage {
   padding: 20px 0;
 
   @media @desktop-up {
@@ -19,10 +19,14 @@
   }
 }
 
-.AdvancedPage-mailSettings-input {
+.MailPage-MailSettings-input {
+
+  label {
+    margin-bottom: 5px;
+  }
 
   .FormControl {
-    margin-bottom: 1px;
+    margin-bottom: 7px;
   }
 
   :last-child {

less/admin/app.less

@@ -7,4 +7,4 @@
 @import "EditGroupModal.less";
 @import "ExtensionsPage.less";
 @import "AppearancePage.less";
-@import "AdvancedPage.less";
+@import "MailPage.less";