Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-18 01:05:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: History controls should use nav-pill styles (#13904)

Browse Source
This commit is contained in:
Kris 2021-07-30 19:52:15 -04:00 committed by GitHub
parent d2ab5ab53f
commit 00820f0fad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/discourse/app/controllers/history.js
View File

@ -211,17 +211,17 @@ export default Controller.extend(ModalFunctionality, {
@discourseComputed("displayingInline") @discourseComputed("displayingInline")
inlineClass(displayingInline) { inlineClass(displayingInline) {
return displayingInline ? "btn-danger" : "btn-flat"; return displayingInline ? "active" : "";
}, },
@discourseComputed("displayingSideBySide") @discourseComputed("displayingSideBySide")
sideBySideClass(displayingSideBySide) { sideBySideClass(displayingSideBySide) {
return displayingSideBySide ? "btn-danger" : "btn-flat"; return displayingSideBySide ? "active" : "";
}, },
@discourseComputed("displayingSideBySideMarkdown") @discourseComputed("displayingSideBySideMarkdown")
sideBySideMarkdownClass(displayingSideBySideMarkdown) { sideBySideMarkdownClass(displayingSideBySideMarkdown) {
return displayingSideBySideMarkdown ? "btn-danger" : "btn-flat"; return displayingSideBySideMarkdown ? "active" : "";
}, },
@discourseComputed("model.category_id_changes") @discourseComputed("model.category_id_changes")

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

@ -26,27 +26,30 @@
{{/if}} {{/if}}
{{/unless}} {{/unless}}
</div> </div>
{{#unless site.mobileView}}
<div id="display-modes"> <div id="display-modes">
{{d-button action=(action "displayInline") <ul class="nav nav-pills">
icon="far-square" <li>
label="post.revisions.displays.inline.button" <a href class={{inlineClass}} {{action "displayInline"}} title={{i18n "post.revisions.displays.inline.title"}}>
title="post.revisions.displays.inline.title" {{d-icon "far-square"}}
class=inlineClass}} {{i18n "post.revisions.displays.inline.button"}}
{{#unless site.mobileView}} </a>
{{d-button action=(action "displaySideBySide") </li>
icon="columns" <li>
label="post.revisions.displays.side_by_side.button" <a href class={{sideBySideClass}} {{action "displaySideBySide"}} title={{i18n "post.revisions.displays.side_by_side.title"}}>
title="post.revisions.displays.side_by_side.title" {{d-icon "columns"}}
class=sideBySideClass}} {{i18n "post.revisions.displays.side_by_side.button"}}
</a>
{{d-button action=(action "displaySideBySideMarkdown") </li>
icon="columns" <li>
label="post.revisions.displays.side_by_side_markdown.button" <a href class={{sideBySideMarkdownClass}} {{action "displaySideBySideMarkdown"}} title={{i18n "post.revisions.displays.side_by_side_markdown.title"}}>
title="post.revisions.displays.side_by_side_markdown.title" {{d-icon "columns"}}
class=sideBySideMarkdownClass}} {{i18n "post.revisions.displays.side_by_side_markdown.button"}}
{{/unless}} </a>
</div> </li>
</ul>
</div>
{{/unless}}
</div> </div>
<div id="revisions" data-post-id={{model.post_id}} class={{hiddenClasses}}> <div id="revisions" data-post-id={{model.post_id}} class={{hiddenClasses}}>
{{#if model.title_changes}} {{#if model.title_changes}}

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

@ -20,6 +20,7 @@
#revision { #revision {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: 0.5em;
} }
#revisions { #revisions {
@ -28,6 +29,14 @@
margin-top: 10px; margin-top: 10px;
} }
} }
#display-modes {
.nav {
margin: 0;
padding: 0;
border: none;
}
}
img { img {
max-width: 670px; max-width: 670px;
height: auto; height: auto;

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

@ -11,9 +11,6 @@
#revisions { #revisions {
max-width: 90vw; max-width: 90vw;
} }
#display-modes {
display: none;
}
#revision-numbers { #revision-numbers {
line-height: $line-height-large; line-height: $line-height-large;
} }