UX: rearrange controls in edit modals

Allows users to see the controls even after scrolling contents of edit modal.
anantgarg · Jul 15, 2019 · 90e0f1b · 90e0f1b
1 parent 1221d34
commit 90e0f1b
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 59 deletions.
diff --git a/app/assets/javascripts/discourse/templates/modal/history.hbs b/app/assets/javascripts/discourse/templates/modal/history.hbs
@@ -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}}
diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss
@@ -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 {

diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
@@ -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;
+  }
 }
diff --git a/app/assets/stylesheets/mobile/history.scss b/app/assets/stylesheets/mobile/history.scss
@@ -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;
+    }
+  }
 }