Ember: correct editor layout and other niggles

no issue
- Fixes the editor view so that the layout is correct
- Remove default title
- Fixes a couple of scoping issues with notifications

core/client/assets/css/ember-hacks.css

@@ -3,17 +3,6 @@
   The contents should be solved properly or moved into ghost-ui package.
 */
 
-#entry-markdown,
-.entry-preview,
-.CodeMirror.cm-s-default {
-    height: 500px !important;
-}
-
-.editor input {
-    -webkit-transition: none;
-    -moz-transition: none;
-    transition: none;
-}
 
 /*
   By default nav menu should be displayed as it's visibility is controllerd

core/client/controllers/posts/post.js

@@ -1,16 +1,14 @@
 /* global console */
 import {parseDateString, formatDate} from 'ghost/utils/date-formatting';
 
-var equal = Ember.computed.equal;
-
 var PostController = Ember.ObjectController.extend({
     //## Editor state properties
     isEditingSettings: false,
     isViewingSaveTypes: false,
 
     //## Computed post properties
-    isPublished: equal('status', 'published'),
-    isDraft: equal('status', 'draft'),
+    isPublished: Ember.computed.equal('status', 'published'),
+    isDraft: Ember.computed.equal('status', 'draft'),
     willPublish: Ember.computed.oneWay('isPublished'),
     isStaticPage: function (key, val) {
         var self = this;
@@ -19,7 +17,7 @@ var PostController = Ember.ObjectController.extend({
             this.set('page', val ? 1 : 0);
 
             return this.get('model').save().then(function () {
-                self.notifications.showSuccess('Succesfully converted to ' + (val ? 'static page' : 'post'));
+                self.notifications.showSuccess('Successfully converted to ' + (val ? 'static page' : 'post'));
 
                 return !!self.get('page');
             }, this.notifications.showErrors);
@@ -38,9 +36,12 @@ var PostController = Ember.ObjectController.extend({
         save: function () {
             var status = this.get('willPublish') ? 'published' : 'draft',
                 self = this;
+                       
             this.set('model.status', status);
             this.get('model').save().then(function () {
-                self.notifications.showSuccess('Post status saved as <strong>' + this.get('model.status') + '</strong>.');
+                console.log('saved');
+                self.notifications.showSuccess('Post status saved as <strong>' +
+                    self.get('model.status') + '</strong>.');
             }, this.notifications.showErrors);
         },
         viewSaveTypes: function () {
@@ -101,14 +102,16 @@ var PostController = Ember.ObjectController.extend({
             if (!this.get('isNew')) {
                 return;
             }
-            
+
             this.get('model').save().then(function () {
-                self.notifications.showSuccess('Permalink successfully changed to <strong>' + this.get('slug') + '</strong>.');
+                self.notifications.showSuccess('Permalink successfully changed to <strong>' +
+                    self.get('slug') + '</strong>.');
             }, this.notifications.showErrors);
         },
 
         updatePublishedAt: function (userInput) {
-            var errMessage = '',
+            var self = this,
+                errMessage = '',
                 newPubDate = formatDate(parseDateString(userInput)),
                 pubDate = this.get('publishedAt'),
                 newPubDateMoment,
@@ -124,7 +127,7 @@ var PostController = Ember.ObjectController.extend({
             // Check for missing time stamp on new data
             // If no time specified, add a 12:00
             if (newPubDate && !newPubDate.slice(-5).match(/\d+:\d\d/)) {
-                newPubDate += " 12:00";
+                newPubDate += ' 12:00';
             }
 
             newPubDateMoment = parseDateString(newPubDate);
@@ -134,7 +137,7 @@ var PostController = Ember.ObjectController.extend({
                 // Check for missing time stamp on current model
                 // If no time specified, add a 12:00
                 if (!pubDate.slice(-5).match(/\d+:\d\d/)) {
-                    pubDate += " 12:00";
+                    pubDate += ' 12:00';
                 }
 
                 pubDateMoment = parseDateString(pubDate);
@@ -146,8 +149,9 @@ var PostController = Ember.ObjectController.extend({
             }
 
             // Validate new Published date
-            if (!newPubDateMoment.isValid() || newPubDate.substr(0, 12) === "Invalid date") {
-                errMessage = 'Published Date must be a valid date with format: DD MMM YY @ HH:mm (e.g. 6 Dec 14 @ 15:00)';
+            if (!newPubDateMoment.isValid() || newPubDate.substr(0, 12) === 'Invalid date') {
+                errMessage = 'Published Date must be a valid date with format: ' +
+                    'DD MMM YY @ HH:mm (e.g. 6 Dec 14 @ 15:00)';
             }
 
             if (newPubDateMoment.diff(new Date(), 'h') > 0) {
@@ -175,7 +179,8 @@ var PostController = Ember.ObjectController.extend({
             }
 
             this.get('model').save().then(function () {
-                this.notifications.showSuccess('Publish date successfully changed to <strong>' + this.get('publishedAt') + '</strong>.');
+                this.notifications.showSuccess('Publish date successfully changed to <strong>' +
+                    self.get('publishedAt') + '</strong>.');
             }, this.notifications.showErrors);
         }
     }

core/client/controllers/settings/general.js

@@ -34,7 +34,7 @@ var SettingsGeneralController = Ember.ObjectController.extend({
                 });
 
                 // Let the applicationRoute handle validation errors
-                this.send('handleValidationErrors', errs);
+                this.send('handleErrors', errs);
             } else {
                 model.save().then(function () {
                     // @TODO: Notification of success

core/client/models/post.js

@@ -2,13 +2,13 @@ var Post = DS.Model.extend({
     uuid: DS.attr('string'),
     title: DS.attr('string'),
     slug: DS.attr('string'),
-    markdown: DS.attr('string'),
+    markdown: DS.attr('string', {defaultValue: ''}),
     html: DS.attr('string'),
     image: DS.attr('string'),
-    featured: DS.attr('boolean'),
-    page: DS.attr('boolean'),
-    status: DS.attr('string'),
-    language: DS.attr('string'),
+    featured: DS.attr('boolean', {defaultValue: false}),
+    page: DS.attr('boolean', {defaultValue: false}),
+    status: DS.attr('string', {defaultValue: 'draft'}),
+    language: DS.attr('string', {defaultValue: 'en_US'}),
     meta_title: DS.attr('string'),
     meta_description: DS.attr('string'),
     author: DS.belongsTo('user',  { async: true }),
@@ -35,7 +35,7 @@ var Post = DS.Model.extend({
             });
     },
 
-    validationErrors: function () {
+    validate: function () {
         var validationErrors = [];
 
         if (!this.get('title.length')) {

core/client/routes/application.js

@@ -45,9 +45,10 @@ var ApplicationRoute = Ember.Route.extend({
         },
 
         handleErrors: function (errors) {
+            var self = this;
             this.notifications.clear();
             errors.forEach(function (errorObj) {
-                this.notifications.showError(errorObj.message || errorObj);
+                self.notifications.showError(errorObj.message || errorObj);
 
                 if (errorObj.hasOwnProperty('el')) {
                     errorObj.el.addClass('input-error');

core/client/routes/new.js

@@ -11,7 +11,7 @@ var NewRoute = AuthenticatedRoute.extend(styleBody, {
 
     model: function () {
         return this.store.createRecord('post', {
-            title: 'New Post'
+            title: ''
         });
     }
 });

core/client/templates/editor.hbs

@@ -1,27 +1,26 @@
 <section class="entry-container">
-    <header>
-        <section class="box entry-title">
-            {{input type="text" id="entry-title" placeholder="Your Post Title" value=title tabindex="1"}}
-        </section>
-    </header>
-
-    <section class="entry-markdown active">
-        <header class="floatingheader">
-            <small>Markdown</small>
-            <a class="markdown-help" href="" {{action "openModal" "markdown"}}><span class="hidden">What is Markdown?</span></a>
-        </header>
-        <section id="entry-markdown-content" class="entry-markdown-content">
-            {{gh-codemirror value=markdown scrollPosition=view.scrollPosition}}
-        </section>
+<header>
+    <section class="box entry-title">
+        {{input type="text" id="entry-title" placeholder="Your Post Title" value=title tabindex="1"}}
     </section>
+</header>
 
-    <section class="entry-preview">
-        <header class="floatingheader">
-            <small>Preview <span class="entry-word-count js-entry-word-count">{{gh-count-words markdown}} words</span></small>
-        </header>
-        <section class="entry-preview-content">
-            {{gh-markdown markdown=markdown scrollPosition=view.scrollPosition}}
-        </section>
+<section class="entry-markdown active">
+    <header class="floatingheader">
+        <small>Markdown</small>
+        <a class="markdown-help" href="" {{action "openModal" "markdown"}}><span class="hidden">What is Markdown?</span></a>
+    </header>
+    <section id="entry-markdown-content" class="entry-markdown-content">
+        {{gh-codemirror value=markdown scrollPosition=view.scrollPosition}}
+    </section>
+</section>
+
+<section class="entry-preview">
+    <header class="floatingheader">
+        <small>Preview <span class="entry-word-count js-entry-word-count">{{gh-count-words markdown}} words</span></small>
+    </header>
+    <section class="entry-preview-content">
+        {{gh-markdown markdown=markdown scrollPosition=view.scrollPosition}}
     </section>
 </section>
 

core/client/views/editor.js

@@ -1,3 +1,5 @@
 export default Ember.View.extend({
+    tagName: 'section',
+    classNames: ['entry-container'],
     scrollPosition: 0  // percentage of scroll position
 });