Page MenuHomePhorge
Files F32508074

D3895.1767065645.diff
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

D3895.1767065645.diff
View Options

diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -6,6 +6,12 @@
flex-direction: column;
box-sizing: border-box;
}
+div.composedMessageContainer {
+ position: relative;
+}
+div.withInlineSidebar {
+ margin-bottom: 36px;
+}
div.activeContainer {
border: 2px solid #5989d6;
margin-left: 402px;
@@ -76,7 +82,7 @@
}
div.textMessage {
- padding: 6px 12px;
+ padding: 8px 12px;
white-space: pre-wrap;
word-wrap: break-word;
width: 100%;
@@ -121,6 +127,7 @@
align-self: flex-end;
justify-content: flex-end;
padding-right: 4px;
+ position: relative;
}
div.iconContainer {
margin-right: 1px;
@@ -216,9 +223,6 @@
div.imageGrid > span.multimedia:nth-last-child(n + 5):first-child ~ * {
grid-column-end: span 2;
}
-div.sidebarMarginBottom {
- margin-bottom: 8px;
-}
svg.inlineSidebarIcon {
color: #666666;
}
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -161,17 +161,19 @@
if (item.threadCreatedFromMessage) {
const position = isViewer ? 'right' : 'left';
inlineSidebar = (
- <div className={css.sidebarMarginBottom}>
- <InlineSidebar
- threadInfo={item.threadCreatedFromMessage}
- position={position}
- />
- </div>
+ <InlineSidebar
+ threadInfo={item.threadCreatedFromMessage}
+ position={position}
+ />
);
}
+ const composedMessageCls = classNames(css.composedMessageContainer, {
+ [css.withInlineSidebar]: item.threadCreatedFromMessage,
+ });
+
return (
- <React.Fragment>
+ <div className={composedMessageCls}>
{authorName}
<div className={contentClassName}>
<div
@@ -189,7 +191,7 @@
</div>
{failedSendInfo}
{inlineSidebar}
- </React.Fragment>
+ </div>
);
}
diff --git a/web/chat/inline-sidebar.css b/web/chat/inline-sidebar.css
--- a/web/chat/inline-sidebar.css
+++ b/web/chat/inline-sidebar.css
@@ -0,0 +1,28 @@
+div.container {
+ display: flex;
+ background: var(--inline-sidebar-bg);
+ justify-content: center;
+ align-items: center;
+ color: var(--fg);
+ padding: 8px;
+ border-radius: 28px;
+ font-size: var(--s-font-14);
+ position: absolute;
+ bottom: -23px;
+}
+
+div.container.right {
+ right: 30px;
+}
+
+div.container.left {
+ left: 12px;
+}
+
+div.container svg {
+ padding-right: 2px;
+}
+
+div.unread {
+ font-weight: var(--bold);
+}
diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-sidebar.react.js
--- a/web/chat/inline-sidebar.react.js
+++ b/web/chat/inline-sidebar.react.js
@@ -1,25 +1,29 @@
// @flow
-
+import classNames from 'classnames';
import * as React from 'react';
import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
import type { ThreadInfo } from 'lib/types/thread-types';
import { useOnClickThread } from '../selectors/nav-selectors';
+import SWMansionIcon from '../SWMansionIcon.react';
+import css from './inline-sidebar.css';
type Props = {
+threadInfo: ThreadInfo,
+position: 'left' | 'center' | 'right',
};
function InlineSidebar(props: Props): React.Node {
- const { threadInfo } = props;
+ const { threadInfo, position } = props;
const { repliesText } = useInlineSidebarText(threadInfo);
-
const onClick = useOnClickThread(threadInfo);
+ const containerCls = classNames(css.container, [css[position]]);
+ const replyCls = classNames({ [css.unread]: threadInfo.currentUser.unread });
return (
- <div onClick={onClick}>
- <div>{repliesText}</div>
+ <div className={containerCls} onClick={onClick}>
+ <SWMansionIcon icon="reply-chat-bubble" size={12} />
+ <div className={replyCls}>{repliesText}</div>
</div>
);
}
diff --git a/web/chat/robotext-message.css b/web/chat/robotext-message.css
--- a/web/chat/robotext-message.css
+++ b/web/chat/robotext-message.css
@@ -11,10 +11,6 @@
position: relative;
word-break: break-word;
}
-div.sidebarMarginTop {
- margin-top: 4px;
- margin-bottom: -8px;
-}
div.messageActionLinks {
position: absolute;
display: flex;
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -48,12 +48,10 @@
let inlineSidebar;
if (this.props.item.threadCreatedFromMessage) {
inlineSidebar = (
- <div className={css.sidebarMarginTop}>
- <InlineSidebar
- threadInfo={this.props.item.threadCreatedFromMessage}
- position="center"
- />
- </div>
+ <InlineSidebar
+ threadInfo={this.props.item.threadCreatedFromMessage}
+ position="center"
+ />
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -159,4 +159,5 @@
--add-members-item-disabled-color-hover: var(--shades-black-60);
--add-members-remove-pending-color: var(--error-primary);
--add-members-remove-pending-color-hover: var(--error-light-50);
+ --inline-sidebar-bg: var(--shades-black-70);
}

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 30, 3:34 AM (20 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5866379
Default Alt Text
D3895.1767065645.diff (5 KB)

Event Timeline