Merge pull request #4041 from felixrieseberg/psm-coverimages

PSM: Cover Images

core/client/assets/sass/components/uploader.scss

@@ -67,7 +67,6 @@
         position:relative;
         z-index: 700;
         color: #fff;
-        padding-left:5px;
     }
     .btn-blue {
       margin: 0 0 0 10px;

core/client/assets/sass/layouts/post-settings-menu.scss

@@ -62,7 +62,11 @@
     .image-uploader {
         padding-top: 35px;
         padding-bottom: 35px;
-        margin: 0 0 1.5rem 0;
+        margin: 0 0 1.6rem 0;
+
+        input {
+            width: auto;
+        }
     }
 
     .form-group {
@@ -76,8 +80,16 @@
     .nav-list {
         margin-top: 3rem;
     }
+
+    .pre-image-uploader {
+        width: auto;
+        min-height: 50px;
+        max-height: 250px;
+    }
+
 }
 
+
 .seo-preview {
     font-family: Arial, sans-serif;
     line-height: 1.46;

core/client/components/gh-uploader.js

@@ -0,0 +1,33 @@
+import uploader from 'ghost/assets/lib/uploader';
+
+var PostImageUploader = Ember.Component.extend({
+    classNames: ['image-uploader', 'js-post-image-upload'],
+
+    setup: function () {
+        var $this = this.$(),
+            self = this;
+
+        uploader.call($this, {
+            editor: true,
+            fileStorage: this.get('config.fileStorage')
+        });
+
+        $this.on('uploadsuccess', function (event, result) {
+            if (result && result !== '' && result !== 'http://') {
+                self.sendAction('uploaded', result);
+            }
+        });
+
+        $this.find('.js-cancel').on('click', function () {
+            self.sendAction('canceled');
+        });
+    }.on('didInsertElement'),
+
+    removeListeners: function () {
+        var $this = this.$();
+        $this.off();
+        $this.find('.js-cancel').off();
+    }.on('willDestroyElement')
+});
+
+export default PostImageUploader;

core/client/controllers/post-settings-menu.js

@@ -19,7 +19,7 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
     selectedAuthor: null,
     initializeSelectedAuthor: function () {
         var self = this;
-        
+
         return this.get('author').then(function (author) {
             self.set('selectedAuthor', author);
             return author;
@@ -259,6 +259,36 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
                 return;
             }
 
+            this.get('model').save(this.get('saveOptions')).catch(function (errors) {
+                self.showErrors(errors);
+                self.get('model').rollback();
+            });
+        },
+
+        setCoverImage: function (image) {
+            var self = this;
+
+            this.set('image', image);
+
+            if (this.get('isNew')) {
+                return;
+            }
+
+            this.get('model').save(this.get('saveOptions')).catch(function (errors) {
+                self.showErrors(errors);
+                self.get('model').rollback();
+            });
+        },
+
+        clearCoverImage: function () {
+            var self = this;
+
+            this.set('image', '');
+
+            if (this.get('isNew')) {
+                return;
+            }
+
             this.get('model').save(this.get('saveOptions')).catch(function (errors) {
                 self.showErrors(errors);
                 self.get('model').rollback();

core/client/templates/components/gh-uploader.hbs

@@ -0,0 +1,6 @@
+<span class="media">
+    <span class="hidden">Image Upload</span>
+</span>
+<img class="js-upload-target" {{bind-attr src=image}}>
+<div class="description">Add post image <strong></strong></div>
+<input data-url="upload" class="js-fileupload main fileupload" type="file" name="uploadimage">

core/client/templates/post-settings-menu.hbs

@@ -6,15 +6,7 @@
             <button class="close icon-x post-settings-header-action" {{action "closePostSettings"}}><span class="hidden">Close</span></button>
         </div>
         <div class="post-settings-content">
-            <!--
+            {{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" image=image tagName="section"}}
-            <section class="image-uploader">
-                <span class="media">
-                    <span class="hidden">Image Upload</span>
-                </span>
-                <img class="js-upload-target" style="display: none;" src="">
-                <div class="description">Add image of <strong></strong></div>
-            </section>
-            -->
             <form>
             <div class="form-group">
                 <label for="blog-title">Post URL</label>