IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06: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

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

@ -1,45 +1,5 @@
{{#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>
{{#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"
label="post.revisions.displays.inline.button"
title="post.revisions.displays.inline.title"
class=inlineClass}}
{{#unless site.mobileView}}
{{d-button action=(action "displaySideBySide")
icon="columns"
label="post.revisions.displays.side_by_side.button"
title="post.revisions.displays.side_by_side.title"
class=sideBySideClass}}
{{d-button action=(action "displaySideBySideMarkdown")
icon="columns"
label="post.revisions.displays.side_by_side_markdown.button"
title="post.revisions.displays.side_by_side_markdown.title"
class=sideBySideMarkdownClass}}
{{/unless}}
</div>
</div>
<div id="revision-details">
{{d-icon "pencil-alt"}}
{{#link-to 'user' model.username}}
@ -65,6 +25,28 @@
{{/if}}
{{/unless}}
</div>
<div id="display-modes">
{{d-button action=(action "displayInline")
icon="square-o"
label="post.revisions.displays.inline.button"
title="post.revisions.displays.inline.title"
class=inlineClass}}
{{#unless site.mobileView}}
{{d-button action=(action "displaySideBySide")
icon="columns"
label="post.revisions.displays.side_by_side.button"
title="post.revisions.displays.side_by_side.title"
class=sideBySideClass}}
{{d-button action=(action "displaySideBySideMarkdown")
icon="columns"
label="post.revisions.displays.side_by_side_markdown.button"
title="post.revisions.displays.side_by_side_markdown.title"
class=sideBySideMarkdownClass}}
{{/unless}}
</div>
</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;
}
}
}