From ffb06901193f04d256e5ad69e0faa1d2637d1b8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Wed, 19 Aug 2015 21:10:12 +0200 Subject: [PATCH] FIX: edit history navigation issues --- .../discourse/components/d-button.js.es6 | 19 +++-- .../discourse/controllers/history.js.es6 | 80 ++++++++++++------- .../javascripts/discourse/lib/computed.js.es6 | 12 +++ .../discourse/templates/modal/history.hbs | 18 ++--- app/assets/stylesheets/desktop/history.scss | 8 +- 5 files changed, 85 insertions(+), 52 deletions(-) diff --git a/app/assets/javascripts/discourse/components/d-button.js.es6 b/app/assets/javascripts/discourse/components/d-button.js.es6 index 45fe5effce1..5fcc00a0fc1 100644 --- a/app/assets/javascripts/discourse/components/d-button.js.es6 +++ b/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'), diff --git a/app/assets/javascripts/discourse/controllers/history.js.es6 b/app/assets/javascripts/discourse/controllers/history.js.es6 index 4a04abb1af7..b0588750f95 100644 --- a/app/assets/javascripts/discourse/controllers/history.js.es6 +++ b/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"); } } }); diff --git a/app/assets/javascripts/discourse/lib/computed.js.es6 b/app/assets/javascripts/discourse/lib/computed.js.es6 index b1b7186b0e8..1fb7e745cb5 100644 --- a/app/assets/javascripts/discourse/lib/computed.js.es6 +++ b/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. diff --git a/app/assets/javascripts/discourse/templates/modal/history.hbs b/app/assets/javascripts/discourse/templates/modal/history.hbs index cd790800c1a..bcf20fbc1ca 100644 --- a/app/assets/javascripts/discourse/templates/modal/history.hbs +++ b/app/assets/javascripts/discourse/templates/modal/history.hbs @@ -1,27 +1,27 @@
- - + {{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}}
{{#conditional-loading-spinner condition=loading size="small"}} {{boundI18n revisionsTextKey previousBinding="previousVersion" currentBinding="model.current_version" totalBinding="model.version_count"}} {{/conditional-loading-spinner}}
- - + {{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}} - + {{d-button action="hideVersion" icon="trash-o" title="post.revisions.controls.hide" class="btn-danger" disabled=loading}} {{/if}} {{#if displayShow}} - + {{d-button action="showVersion" icon="undo" title="post.revisions.controls.show" disabled=loading}} {{/if}}
- + {{d-button action="displayInline" label="post.revisions.displays.inline.button" title="post.revisions.displays.inline.title" class=inlineClass}} {{#unless site.mobileView}} - - + {{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}}
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss index 68cba56e30b..5becce0f32d 100644 --- a/app/assets/stylesheets/desktop/history.scss +++ b/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 {