feat: Reaction popover and messages padding (#16833)

wireapp · Feb 14, 2024 · e3c126e · e3c126e
1 parent d52c63b
commit e3c126e
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 18 deletions.
diff --git 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/...pt/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.styles.ts b/...pt/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/...gesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts b/...gesList/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
@@ -206,7 +206,11 @@ const Message: React.FC<
 
   return (
     <div
-      className={cx('message', {'message-marked': isMarked})}
+      className={cx('message', {
+        'message-marked': isMarked,
+        'content-message': message.isContent(),
+        'system-message': !message.isContent(),
+      })}
       ref={messageElementRef}
       data-uie-uid={message.id}
       data-uie-value={message.super_type}

diff --git a/src/script/components/MessagesList/MessageList.tsx b/src/script/components/MessagesList/MessageList.tsx
@@ -69,6 +69,7 @@ interface MessagesListParams {
   isLastReceivedMessage: (messageEntity: MessageEntity, conversationEntity: ConversationEntity) => boolean;
   isMsgElementsFocusable: boolean;
   setMsgElementsFocusable: (isMsgElementsFocusable: boolean) => void;
+  isRightSidebarOpen?: boolean;
 }
 
 const MessagesList: FC<MessagesListParams> = ({
@@ -92,6 +93,7 @@ const MessagesList: FC<MessagesListParams> = ({
   isLastReceivedMessage,
   isMsgElementsFocusable,
   setMsgElementsFocusable,
+  isRightSidebarOpen = false,
 }) => {
   const {
     messages: allMessages,
@@ -243,7 +245,12 @@ const MessagesList: FC<MessagesListParams> = ({
     return null;
   }
   return (
-    <FadingScrollbar ref={messageListRef} id="message-list" className="message-list" tabIndex={TabIndex.UNFOCUSABLE}>
+    <FadingScrollbar
+      ref={messageListRef}
+      id="message-list"
+      className={cx('message-list', {'is-right-panel-open': isRightSidebarOpen})}
+      tabIndex={TabIndex.UNFOCUSABLE}
+    >
       <div ref={setMessageContainer} className={cx('messages', {'flex-center': verticallyCenterMessage()})}>
         {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
@@ -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
@@ -85,13 +85,29 @@
   }
 }
 
+.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;
   }
 }
 
 .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
@@ -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
@@ -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 {