UX: Allow adding content inline to the topic map (#28053)
This commit is contained in:
parent
038e5deb2a
commit
f7d1b9cf67
|
@ -12,6 +12,7 @@ import TopicParticipants from "discourse/components/topic-map/topic-participants
|
||||||
import TopicViews from "discourse/components/topic-map/topic-views";
|
import TopicViews from "discourse/components/topic-map/topic-views";
|
||||||
import TopicViewsChart from "discourse/components/topic-map/topic-views-chart";
|
import TopicViewsChart from "discourse/components/topic-map/topic-views-chart";
|
||||||
import avatar from "discourse/helpers/bound-avatar-template";
|
import avatar from "discourse/helpers/bound-avatar-template";
|
||||||
|
import concatClass from "discourse/helpers/concat-class";
|
||||||
import number from "discourse/helpers/number";
|
import number from "discourse/helpers/number";
|
||||||
import { ajax } from "discourse/lib/ajax";
|
import { ajax } from "discourse/lib/ajax";
|
||||||
import { emojiUnescape } from "discourse/lib/text";
|
import { emojiUnescape } from "discourse/lib/text";
|
||||||
|
@ -98,6 +99,12 @@ export default class TopicMapSummary extends Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get manyStats() {
|
||||||
|
return [this.hasViews, this.hasLikes, this.hasUsers, this.hasLinks].every(
|
||||||
|
Boolean
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
get shouldShowViewsChart() {
|
get shouldShowViewsChart() {
|
||||||
return this.views.stats.length > 2;
|
return this.views.stats.length > 2;
|
||||||
}
|
}
|
||||||
|
@ -234,7 +241,13 @@ export default class TopicMapSummary extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="topic-map__stats {{if this.loneStat '--single-stat'}}">
|
<div
|
||||||
|
class={{concatClass
|
||||||
|
"topic-map__stats"
|
||||||
|
(if this.loneStat "--single-stat")
|
||||||
|
(if this.manyStats "--many-stats")
|
||||||
|
}}
|
||||||
|
>
|
||||||
<DMenu
|
<DMenu
|
||||||
@arrow={{true}}
|
@arrow={{true}}
|
||||||
@identifier="topic-map__views"
|
@identifier="topic-map__views"
|
||||||
|
@ -419,8 +432,8 @@ export default class TopicMapSummary extends Component {
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<div class="summarization-buttons">
|
{{#if @topic.has_summary}}
|
||||||
{{#if @topic.has_summary}}
|
<div class="summarization-button">
|
||||||
<DButton
|
<DButton
|
||||||
@action={{if
|
@action={{if
|
||||||
@postStream.summary
|
@postStream.summary
|
||||||
|
@ -432,8 +445,8 @@ export default class TopicMapSummary extends Component {
|
||||||
@icon={{this.topRepliesIcon}}
|
@icon={{this.topRepliesIcon}}
|
||||||
class="top-replies"
|
class="top-replies"
|
||||||
/>
|
/>
|
||||||
{{/if}}
|
</div>
|
||||||
</div>
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -862,7 +862,7 @@ module("Integration | Component | Widget | post", function (hooks) {
|
||||||
|
|
||||||
await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
|
await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
|
||||||
|
|
||||||
assert.dom(".summarization-buttons .top-replies").doesNotExist();
|
assert.dom(".summarization-button .top-replies").doesNotExist();
|
||||||
});
|
});
|
||||||
|
|
||||||
test("topic map - has top replies summary", async function (assert) {
|
test("topic map - has top replies summary", async function (assert) {
|
||||||
|
@ -872,7 +872,7 @@ module("Integration | Component | Widget | post", function (hooks) {
|
||||||
|
|
||||||
await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
|
await render(hbs`<MountWidget @widget="post" @args={{this.args}} />`);
|
||||||
|
|
||||||
assert.dom(".summarization-buttons .top-replies").exists({ count: 1 });
|
assert.dom(".summarization-button .top-replies").exists({ count: 1 });
|
||||||
});
|
});
|
||||||
|
|
||||||
test("pm map", async function (assert) {
|
test("pm map", async function (assert) {
|
||||||
|
|
|
@ -1,21 +1,17 @@
|
||||||
article {
|
.topic-map.--op {
|
||||||
// topic map under OP
|
// topic map under OP
|
||||||
.topic-map {
|
border-top: 1px solid var(--primary-low);
|
||||||
border-top: 1px solid var(--primary-low);
|
border-bottom: none;
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container.posts {
|
.topic-map.--bottom {
|
||||||
// topic map at bottom of topic
|
// topic map at bottom of topic
|
||||||
> .topic-map {
|
grid-area: posts;
|
||||||
grid-area: posts;
|
grid-row: 2;
|
||||||
grid-row: 2;
|
max-width: calc(
|
||||||
max-width: calc(
|
var(--topic-avatar-width) + var(--topic-body-width) +
|
||||||
var(--topic-avatar-width) + var(--topic-body-width) +
|
(var(--topic-body-width-padding) * 2)
|
||||||
(var(--topic-body-width-padding) * 2)
|
);
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-map {
|
.topic-map {
|
||||||
|
@ -34,6 +30,23 @@ article {
|
||||||
font-size: var(--font-down-1);
|
font-size: var(--font-down-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding-left: calc(
|
||||||
|
var(--topic-body-width-padding) + var(--topic-avatar-width)
|
||||||
|
);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
&:has(.topic-map__additional-contents *) {
|
||||||
|
column-gap: 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
.--users-summary {
|
.--users-summary {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -43,6 +56,8 @@ article {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
flex: 1 2 0;
|
flex: 1 2 0;
|
||||||
gap: 0.25em;
|
gap: 0.25em;
|
||||||
|
min-width: 2em;
|
||||||
|
width: 0;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 2em;
|
width: 2em;
|
||||||
|
@ -102,12 +117,8 @@ article {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__contents {
|
&__contents {
|
||||||
padding: 0.5em 0 0.5em
|
padding-block: 0.5em;
|
||||||
calc(var(--topic-body-width-padding) + var(--topic-avatar-width));
|
flex-grow: 1;
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
padding: 0.5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.number {
|
.number {
|
||||||
font-size: var(--font-up-1);
|
font-size: var(--font-up-1);
|
||||||
|
@ -156,16 +167,6 @@ article {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__additional-contents {
|
|
||||||
padding-left: calc(
|
|
||||||
var(--topic-body-width-padding) + var(--topic-avatar-width)
|
|
||||||
);
|
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
.controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -2221,8 +2221,8 @@ en:
|
||||||
other: "There are <b>%{count}</b> replies."
|
other: "There are <b>%{count}</b> replies."
|
||||||
buttons:
|
buttons:
|
||||||
hide: "Hide summary"
|
hide: "Hide summary"
|
||||||
generate: "Summarize with AI"
|
generate: "Summarize"
|
||||||
regenerate: "Regenerate summary"
|
regenerate: "Regenerate"
|
||||||
|
|
||||||
# This string uses the ICU Message Format. See https://meta.discourse.org/t/7035 for translation guidelines.
|
# This string uses the ICU Message Format. See https://meta.discourse.org/t/7035 for translation guidelines.
|
||||||
description_time_MF: |
|
description_time_MF: |
|
||||||
|
|
Loading…
Reference in New Issue