diff --git a/app/assets/javascripts/discourse/app/widgets/embedded-post.js b/app/assets/javascripts/discourse/app/widgets/embedded-post.js index 2be773dcafc..e5192f44865 100644 --- a/app/assets/javascripts/discourse/app/widgets/embedded-post.js +++ b/app/assets/javascripts/discourse/app/widgets/embedded-post.js @@ -30,7 +30,7 @@ export default createWidget("embedded-post", { h("div.row", [ this.attach("post-avatar", attrs), h("div.topic-body", [ - h("div.topic-meta-data", [ + h("div.topic-meta-data.embedded-reply", [ this.attach("poster-name", attrs), this.attach("post-link-arrow", { above: state.above, diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js index 1021ecf76cd..866eb76ddad 100644 --- a/app/assets/javascripts/discourse/app/widgets/post.js +++ b/app/assets/javascripts/discourse/app/widgets/post.js @@ -755,6 +755,9 @@ export default createWidget("post", { if (attrs.topicOwner) { classNames.push("topic-owner"); } + if (attrs.user_id === this.currentUser.id) { + classNames.push("current-user-post"); + } if (attrs.groupModerator) { classNames.push("category-moderator"); } diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss index 9e4174e47a0..2990ac7e71f 100644 --- a/app/assets/stylesheets/color_definitions.scss +++ b/app/assets/stylesheets/color_definitions.scss @@ -41,6 +41,7 @@ --secondary-high: #{$secondary-high}; --secondary-very-high: #{$secondary-very-high}; + --tertiary-very-low: #{$tertiary-very-low}; --tertiary-low: #{$tertiary-low}; --tertiary-medium: #{$tertiary-medium}; --tertiary-high: #{$tertiary-high}; diff --git a/app/assets/stylesheets/common/base/_index.scss b/app/assets/stylesheets/common/base/_index.scss index 4ef29d0a978..7572adc88be 100644 --- a/app/assets/stylesheets/common/base/_index.scss +++ b/app/assets/stylesheets/common/base/_index.scss @@ -33,6 +33,7 @@ @import "modal"; @import "not-found"; @import "onebox"; +@import "personal-message"; @import "popup-menu"; @import "redirection"; @import "request_access"; diff --git a/app/assets/stylesheets/common/base/personal-message.scss b/app/assets/stylesheets/common/base/personal-message.scss new file mode 100644 index 00000000000..a1dc0de11f6 --- /dev/null +++ b/app/assets/stylesheets/common/base/personal-message.scss @@ -0,0 +1,156 @@ +.archetype-private_message { + --border-radius: 2em; + + @keyframes current-user-background-fade-highlight { + 0% { + background-color: var(--secondary); + border-color: var(--primary-low); + } + 100% { + background-color: var(--tertiary-very-low); + border-color: transparent; + } + } + + .topic-body .cooked { + box-sizing: border-box; + border: 1px solid var(--primary-low); + margin-top: 0.25em; + margin-left: -1.35em; + padding: 1.5em 1.5em 0.5em 2em; + border-radius: 0 var(--border-radius) var(--border-radius) + var(--border-radius); + } + + .current-user-post { + .topic-body .cooked { + border: 1px solid transparent; + background: var(--tertiary-very-low); + } + .topic-body.highlighted { + .cooked { + animation: current-user-background-fade-highlight 2.5s ease-out; + } + } + .embedded-posts { + .topic-body .cooked { + border: 1px solid var(--primary-low); + background: transparent; + } + } + } + + .moderator { + .topic-body .cooked { + border: 1px solid transparent; + } + } + + .deleted .topic-body { + .cooked { + background: var(--danger-low); + } + } + + .whisper { + .topic-body .cooked { + background: transparent; + border: 2px dashed var(--primary-low); + } + + &.my-post .topic-body .cooked { + border: 2px dashed var(--tertiary-very-low); + } + } + + .topic-body.highlighted { + animation: none; + .cooked { + animation: background-fade-highlight 2.5s ease-out; + } + } + + .topic-avatar, + .topic-body { + border: none; + } + + .post-menu-area { + margin-top: 0.5em; + } + + .small-action-desc.timegap { + flex: 0 0 auto; + padding: 0 1em; + margin-top: -1.75em; + margin-left: -1em; + background: var(--secondary); + max-width: calc(758px - 1.5em); + } + + .post-notice { + margin-bottom: 1em; + border: none; + background: var(--primary-very-low); + border-radius: var(--border-radius); + margin-left: 1.5em; + box-sizing: border-box; + padding: 1.5em 2em; + } + + .topic-map { + margin-left: -1.5em; + border: none; + border-radius: var(--border-radius); + padding: 1.25em; + + section { + border: none; + } + .map:not(.map-collapsed) { + .avatars { + margin: 0.5em 0; + } + } + + .participants { + margin-bottom: 1.5em; + .user { + border: none; + background: var(--primary-low); + padding: 2px 4px; + border-radius: var(--border-radius); + } + } + } + + .map:first-of-type .buttons .btn { + border: none; + border-radius: var(--border-radius); + } + + .embedded-posts { + border: none; + .topic-body { + overflow: visible; + } + .topic-body, + .topic-avatar { + border: none !important; // overrides some specificity for .bottom + } + .collapse-down, + .collapse-up { + display: none; + } + } + + .timeline-replies { + display: flex; + align-items: baseline; + margin-right: 0.15em; + } + + .gap { + margin-bottom: 2em; + } +} diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 3238f3eb9a3..def3ebb0019 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -206,7 +206,6 @@ $quote-share-maxwidth: 150px; .moderator { .regular > .cooked { background-color: var(--highlight-low-or-medium); - padding: 10px; } .clearfix > .topic-meta-data > .names { span.user-title { @@ -235,6 +234,53 @@ $quote-share-maxwidth: 150px; } } +.deleted { + .regular > .cooked { + background-color: var(--danger-low-mid); + } + .topic-meta-data:not(.embedded-reply) { + color: var(--danger); + + .post-info a, + a { + color: currentColor; + } + + .d-icon { + color: currentColor; + } + } + nav.post-controls { + color: var(--danger); + + .show-replies, + button.reply.create { + color: var(--danger); + .d-icon { + color: var(--danger); + } + } + .widget-button { + &:hover { + color: currentColor; + background: var(--danger-low); + .d-icon { + color: currentColor; + } + } + &.fade-out { + opacity: 1; + } + } + .d-icon { + color: var(--danger); + } + } + .post-action { + color: var(--danger); + } +} + // we use aside to hold expandable quotes (versus, say, static blockquotes) aside.quote { margin-top: 1em; diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss index 4b1261d170d..ca43415a87c 100644 --- a/app/assets/stylesheets/common/foundation/color_transformations.scss +++ b/app/assets/stylesheets/common/foundation/color_transformations.scss @@ -23,6 +23,7 @@ $secondary-high: dark-light-diff($secondary, $primary, 30%, -35%) !default; $secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%) !default; //tertiary +$tertiary-very-low: dark-light-diff($tertiary, $secondary, 90%, -75%) !default; $tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%) !default; $tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%) !default; $tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%) !default; diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index 7b29f7b2859..6ff674301c9 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -523,12 +523,6 @@ video { position: relative; } -.deleted { - .topic-body { - background-color: var(--danger-low-mid); - } -} - .post-select { float: right; margin-right: 20px; diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss index 7d5fcaa7dac..6d3cf8a313f 100644 --- a/app/assets/stylesheets/mobile/_index.scss +++ b/app/assets/stylesheets/mobile/_index.scss @@ -21,6 +21,7 @@ @import "login"; @import "menu-panel"; @import "modal"; +@import "personal-message"; @import "push-notifications-mobile"; @import "reviewables"; @import "ring"; diff --git a/app/assets/stylesheets/mobile/personal-message.scss b/app/assets/stylesheets/mobile/personal-message.scss new file mode 100644 index 00000000000..d193ed5c96a --- /dev/null +++ b/app/assets/stylesheets/mobile/personal-message.scss @@ -0,0 +1,58 @@ +.archetype-private_message { + .topic-body .cooked { + margin-top: 0.5em; + margin-left: 0; + padding: 1.5em 1em; + border-radius: 0.75em var(--border-radius) var(--border-radius) + var(--border-radius); + } + .topic-avatar { + margin-bottom: -1em; // creates bubble overlap + } + .boxed .contents { + padding: 0; + } + + .topic-post { + margin: 0 0 1em; + article { + border-top: none; + } + } + + .topic-body { + flex: 1 1 auto; + } + + .topic-map { + padding: 1em 0.5em; + margin-left: 0; + } + + .post-notice { + padding: 1em; + margin: 0 0 1em; + width: 100%; + } + + .small-action { + margin-left: 0; + } + + .small-action-desc.timegap { + margin-left: 0; + padding: 1em 1em 1em 0; + } + + .small-action:not(.time-gap) { + padding: 1em; + } + + .topic-meta-data .names .first.staff { + flex-basis: 100%; + & + .second, + & + .second + .user-title { + flex-basis: unset; + } + } +} diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 78ad0a6d53c..ebfe9441a4d 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -87,11 +87,7 @@ span.badge-posts { &.expand-post { margin: 10px 0 10px 0; } - &.reply { - .d-icon { - color: var(--primary-high); - } - } + &.has-like { .d-icon { color: var(--love); @@ -126,6 +122,10 @@ span.badge-posts { } } +nav.post-controls button.reply .d-icon { + color: var(--primary-high); +} + .post-admin-menu { bottom: -50px; left: 135px; @@ -337,12 +337,6 @@ button.select-post { display: inline-block; } -.deleted { - .topic-body { - background-color: var(--danger-low-mid); - } -} - .deleted-user-avatar { font-size: $font-up-5; }