From 3fcf8f3da553adf7e52abc0aa0aeb37deefdee20 Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Mon, 18 May 2015 14:58:23 +0930
Subject: [PATCH] Make avatar edit menu extensible

---
 .../js/forum/src/components/avatar-editor.js  | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/framework/core/js/forum/src/components/avatar-editor.js b/framework/core/js/forum/src/components/avatar-editor.js
index 25de1dab9..dafc206b3 100644
--- a/framework/core/js/forum/src/components/avatar-editor.js
+++ b/framework/core/js/forum/src/components/avatar-editor.js
@@ -1,6 +1,9 @@
 import Component from 'flarum/component';
 import avatar from 'flarum/helpers/avatar';
 import icon from 'flarum/helpers/icon';
+import listItems from 'flarum/helpers/list-items';
+import ItemList from 'flarum/utils/item-list';
+import ActionButton from 'flarum/components/action-button';
 import LoadingIndicator from 'flarum/components/loading-indicator';
 
 export default class AvatarEditor extends Component {
@@ -20,13 +23,32 @@ export default class AvatarEditor extends Component {
       m('a.dropdown-toggle[href=javascript:;][data-toggle=dropdown]', {onclick: this.quickUpload.bind(this)}, [
         this.loading() ? LoadingIndicator.component() : icon('pencil icon')
       ]),
-      m('ul.dropdown-menu', [
-        m('li', m('a[href=javascript:;]', {onclick: this.upload.bind(this)}, [icon('upload icon'), ' Upload'])),
-        m('li', m('a[href=javascript:;]', {onclick: this.remove.bind(this)}, [icon('times icon'), ' Remove']))
-      ])
+      m('ul.dropdown-menu', listItems(this.controlItems().toArray()))
     ]);
   }
 
+  controlItems() {
+    var items = new ItemList();
+
+    items.add('upload',
+      ActionButton.component({
+        icon: 'upload',
+        label: 'Upload',
+        onclick: this.upload.bind(this)
+      })
+    );
+
+    items.add('remove',
+      ActionButton.component({
+        icon: 'times',
+        label: 'Remove',
+        onclick: this.remove.bind(this)
+      })
+    );
+
+    return items;
+  }
+
   quickUpload(e) {
     if (!this.props.user.avatarUrl()) {
       e.preventDefault();