Get admin area working again

js/admin/Gulpfile.js

@@ -1,22 +1,33 @@
 var gulp = require('flarum-gulp');
 
+var nodeDir = 'node_modules';
+var bowerDir = '../bower_components';
+
 gulp({
   files: [
-    'node_modules/babel-core/external-helpers.js',
-    '../bower_components/loader.js/loader.js',
-    '../bower_components/mithril/mithril.js',
-    '../bower_components/jquery/dist/jquery.js',
-    '../bower_components/moment/moment.js',
-    '../bower_components/bootstrap/dist/js/bootstrap.js',
-    '../bower_components/spin.js/spin.js',
-    '../bower_components/spin.js/jquery.spin.js'
+    nodeDir + '/babel-core/external-helpers.js',
+
+    bowerDir + '/es6-micro-loader/dist/system-polyfill.js',
+
+    bowerDir + '/mithril/mithril.js',
+    bowerDir + '/jquery/dist/jquery.js',
+    bowerDir + '/moment/moment.js',
+
+    bowerDir + '/bootstrap/js/affix.js',
+    bowerDir + '/bootstrap/js/dropdown.js',
+    bowerDir + '/bootstrap/js/modal.js',
+    bowerDir + '/bootstrap/js/tooltip.js',
+    bowerDir + '/bootstrap/js/transition.js',
+
+    bowerDir + '/spin.js/spin.js',
+    bowerDir + '/spin.js/jquery.spin.js'
   ],
-  moduleFiles: [
-    'src/**/*.js',
-    '../lib/**/*.js'
-  ],
-  bootstrapFiles: [],
-  modulePrefix: 'flarum',
+  modules: {
+    'flarum': [
+      'src/**/*.js',
+      '../lib/**/*.js'
+    ]
+  },
   externalHelpers: true,
   outputFile: 'dist/app.js'
 });

js/admin/src/app.js

@@ -1,18 +1,15 @@
-import App from 'flarum/utils/app';
+import App from 'flarum/App';
 import store from 'flarum/initializers/store';
 import preload from 'flarum/initializers/preload';
-import session from 'flarum/initializers/session';
 import routes from 'flarum/initializers/routes';
-import timestamps from 'flarum/initializers/timestamps';
 import boot from 'flarum/initializers/boot';
 
-var app = new App();
+const app = new App();
 
 app.initializers.add('store', store);
-app.initializers.add('session', session);
 app.initializers.add('routes', routes);
-app.initializers.add('timestamps', timestamps);
-app.initializers.add('preload', preload, {last: true});
-app.initializers.add('boot', boot, {last: true});
+app.initializers.add('preload', preload, -100);
+
+app.initializers.add('boot', boot, -100);
 
 export default app;

js/admin/src/components/AdminLinkButton.js

@@ -0,0 +1,15 @@
+import LinkButton from 'flarum/components/LinkButton';
+
+export default class AdminLinkButton extends LinkButton {
+  getButtonContent() {
+    const content = super.getButtonContent();
+
+    content.push(
+      <div className="AdminLinkButton-description">
+        {this.props.description}
+      </div>
+    );
+
+    return content;
+  }
+}

js/admin/src/components/AdminNav.js

@@ -0,0 +1,56 @@
+import Component from 'flarum/Component';
+import AdminLinkButton from 'flarum/components/AdminLinkButton';
+import SelectDropdown from 'flarum/components/SelectDropdown';
+
+import ItemList from 'flarum/utils/ItemList';
+
+export default class AdminNav extends Component {
+  view() {
+    return SelectDropdown.component({
+      className: 'AdminNav App-titleControl',
+      buttonClassName: 'Button',
+      children: this.items().toArray()
+    });
+  }
+
+  items() {
+    const items = new ItemList();
+
+    items.add('dashboard', AdminLinkButton.component({
+      href: app.route('dashboard'),
+      icon: 'bar-chart',
+      children: 'Dashboard',
+      description: 'Your forum at a glance.'
+    }));
+
+    items.add('basics', AdminLinkButton.component({
+      href: app.route('basics'),
+      icon: 'pencil',
+      children: 'Basics',
+      description: 'Set your forum title, language, and other basic settings.'
+    }));
+
+    items.add('permissions', AdminLinkButton.component({
+      href: app.route('permissions'),
+      icon: 'key',
+      children: 'Permissions',
+      description: 'Configure who can see and do what.'
+    }));
+
+    items.add('appearance', AdminLinkButton.component({
+      href: app.route('appearance'),
+      icon: 'paint-brush',
+      children: 'Appearance',
+      description: 'Customize your forum\'s colors, logos, and other variables.'
+    }));
+
+    items.add('extensions', AdminLinkButton.component({
+      href: app.route('extensions'),
+      icon: 'puzzle-piece',
+      children: 'Extensions',
+      description: 'Add extra functionality to your forum and make it your own.'
+    }));
+
+    return items;
+  }
+}

js/admin/src/components/AppearancePage.js

@@ -0,0 +1,9 @@
+import Component from 'flarum/Component';
+
+export default class AppearancePage extends Component {
+  view() {
+    return (
+      <div className="AppearancePage"/>
+    );
+  }
+}

js/admin/src/components/DashboardPage.js

@@ -0,0 +1,16 @@
+import Component from 'flarum/Component';
+
+export default class DashboardPage extends Component {
+  view() {
+    return (
+      <div className="DashboardPage">
+        <div className="container">
+          <h2>Welcome to Flarum Beta</h2>
+          <p>This is beta software; you shouldn't use it in production.</p>
+          <p>You're running version X</p>
+          <p>Get help on X. Report bugs here. Feedback here. Contribute here.</p>
+        </div>
+      </div>
+    );
+  }
+}

js/admin/src/components/ExtensionsPage.js

@@ -0,0 +1,9 @@
+import Component from 'flarum/Component';
+
+export default class ExtensionsPage extends Component {
+  view() {
+    return (
+      <div className="ExtensionsPage"/>
+    );
+  }
+}

js/admin/src/components/HeaderPrimary.js

@@ -0,0 +1,26 @@
+import Component from 'flarum/Component';
+import ItemList from 'flarum/utils/ItemList';
+import listItems from 'flarum/helpers/listItems';
+
+/**
+ * The `HeaderPrimary` component displays primary header controls. On the
+ * default skin, these are shown just to the right of the forum title.
+ */
+export default class HeaderPrimary extends Component {
+  view() {
+    return (
+      <ul className="Header-controls">
+        {listItems(this.items().toArray())}
+      </ul>
+    );
+  }
+
+  /**
+   * Build an item list for the controls.
+   *
+   * @return {ItemList}
+   */
+  items() {
+    return new ItemList();
+  }
+}

js/admin/src/components/HeaderSecondary.js

@@ -0,0 +1,30 @@
+import Component from 'flarum/Component';
+import SessionDropdown from 'flarum/components/SessionDropdown';
+import ItemList from 'flarum/utils/ItemList';
+import listItems from 'flarum/helpers/listItems';
+
+/**
+ * The `HeaderSecondary` component displays secondary header controls.
+ */
+export default class HeaderSecondary extends Component {
+  view() {
+    return (
+      <ul className="Header-controls">
+        {listItems(this.items().toArray())}
+      </ul>
+    );
+  }
+
+  /**
+   * Build an item list for the controls.
+   *
+   * @return {ItemList}
+   */
+  items() {
+    const items = new ItemList();
+
+    items.add('session', SessionDropdown.component());
+
+    return items;
+  }
+}

js/admin/src/components/SessionDropdown.js

@@ -0,0 +1,54 @@
+import avatar from 'flarum/helpers/avatar';
+import username from 'flarum/helpers/username';
+import Dropdown from 'flarum/components/Dropdown';
+import Button from 'flarum/components/Button';
+import ItemList from 'flarum/utils/ItemList';
+
+/**
+ * The `SessionDropdown` component shows a button with the current user's
+ * avatar/name, with a dropdown of session controls.
+ */
+export default class SessionDropdown extends Dropdown {
+  static initProps(props) {
+    super.initProps(props);
+
+    props.className = 'SessionDropdown';
+    props.buttonClassName = 'Button Button--user Button--flat';
+    props.menuClassName = 'Dropdown-menu--right';
+  }
+
+  view() {
+    this.props.children = this.items().toArray();
+
+    return super.view();
+  }
+
+  getButtonContent() {
+    const user = app.session.user;
+
+    return [
+      avatar(user), ' ',
+      <span className="Button-label">{username(user)}</span>
+    ];
+  }
+
+  /**
+   * Build an item list for the contents of the dropdown menu.
+   *
+   * @return {ItemList}
+   */
+  items() {
+    const items = new ItemList();
+
+    items.add('logOut',
+      Button.component({
+        icon: 'sign-out',
+        children: app.trans('core.log_out'),
+        onclick: app.session.logout.bind(app.session)
+      }),
+      -100
+    );
+
+    return items;
+  }
+}

js/admin/src/components/admin-nav-item.js

@@ -1,14 +0,0 @@
-import Component from 'flarum/component';
-import icon from 'flarum/helpers/icon';
-import NavItem from 'flarum/components/nav-item';
-
-export default class AdminNavItem extends NavItem {
-  view() {
-    var active = this.constructor.active(this.props);
-    return m('li'+(active ? '.active' : ''), m('a', {href: this.props.href, config: m.route}, [
-      icon(this.props.icon+' icon'),
-      m('span.label', this.props.label),
-      m('div.description', this.props.description)
-    ]))
-  }
-}

js/admin/src/components/admin-nav.js

@@ -1,54 +0,0 @@
-import Component from 'flarum/component';
-import UserDropdown from 'flarum/components/user-dropdown';
-import AdminNavItem from 'flarum/components/admin-nav-item';
-import DropdownSelect from 'flarum/components/dropdown-select';
-
-import ItemList from 'flarum/utils/item-list';
-import listItems from 'flarum/helpers/list-items';
-
-export default class AdminNav extends Component {
-  view() {
-    return DropdownSelect.component({ items: this.items().toArray() });
-  }
-
-  items() {
-    var items = new ItemList();
-
-    items.add('dashboard', AdminNavItem.component({
-      href: app.route('dashboard'),
-      icon: 'bar-chart',
-      label: 'Dashboard',
-      description: 'Your forum at a glance.'
-    }));
-
-    items.add('basics', AdminNavItem.component({
-      href: app.route('basics'),
-      icon: 'pencil',
-      label: 'Basics',
-      description: 'Set your forum title, language, and other basic settings.'
-    }));
-
-    items.add('permissions', AdminNavItem.component({
-      href: app.route('permissions'),
-      icon: 'key',
-      label: 'Permissions',
-      description: 'Configure who can see and do what.'
-    }));
-
-    items.add('appearance', AdminNavItem.component({
-      href: app.route('appearance'),
-      icon: 'paint-brush',
-      label: 'Appearance',
-      description: 'Customize your forum\'s colors, logos, and other variables.'
-    }));
-
-    items.add('extensions', AdminNavItem.component({
-      href: app.route('extensions'),
-      icon: 'puzzle-piece',
-      label: 'Extensions',
-      description: 'Add extra functionality to your forum and make it your own.'
-    }));
-
-    return items;
-  }
-}

js/admin/src/components/appearance-page.js

@@ -1,7 +0,0 @@
-import Component from 'flarum/component';
-
-export default class AppearancePage extends Component {
-  view() {
-    return m('div', 'appearance');
-  }
-};

js/admin/src/components/basics-page.js

@@ -1,7 +0,0 @@
-import Component from 'flarum/component';
-
-export default class BasicsPage extends Component {
-  view() {
-    return m('div', 'basics');
-  }
-};

js/admin/src/components/dashboard-page.js

@@ -1,7 +0,0 @@
-import Component from 'flarum/component';
-
-export default class DashboardPage extends Component {
-  view() {
-    return m('div', 'dashboard');
-  }
-};

js/admin/src/components/extensions-page.js

@@ -1,7 +0,0 @@
-import Component from 'flarum/component';
-
-export default class ExtensionsPage extends Component {
-  view() {
-    return m('div', 'extensions');
-  }
-};

js/admin/src/components/header-primary.js

@@ -1,15 +0,0 @@
-import Component from 'flarum/component';
-import ItemList from 'flarum/utils/item-list';
-import listItems from 'flarum/helpers/list-items';
-
-export default class HeaderPrimary extends Component {
-  view() {
-    return m('ul.header-controls', listItems(this.items().toArray()));
-  }
-
-  items() {
-    var items = new ItemList();
-
-    return items;
-  }
-}

js/admin/src/components/header-secondary.js

@@ -1,19 +0,0 @@
-import Component from 'flarum/component';
-import UserDropdown from 'flarum/components/user-dropdown';
-
-import ItemList from 'flarum/utils/item-list';
-import listItems from 'flarum/helpers/list-items';
-
-export default class HeaderSecondary extends Component {
-  view() {
-    return m('ul.header-controls', listItems(this.items().toArray()));
-  }
-
-  items() {
-    var items = new ItemList();
-
-    items.add('user', UserDropdown.component({ user: app.session.user }));
-
-    return items;
-  }
-}

js/admin/src/components/permissions-page.js

@@ -1,7 +0,0 @@
-import Component from 'flarum/component';
-
-export default class PermissionsPage extends Component {
-  view() {
-    return m('div', 'permissions');
-  }
-};

js/admin/src/components/user-dropdown.js

@@ -1,35 +0,0 @@
-import Component from 'flarum/component';
-import avatar from 'flarum/helpers/avatar';
-import username from 'flarum/helpers/username';
-import DropdownButton from 'flarum/components/dropdown-button';
-import ActionButton from 'flarum/components/action-button';
-import ItemList from 'flarum/utils/item-list';
-import Separator from 'flarum/components/separator';
-
-export default class UserDropdown extends Component {
-  view() {
-    var user = this.props.user;
-
-    return DropdownButton.component({
-      buttonClass: 'btn btn-default btn-naked btn-rounded btn-user',
-      menuClass: 'pull-right',
-      buttonContent: [avatar(user), ' ', m('span.label', username(user))],
-      items: this.items().toArray()
-    });
-  }
-
-  items() {
-    var items = new ItemList();
-    var user = this.props.user;
-
-    items.add('logOut',
-      ActionButton.component({
-        icon: 'sign-out',
-        label: 'Log Out',
-        onclick: app.session.logout.bind(app.session)
-      })
-    );
-
-    return items;
-  }
-}

js/admin/src/initializers/boot.js

@@ -1,38 +1,54 @@
-import ScrollListener from 'flarum/utils/scroll-listener';
-import mapRoutes from 'flarum/utils/map-routes';
+/*global FastClick*/
 
-import BackButton from 'flarum/components/back-button';
-import HeaderPrimary from 'flarum/components/header-primary';
-import HeaderSecondary from 'flarum/components/header-secondary';
-import Modal from 'flarum/components/modal';
-import Alerts from 'flarum/components/alerts';
-import AdminNav from 'flarum/components/admin-nav';
+import ScrollListener from 'flarum/utils/ScrollListener';
+import Drawer from 'flarum/utils/Drawer';
+import mapRoutes from 'flarum/utils/mapRoutes';
 
-export default function(app) {
-  var id = id => document.getElementById(id);
+import Navigation from 'flarum/components/Navigation';
+import HeaderPrimary from 'flarum/components/HeaderPrimary';
+import HeaderSecondary from 'flarum/components/HeaderSecondary';
+import AdminNav from 'flarum/components/AdminNav';
+import ModalManager from 'flarum/components/ModalManager';
+import AlertManager from 'flarum/components/AlertManager';
 
+/**
+ * The `boot` initializer boots up the admin app. It initializes some app
+ * globals, mounts components to the page, and begins routing.
+ *
+ * @param {ForumApp} app
+ */
+export default function boot(app) {
+  m.startComputation();
+
+  m.mount(document.getElementById('app-navigation'), Navigation.component({className: 'App-backControl', drawer: true}));
+  m.mount(document.getElementById('header-navigation'), Navigation.component());
+  m.mount(document.getElementById('header-primary'), HeaderPrimary.component());
+  m.mount(document.getElementById('header-secondary'), HeaderSecondary.component());
+  m.mount(document.getElementById('admin-navigation'), AdminNav.component());
+
+  app.drawer = new Drawer();
+  app.modal = m.mount(document.getElementById('modal'), ModalManager.component());
+  app.alerts = m.mount(document.getElementById('alerts'), AlertManager.component());
   app.history = {
-    back: function() {
-      window.location = 'http://flarum.dev';
-    },
-    canGoBack: function() {
-      return true;
-    }
+    canGoBack: () => true,
+    back: () => window.location = '/'
   };
 
-  m.mount(id('back-control'), BackButton.component({ className: 'back-control', drawer: true }));
-  m.mount(id('back-button'), BackButton.component());
-
-  m.mount(id('header-primary'), HeaderPrimary.component());
-  m.mount(id('header-secondary'), HeaderSecondary.component());
-
-  m.mount(id('admin-nav'), AdminNav.component());
-
-  app.modal = m.mount(id('modal'), Modal.component());
-  app.alerts = m.mount(id('alerts'), Alerts.component());
-
   m.route.mode = 'hash';
-  m.route(id('content'), '/', mapRoutes(app.routes));
+  m.route(document.getElementById('content'), '/', mapRoutes(app.routes));
 
-  new ScrollListener(top => $('body').toggleClass('scrolled', top > 0)).start();
+  m.endComputation();
+
+  // Add a class to the body which indicates that the page has been scrolled
+  // down.
+  new ScrollListener(top => {
+    const $app = $('#app');
+    const offset = $app.offset().top;
+
+    $app
+      .toggleClass('affix', top >= offset)
+      .toggleClass('scrolled', top > offset);
+  }).start();
+
+  app.booted = true;
 }

js/admin/src/initializers/routes.js

@@ -1,15 +1,20 @@
-import DashboardPage from 'flarum/components/dashboard-page';
-import BasicsPage from 'flarum/components/basics-page';
-import PermissionsPage from 'flarum/components/permissions-page';
-import AppearancePage from 'flarum/components/appearance-page';
-import ExtensionsPage from 'flarum/components/extensions-page';
+import DashboardPage from 'flarum/components/DashboardPage';
+import BasicsPage from 'flarum/components/BasicsPage';
+import PermissionsPage from 'flarum/components/PermissionsPage';
+import AppearancePage from 'flarum/components/AppearancePage';
+import ExtensionsPage from 'flarum/components/ExtensionsPage';
 
+/**
+ * The `routes` initializer defines the admin app's routes.
+ *
+ * @param {App} app
+ */
 export default function(app) {
   app.routes = {
-    'dashboard': ['/', DashboardPage.component()],
-    'basics': ['/basics', BasicsPage.component()],
-    'permissions': ['/permissions', PermissionsPage.component()],
-    'appearance': ['/appearance', AppearancePage.component()],
-    'extensions': ['/extensions', ExtensionsPage.component()]
+    'dashboard': {path: '/', component: DashboardPage.component()},
+    'basics': {path: '/basics', component: BasicsPage.component()},
+    'permissions': {path: '/permissions', component: PermissionsPage.component()},
+    'appearance': {path: '/appearance', component: AppearancePage.component()},
+    'extensions': {path: '/extensions', component: ExtensionsPage.component()}
   };
 }

js/forum/src/components/HeaderSecondary.js

@@ -8,7 +8,7 @@ import ItemList from 'flarum/utils/ItemList';
 import listItems from 'flarum/helpers/listItems';
 
 /**
- * The `HeaderSecondary` component displays secondary footer controls, such as
+ * The `HeaderSecondary` component displays secondary header controls, such as
  * the search box and the user menu. On the default skin, these are shown on the
  * right side of the header.
  */