DEV: fix history modal code, consolidate style (#23743)

app/assets/javascripts/discourse/app/components/modal/history.hbs

@@ -1,7 +1,7 @@
 <DModal
   @title={{i18n this.modalTitleKey}}
   @closeModal={{@closeModal}}
-  class="history-modal"
+  class="history-modal {{concat '--mode-' (dasherize this.viewMode)}}"
 >
   <:body>
     <ConditionalLoadingSpinner @condition={{this.initialLoad}}>
@@ -31,6 +31,7 @@
         @bodyDiff={{this.bodyDiff}}
         @calculateBodyDiff={{this.calculateBodyDiff}}
         @titleDiff={{this.titleDiff}}
+        @viewMode={{this.viewMode}}
       />
     </ConditionalLoadingSpinner>
   </:body>

app/assets/javascripts/discourse/app/components/modal/history/revision.hbs

@@ -1,7 +1,11 @@
 <div id="revision">
   <div id="revision-details">
     {{d-icon "pencil-alt"}}
-    <LinkTo @route="user" @model={{@model.username}}>
+    <LinkTo
+      @route="user"
+      @model={{@model.username}}
+      class="revision-details__user"
+    >
       {{bound-avatar-template @model.avatar_template "small"}}
       {{@model.username}}
     </LinkTo>
@@ -11,38 +15,39 @@
     />
     <span class="date">{{bound-date @model.created_at}}</span>
     {{#if @model.edit_reason}}
-      &mdash;
       <span class="edit-reason">{{@model.edit_reason}}</span>
     {{/if}}
     {{#unless @mobileView}}
-      {{#if @model.user_changes}}
+      <span>
-        &mdash;
+        {{#if @model.user_changes}}
-        {{bound-avatar-template
+
-          @model.user_changes.previous.avatar_template
+          {{bound-avatar-template
-          "small"
+            @model.user_changes.previous.avatar_template
-        }}
+            "small"
-        {{@model.user_changes.previous.username}}
+          }}
-        &rarr;
+          {{@model.user_changes.previous.username}}
-        {{bound-avatar-template
+          &rarr;
-          @model.user_changes.current.avatar_template
+          {{bound-avatar-template
-          "small"
+            @model.user_changes.current.avatar_template
-        }}
+            "small"
-        {{@model.user_changes.current.username}}
+          }}
-      {{/if}}
+          {{@model.user_changes.current.username}}
-      {{#if @model.wiki_changes}}
+        {{/if}}
-        &mdash;
+        {{#if @model.wiki_changes}}
-        <DisabledIcon @icon="far-edit" @disabled={{@wikiDisabled}} />
+
-      {{/if}}
+          <DisabledIcon @icon="far-edit" @disabled={{@wikiDisabled}} />
-      {{#if @model.post_type_changes}}
+        {{/if}}
-        &mdash;
+        {{#if @model.post_type_changes}}
-        <DisabledIcon @icon="shield-alt" @disabled={{@postTypeDisabled}} />
+
-      {{/if}}
+          <DisabledIcon @icon="shield-alt" @disabled={{@postTypeDisabled}} />
-      {{#if @model.category_id_changes}}
+        {{/if}}
-        &mdash;
+        {{#if @model.category_id_changes}}
-        {{html-safe @previousCategory}}
+
-        &rarr;
+          {{html-safe @previousCategory}}
-        {{html-safe @currentCategory}}
+          &rarr;
-      {{/if}}
+          {{html-safe @currentCategory}}
+        {{/if}}
+      </span>
     {{/unless}}
   </div>
   {{#unless @mobileView}}

app/assets/javascripts/discourse/app/components/modal/history/revisions.hbs

@@ -45,7 +45,7 @@
           {{discourse-tag t.name extraClass=(if t.deleted "diff-del")}}
         {{/each}}
       </span>
-      {{#if (and @mobileView @previousTagChanges @currentTagChanges)}}
+      {{#if (or @mobileView (eq @viewMode "inline"))}}
         &rarr;&nbsp;
       {{/if}}
       <span class="discourse-tags">

app/assets/stylesheets/common/base/history.scss

@@ -1,34 +1,86 @@
 // styles that apply to the popup that appears when you show the edit history of a post
 
 .modal.history-modal {
+  .modal-inner-container {
+    max-width: var(--d-max-width);
+    width: 100dvw;
+  }
+  &.--mode-inline {
+    .modal-inner-container {
+      width: auto;
+    }
+  }
+
   .modal-body:not(.theme-change-modal-body) {
-    max-height: 70vh;
+    min-height: 65dvh;
+  }
+
+  .modal-footer {
+    gap: 0.5em;
+    justify-content: space-between;
   }
 
   #revision-numbers {
     display: inline-block;
-    min-width: 96px;
+    min-width: 7em;
     text-align: center;
   }
 
   #revision {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
-    padding-bottom: 0.5em;
+    gap: 0.5em 0;
     align-items: center;
+    padding-bottom: 0.5em;
     overflow: auto;
     border-bottom: 3px solid var(--primary-low);
+    @include breakpoint(tablet) {
+      padding-bottom: 0;
+    }
+    @include breakpoint(mobile-large) {
+      padding-bottom: 0.5em;
+    }
   }
 
   #revision-details {
     display: flex;
-    align-items: baseline;
+    flex-wrap: wrap;
+    align-items: center;
     gap: 0.5em;
-    .d-icon {
+    .badge-wrapper {
-      align-self: center;
+      margin: 0;
     }
   }
 
+  #display-modes {
+    .nav {
+      margin: 0;
+      padding: 0;
+      border: none;
+    }
+    @include breakpoint(tablet) {
+      width: 100%;
+      margin-top: 0.5em;
+      .nav-pills {
+        width: 100%;
+        li {
+          margin: 0;
+          flex: 1 1 auto;
+        }
+        a {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    }
+  }
+
+  .revision-details__user {
+    display: flex;
+    align-items: center;
+  }
+
   .revision__title,
   .body-diff,
   table.markdown > tbody > tr,
@@ -38,18 +90,60 @@
     gap: 0 var(--gap-width);
   }
 
+  .mobile-view & {
+    .-tag-revisions {
+      display: block;
+    }
+    .discourse-tags {
+      display: inline;
+      font-size: var(--font-down-1);
+    }
+  }
+
+  .inline-diff {
+    width: 100%;
+    max-width: var(--modal-max-width);
+  }
+
+  pre {
+    display: flex;
+  }
+
+  pre code {
+    word-wrap: anywhere; // prevent long strings from breaking modal width
+    min-width: 0;
+    overflow: auto;
+    flex: 0 1 auto;
+  }
+
   .revision__title {
     margin: 0;
     line-height: var(--line-height-medium);
   }
 
-  .-tag-revisions span,
+  &:not(.--mode-inline) {
+    .-tag-revisions span {
+      flex: 0 1 50%;
+      min-width: 0;
+      align-self: start;
+    }
+  }
+
   .revision-content {
-    flex: 0 1 calc(50% - (var(--gap-width) / 2));
+    flex: 0 1 50%;
     min-width: 0;
   }
 
-  table.markdown {
+  .markdown {
+    font-family: monospace;
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    td {
+      word-wrap: anywhere;
+      white-space: pre-wrap;
+      flex: 0 1 50%;
+    }
     tbody {
       border: none;
     }
@@ -58,9 +152,15 @@
   #revision-controls {
     display: flex;
     align-items: center;
+
     .btn {
       margin: 0;
     }
+
+    @include breakpoint(tablet) {
+      width: 100%;
+      justify-content: space-between;
+    }
   }
 
   [class^="revision-controls--"] {
@@ -69,6 +169,17 @@
   }
 
   #revisions {
+    word-wrap: break-word;
+    .badge-wrapper {
+      margin: 0;
+    }
+    table {
+      margin-top: 10px;
+      tr {
+        border: none;
+      }
+    }
+
     .row:first-of-type {
       margin-top: 10px;
     }
@@ -95,14 +206,48 @@
     gap: 0.5em;
     button {
       margin: 0;
+      flex: 1 1 auto;
+      min-width: 0;
+      .d-button-label {
+        @include ellipsis;
+      }
+    }
+    @include breakpoint(tablet) {
+      width: 100%;
+      flex: 1 1 100%;
+      button {
+        font-size: var(--font-down-1);
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    box-sizing: border-box;
+  }
+
+  ins,
+  .diff-ins,
+  del,
+  .diff-del {
+    color: var(--primary);
+    text-decoration: none;
+    code,
+    img {
+      border: 2px solid;
+    }
+    a {
+      text-decoration: none;
     }
   }
 
   ins,
   .diff-ins {
+    background: var(--success-low);
     code,
     img {
-      border: 2px solid var(--success);
+      border-color: var(--success);
     }
     img {
       opacity: 0.75;
@@ -110,31 +255,16 @@
     }
     a {
       color: var(--success);
-      text-decoration: none;
     }
   }
-  img.diff-ins,
+
-  code.diff-ins {
-    border: 2px solid var(--success);
-  }
-  img.diff-ins {
-    opacity: 0.75;
-    filter: alpha(opacity=75);
-  }
-  .diff-ins {
-    color: var(--primary);
-    background: var(--success-low);
-  }
-  ins {
-    color: var(--primary);
-    background: var(--success-low);
-    text-decoration: none;
-  }
   del,
   .diff-del {
+    background: var(--danger-low);
+    text-decoration: none;
     code,
     img {
-      border: 2px solid var(--danger);
+      border-color: var(--danger);
     }
     img {
       opacity: 0.5;
@@ -142,33 +272,14 @@
     }
     a {
       color: var(--danger);
-      text-decoration: none;
     }
   }
-  img.diff-del,
+
-  code.diff-del {
-    border: 2px solid var(--danger);
-  }
-  img.diff-del {
-    opacity: 0.5;
-    filter: alpha(opacity=50);
-  }
-  .diff-del {
-    color: var(--primary);
-    background: var(--danger-low);
-    text-decoration: none;
-  }
-  del {
-    color: var(--primary);
-    background: var(--danger-low);
-    text-decoration: none;
-  }
   span.date {
     font-weight: bold;
   }
   span.edit-reason {
     background-color: var(--highlight-bg);
-    padding: 3px 5px 5px 5px;
   }
   .d-icon-ban {
     color: var(--danger);

app/assets/stylesheets/desktop/_index.scss

@@ -6,7 +6,6 @@
 @import "edit-category";
 @import "group";
 @import "header";
-@import "history";
 @import "latest-topic-list";
 @import "login";
 @import "menu-panel";

app/assets/stylesheets/desktop/history.scss

@@ -1,53 +0,0 @@
-// styles that apply to the popup that appears when you show the edit history of a post
-
-.modal.history-modal {
-  .modal-inner-container {
-    max-width: var(--d-max-width);
-  }
-  .modal-body {
-    height: 70vh;
-  }
-
-  #revisions {
-    word-wrap: break-word;
-    table {
-      margin-top: 10px;
-    }
-  }
-  #display-modes {
-    .nav {
-      margin: 0;
-      padding: 0;
-      border: none;
-    }
-  }
-
-  img {
-    max-width: 670px;
-    height: auto;
-  }
-  .inline-diff {
-    width: 670px;
-  }
-  .markdown {
-    font-family: monospace;
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    td {
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
-  }
-  .revision-content,
-  .markdown {
-    img {
-      max-width: 100%;
-      box-sizing: border-box;
-    }
-  }
-
-  .modal-footer {
-    justify-content: space-between;
-  }
-}

app/assets/stylesheets/mobile/_index.scss

@@ -14,7 +14,6 @@
 @import "emoji";
 @import "group";
 @import "header";
-@import "history";
 @import "lightbox";
 @import "login";
 @import "menu-panel";

app/assets/stylesheets/mobile/history.scss

@@ -1,37 +0,0 @@
-.modal.history-modal {
-  .modal-body {
-    height: 62vh;
-  }
-  .modal-inner-container {
-    min-height: 400px;
-  }
-
-  img {
-    box-sizing: border-box;
-    max-width: 100%;
-    height: auto;
-  }
-  .revision-content {
-    table {
-      table-layout: fixed;
-      width: 100%;
-      word-wrap: break-word;
-    }
-  }
-
-  #revision-controls {
-    width: 100%;
-    justify-content: space-between;
-    margin-bottom: 0.5em;
-  }
-
-  #revision-footer-buttons {
-    button {
-      @extend .btn-small;
-    }
-  }
-
-  .-tag-revisions {
-    display: block;
-  }
-}