Added custom user avatars

resources/assets/js/components/image-manager.vue

@@ -80,15 +80,6 @@
             imageType: {
                 type: String,
                 required: true
-            },
-            resizeWidth: {
-                type: String
-            },
-            resizeHeight: {
-                type: String
-            },
-            resizeCrop: {
-                type: Boolean
             }
         },
 
@@ -137,21 +128,7 @@
             },
 
             returnCallback: function (image) {
-                var _this = this;
-                var isResized = _this.resizeWidth && _this.resizeHeight;
-
-                if (!isResized) {
-                    _this.callback(image);
-                    return;
-                }
-
-                var cropped = _this.resizeCrop ? 'true' : 'false';
-                var requestString = '/images/thumb/' + image.id + '/' + _this.resizeWidth + '/' + _this.resizeHeight + '/' + cropped;
-                _this.$http.get(requestString, function(data) {
-                    image.thumbs.custom = data.url;
-                    _this.callback(image);
-                });
-
+                this.callback(image);
             },
 
             imageClick: function (image) {

resources/assets/js/components/image-picker.vue

@@ -7,31 +7,89 @@
         </div>
         <button class="button" type="button" @click="showImageManager">Select Image</button>
         <br>
-        <button class="text-button" @click="reset" type="button">Reset</button> <span class="sep">|</span> <button class="text-button neg" v-on:click="remove" type="button">Remove</button>
-        <input type="hidden" :name="name" :id="name" v-model="image">
+        <button class="text-button" @click="reset" type="button">Reset</button> <span v-show="showRemove" class="sep">|</span> <button v-show="showRemove" class="text-button neg" @click="remove" type="button">Remove</button>
+        <input type="hidden" :name="name" :id="name" v-model="value">
     </div>
 </template>
 
 <script>
     module.exports = {
-        props: ['currentImage', 'name', 'imageClass', 'defaultImage'],
-        data: function() {
-            return {
-                image: this.currentImage
+        props: {
+            currentImage: {
+                required: true,
+                type: String
+            },
+            currentId: {
+                required: false,
+                default: 'false',
+                type: String
+            },
+            name: {
+                required: true,
+                type: String
+            },
+            defaultImage: {
+                required: true,
+                type: String
+            },
+            imageClass: {
+                required: true,
+                type: String
+            },
+            resizeWidth: {
+                type: String
+            },
+            resizeHeight: {
+                type: String
+            },
+            resizeCrop: {
+                type: Boolean
+            },
+            showRemove: {
+                type: Boolean,
+                default: 'true'
             }
         },
+        data: function() {
+            return {
+                image: this.currentImage,
+                value: false
+            }
+        },
+        compiled: function() {
+            this.value = this.currentId === 'false' ? this.currentImage : this.currentId;
+        },
         methods: {
+            setCurrentValue: function(imageModel, imageUrl) {
+                this.image = imageUrl;
+                this.value = this.currentId === 'false' ?  imageUrl : imageModel.id;
+            },
             showImageManager: function(e) {
                 var _this = this;
                 ImageManager.show(function(image) {
-                    _this.image = image.thumbs.custom || image.url;
+                    _this.updateImageFromModel(image);
                 });
             },
             reset: function() {
-                this.image = '';
+                this.setCurrentValue({id: 0}, this.defaultImage);
             },
             remove: function() {
                 this.image = 'none';
+            },
+            updateImageFromModel: function(model) {
+                var _this = this;
+                var isResized = _this.resizeWidth && _this.resizeHeight;
+
+                if (!isResized) {
+                    _this.setCurrentValue(model, model.url);
+                    return;
+                }
+
+                var cropped = _this.resizeCrop ? 'true' : 'false';
+                var requestString = '/images/thumb/' + model.id + '/' + _this.resizeWidth + '/' + _this.resizeHeight + '/' + cropped;
+                _this.$http.get(requestString, function(data) {
+                    _this.setCurrentValue(model, data.url);
+                });
             }
         }
     };

resources/assets/sass/styles.scss

@@ -36,6 +36,10 @@ body.dragging, body.dragging * {
     width: 40px;
     height: 40px;
   }
+  &.large {
+    width: 80px;
+    height: 80px;
+  }
 }
 
 // System wide notifications

resources/views/settings/index.blade.php

@@ -33,7 +33,7 @@
                 <div class="form-group" id="logo-control">
                     <label for="setting-app-logo">Application Logo</label>
                     <p class="small">This image should be 43px in height. <br>Large images will be scaled down.</p>
-                    <image-picker current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
+                    <image-picker resize-height="43" resize-width="200" current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
                 </div>
             </div>
         </div>
@@ -86,6 +86,6 @@
 
 </div>
 
-<image-manager image-type="system" resize-height="43" resize-width="200"></image-manager>
+<image-manager image-type="system"></image-manager>
 
 @stop

resources/views/users/edit.blade.php

@@ -19,26 +19,25 @@
 
 
     <div class="container small">
-
+        <form action="/users/{{$user->id}}" method="post">
         <div class="row">
             <div class="col-md-6">
                 <h1>Edit {{ $user->id === $currentUser->id ? 'Profile' : 'User' }}</h1>
-                <form action="/users/{{$user->id}}" method="post">
-                    {!! csrf_field() !!}
-                    <input type="hidden" name="_method" value="put">
-                    @include('users/form', ['model' => $user])
-                </form>
+                {!! csrf_field() !!}
+                <input type="hidden" name="_method" value="put">
+                @include('users/form', ['model' => $user])
+
             </div>
             <div class="col-md-6">
                 <h1>&nbsp;</h1>
-                <div class="shaded padded margin-top">
-                    <p>
-                        <img class="avatar" src="{{ $user->getAvatar(80) }}" alt="{{ $user->name }}">
-                    </p>
-                    <p class="text-muted">You can change your profile picture at <a href="http://en.gravatar.com/">Gravatar</a>.</p>
+                <div class="form-group" id="logo-control">
+                    <label for="user-avatar">User Avatar</label>
+                    <p class="small">This image should be approx 256px square.</p>
+                    <image-picker resize-height="512" resize-width="512" current-image="{{ $user->getAvatar(80) }}" current-id="{{ $user->image_id }}" default-image="/user_avatar.png" name="image_id" show-remove="false" image-class="avatar large"></image-picker>
                 </div>
             </div>
         </div>
+        </form>
 
         <hr class="margin-top large">
 
@@ -80,5 +79,5 @@
     </div>
 
     <p class="margin-top large"><br></p>
-
+    <image-manager image-type="user"></image-manager>
 @stop

resources/views/users/form.blade.php

@@ -36,4 +36,5 @@
 <div class="form-group">
     <a href="/users" class="button muted">Cancel</a>
     <button class="button pos" type="submit">Save</button>
-</div>
+</div>
+