UX: Allow adding content inline to the topic map (#28053)

This commit is contained in:
Jan Cernik 2024-07-25 10:46:52 -03:00 committed by GitHub
parent 038e5deb2a
commit f7d1b9cf67
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 53 additions and 39 deletions

View File

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

View File

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

View File

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

View File

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