From 156a00af47eaf7833813286150018e00220b9517 Mon Sep 17 00:00:00 2001 From: Guo Xiang Tan Date: Fri, 27 Jan 2017 10:49:17 +0800 Subject: [PATCH] UX: Show edit button on post revision modal as long as user can edit. --- .../discourse/controllers/history.js.es6 | 21 +++++++++----- .../discourse/templates/modal/history.hbs | 14 ++++++++-- .../stylesheets/common/base/history.scss | 9 ++++++ app/assets/stylesheets/desktop/history.scss | 5 ++++ app/serializers/post_revision_serializer.rb | 7 ++++- config/locales/client.en.yml | 3 +- .../controllers/history-test.js.es6 | 28 +++++++++++++++++++ 7 files changed, 75 insertions(+), 12 deletions(-) create mode 100644 test/javascripts/controllers/history-test.js.es6 diff --git a/app/assets/javascripts/discourse/controllers/history.js.es6 b/app/assets/javascripts/discourse/controllers/history.js.es6 index b6e9a103777..95db043e020 100644 --- a/app/assets/javascripts/discourse/controllers/history.js.es6 +++ b/app/assets/javascripts/discourse/controllers/history.js.es6 @@ -2,6 +2,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'; +import { on } from 'ember-addons/ember-computed-decorators'; function customTagArray(fieldName) { return function() { @@ -17,9 +18,10 @@ export default Ember.Controller.extend(ModalFunctionality, { loading: true, viewMode: "side_by_side", - _changeViewModeOnMobile: function() { - if (this.site.mobileView) { this.set("viewMode", "inline"); } - }.on("init"), + @on('init') + _changeViewModeOnMobile() { + if (this.site && this.site.mobileView) { this.set("viewMode", "inline"); } + }, previousFeaturedLink: Em.computed.alias('model.featured_link_changes.previous'), currentFeaturedLink: Em.computed.alias('model.featured_link_changes.current'), @@ -109,9 +111,14 @@ export default Ember.Controller.extend(ModalFunctionality, { return !prevHidden && this.currentUser && this.currentUser.get('staff'); }, - @computed("model.wiki", "model.last_revision", "model.current_revision") - displayEdit(wiki, lastRevision, currentRevision) { - return wiki && (lastRevision === currentRevision); + @computed("model.last_revision", "model.current_revision", "model.can_edit") + displayEdit(lastRevision, currentRevision, canEdit) { + return canEdit && (lastRevision === currentRevision); + }, + + @computed("model.wiki") + editButtonLabel(wiki) { + return `post.revisions.controls.${wiki ? 'edit_wiki' : 'edit_post'}`; }, @computed() @@ -192,7 +199,7 @@ export default Ember.Controller.extend(ModalFunctionality, { 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")); }, - editWiki() { + editPost() { this.get('topicController').send('editPost', this.get('post')); this.send('closeModal'); }, diff --git a/app/assets/javascripts/discourse/templates/modal/history.hbs b/app/assets/javascripts/discourse/templates/modal/history.hbs index 62e7f9b9841..85977212839 100644 --- a/app/assets/javascripts/discourse/templates/modal/history.hbs +++ b/app/assets/javascripts/discourse/templates/modal/history.hbs @@ -1,5 +1,5 @@ {{#d-modal-body title="history" maxHeight="80%"}} -
+
{{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}} @@ -12,6 +12,12 @@ {{d-button action="loadLastVersion" icon="fast-forward" title="post.revisions.controls.last" disabled=loadLastDisabled}}
+ {{#if displayEdit}} + {{d-button action="editPost" + icon="pencil" + label=editButtonLabel}} + {{/if}} +
{{d-button action="displayInline" icon="square-o" @@ -114,6 +120,8 @@ {{{bodyDiff}}} {{/links-redirect}} +
+ {{#if displayRevert}} {{d-button action="revertToVersion" icon="undo" label="post.revisions.controls.revert" class="btn-danger" disabled=loading}} {{/if}} @@ -127,9 +135,9 @@ {{/if}} {{#if displayEdit}} - {{d-button action="editWiki" + {{d-button action="editPost" icon="pencil" - label="post.revisions.controls.edit_wiki"}} + label=editButtonLabel}} {{/if}}
{{/d-modal-body}} diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss index d8b779e3325..23a094624fc 100644 --- a/app/assets/stylesheets/common/base/history.scss +++ b/app/assets/stylesheets/common/base/history.scss @@ -6,6 +6,15 @@ min-width: 96px; text-align: center; } + + #revision { + overflow: auto; + } + + #revision-controls { + display: inline-block; + } + #revisions .row:first-of-type { margin-top: 10px; } diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss index bc228aa02c9..858796f21b0 100644 --- a/app/assets/stylesheets/desktop/history.scss +++ b/app/assets/stylesheets/desktop/history.scss @@ -8,6 +8,8 @@ } #revision-controls { float: left; + padding-right: 5px; + .btn[disabled] { cursor: not-allowed; background-color: dark-light-diff($primary, $secondary, 90%, -60%); @@ -18,6 +20,9 @@ } #display-modes { text-align: right; + display: inline-block; + float: right; + .btn { background-color:inherit; color: dark-light-diff($primary, $secondary, 50%, -50%); diff --git a/app/serializers/post_revision_serializer.rb b/app/serializers/post_revision_serializer.rb index 6fe950739d2..5c1a05f603e 100644 --- a/app/serializers/post_revision_serializer.rb +++ b/app/serializers/post_revision_serializer.rb @@ -24,7 +24,8 @@ class PostRevisionSerializer < ApplicationSerializer :title_changes, :user_changes, :tags_changes, - :wiki + :wiki, + :can_edit # Creates a field called field_name_changes with previous and @@ -100,6 +101,10 @@ class PostRevisionSerializer < ApplicationSerializer object.post.wiki end + def can_edit + scope.can_edit?(object.post) + end + def edit_reason # only show 'edit_reason' when revisions are consecutive current["edit_reason"] if scope.can_view_hidden_post_revisions? || diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 2107e2511ff..f7beacb88ea 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1892,7 +1892,8 @@ en: hide: "Hide revision" show: "Show revision" revert: "Revert to this revision" - edit_wiki: "Edit wiki" + edit_wiki: "Edit Wiki" + edit_post: "Edit Post" comparing_previous_to_current_out_of_total: "{{previous}} {{current}} / {{total}}" displays: inline: diff --git a/test/javascripts/controllers/history-test.js.es6 b/test/javascripts/controllers/history-test.js.es6 new file mode 100644 index 00000000000..fc8bbe1f5c0 --- /dev/null +++ b/test/javascripts/controllers/history-test.js.es6 @@ -0,0 +1,28 @@ +moduleFor("controller:history"); + +test("displayEdit", function() { + const HistoryController = this.subject(); + + HistoryController.setProperties({ + model: { last_revision: 3, current_revision: 3, can_edit: false } + }); + + equal( + HistoryController.get("displayEdit"), false, + "it should not display edit button when user cannot edit the post" + ); + + HistoryController.set("model.can_edit", true); + + equal( + HistoryController.get("displayEdit"), true, + "it should display edit button when user can edit the post" + ); + + HistoryController.set("model.current_revision", 2); + + equal( + HistoryController.get("displayEdit"), false, + "it should only display the edit button on the latest revision" + ); +});