Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-16 16:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: rearrange controls in edit modals

Browse Source 
Allows users to see the controls even after scrolling contents of edit modal.
This commit is contained in:
Penar Musaraj 2019-07-15 13:44:44 -04:00
parent 1221d34284
commit 90e0f1b378
4 changed files with 69 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
app/assets/javascripts/discourse/templates/modal/history.hbs
View File

@ -1,24 +1,31 @@
{{#d-modal-body title="history" maxHeight="70%"}}
<div id="revision">
<div id="revision-controls">
{{d-button class="btn-default" action=(action "loadFirstVersion") icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}}
{{d-button class="btn-default" action=(action "loadPreviousVersion") icon="backward" title="post.revisions.controls.previous" disabled=loadPreviousDisabled}}
<div id="revision-numbers" class="{{unless displayRevisions 'invisible'}}">
{{#conditional-loading-spinner condition=loading size="small"}}
{{{revisionsText}}}
{{/conditional-loading-spinner}}
</div>
{{d-button class="btn-default" action=(action "loadNextVersion") icon="forward" title="post.revisions.controls.next" disabled=loadNextDisabled}}
{{d-button class="btn-default" action=(action "loadLastVersion") icon="fast-forward" title="post.revisions.controls.last" disabled=loadLastDisabled}}
<div id="revision-details">
{{d-icon "pencil-alt"}}
{{#link-to 'user' model.username}}
{{bound-avatar-template model.avatar_template "small"}} {{model.username}}
{{/link-to}}
<span class="date">{{bound-date model.created_at}}</span>
{{#if model.edit_reason}}
&mdash; <span class="edit-reason">{{model.edit_reason}}</span>
{{/if}}
{{#unless site.mobileView}}
{{#if model.user_changes}}
&mdash; {{bound-avatar-template model.user_changes.previous.avatar_template "small"}} {{model.user_changes.previous.username}}
&rarr; {{bound-avatar-template model.user_changes.current.avatar_template "small"}} {{model.user_changes.current.username}}
{{/if}}
{{#if model.wiki_changes}}
&mdash; {{disabled-icon icon="pencil-square-o" disabled=wikiDisabled}}
{{/if}}
{{#if model.post_type_changes}}
&mdash; {{disabled-icon icon="shield-alt" disabled=postTypeDisabled}}
{{/if}}
{{#if model.category_id_changes}}
&mdash; {{{previousCategory}}} &rarr; {{{currentCategory}}}
{{/if}}
{{/unless}}
</div>
{{#if displayEdit}}
{{d-button action=(action "editPost")
class="btn-default"
icon="pencil-alt"
label=editButtonLabel}}
{{/if}}
<div id="display-modes">
{{d-button action=(action "displayInline")
icon="square-o"
@ -40,31 +47,6 @@
{{/unless}}
</div>
</div>
<div id="revision-details">
{{d-icon "pencil-alt"}}
{{#link-to 'user' model.username}}
{{bound-avatar-template model.avatar_template "small"}} {{model.username}}
{{/link-to}}
<span class="date">{{bound-date model.created_at}}</span>
{{#if model.edit_reason}}
&mdash; <span class="edit-reason">{{model.edit_reason}}</span>
{{/if}}
{{#unless site.mobileView}}
{{#if model.user_changes}}
&mdash; {{bound-avatar-template model.user_changes.previous.avatar_template "small"}} {{model.user_changes.previous.username}}
&rarr; {{bound-avatar-template model.user_changes.current.avatar_template "small"}} {{model.user_changes.current.username}}
{{/if}}
{{#if model.wiki_changes}}
&mdash; {{disabled-icon icon="pencil-square-o" disabled=wikiDisabled}}
{{/if}}
{{#if model.post_type_changes}}
&mdash; {{disabled-icon icon="shield-alt" disabled=postTypeDisabled}}
{{/if}}
{{#if model.category_id_changes}}
&mdash; {{{previousCategory}}} &rarr; {{{currentCategory}}}
{{/if}}
{{/unless}}
</div>
<div id="revisions" data-post-id="{{model.post_id}}" class={{hiddenClasses}}>
{{#if model.title_changes}}
<div class="row">
@ -124,6 +106,26 @@
{{/d-modal-body}}
{{#if topicController}}
<div class="modal-footer">
<div id="revision-controls">
{{d-button class="btn-default" action=(action "loadFirstVersion") icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}}
{{d-button class="btn-default" action=(action "loadPreviousVersion") icon="backward" title="post.revisions.controls.previous" disabled=loadPreviousDisabled}}
<div id="revision-numbers" class="{{unless displayRevisions 'invisible'}}">
{{#conditional-loading-spinner condition=loading size="small"}}
{{{revisionsText}}}
{{/conditional-loading-spinner}}
</div>
{{d-button class="btn-default" action=(action "loadNextVersion") icon="forward" title="post.revisions.controls.next" disabled=loadNextDisabled}}
{{d-button class="btn-default" action=(action "loadLastVersion") icon="fast-forward" title="post.revisions.controls.last" disabled=loadLastDisabled}}
</div>
<div id="revision-footer-buttons">
{{#if displayEdit}}
{{d-button action=(action "editPost")
icon="pencil-alt"
class="btn-default"
label=editButtonLabel}}
{{/if}}
{{#if displayRevert}}
{{d-button action=(action "revertToVersion") icon="undo" label="post.revisions.controls.revert" class="btn-danger" disabled=loading}}
{{/if}}
@ -135,12 +137,6 @@
{{#if displayShow}}
{{d-button action=(action "showVersion") icon="far-eye" label="post.revisions.controls.show" class="btn-default" disabled=loading}}
{{/if}}
{{#if displayEdit}}
{{d-button action=(action "editPost")
icon="pencil-alt"
class="btn-default"
label=editButtonLabel}}
{{/if}}
</div>
</div>
{{/if}}

7
app/assets/stylesheets/common/base/history.scss
View File

@ -9,12 +9,9 @@
#revision {
overflow: auto;
border-bottom: 3px solid $primary-low;
}
#revision-controls {
display: inline-block;
margin-bottom: 5px;
}
table.markdown > tbody > tr > td,
.revision-content {
width: 47.5%;
@ -27,8 +24,6 @@
#revision-details {
padding: 5px;
margin-top: 10px;
border-bottom: 3px solid $primary-low;
}
#revisions .row:first-of-type {

13
app/assets/stylesheets/desktop/history.scss
View File

@ -16,10 +16,10 @@
background-color: $danger-medium;
}
}
#display-modes {
text-align: right;
display: inline-block;
float: right;
#revision {
display: flex;
justify-content: space-between;
}
#revisions {
@ -59,4 +59,9 @@
.modal-header {
height: 42px;
}
.modal-footer {
display: flex;
justify-content: space-between;
}
}

14
app/assets/stylesheets/mobile/history.scss
View File

@ -28,4 +28,18 @@
word-wrap: break-word;
}
}
.modal-footer {
text-align: center;
}
#revision-controls {
margin-bottom: 5px;
}
#revision-footer-buttons {
button {
@extend .btn-small;
}
}
}