From 00820f0fad94c69809d6bcc1904ecffcadac1d25 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 30 Jul 2021 19:52:15 -0400
Subject: [PATCH] UX: History controls should use nav-pill styles  (#13904)

---
 .../discourse/app/controllers/history.js      |  6 +--
 .../discourse/app/templates/modal/history.hbs | 45 ++++++++++---------
 app/assets/stylesheets/desktop/history.scss   |  9 ++++
 app/assets/stylesheets/mobile/history.scss    |  3 --
 4 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/history.js b/app/assets/javascripts/discourse/app/controllers/history.js
index b6fd92cc7e8..0a57bdfd89a 100644
--- a/app/assets/javascripts/discourse/app/controllers/history.js
+++ b/app/assets/javascripts/discourse/app/controllers/history.js
@@ -211,17 +211,17 @@ export default Controller.extend(ModalFunctionality, {
 
   @discourseComputed("displayingInline")
   inlineClass(displayingInline) {
-    return displayingInline ? "btn-danger" : "btn-flat";
+    return displayingInline ? "active" : "";
   },
 
   @discourseComputed("displayingSideBySide")
   sideBySideClass(displayingSideBySide) {
-    return displayingSideBySide ? "btn-danger" : "btn-flat";
+    return displayingSideBySide ? "active" : "";
   },
 
   @discourseComputed("displayingSideBySideMarkdown")
   sideBySideMarkdownClass(displayingSideBySideMarkdown) {
-    return displayingSideBySideMarkdown ? "btn-danger" : "btn-flat";
+    return displayingSideBySideMarkdown ? "active" : "";
   },
 
   @discourseComputed("model.category_id_changes")
diff --git a/app/assets/javascripts/discourse/app/templates/modal/history.hbs b/app/assets/javascripts/discourse/app/templates/modal/history.hbs
index f86f98a0462..3d910823d2c 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/history.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/history.hbs
@@ -26,27 +26,30 @@
         {{/if}}
       {{/unless}}
     </div>
-
-    <div id="display-modes">
-      {{d-button action=(action "displayInline")
-          icon="far-square"
-          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>
+    {{#unless site.mobileView}}
+      <div id="display-modes">
+        <ul class="nav nav-pills">
+          <li>
+            <a href class={{inlineClass}} {{action "displayInline"}} title={{i18n "post.revisions.displays.inline.title"}}>
+              {{d-icon "far-square"}}
+              {{i18n "post.revisions.displays.inline.button"}}
+            </a>
+          </li>
+          <li>
+            <a href class={{sideBySideClass}} {{action "displaySideBySide"}} title={{i18n "post.revisions.displays.side_by_side.title"}}>
+              {{d-icon "columns"}}
+              {{i18n "post.revisions.displays.side_by_side.button"}}
+            </a>
+          </li>
+          <li>
+            <a href class={{sideBySideMarkdownClass}} {{action "displaySideBySideMarkdown"}} title={{i18n "post.revisions.displays.side_by_side_markdown.title"}}>
+              {{d-icon "columns"}}
+              {{i18n "post.revisions.displays.side_by_side_markdown.button"}}
+            </a>
+          </li>
+        </ul>
+      </div>
+    {{/unless}}
   </div>
   <div id="revisions" data-post-id={{model.post_id}} class={{hiddenClasses}}>
     {{#if model.title_changes}}
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index ca0e10b5c20..acb91f6ccc8 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/app/assets/stylesheets/desktop/history.scss
@@ -20,6 +20,7 @@
   #revision {
     display: flex;
     justify-content: space-between;
+    padding-bottom: 0.5em;
   }
 
   #revisions {
@@ -28,6 +29,14 @@
       margin-top: 10px;
     }
   }
+  #display-modes {
+    .nav {
+      margin: 0;
+      padding: 0;
+      border: none;
+    }
+  }
+
   img {
     max-width: 670px;
     height: auto;
diff --git a/app/assets/stylesheets/mobile/history.scss b/app/assets/stylesheets/mobile/history.scss
index 662baef2796..d70090e3099 100644
--- a/app/assets/stylesheets/mobile/history.scss
+++ b/app/assets/stylesheets/mobile/history.scss
@@ -11,9 +11,6 @@
   #revisions {
     max-width: 90vw;
   }
-  #display-modes {
-    display: none;
-  }
   #revision-numbers {
     line-height: $line-height-large;
   }