From 7bc7ad45bbead3785db89ac8fe37633851b213cb Mon Sep 17 00:00:00 2001 From: Jan Cernik <66427541+jancernik@users.noreply.github.com> Date: Wed, 8 May 2024 13:00:17 -0300 Subject: [PATCH] UX: Merge the redesign experiment for embedded replies (#26876) This PR merges the [design experiment](https://meta.discourse.org/t/embedded-replies-feedback/290538) based on the [Custom embedded replies component](https://meta.discourse.org/t/custom-embedded-replies/272670) created by [Don](https://meta.discourse.org/u/don/summary) --------- Co-authored-by: Jordan Vidrine --- .../discourse/app/widgets/embedded-post.js | 3 +- .../stylesheets/desktop/topic-post.scss | 184 +++++++++++++++--- app/assets/stylesheets/mobile/topic-post.scss | 116 ++++++++++- config/locales/client.en.yml | 1 + 4 files changed, 270 insertions(+), 34 deletions(-) diff --git a/app/assets/javascripts/discourse/app/widgets/embedded-post.js b/app/assets/javascripts/discourse/app/widgets/embedded-post.js index 4478f9abf0a..757e9408f93 100644 --- a/app/assets/javascripts/discourse/app/widgets/embedded-post.js +++ b/app/assets/javascripts/discourse/app/widgets/embedded-post.js @@ -8,7 +8,7 @@ createWidget("post-link-arrow", { tagName: "div.post-link-arrow", template: hbs` - {{#if attrs.above}} @@ -16,6 +16,7 @@ createWidget("post-link-arrow", { {{else}} {{d-icon "arrow-down"}} {{/if}} + {{i18n "topic.jump_reply_button"}} `, }); diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 093e0a2484a..1e446d9ddd9 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -104,11 +104,31 @@ nav.post-controls { } } .show-replies { - margin-left: calc( - var(--topic-body-width-padding) * -1 - ); // negates padding-left on .cooked, for visual alignment + display: flex; + align-items: center; + margin-left: 0; + border-radius: var(--d-button-border-radius); + .topic-post & { + margin-right: 0.5em; + } + white-space: nowrap; .d-icon { - margin-right: var(--control-icon-space); + margin-inline: var(--control-icon-space); + margin-left: 0; + } + &[aria-expanded="true"] { + background: var(--primary-low); + color: var(--primary-high); + box-shadow: 0px 0px 0px 1px var(--primary-300); + z-index: 1; + .d-icon { + color: var(--primary-high); + } + &:hover, + &:focus { + background: var(--primary-300); + color: var(--primary); + } } } } @@ -175,42 +195,144 @@ pre.codeblock-buttons:hover { } } } - } // bottom means "reply expansion" below a post - &.bottom { - border-top: none; - margin-bottom: 20px; - &.hidden { - display: block; - opacity: 0; - } } + + // bottom means "reply expansion" below a post &.bottom { - .collapse-up { - transform: translate(-50%, -164%); - } - .row { - padding-bottom: 0.5em; - .topic-avatar, - .topic-body { - border-top: 1px solid var(--primary-low); + position: relative; + max-width: calc(100% - 66px); + margin-bottom: 30px; + border: none; + > div { + position: relative; + margin-bottom: 1.5em; + &:last-of-type { + margin-bottom: 0; + .row { + // Main reply line + &:before { + content: ""; + position: absolute; + top: -22px; + width: 1px; + height: calc(100% + 1.25em); + background: var(--primary-300); + left: 32px; + } + } + } + .row { + padding-bottom: 0.5em; + // Main reply line + &:before { + content: ""; + position: absolute; + top: -22px; + width: 1px; + height: calc(100% + 1.5em); + background: var(--primary-300); + left: 32px; + } + .topic-avatar { + border-top: none; + padding-left: 9px; + position: relative; + } + .topic-body { + border-top: none; + padding-bottom: 2.5em; + .topic-meta-data { + position: unset; + .post-link-arrow { + position: absolute; + bottom: 0.75em; + .archetype-private_message & { + bottom: 0; + } + .post-info.arrow { + display: block; + margin-right: 0; + .d-icon { + margin-left: 0; + } + &:hover, + &:focus { + color: var(--primary-high); + } + } + } + } + .cooked { + margin-top: 0.25em; + padding-top: 0.5em; + } + } + } + &.hidden { + display: block; + opacity: 0; } } - } // top means "in reply to expansion" above a post - &.top { - border-bottom: none; - .collapse-down { - transform: translate(-50%, 55%); + .collapse-up { + transform: translate(-50%, -164%); + background: var(--primary-low); + color: var(--primary-high); + border: 1px solid var(--primary-300); + padding: 6px; + left: 32px; + bottom: -3em; + z-index: 1; + .archetype-private_message & { + display: flex; + } + .d-icon { + transform: scale(0.871); + } + .discourse-no-touch & { + &:hover, + &:focus { + color: var(--primary); + background: var(--primary-300); + } + } + } + + .topic-avatar { + padding-left: 1em; + } + } + + // top means "in reply to expansion" above a post + &.top { + margin-left: 0px; + border: none; + .collapse-down { + transform: translate(17%, 230%); + z-index: 1; } - margin-left: var(--topic-avatar-width); width: calc( var(--topic-body-width) + (var(--topic-body-width-padding) * 2) + var(--topic-avatar-width) - (var(--topic-avatar-width) + 2px) ); // 2px accounts for left and right borders .row { - border-bottom: none; - .topic-avatar, + .topic-body, + .topic-avatar { + border-top: none; + } + .topic-avatar { + padding-left: 0; + } .topic-body { - border-top: 1px solid var(--primary-low); + overflow: visible; + &::before { + content: ""; + position: absolute; + top: 16px; + width: 1px; + height: calc(100% + 1.5em); + background: var(--primary-300); + left: -22px; + } } } } @@ -503,7 +625,7 @@ blockquote { } .time-gap + .topic-post .embedded-posts.top { - border-bottom: 1px solid var(--primary-low); + border-bottom: none; } .posts-wrapper { @@ -625,7 +747,7 @@ span.highlighted { } .topic-post.sticky-avatar { - .topic-avatar { + > article > .row > .topic-avatar { position: sticky; top: calc(var(--header-offset) - 0.25em); margin-bottom: 25px; diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 7406e6a4e4b..dc623e3191d 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -71,6 +71,34 @@ nav.post-controls { } } } + + .show-replies { + display: flex; + align-items: center; + padding: 9px; + border-radius: var(--d-button-border-radius); + + .d-icon { + padding-left: var(--control-space); + margin-left: 0 !important; + } + &[aria-expanded="true"] { + background: var(--primary-low); + color: var(--primary-high); + box-shadow: 0px 0px 0px 1px var(--primary-300); + z-index: 1; + margin-left: 1px; + .d-icon { + color: var(--primary-high); + } + &:hover, + &:focus { + color: var(--primary); + background: var(--primary-300); + } + } + } + &.replies-button-visible { display: flex; align-items: center; @@ -102,8 +130,92 @@ nav.post-controls button.reply .d-icon { } .embedded-posts { - .topic-meta-data h5 a { - margin-left: 10px; + position: relative; + padding: 0.75em 0.5em 0.75em 0; + max-width: 100%; + margin-left: 0; + > div { + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + margin-bottom: 1.5em; + .row { + // Main reply line + &:before { + content: ""; + position: absolute; + top: calc(-2px - 0.75em); + width: 1px; + height: calc(100% + 1.5em + 5px); + background: var(--primary-300); + left: 24px; + } + } + .topic-avatar { + @include sticky; + top: calc(var(--header-offset) + 0.5em); + margin-right: 15px; + } + .topic-body { + display: flex; + flex-direction: column; + max-width: calc(100% - 32px); + margin-left: auto; + gap: 0.25em 0; + padding-bottom: 1.5em; + .topic-meta-data.embedded-reply { + margin-left: 0; + h5 a { + margin-left: 10px; + } + .names { + margin-bottom: 0.25em; + .user-title { + display: none; + } + .second { + flex-basis: auto; + } + } + .post-link-arrow { + position: absolute; + bottom: 0; + .post-info.arrow { + padding: 0.5em 0; + margin-right: 0; + color: var(--primary-med-or-secondary-high); + line-height: 1; + &:hover, + &:focus { + color: var(--primary-high); + } + } + } + } + } + } + .collapse-up { + position: relative; + padding: 6px; + color: var(--primary-high); + background: var(--primary-low); + z-index: 1; + transform: translate(25%, -30%); + box-shadow: 0px 0px 0px 1px var(--primary-300); + .archetype-private_message & { + display: flex; + } + .d-icon { + transform: scale(0.871); + } + &:hover, + &:focus { + background: var(--primary-300); + .d-icon { + color: var(--primary); + } + } } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index ec558b23254..fe70d1d4925 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -3186,6 +3186,7 @@ en: suggest_create_topic: Ready to start a new conversation? jump_reply: "Jump to post's original location" jump_reply_aria: "Jump to @%{username}'s post in its original location" + jump_reply_button: "Jump to post" deleted: "The topic has been deleted" slow_mode_update: