FIX: edit history navigation issues

app/assets/javascripts/discourse/components/d-button.js.es6

@@ -1,4 +1,5 @@
 import { iconHTML } from 'discourse/helpers/fa-icon';
+import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
   tagName: 'button',
@@ -7,17 +8,15 @@ export default Ember.Component.extend({
 
   noText: Ember.computed.empty('translatedLabel'),
 
-  translatedTitle: function() {
-    const title = this.get('title');
-    return title ? I18n.t(title) : this.get('translatedLabel');
-  }.property('title', 'translatedLabel'),
+  @computed("title", "translatedLabel")
+  translatedTitle(title, translatedLabel) {
+    return title ? I18n.t(title) : translatedLabel;
+  },
 
-  translatedLabel: function() {
-    const label = this.get('label');
-    if (label) {
-      return I18n.t(this.get('label'));
-    }
-  }.property('label'),
+  @computed("label")
+  translatedLabel(label) {
+    if (label) return I18n.t(label);
+  },
 
   render(buffer) {
     const label = this.get('translatedLabel'),

app/assets/javascripts/discourse/controllers/history.js.es6

@@ -1,6 +1,7 @@
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
 import { categoryBadgeHTML } from 'discourse/helpers/category-link';
 import computed from 'ember-addons/ember-computed-decorators';
+import { propertyGreaterThan, propertyLessThan } from 'discourse/lib/computed';
 
 // This controller handles displaying of history
 export default Ember.Controller.extend(ModalFunctionality, {
@@ -15,30 +16,28 @@ export default Ember.Controller.extend(ModalFunctionality, {
   refresh(postId, postVersion) {
     this.set("loading", true);
 
-    var self = this;
-    Discourse.Post.loadRevision(postId, postVersion).then(function (result) {
-      self.setProperties({ loading: false, model: result });
+    Discourse.Post.loadRevision(postId, postVersion).then(result => {
+      this.setProperties({ loading: false, model: result });
     });
   },
 
   hide(postId, postVersion) {
-    var self = this;
-    Discourse.Post.hideRevision(postId, postVersion).then(function () {
-      self.refresh(postId, postVersion);
-    });
+    Discourse.Post.hideRevision(postId, postVersion).then(() => this.refresh(postId, postVersion));
   },
 
   show(postId, postVersion) {
-    var self = this;
-    Discourse.Post.showRevision(postId, postVersion).then(function () {
-      self.refresh(postId, postVersion);
-    });
+    Discourse.Post.showRevision(postId, postVersion).then(() => this.refresh(postId, postVersion));
   },
 
-  createdAtDate: function() { return moment(this.get("created_at")).format("LLLL"); }.property("created_at"),
+  @computed('model.created_at')
+  createdAtDate(createdAt) {
+    return moment(createdAt).format("LLLL");
+  },
 
   @computed('model.current_version')
-  previousVersion(current) { return current - 1; },
+  previousVersion(current) {
+    return current - 1;
+  },
 
   @computed('model.current_revision', 'model.previous_revision')
   displayGoToPrevious(current, prev) {
@@ -46,18 +45,28 @@ export default Ember.Controller.extend(ModalFunctionality, {
   },
 
   displayRevisions: Ember.computed.gt("model.version_count", 2),
-  displayGoToFirst: Ember.computed.gt('model.current_revision', 'model.first_revision'),
-  displayGoToNext: Ember.computed.lt("model.current_revision", "model.next_revision"),
-  displayGoToLast: Ember.computed.lt("model.current_revision", "model.next_revision"),
+  displayGoToFirst: propertyGreaterThan("model.current_revision", "model.first_revision"),
+  displayGoToNext: propertyLessThan("model.current_revision", "model.next_revision"),
+  displayGoToLast: propertyLessThan("model.current_revision", "model.next_revision"),
 
-  @computed('model.previous_hidden', 'loading')
-  displayShow: function(prevHidden, loading) {
-    return prevHidden && this.currentUser.get('staff') && !loading;
+  hideGoToFirst: Ember.computed.not("displayGoToFirst"),
+  hideGoToPrevious: Ember.computed.not("displayGoToPrevious"),
+  hideGoToNext: Ember.computed.not("displayGoToNext"),
+  hideGoToLast: Ember.computed.not("displayGoToLast"),
+
+  loadFirstDisabled: Ember.computed.or("loading", "hideGoToFirst"),
+  loadPreviousDisabled: Ember.computed.or("loading", "hideGoToPrevious"),
+  loadNextDisabled: Ember.computed.or("loading", "hideGoToNext"),
+  loadLastDisabled: Ember.computed.or("loading", "hideGoToLast"),
+
+  @computed('model.previous_hidden')
+  displayShow(prevHidden) {
+    return prevHidden && this.currentUser.get('staff');
   },
 
-  @computed('model.previous_hidden', 'loading')
-  displayHide: function(prevHidden, loading) {
-    return !prevHidden && this.currentUser.get('staff') && !loading;
+  @computed('model.previous_hidden')
+  displayHide(prevHidden) {
+    return !prevHidden && this.currentUser.get('staff');
   },
 
   isEitherRevisionHidden: Ember.computed.or("model.previous_hidden", "model.current_hidden"),
@@ -78,6 +87,15 @@ export default Ember.Controller.extend(ModalFunctionality, {
   displayingSideBySide: Em.computed.equal("viewMode", "side_by_side"),
   displayingSideBySideMarkdown: Em.computed.equal("viewMode", "side_by_side_markdown"),
 
+  @computed("displayingInline")
+  inlineClass(displayingInline) { return displayingInline ? "btn-primary" : ""; },
+
+  @computed("displayingSideBySide")
+  sideBySideClass(displayingSideBySide) { return displayingSideBySide ? "btn-primary" : ""; },
+
+  @computed("displayingSideBySideMarkdown")
+  sideBySideMarkdownClass(displayingSideBySideMarkdown) { return displayingSideBySideMarkdown ? "btn-primary" : ""; },
+
   @computed('model.category_id_changes')
   previousCategory(changes) {
     if (changes) {
@@ -116,16 +134,16 @@ export default Ember.Controller.extend(ModalFunctionality, {
   },
 
   actions: {
-    loadFirstVersion: function() { this.refresh(this.get("model.post_id"), this.get("model.first_revision")); },
-    loadPreviousVersion: function() { this.refresh(this.get("model.post_id"), this.get("model.previous_revision")); },
-    loadNextVersion: function() { this.refresh(this.get("model.post_id"), this.get("model.next_revision")); },
-    loadLastVersion: function() { this.refresh(this.get("model.post_id"), this.get("model.last_revision")); },
+    loadFirstVersion()    { this.refresh(this.get("model.post_id"), this.get("model.first_revision")); },
+    loadPreviousVersion() { this.refresh(this.get("model.post_id"), this.get("model.previous_revision")); },
+    loadNextVersion()     { this.refresh(this.get("model.post_id"), this.get("model.next_revision")); },
+    loadLastVersion()     { this.refresh(this.get("model.post_id"), this.get("model.last_revision")); },
 
-    hideVersion: function() { this.hide(this.get("model.post_id"), this.get("model.current_revision")); },
-    showVersion: function() { this.show(this.get("model.post_id"), this.get("model.current_revision")); },
+    hideVersion() { this.hide(this.get("model.post_id"), this.get("model.current_revision")); },
+    showVersion() { this.show(this.get("model.post_id"), this.get("model.current_revision")); },
 
-    displayInline: function() { this.set("viewMode", "inline"); },
-    displaySideBySide: function() { this.set("viewMode", "side_by_side"); },
-    displaySideBySideMarkdown: function() { this.set("viewMode", "side_by_side_markdown"); }
+    displayInline()             { this.set("viewMode", "inline"); },
+    displaySideBySide()         { this.set("viewMode", "side_by_side"); },
+    displaySideBySideMarkdown() { this.set("viewMode", "side_by_side_markdown"); }
   }
 });

app/assets/javascripts/discourse/lib/computed.js.es6

@@ -26,6 +26,18 @@ export function propertyNotEqual(p1, p2) {
   }).property(p1, p2);
 }
 
+export function propertyGreaterThan(p1, p2) {
+  return Ember.computed(function() {
+    return this.get(p1) > this.get(p2);
+  }).property(p1, p2);
+}
+
+export function propertyLessThan(p1, p2) {
+  return Ember.computed(function() {
+    return this.get(p1) < this.get(p2);
+  }).property(p1, p2);
+}
+
 /**
   Returns i18n version of a string based on a property.
 

app/assets/javascripts/discourse/templates/modal/history.hbs

@@ -1,27 +1,27 @@
 <div class="modal-body">
   <div>
     <div id="revision-controls">
-      <button title="{{i18n 'post.revisions.controls.first'}}" {{bind-attr class=":btn :standard :no-text displayGoToFirst::invisible" disabled=loading}} {{action "loadFirstVersion"}}><i class="fa fa-fast-backward"></i></button>
-      <button title="{{i18n 'post.revisions.controls.previous'}}" {{bind-attr class=":btn :standard :no-text displayGoToPrevious::invisible" disabled=loading}} {{action "loadPreviousVersion"}}><i class="fa fa-backward"></i></button>
+      {{d-button action="loadFirstVersion" icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}}
+      {{d-button action="loadPreviousVersion" icon="backward" title="post.revisions.controls.previous" disabled=loadPreviousDisabled}}
       <div id="revision-numbers" {{bind-attr class="displayRevisions::invisible"}}>
         {{#conditional-loading-spinner condition=loading size="small"}}
           {{boundI18n revisionsTextKey previousBinding="previousVersion" currentBinding="model.current_version" totalBinding="model.version_count"}}
         {{/conditional-loading-spinner}}
       </div>
-      <button title="{{i18n 'post.revisions.controls.next'}}" {{bind-attr class=":btn :standard :no-text displayGoToNext::invisible" disabled=loading}} {{action "loadNextVersion"}}><i class="fa fa-forward"></i></button>
-      <button title="{{i18n 'post.revisions.controls.last'}}" {{bind-attr class=":btn :standard :no-text displayGoToLast::invisible" disabled=loading}} {{action "loadLastVersion"}}><i class="fa fa-fast-forward"></i></button>
+      {{d-button action="loadNextVersion" icon="forward" title="post.revisions.controls.next" disabled=loadNextDisabled}}
+      {{d-button action="loadLastVersion" icon="fast-forward" title="post.revisions.controls.last" disabled=loadLastDisabled}}
       {{#if displayHide}}
-        <button title="{{i18n 'post.revisions.controls.hide'}}" {{bind-attr class=":btn :standard :no-text :btn-danger" disabled=loading}} {{action "hideVersion"}}><i class="fa fa-trash-o"></i></button>
+        {{d-button action="hideVersion" icon="trash-o" title="post.revisions.controls.hide" class="btn-danger" disabled=loading}}
       {{/if}}
       {{#if displayShow}}
-        <button title="{{i18n 'post.revisions.controls.show'}}" {{bind-attr class=":btn :standard :no-text" disabled=loading}} {{action "showVersion"}}><i class="fa fa-undo"></i></button>
+        {{d-button action="showVersion" icon="undo" title="post.revisions.controls.show" disabled=loading}}
       {{/if}}
     </div>
     <div id="display-modes">
-      <button {{bind-attr class=":btn displayingInline:btn-primary:standard"}} title="{{i18n 'post.revisions.displays.inline.title'}}" {{action "displayInline"}}>{{{i18n 'post.revisions.displays.inline.button'}}}</button>
+      {{d-button action="displayInline" label="post.revisions.displays.inline.button" title="post.revisions.displays.inline.title" class=inlineClass}}
       {{#unless site.mobileView}}
-        <button {{bind-attr class=":btn displayingSideBySide:btn-primary:standard"}} title="{{i18n 'post.revisions.displays.side_by_side.title'}}" {{action "displaySideBySide"}}>{{{i18n 'post.revisions.displays.side_by_side.button'}}}</button>
-        <button {{bind-attr class=":btn displayingSideBySideMarkdown:btn-primary:standard"}} title="{{i18n 'post.revisions.displays.side_by_side_markdown.title'}}" {{action "displaySideBySideMarkdown"}}>{{{i18n 'post.revisions.displays.side_by_side_markdown.button'}}}</button>
+        {{d-button action="displaySideBySide" label="post.revisions.displays.side_by_side.button" title="post.revisions.displays.side_by_side.title" class=sideBySideClass}}
+        {{d-button action="displaySideBySideMarkdown" label="post.revisions.displays.side_by_side_markdown.button" title="post.revisions.displays.side_by_side_markdown.title" class=sideBySideMarkdownClass}}
       {{/unless}}
     </div>
   </div>

app/assets/stylesheets/desktop/history.scss

@@ -11,8 +11,12 @@
   }
   #revision-controls {
     float: left;
-    .btn[disabled]:hover {
-      color: $primary;
+    .btn[disabled] {
+      cursor: not-allowed;
+      background-color: dark-light-diff($primary, $secondary, 90%, -60%);
+    }
+    .btn-danger[disabled] {
+      background-color: dark-light-diff($danger, $secondary, 30%, -60%);
     }
   }
   #display-modes {