Page MenuHomePhorge
Files F32099163

D4122.1765011746.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D4122.1765011746.diff
View Options

diff --git a/web/chat/sidebar-modal-item.css b/web/chat/sidebar-modal-item.css
new file mode 100644
--- /dev/null
+++ b/web/chat/sidebar-modal-item.css
@@ -0,0 +1,33 @@
+div.sidebar {
+ display: flex;
+ align-items: center;
+ position: relative;
+}
+
+div.sidebarName {
+ font-size: var(--l-font-18);
+ color: var(--sidebar-modal-color);
+ padding-left: 36px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+}
+
+.unread {
+ color: var(--fg);
+}
+
+.longArrow {
+ position: absolute;
+ bottom: 100px;
+}
+
+.arrow {
+ position: absolute;
+ bottom: 6px;
+}
+
+ul.sidebarList {
+ padding-top: 16px;
+ padding-left: 16px;
+ list-style: none;
+}
diff --git a/web/chat/sidebar-modal-item.react.js b/web/chat/sidebar-modal-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/sidebar-modal-item.react.js
@@ -0,0 +1,54 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import type { SidebarInfo } from 'lib/types/thread-types';
+
+import { useOnClickThread } from '../selectors/nav-selectors';
+import css from './sidebar-modal-item.css';
+
+type Props = {
+ +sidebar: SidebarInfo,
+ +extendArrow?: boolean,
+};
+
+function SideBarModalItem(props: Props): React.Node {
+ const {
+ sidebar: { threadInfo },
+ extendArrow = false,
+ } = props;
+ const {
+ currentUser: { unread },
+ uiName,
+ } = threadInfo;
+
+ const onClick = useOnClickThread(threadInfo);
+
+ const sideBarTextCls = classNames(css.sidebarName, { [css.unread]: unread });
+ let arrow;
+ if (extendArrow) {
+ arrow = (
+ <img
+ src="images/long_arrow.svg"
+ className={css.longArrow}
+ alt="sidebar arrow"
+ />
+ );
+ } else {
+ arrow = (
+ <img src="images/arrow.svg" className={css.arrow} alt="sidebar arrow" />
+ );
+ }
+
+ return (
+ <div className={css.container} onClick={onClick}>
+ <div className={css.sidebar}>
+ {arrow}
+ <div className={sideBarTextCls}>{uiName}</div>
+ </div>
+ </div>
+ );
+}
+
+export default SideBarModalItem;
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -5,7 +5,8 @@
import { useSearchSidebars } from 'lib/hooks/search-sidebars';
import type { ThreadInfo } from 'lib/types/thread-types';
-import SidebarItem from '../../chat/sidebar-item.react';
+import css from '../../chat/sidebar-modal-item.css';
+import SideBarModalItem from '../../chat/sidebar-modal-item.react';
import { useModalContext } from '../modal-provider.react';
import SearchModal from '../search-modal.react';
@@ -25,10 +26,10 @@
const { sidebars } = useSearchSidebars(threadInfo, searchText);
return (
- <ul>
+ <ul className={css.sidebarList}>
{sidebars.map(sideBar => (
<li key={sideBar.threadInfo.id} onClick={popModal}>
- <SidebarItem sidebarInfo={sideBar} />
+ <SideBarModalItem sidebar={sideBar} />
</li>
))}
</ul>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -168,4 +168,5 @@
--notification-settings-option-invalid-selected-color: var(--shades-black-60);
--danger-zone-subheading-color: var(--shades-white-60);
--danger-zone-explanation-color: var(--shades-black-60);
+ --sidebar-modal-color: var(--shades-black-60);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 6, 9:02 AM (13 h, 10 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5834998
Default Alt Text
D4122.1765011746.diff (3 KB)

Event Timeline