Page MenuHomePhabricator
Files F3509390

No OneTemporary
Actions

View Options

diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
new file mode 100644
index 000000000..7479a4ad9
--- /dev/null
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -0,0 +1,75 @@
+// @flow
+
+import * as React from 'react';
+
+import { type ChatThreadItem } from 'lib/selectors/chat-selectors';
+import { getMessagePreview } from 'lib/shared/message-utils';
+import { shortAbsoluteDate } from 'lib/utils/date-utils';
+
+import { getDefaultTextMessageRules } from '../../../markdown/rules.react';
+import { useSelector } from '../../../redux/redux-utils';
+import { useOnClickThread } from '../../../selectors/nav-selectors';
+import SWMansionIcon from '../../../SWMansionIcon.react';
+import { useModalContext } from '../../modal-provider.react';
+import css from './subchannels-modal.css';
+
+type Props = {
+ +chatThreadItem: ChatThreadItem,
+};
+
+function Subchannel(props: Props): React.Node {
+ const { chatThreadItem } = props;
+ const {
+ threadInfo,
+ mostRecentMessageInfo,
+ lastUpdatedTimeIncludingSidebars,
+ } = chatThreadItem;
+
+ const timeZone = useSelector(state => state.timeZone);
+ const { clearModal } = useModalContext();
+
+ const navigateToThread = useOnClickThread(threadInfo);
+
+ const onClickThread = React.useCallback(
+ event => {
+ clearModal();
+ navigateToThread(event);
+ },
+ [clearModal, navigateToThread],
+ );
+
+ const lastActivity = React.useMemo(
+ () => shortAbsoluteDate(lastUpdatedTimeIncludingSidebars, timeZone),
+ [lastUpdatedTimeIncludingSidebars, timeZone],
+ );
+
+ const lastMessage = React.useMemo(() => {
+ if (!mostRecentMessageInfo) {
+ return <div className={css.noMessage}>No messages</div>;
+ }
+ const { message, username } = getMessagePreview(
+ mostRecentMessageInfo,
+ threadInfo,
+ getDefaultTextMessageRules().simpleMarkdownRules,
+ );
+ const previewText = username ? `${username}: ${message}` : message;
+ return (
+ <>
+ <div className={css.longTextEllipsis}>{previewText}</div>
+ <div className={css.lastActivity}>{lastActivity}</div>
+ </>
+ );
+ }, [lastActivity, mostRecentMessageInfo, threadInfo]);
+
+ return (
+ <div className={css.subchannelContainer} onClick={onClickThread}>
+ <SWMansionIcon icon="message-square" size={22} />
+ <div className={css.subchannelInfo}>
+ <div className={css.longTextEllipsis}>{threadInfo.name}</div>
+ <div className={css.lastMessage}>{lastMessage}</div>
+ </div>
+ </div>
+ );
+}
+
+export default Subchannel;
diff --git a/web/modals/threads/subchannels/subchannels-modal.css b/web/modals/threads/subchannels/subchannels-modal.css
new file mode 100644
index 000000000..939cd1a40
--- /dev/null
+++ b/web/modals/threads/subchannels/subchannels-modal.css
@@ -0,0 +1,39 @@
+div.subchannelContainer {
+ cursor: pointer;
+ display: flex;
+ padding: 8px 16px;
+ column-gap: 8px;
+}
+
+div.subchannelContainer:hover {
+ color: var(--subchannels-modal-color-hover);
+}
+
+div.subchannelInfo {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ row-gap: 8px;
+ overflow: hidden;
+}
+
+div.longTextEllipsis {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+div.lastMessage {
+ display: flex;
+ justify-content: space-between;
+ column-gap: 14px;
+}
+
+div.noMessage {
+ text-align: center;
+ font-style: italic;
+}
+
+div.lastActivity {
+ white-space: nowrap;
+}
diff --git a/web/theme.css b/web/theme.css
index b2ac84d86..3571ba1f7 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,139 +1,141 @@
:root {
/* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
The reason we never use color values defined here directly in CSS is
1. It makes changing themes from light / dark / user generated impossible.
2. Gives the programmer context into the color being used.
3. If our color system changes it's much easier to change color values in one place.
Add a color value to the theme below, and then use it in your CSS.
naming convention:
- bg: background.
- fg: foreground.
- color: text-color
*/
--shades-white-100: #ffffff;
--shades-white-90: #f5f5f5;
--shades-white-80: #ebebeb;
--shades-white-70: #e0e0e0;
--shades-white-60: #cccccc;
--shades-black-100: #0a0a0a;
--shades-black-90: #1f1f1f;
--shades-black-80: #404040;
--shades-black-70: #666666;
--shades-black-60: #808080;
--violet-dark-100: #7e57c2;
--violet-dark-80: #6d49ab;
--violet-dark-60: #563894;
--violet-dark-40: #44297a;
--violet-dark-20: #331f5c;
--violet-light-100: #ae94db;
--violet-light-80: #b9a4df;
--violet-light-60: #d3c6ec;
--violet-light-40: #e8e0f5;
--violet-light-20: #f3f0fa;
--success-light-10: #d5f6e3;
--success-light-50: #6cdf9c;
--success-primary: #00c853;
--success-dark-50: #029841;
--success-dark-90: #034920;
--error-light-10: #feebe6;
--error-light-50: #f9947b;
--error-primary: #f53100;
--error-dark-50: #b62602;
--error-dark-90: #4f1203;
--bg: var(--shades-black-100);
--fg: var(--shades-white-100);
--color-disabled: var(--shades-black-60);
--text-input-bg: var(--shades-black-80);
--text-input-color: var(--shades-white-60);
--text-input-placeholder: var(--shades-white-60);
--border: var(--shades-black-80);
--error: var(--error-primary);
--success: var(--success-dark-50);
/* Color Theme */
--btn-bg-primary: var(--violet-dark-100);
--btn-bg-primary-hover: var(--violet-dark-80);
--btn-bg-danger: var(--error-primary);
--chat-bg: var(--violet-dark-80);
--chat-confirmation-icon: var(--violet-dark-100);
--keyserver-selection: var(--violet-dark-60);
--thread-selection: var(--violet-light-80);
--thread-hover-bg: var(--shades-black-90);
--thread-active-bg: var(--shades-black-80);
--chat-timestamp-color: var(--shades-black-60);
--tool-tip-bg: var(--shades-black-80);
--tool-tip-color: var(--shades-white-60);
--border-color: var(--shades-black-80);
--calendar-chevron: var(--shades-black-60);
--calendar-day-bg: var(--shades-black-60);
--calendar-day-selected-color: var(--violet-dark-80);
--community-bg: var(--shades-black-90);
--unread-bg: var(--error-primary);
--settings-btn-bg: var(--violet-dark-100);
--modal-bg: var(--shades-black-90);
--join-bg: var(--shades-black-90);
--help-color: var(--shades-black-60);
--breadcrumb-color: var(--shades-white-60);
--breadcrumb-color-unread: var(--shades-white-60);
--btn-secondary-border: var(--shades-black-60);
--thread-color-read: var(--shades-black-60);
--thread-from-color-read: var(--shades-black-80);
--thread-last-message-color-read: var(--shades-black-60);
--relationship-button-green: var(--success-dark-50);
--relationship-button-red: var(--error-primary);
--relationship-button-text: var(--fg);
--disconnected-bar-alert-bg: var(--error-dark-50);
--disconnected-bar-alert-color: var(--shades-white-100);
--disconnected-bar-connecting-bg: var(--shades-white-70);
--disconnected-bar-connecting-color: var(--shades-black-100);
--permission-color: var(--shades-white-60);
--thread-top-bar-color: var(--shades-white-100);
--thread-top-bar-menu-color: var(--shades-white-70);
--thread-ancestor-keyserver-border: var(--shades-black-70);
--thread-ancestor-color-light: var(--shades-white-70);
--thread-ancestor-color-dark: var(--shades-black-100);
--thread-ancestor-separator-color: var(--shades-white-60);
--text-message-default-background: var(--shades-black-80);
--message-action-tooltip-bg: var(--shades-black-90);
--menu-bg: var(--shades-black-90);
--menu-bg-light: var(--shades-black-80);
--menu-separator-color: var(--shades-black-80);
--menu-color: var(--shades-black-60);
--menu-color-light: var(--shades-white-60);
--menu-color-hover: var(--shades-white-100);
--menu-color-dangerous: var(--error-primary);
--menu-color-dangerous-hover: var(--error-light-50);
--app-list-icon-read-only-color: var(--shades-black-60);
--app-list-icon-enabled-color: var(--success-primary);
--app-list-icon-disabled-color: var(--shades-white-80);
--account-settings-label: var(--shades-black-60);
--account-button-color: var(--violet-dark-100);
--chat-thread-list-menu-color: var(--shades-white-60);
--chat-thread-list-menu-bg: var(--shades-black-80);
--chat-thread-list-menu-active-color: var(--shades-white-60);
--chat-thread-list-menu-active-bg: var(--shades-black-90);
--search-clear-color: var(--shades-white-100);
--search-clear-bg: var(--shades-black-70);
--search-input-color: var(--shades-white-100);
--search-input-placeholder: var(--shades-black-60);
--search-icon-color: var(--shades-black-60);
--tabs-header-active-color: var(--shades-white-100);
--tabs-header-active-border: var(--violet-light-100);
--tabs-header-background-color: var(--shades-black-60);
--tabs-header-background-border: var(--shades-black-80);
--tabs-header-background-color-hover: var(--shades-white-80);
--tabs-header-background-border-hover: var(--shades-black-70);
--members-modal-member-text: var(--shades-black-60);
--members-modal-member-text-hover: var(--shades-white-100);
--label-default-bg: var(--violet-dark-80);
--label-default-color: var(--shades-white-80);
+ --subchannels-modal-color: var(--shades-black-60);
+ --subchannels-modal-color-hover: var(--shades-white-100);
}

File Metadata

Mime Type
text/x-diff
Expires
Mon, Dec 23, 4:10 AM (16 h, 21 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2690336
Default Alt Text
(9 KB)

Event Timeline