fix: Read indicator design improvements (#16591)

* fix: Read indicator desing improvements * add padding-left for reactions * fix cursor
wireapp · Jan 23, 2024 · 5069527 · 5069527
1 parent fabcf72
commit 5069527
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 98 deletions.
diff --git a/src/script/components/InputBar/InputBar.tsx b/src/script/components/InputBar/InputBar.tsx
@@ -611,7 +611,11 @@ export const InputBar = ({
                   </>
                 ) : (
                   <>
-                    <ul className="controls-right buttons-group">
+                    <ul
+                      className={cx('controls-right buttons-group', {
+                        'controls-right-shrinked': textValue.length !== 0,
+                      })}
+                    >
                       <ControlButtons {...controlButtonsProps} showGiphyButton={showGiphyButton} />
                       <SendMessageButton disabled={!enableSending} onSend={handleSendMessage} />
                     </ul>

diff --git a/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx b/src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx
@@ -186,8 +186,9 @@ export const ContentMessageComponent: React.FC<ContentMessageProps> = ({
           {was_edited && (
             <span className="message-header-label-icon icon-edit" title={message.displayEditedTimestamp()}></span>
           )}
+
           <span className="content-message-timestamp">
-            <MessageTime timestamp={timestamp} className="label-xs" data-timestamp-type="normal">
+            <MessageTime timestamp={timestamp} data-timestamp-type="normal">
               {timeAgo}
             </MessageTime>
           </span>
@@ -196,18 +197,19 @@ export const ContentMessageComponent: React.FC<ContentMessageProps> = ({
             message={message}
             is1to1Conversation={conversation.is1to1()}
             isLastDeliveredMessage={isLastDeliveredMessage}
-            onClick={onClickDetails}
             showIconOnly
           />
         </MessageHeader>
       )}
+
       <div className="message-body">
         <div className="message-body-content" title={ephemeral_caption}>
           {ephemeral_status === EphemeralStatusType.ACTIVE && (
             <div className="message-ephemeral-timer">
               <EphemeralTimer message={message} />
             </div>
           )}
+
           {quote && (
             <Quote
               conversation={conversation}

diff --git a/...gesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts b/...gesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts
@@ -41,10 +41,9 @@ import {CSSObject} from '@emotion/react';
 export const messageReactionWrapper: CSSObject = {
   display: 'flex',
   gap: '0.5rem',
-  paddingLeft: 'var(--conversation-message-sender-width)',
+  paddingInline: 'var(--conversation-message-sender-width)',
   flexWrap: 'wrap',
   maxWidth: '100%',
-  marginRight: 'var(--conversation-message-timestamp-width)',
   '.tooltip-content': {
     backgroundColor: 'var(--white) !important',
     marginBottom: '0 !important',

diff --git a/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts b/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.styles.ts
@@ -26,9 +26,9 @@ export const ReadReceiptText: CSSObject = {
 };
 
 export const ReadIndicatorStyles = (showIconOnly = false): CSSObject => ({
-  color: 'var(--gray-70)',
+  color: 'var(--content-message-timestamp)',
   fontSize: 'var(--font-size-small)',
-  fontWeight: 'var(--font-weight-medium)',
+  fontWeight: 'var(--font-weight-regular)',
   lineHeight: 'var(--line-height-sm)',
 
   svg: {

diff --git a/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.tsx b/src/script/components/MessagesList/Message/ReadIndicator/ReadIndicator.tsx
@@ -31,7 +31,7 @@ interface ReadIndicatorProps {
   is1to1Conversation?: boolean;
   isLastDeliveredMessage?: boolean;
   showIconOnly?: boolean;
-  onClick: (message: Message) => void;
+  onClick?: (message: Message) => void;
 }
 
 export const ReadIndicator = ({
@@ -69,24 +69,29 @@ export const ReadIndicator = ({
   }
 
   const readReceiptCount = readReceipts.length;
-  const showEyeIndicatorOnly = showIconOnly && readReceiptCount > 0;
+
+  if (readReceiptCount === 0) {
+    return null;
+  }
+
+  if (showIconOnly) {
+    return (
+      <span css={ReadIndicatorStyles(true)} data-uie-name="status-message-read-receipts-header">
+        <Icon.Read />
+      </span>
+    );
+  }
 
   return (
     <button
-      css={ReadIndicatorStyles(showIconOnly)}
-      onClick={() => onClick(message)}
-      className="button-reset-default"
+      css={ReadIndicatorStyles(false)}
+      onClick={() => onClick?.(message)}
+      className="button-reset-default read-indicator"
       data-uie-name="status-message-read-receipts"
     >
-      {showEyeIndicatorOnly ? (
-        <Icon.Read />
-      ) : (
-        !!readReceiptCount && (
-          <div css={ReadReceiptText} data-uie-name="status-message-read-receipt-count">
-            <Icon.Read /> {readReceiptCount}
-          </div>
-        )
-      )}
+      <div css={ReadReceiptText} data-uie-name="status-message-read-receipt-count">
+        <Icon.Read /> {readReceiptCount}
+      </div>
     </button>
   );
 };
diff --git a/src/style/common/variables.less b/src/style/common/variables.less
@@ -241,11 +241,6 @@ body {
 body {
   --conversation-message-sender-width: @conversation-message-sender-width;
   --conversation-message-asset-width: 800px;
-
-  --conversation-message-timestamp-width: 140px;
-  @media (max-width: @screen-md-min) {
-    --conversation-message-timestamp-width: 60px;
-  }
 }
 
 // ----------------------------------------------------------------------------

diff --git a/src/style/content/conversation.less b/src/style/content/conversation.less
@@ -61,7 +61,6 @@
 }
 
 .readonly-message-container {
-  max-width: calc(800 - var(--conversation-message-timestamp-width));
   margin-bottom: 16px;
 }
 

diff --git a/src/style/content/conversation/input-bar.less b/src/style/content/conversation/input-bar.less
@@ -52,9 +52,7 @@
   .reset-textarea;
 
   width: 100%;
-  max-width: calc(
-    @conversation-max-width - @conversation-message-sender-width - var(--conversation-message-timestamp-width)
-  );
+  max-width: @conversation-max-width;
   height: auto;
   min-height: @conversation-input-line-height;
   max-height: @conversation-input-max-height;
@@ -108,11 +106,14 @@
   .list-unstyled;
 
   display: flex;
-  min-width: var(--conversation-message-timestamp-width);
   align-items: center;
   justify-content: flex-end;
   margin: 0;
 
+  &.controls-right-shrinked {
+    min-width: auto;
+  }
+
   .conversation-button {
     padding: 0;
   }

diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less
@@ -310,6 +310,7 @@
   max-width: @conversation-max-width;
   justify-content: space-between;
   padding-left: @conversation-message-sender-width;
+  padding-block: 4px 8px;
 
   &-content {
     width: 100%;
@@ -420,72 +421,9 @@
   }
 }
 
-// MESSAGE FOOTER
-.message-footer {
-  display: flex;
-  flex-wrap: wrap;
-  line-height: @avatar-diameter-xs;
-}
-
-.message-footer-text {
-  color: var(--gray-70);
-  font-size: @font-size-xsmall;
-
-  body.theme-dark & {
-    color: var(--gray-60);
-  }
-}
-
-.message-footer-icon {
-  .flex-center;
-
-  width: @conversation-message-sender-width;
-}
-
-.message-footer-label {
-  display: flex;
-  overflow: hidden;
-  flex: 1;
-  align-items: center;
-  font-size: @font-size-xs;
-
-  & > span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: pre;
-  }
-
-  > * + * {
-    margin-left: 8px;
-  }
-}
-
-.message-footer-bottom {
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  margin-top: 4px;
-  margin-right: var(--conversation-message-timestamp-width);
-  margin-left: @conversation-message-sender-width;
-
-  > *:not(:last-child) {
-    margin-right: 8px;
-    margin-bottom: 8px;
-  }
-}
-
-.message-footer-close-button {
-  .square(@avatar-diameter-xs);
-  .flex-center;
-
-  cursor: pointer;
-  font-size: @font-size-xs;
-}
-
 // MESSAGE - ACTIONS
 .message-body-actions {
   display: flex;
-  min-width: var(--conversation-message-timestamp-width);
   align-items: flex-start;
   justify-content: flex-start;
   padding: 5px;

diff --git a/src/style/content/conversation/message-quote.less b/src/style/content/conversation/message-quote.less
@@ -1,9 +1,6 @@
 .message-quote {
   position: relative;
-  max-width: calc(
-    @conversation-max-width - var(--conversation-message-timestamp-width) - @conversation-message-sender-width - 16px
-  );
-  padding-right: var(--conversation-message-timestamp-width);
+  max-width: calc(@conversation-max-width - @conversation-message-sender-width - 16px);
   padding-left: 16px;
   margin-bottom: 10px;
   font-size: @font-size-medium;