From f7d1b9cf677aacdccf1d281662872ba0ddace65a Mon Sep 17 00:00:00 2001 From: Jan Cernik <66427541+jancernik@users.noreply.github.com> Date: Thu, 25 Jul 2024 10:46:52 -0300 Subject: [PATCH] UX: Allow adding content inline to the topic map (#28053) --- .../topic-map/topic-map-summary.gjs | 23 +++++-- .../components/widgets/post-test.js | 4 +- .../common/components/topic-map.scss | 61 ++++++++++--------- config/locales/client.en.yml | 4 +- 4 files changed, 53 insertions(+), 39 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/topic-map/topic-map-summary.gjs b/app/assets/javascripts/discourse/app/components/topic-map/topic-map-summary.gjs index 6c8b9a7dee5..38ec0eea1c8 100644 --- a/app/assets/javascripts/discourse/app/components/topic-map/topic-map-summary.gjs +++ b/app/assets/javascripts/discourse/app/components/topic-map/topic-map-summary.gjs @@ -12,6 +12,7 @@ import TopicParticipants from "discourse/components/topic-map/topic-participants import TopicViews from "discourse/components/topic-map/topic-views"; import TopicViewsChart from "discourse/components/topic-map/topic-views-chart"; import avatar from "discourse/helpers/bound-avatar-template"; +import concatClass from "discourse/helpers/concat-class"; import number from "discourse/helpers/number"; import { ajax } from "discourse/lib/ajax"; 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() { return this.views.stats.length > 2; } @@ -234,7 +241,13 @@ export default class TopicMapSummary extends Component { } diff --git a/app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js b/app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js index de62c1b11df..4ac74c9b48f 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/widgets/post-test.js @@ -862,7 +862,7 @@ module("Integration | Component | Widget | post", function (hooks) { await render(hbs``); - assert.dom(".summarization-buttons .top-replies").doesNotExist(); + assert.dom(".summarization-button .top-replies").doesNotExist(); }); test("topic map - has top replies summary", async function (assert) { @@ -872,7 +872,7 @@ module("Integration | Component | Widget | post", function (hooks) { await render(hbs``); - assert.dom(".summarization-buttons .top-replies").exists({ count: 1 }); + assert.dom(".summarization-button .top-replies").exists({ count: 1 }); }); test("pm map", async function (assert) { diff --git a/app/assets/stylesheets/common/components/topic-map.scss b/app/assets/stylesheets/common/components/topic-map.scss index 20fef108ba4..cdb5ef802b5 100644 --- a/app/assets/stylesheets/common/components/topic-map.scss +++ b/app/assets/stylesheets/common/components/topic-map.scss @@ -1,21 +1,17 @@ -article { +.topic-map.--op { // topic map under OP - .topic-map { - border-top: 1px solid var(--primary-low); - border-bottom: none; - } + border-top: 1px solid var(--primary-low); + border-bottom: none; } -.container.posts { +.topic-map.--bottom { // topic map at bottom of topic - > .topic-map { - grid-area: posts; - grid-row: 2; - max-width: calc( - var(--topic-avatar-width) + var(--topic-body-width) + - (var(--topic-body-width-padding) * 2) - ); - } + grid-area: posts; + grid-row: 2; + max-width: calc( + var(--topic-avatar-width) + var(--topic-body-width) + + (var(--topic-body-width-padding) * 2) + ); } .topic-map { @@ -34,6 +30,23 @@ article { 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 { display: flex; flex-wrap: wrap; @@ -43,6 +56,8 @@ article { align-self: center; flex: 1 2 0; gap: 0.25em; + min-width: 2em; + width: 0; .avatar { width: 2em; @@ -102,12 +117,8 @@ article { } &__contents { - padding: 0.5em 0 0.5em - calc(var(--topic-body-width-padding) + var(--topic-avatar-width)); - - @media screen and (max-width: 500px) { - padding: 0.5em 0; - } + padding-block: 0.5em; + flex-grow: 1; .number { 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 { display: flex; align-items: center; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index a269a08bf37..7c5660bdc73 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -2221,8 +2221,8 @@ en: other: "There are %{count} replies." buttons: hide: "Hide summary" - generate: "Summarize with AI" - regenerate: "Regenerate summary" + generate: "Summarize" + regenerate: "Regenerate" # This string uses the ICU Message Format. See https://meta.discourse.org/t/7035 for translation guidelines. description_time_MF: |