Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Kris 2023-10-03 09:42:09 -04:00 committed by GitHub
parent c9db9e9319
commit 2cf1e15025
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 198 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/app/components/modal/history.hbs
View File

@ -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>

65
app/assets/javascripts/discourse/app/components/modal/history/revision.hbs
View File

@ -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}}
&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;
<DisabledIcon @icon="far-edit" @disabled={{@wikiDisabled}} />
{{/if}}
{{#if @model.post_type_changes}}
&mdash;
<DisabledIcon @icon="shield-alt" @disabled={{@postTypeDisabled}} />
{{/if}}
{{#if @model.category_id_changes}}
&mdash;
{{html-safe @previousCategory}}
&rarr;
{{html-safe @currentCategory}}
{{/if}}
<span>
{{#if @model.user_changes}}
{{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}}
<DisabledIcon @icon="far-edit" @disabled={{@wikiDisabled}} />
{{/if}}
{{#if @model.post_type_changes}}
<DisabledIcon @icon="shield-alt" @disabled={{@postTypeDisabled}} />
{{/if}}
{{#if @model.category_id_changes}}
{{html-safe @previousCategory}}
&rarr;
{{html-safe @currentCategory}}
{{/if}}
</span>
{{/unless}}
</div>
{{#unless @mobileView}}

2
app/assets/javascripts/discourse/app/components/modal/history/revisions.hbs
View File

@ -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">

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

@ -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 {
align-self: center;
.badge-wrapper {
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);

1
app/assets/stylesheets/desktop/_index.scss
View File

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

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

@ -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;
}
}

1
app/assets/stylesheets/mobile/_index.scss
View File

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

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

@ -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;
}
}