Implement rough UI for uploading avatars

ember/app/components/user/avatar-editor.js

@@ -0,0 +1,45 @@
+import Ember from 'ember';
+
+import config from 'flarum/config/environment';
+
+var $ = Ember.$;
+
+export default Ember.Component.extend({
+  layoutName: 'components/user/avatar-editor',
+  classNames: ['avatar-editor', 'dropdown'],
+  classNameBindings: ['loading'],
+
+  click: function(e) {
+    if (! this.get('user.avatarUrl')) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.send('upload');
+    }
+  },
+
+  actions: {
+    upload: function() {
+      if (this.get('loading')) { return; }
+
+      var $input = $('<input type="file">');
+      var userId = this.get('user.id');
+      var component = this;
+      $input.appendTo('body').hide().click().on('change', function() {
+        var formData = new FormData();
+        formData.append('avatar', $(this)[0].files[0]);
+        component.set('loading', true);
+        $.ajax({
+          type: 'POST',
+          url: config.apiURL+'/users/'+userId+'/avatar',
+          data: formData,
+          cache: false,
+          contentType: false,
+          processData: false,
+          complete: function() {
+            component.set('loading', false);
+          }
+        });
+      });
+    }
+  }
+});

ember/app/styles/flarum/user.less

@@ -47,10 +47,17 @@
     display: inline;
     vertical-align: middle;
   }
-  & .avatar {
+  & .user-avatar {
-    .avatar-size(96px);
     float: left;
     margin-left: -130px;
+  }
+  & .avatar-editor .dropdown-toggle {
+    margin: 4px;
+    line-height: 96px;
+    font-size: 26px;
+  }
+  & .avatar {
+    .avatar-size(96px);
     border: 4px solid #fff;
     .box-shadow(0 2px 6px @fl-shadow-color);
   }
@@ -170,3 +177,30 @@
     }
   }
 }
+
+.avatar-editor {
+  position: relative;
+
+  & .dropdown-toggle {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    text-align: center;
+    text-decoration: none;
+  }
+  &:hover .dropdown-toggle, &.open .dropdown-toggle, &.loading .dropdown-toggle {
+    opacity: 1;
+  }
+  & .loading-indicator {
+    color: #fff;
+  }
+  & .dropdown-menu {
+    left: 35%;
+    top: 65%;
+  }
+}

ember/app/templates/components/user/avatar-editor.hbs

@@ -0,0 +1,12 @@
+{{user-avatar user}}
+<a href="#" class="dropdown-toggle" data-toggle="dropdown">
+  {{#if loading}}
+    {{ui/loading-indicator}}
+  {{else}}
+    {{fa-icon "pencil"}}
+  {{/if}}
+</a>
+<ul class="dropdown-menu">
+  <li><a href="#" {{action "upload"}}>{{fa-icon "upload"}} Upload</a></li>
+  <li><a href="#" {{action "remove"}}>{{fa-icon "times"}} Remove</a></li>
+</ul>

ember/app/templates/components/user/user-card.hbs

@@ -6,7 +6,11 @@
 
   <div class="user-profile">
     <h2 class="user-identity">
-      {{#link-to "user" user}}{{user-avatar user}}{{user-name user}}{{/link-to}}
+      {{#if editable}}
+        {{user/avatar-editor user=user class="user-avatar"}}{{user-name user}}
+      {{else}}
+        {{#link-to "user" user}}{{user-avatar user class="user-avatar"}}{{user-name user}}{{/link-to}}
+      {{/if}}
     </h2>
 
     {{ui/item-list items=user.badges class="badges user-badges"}}