From e3c126e8ef6403af890793171c6c73a156f36ee6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Przemys=C5=82aw=20J=C3=B3=C5=BAwik?= Date: Wed, 14 Feb 2024 13:47:09 +0100 Subject: [PATCH] feat: Reaction popover and messages padding (#16833) --- .../components/Conversation/Conversation.tsx | 1 + .../MessageActions/MessageActions.styles.ts | 4 +-- .../MessageReactions.styles.ts | 2 +- .../components/MessagesList/Message/index.tsx | 6 +++- .../components/MessagesList/MessageList.tsx | 9 +++++- src/style/components/asset/common/common.less | 4 --- .../content/conversation/message-list.less | 32 +++++++++++++++---- src/style/foundation/framework.less | 3 +- src/style/foundation/warnings.less | 2 +- 9 files changed, 45 insertions(+), 18 deletions(-) diff --git a/src/script/components/Conversation/Conversation.tsx b/src/script/components/Conversation/Conversation.tsx index 538a022a39a..c1c3d7bf311 100644 --- a/src/script/components/Conversation/Conversation.tsx +++ b/src/script/components/Conversation/Conversation.tsx @@ -535,6 +535,7 @@ export const Conversation = ({ isLastReceivedMessage={isLastReceivedMessage} isMsgElementsFocusable={isMsgElementsFocusable} setMsgElementsFocusable={setMsgElementsFocusable} + isRightSidebarOpen={isRightSidebarOpen} /> {isConversationLoaded && diff --git a/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts b/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts index 7b7d031b528..9d0cfe4dbf3 100644 --- a/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts +++ b/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts @@ -32,7 +32,7 @@ export const messageBodyActions: CSSObject = { minWidth: '40px', position: 'absolute', right: '16px', - top: '-30px', + top: '-34px', userSelect: 'none', '@media (max-width: @screen-md-min)': { height: '45px', @@ -103,5 +103,5 @@ export const getActionsMenuCSS = (isActive?: boolean): CSSObject => { }; export const messageWithHeaderTop: CSSObject = { - top: '-63px', + top: '-58px', }; diff --git a/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts b/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts index fb168f1f477..c079241ce38 100644 --- a/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts +++ b/src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts @@ -40,7 +40,7 @@ import {CSSObject} from '@emotion/react'; export const messageReactionWrapper: CSSObject = { display: 'flex', - paddingBlock: '0.5rem', + paddingTop: '6px', gap: '0.5rem', paddingInline: 'var(--conversation-message-sender-width)', flexWrap: 'wrap', diff --git a/src/script/components/MessagesList/Message/index.tsx b/src/script/components/MessagesList/Message/index.tsx index d9cc2d75bb6..3859a9c7236 100644 --- a/src/script/components/MessagesList/Message/index.tsx +++ b/src/script/components/MessagesList/Message/index.tsx @@ -206,7 +206,11 @@ const Message: React.FC< return (
boolean; isMsgElementsFocusable: boolean; setMsgElementsFocusable: (isMsgElementsFocusable: boolean) => void; + isRightSidebarOpen?: boolean; } const MessagesList: FC = ({ @@ -92,6 +93,7 @@ const MessagesList: FC = ({ isLastReceivedMessage, isMsgElementsFocusable, setMsgElementsFocusable, + isRightSidebarOpen = false, }) => { const { messages: allMessages, @@ -243,7 +245,12 @@ const MessagesList: FC = ({ return null; } return ( - +
{filteredMessages.map((message, index) => { const previousMessage = filteredMessages[index - 1]; diff --git a/src/style/components/asset/common/common.less b/src/style/components/asset/common/common.less index 0a57a5e08b9..2a88eab70f1 100644 --- a/src/style/components/asset/common/common.less +++ b/src/style/components/asset/common/common.less @@ -34,10 +34,6 @@ & + & { margin-top: 1px; } - - &:first-of-type { - margin-bottom: 4px; - } } .asset-placeholder { diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less index 7ae451d0e64..758d43bcab8 100644 --- a/src/style/content/conversation/message-list.less +++ b/src/style/content/conversation/message-list.less @@ -85,6 +85,20 @@ } } +.content-message { + &:has(.message-header) { + padding-top: 6px; + } +} + +.system-message { + padding-block: 8px; + + &:has(.message-timestamp) + .system-message { + padding-top: 0; + } +} + @keyframes marked-animation { to { background-color: inherit; @@ -92,6 +106,8 @@ } .content-message-wrapper { + padding-block: 6px; + &:hover, &:focus-visible { background-color: #fff; @@ -124,8 +140,6 @@ position: relative; display: flex; width: 100%; - padding-top: 6px; - margin-bottom: 2px; line-height: @avatar-diameter-xs; & > .message-body-actions { @@ -135,11 +149,15 @@ + .message-services-warning { margin-left: 72px; } + + + .message-body .message-asset { + padding-top: 6px; + } } .message-header-icon { .flex-center; - width: @conversation-message-sender-width; + width: var(--conversation-message-sender-width); max-height: @avatar-diameter-xs; align-self: center; @@ -157,6 +175,7 @@ .message-header-label { display: flex; min-width: 0; // fixes ellipsis not working with flexbox (FF) + flex: 1; align-items: center; font-size: @font-size-small; font-weight: @font-weight-regular; @@ -249,7 +268,7 @@ height: 48px; padding-top: 8px; // TODO margin top is not working because of collapsing margins border-bottom: 1px solid @separator-color; - margin-bottom: 16px; + margin-bottom: 24px; line-height: 2.5rem; user-select: none; @@ -308,7 +327,6 @@ max-width: @conversation-max-width; justify-content: space-between; padding-left: @conversation-message-sender-width; - padding-block: 4px; &-content { width: 100%; @@ -562,7 +580,7 @@ .message-group-creation-header, .message-member-footer { padding-top: 16px; - margin-left: 54px; + margin-left: var(--conversation-message-sender-width); font-size: @font-size-small; font-weight: @font-weight-regular; } @@ -722,7 +740,7 @@ .message-asset { display: flex; align-items: flex-start; - margin-bottom: 4px; + padding-block: 6px; } .message-call, diff --git a/src/style/foundation/framework.less b/src/style/foundation/framework.less index 64876d173ce..b09e2b67025 100644 --- a/src/style/foundation/framework.less +++ b/src/style/foundation/framework.less @@ -61,7 +61,8 @@ } #conversation-input-bar, - #conversation-title-bar { + #conversation-title-bar, + #message-list { width: 100%; transition: width @animation-timing-fast @ease-out-quart; diff --git a/src/style/foundation/warnings.less b/src/style/foundation/warnings.less index 09d77acdcf6..6594699b890 100644 --- a/src/style/foundation/warnings.less +++ b/src/style/foundation/warnings.less @@ -109,7 +109,7 @@ position: absolute; top: 50%; right: 24px; - margin-top: -@button-medium-sm-height / 2; + margin-top: calc(-@button-medium-sm-height / 2); } .warning-bar-icon {