UX: show full topic title for reply-where (#20109)
This commit is contained in:
Kris
GitHub
parent
754d1b71aa
commit
ec4ac1465e
|
|
@ -31,6 +31,10 @@ import { isTesting } from "discourse-common/config/environment";
|
|||
import { inject as service } from "@ember/service";
|
||||
import { shortDate } from "discourse/lib/formatter";
|
||||
import showModal from "discourse/lib/show-modal";
|
||||
import { categoryBadgeHTML } from "discourse/helpers/category-link";
|
||||
import renderTags from "discourse/lib/render-tags";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
||||
|
||||
async function loadDraft(store, opts = {}) {
|
||||
let { draft, draftKey, draftSequence } = opts;
|
||||
|
|
@ -929,12 +933,45 @@ export default Controller.extend({
|
|||
// --> pop the window up
|
||||
if (!force && composer.replyingToTopic) {
|
||||
const currentTopic = this.topicModel;
|
||||
const originalTopic = this.model.topic;
|
||||
|
||||
if (!currentTopic) {
|
||||
this.save(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const topicLabelContent = function (topicOption) {
|
||||
const topicClosed = topicOption.closed
|
||||
? `<span class="topic-status">${iconHTML("lock")}</span>`
|
||||
: "";
|
||||
const topicPinned = topicOption.pinned
|
||||
? `<span class="topic-status">${iconHTML("thumbtack")}</span>`
|
||||
: "";
|
||||
const topicBookmarked = topicOption.bookmarked
|
||||
? `<span class="topic-status">${iconHTML("bookmark")}</span>`
|
||||
: "";
|
||||
const topicPM =
|
||||
topicOption.archetype === "private_message"
|
||||
? `<span class="topic-status">${iconHTML("envelope")}</span>`
|
||||
: "";
|
||||
|
||||
return `<div class='topic-title'>
|
||||
<div class="topic-title__top-line">
|
||||
<span class='topic-statuses'>
|
||||
${topicPM}${topicBookmarked}${topicClosed}${topicPinned}
|
||||
</span>
|
||||
<span class='fancy-title'>
|
||||
${topicOption.fancyTitle}
|
||||
</span>
|
||||
</div>
|
||||
<div class="topic-title__bottom-line">
|
||||
${categoryBadgeHTML(topicOption.category, {
|
||||
link: false,
|
||||
})}${htmlSafe(renderTags(topicOption))}
|
||||
</div>
|
||||
</div>`;
|
||||
};
|
||||
|
||||
if (
|
||||
currentTopic.id !== composer.get("topic.id") &&
|
||||
(this.isStaffUser || !currentTopic.closed)
|
||||
|
|
@ -943,21 +980,13 @@ export default Controller.extend({
|
|||
title: I18n.t("composer.posting_not_on_topic"),
|
||||
buttons: [
|
||||
{
|
||||
label:
|
||||
I18n.t("composer.reply_original") +
|
||||
"<br/><div class='topic-title overflow-ellipsis'>" +
|
||||
this.get("model.topic.fancyTitle") +
|
||||
"</div>",
|
||||
class: "btn-primary btn-reply-on-original",
|
||||
label: topicLabelContent(originalTopic),
|
||||
class: "btn-primary btn-reply-where btn-reply-on-original",
|
||||
action: () => this.save(true),
|
||||
},
|
||||
{
|
||||
label:
|
||||
I18n.t("composer.reply_here") +
|
||||
"<br/><div class='topic-title overflow-ellipsis'>" +
|
||||
currentTopic.get("fancyTitle") +
|
||||
"</div>",
|
||||
class: "btn-reply-here",
|
||||
label: topicLabelContent(currentTopic),
|
||||
class: "btn-reply-where btn-reply-here",
|
||||
action: () => {
|
||||
composer.setProperties({ topic: currentTopic, post: null });
|
||||
this.save(true);
|
||||
|
|
@ -965,7 +994,7 @@ export default Controller.extend({
|
|||
},
|
||||
{
|
||||
label: I18n.t("composer.cancel"),
|
||||
class: "btn-flat btn-text btn-reply-where-cancel",
|
||||
class: "btn-flat btn-text btn-reply-where__cancel",
|
||||
},
|
||||
],
|
||||
class: "reply-where-modal",
|
||||
|
|
|
|||
|
|
@ -279,6 +279,12 @@
|
|||
}
|
||||
|
||||
.reply-where-modal {
|
||||
.dialog-content {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -291,19 +297,69 @@
|
|||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0.25em;
|
||||
&.dialog-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.btn-reply-on-original {
|
||||
--text-color: var(--secondary);
|
||||
}
|
||||
|
||||
&.btn-reply-where__cancel {
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.btn-reply-on-original,
|
||||
&.btn-reply-here {
|
||||
font-size: var(--font-up-1);
|
||||
line-height: var(--line-height-medium);
|
||||
font-weight: bold;
|
||||
--text-color: var(--primary);
|
||||
.discourse-no-touch & {
|
||||
&:hover {
|
||||
--text-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-reply-where {
|
||||
min-height: 3em; // for situations when there are no categories/tags
|
||||
}
|
||||
|
||||
.topic-title {
|
||||
font-weight: normal;
|
||||
.d-icon {
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fancy-title {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
.topic-title__top-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
|
||||
.topic-statuses {
|
||||
display: flex;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.topic-title__bottom-line {
|
||||
margin-top: 0.15em;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
.discourse-tags {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
.category-name,
|
||||
.discourse-tag {
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2375,8 +2375,6 @@ en:
|
|||
|
||||
save_edit: "Save Edit"
|
||||
overwrite_edit: "Overwrite Edit"
|
||||
reply_original: "Reply on Original Topic"
|
||||
reply_here: "Reply Here"
|
||||
reply: "Reply"
|
||||
cancel: "Cancel"
|
||||
create_topic: "Create Topic"
|
||||
|
|
|
|||
Loading…
Reference in New Issue