Get admin area working again

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