BUGFIX: only resize revision history UI after it has loaded the revision

This commit is contained in:
Régis Hanol 2014-03-13 19:19:42 +01:00
parent e0dee0f10c
commit d450c7e0de
3 changed files with 44 additions and 38 deletions

View File

@ -22,11 +22,13 @@ Discourse.HistoryController = Discourse.ObjectController.extend(Discourse.ModalF
createdAtDate: function() { return moment(this.get("created_at")).format("LLLL"); }.property("created_at"),
previousVersionNumber: function() { return this.get("version") - 1; }.property("version"),
currentVersionNumber: Em.computed.alias("version"),
previousVersion: function() { return this.get("version") - 1; }.property("version"),
isFirstVersion: Em.computed.equal("version", 2),
isLastVersion: Discourse.computed.propertyEqual("version", "revisions_count"),
displayGoToFirst: Em.computed.gt("version", 3),
displayGoToPrevious: Em.computed.gt("version", 2),
displayRevisions: Em.computed.gt("revisions_count", 2),
displayGoToNext: function() { return this.get("version") < this.get("revisions_count"); }.property("version", "revisions_count"),
displayGoToLast: function() { return this.get("version") < this.get("revisions_count") - 1; }.property("version", "revisions_count"),
displayingInline: Em.computed.equal("viewMode", "inline"),
displayingSideBySide: Em.computed.equal("viewMode", "side_by_side"),

View File

@ -1,38 +1,35 @@
<div class="modal-body">
{{#if loading}}
{{i18n loading}}
{{else}}
<div>
<div id="revision-controls">
<button class="btn standard" title="{{i18n post.revisions.controls.first}}" {{action loadFirstVersion}} {{bind-attr disabled=isFirstVersion}}><i class="fa fa-fast-backward"></i></button>
<button class="btn standard" title="{{i18n post.revisions.controls.previous}}" {{action loadPreviousVersion}} {{bind-attr disabled=isFirstVersion}}><i class="fa fa-backward"></i></button>
{{{i18n post.revisions.controls.comparing_previous_to_current_out_of_total previous=previousVersionNumber current=currentVersionNumber total=revisions_count}}}
<button class="btn standard" title="{{i18n post.revisions.controls.next}}" {{action loadNextVersion}} {{bind-attr disabled=isLastVersion}}><i class="fa fa-forward"></i></button>
<button class="btn standard" title="{{i18n post.revisions.controls.last}}" {{action loadLastVersion}} {{bind-attr disabled=isLastVersion}}><i class="fa fa-fast-forward"></i></button>
<div>
<div id="revision-controls">
{{#if displayGoToFirst}}<button class="btn standard" title="{{i18n post.revisions.controls.first}}" {{bind-attr disabled=loading}} {{action loadFirstVersion}}><i class="fa fa-fast-backward"></i></button>{{/if}}
{{#if displayGoToPrevious}}<button class="btn standard" title="{{i18n post.revisions.controls.previous}}" {{bind-attr disabled=loading}} {{action loadPreviousVersion}}><i class="fa fa-backward"></i></button>{{/if}}
{{#if displayRevisions}}{{{i18n post.revisions.controls.comparing_previous_to_current_out_of_total previous=previousVersion current=version total=revisions_count}}}{{/if}}
{{#if displayGoToNext}}<button class="btn standard" title="{{i18n post.revisions.controls.next}}" {{bind-attr disabled=loading}} {{action loadNextVersion}}><i class="fa fa-forward"></i></button>{{/if}}
{{#if displayGoToLast}}<button class="btn standard" title="{{i18n post.revisions.controls.last}}" {{bind-attr disabled=loading}} {{action loadLastVersion}}><i class="fa fa-fast-forward"></i></button>{{/if}}
</div>
{{#if loading}}<div id='revision-loading'><i class='fa fa-spinner fa-spin'></i>{{i18n loading}}</div>{{/if}}
<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>
{{#unless Discourse.Mobile.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>
{{/unless}}
</div>
</div>
<div id="revision-details">
{{i18n post.revisions.details.edited_by}} {{avatar this imageSize="small"}} {{username}} <span class="date">{{unboundDate path="created_at" leaveAgo="true"}}</span> {{#if edit_reason}} &mdash; <span class="edit-reason">{{edit_reason}}</span>{{/if}}
</div>
<div id="revisions">
{{#if title_changes}}
<div class="row">
<h2>{{{title_diff}}}</h2>
</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>
{{#unless Discourse.Mobile.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>
{{/unless}}
{{/if}}
{{#if category_changes}}
<div class="row">
{{{category_diff}}}
</div>
</div>
<div id="revision-details">
{{i18n post.revisions.details.edited_by}} {{avatar this imageSize="small"}} {{username}} <span class="date">{{unboundDate path="created_at" leaveAgo="true"}}</span> {{#if edit_reason}} &mdash; <span class="edit-reason">{{edit_reason}}</span>{{/if}}
</div>
<div id="revisions">
{{#if title_changes}}
<div class="row">
<h2>{{{title_diff}}}</h2>
</div>
{{/if}}
{{#if category_changes}}
<div class="row">
{{{category_diff}}}
</div>
{{/if}}
{{{body_diff}}}
</div>
{{/if}}
{{/if}}
{{{body_diff}}}
</div>
</div>

View File

@ -17,6 +17,13 @@
#display-modes {
text-align: right;
}
#revision-loading {
float: left;
margin: 5px 0 0 10px;
.fa {
margin-right: 7px;
}
}
#revision-details {
background-color: lighten($secondary_background_color, 76%);
padding: 5px;