Page MenuHomePhabricator
Files F3361151

D6845.id23684.diff
No OneTemporary
Actions

D6845.id23684.diff
View Options

diff --git a/web/navigation-panels/chat-thread-ancestors.css b/web/navigation-panels/chat-thread-ancestors.css
--- a/web/navigation-panels/chat-thread-ancestors.css
+++ b/web/navigation-panels/chat-thread-ancestors.css
@@ -1,51 +1,48 @@
-div.ancestorThreadsContainer {
+.container {
font-size: var(--xs-font-12);
display: flex;
align-items: center;
- column-gap: 5px;
+ column-gap: 12px;
+ overflow: hidden;
}
-div.ancestorName {
- display: flex;
- align-items: center;
- padding: 2px 6px;
- border-radius: 2px;
- box-sizing: border-box;
- line-height: 1.5;
-}
-
-button.seeFullStructure {
- background-color: transparent;
- border: none;
- cursor: pointer;
+.communityName {
+ color: var(--thread-ancestor-color);
+ font-size: var(--l-font-18);
+ font-weight: var(--semi-bold);
+ white-space: nowrap;
}
-div.ancestorKeyserver {
+.ancestorThreadsContainer {
+ border: 1px solid var(--topbar-lines);
+ border-radius: 8px;
display: flex;
- align-items: center;
+ padding: 7px 12px;
+ margin-right: 16px;
+ overflow: hidden;
}
-div.ancestorKeyserverName {
- border-radius: 0 2px 2px 0;
+.ancestorName {
+ color: var(--thread-ancestor-color);
+ font-size: var(--xs-font-12);
+ font-weight: var(--semi-bold);
+ line-height: 1.5;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-shrink: 1;
}
-svg.ancestorSeparator {
- color: var(--thread-ancestor-separator-color);
+.chatName {
+ flex-shrink: 0.5;
}
-div.ancestorKeyserverOperator {
- display: flex;
- column-gap: 5px;
- padding: 0 5px;
- align-items: center;
- border: 1px solid var(--thread-ancestor-keyserver-border);
- border-radius: 2px 0 0 2px;
- height: 22px;
- box-sizing: border-box;
+svg.chevronRight {
+ color: var(--thread-ancestor-separator-color);
+ flex-shrink: 0;
}
-button.seeFullAncestor {
- font-size: var(--xs-font-12);
- font-weight: var(--semi-bold);
- cursor: pointer;
+svg.ancestorSeparator {
+ align-self: center;
+ padding: 0 8px;
}
diff --git a/web/navigation-panels/chat-thread-ancestors.react.js b/web/navigation-panels/chat-thread-ancestors.react.js
--- a/web/navigation-panels/chat-thread-ancestors.react.js
+++ b/web/navigation-panels/chat-thread-ancestors.react.js
@@ -1,126 +1,71 @@
// @flow
-import classNames from 'classnames';
+import classnames from 'classnames';
import * as React from 'react';
+import { ChevronRight } from 'react-feather';
-import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { useAncestorThreads } from 'lib/shared/ancestor-threads.js';
-import { colorIsDark } from 'lib/shared/thread-utils.js';
-import { useKeyserverAdmin } from 'lib/shared/user-utils.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
import css from './chat-thread-ancestors.css';
-import CommIcon from '../CommIcon.react.js';
-
-const SHOW_SEE_FULL_STRUCTURE = false;
type ThreadAncestorsProps = {
+threadInfo: ThreadInfo,
};
function ThreadAncestors(props: ThreadAncestorsProps): React.Node {
const { threadInfo } = props;
- const { color: threadColor } = threadInfo;
- const darkColor = colorIsDark(threadColor);
- const threadColorStyle = React.useMemo(
- () => ({
- backgroundColor: `#${threadColor}`,
- color: darkColor
- ? 'var(--thread-ancestor-color-light)'
- : 'var(--thread-ancestor-color-dark)',
- }),
- [darkColor, threadColor],
- );
- const fullStructureButtonColorStyle = React.useMemo(
- () => ({ color: `#${threadColor}` }),
- [threadColor],
- );
- const ancestorThreads = useAncestorThreads(threadInfo);
-
- const community = ancestorThreads[0] ?? threadInfo;
- const keyserverAdmin = useKeyserverAdmin(community);
- const keyserverOwnerUsername = keyserverAdmin?.username;
+ const ancestorThreadsWithCommunity = useAncestorThreads(threadInfo);
+ const community = ancestorThreadsWithCommunity[0] ?? threadInfo;
const resolvedCommunity = useResolvedThreadInfo(community);
- const keyserverInfo = React.useMemo(
- () => (
- <div className={css.ancestorKeyserver}>
- <div className={css.ancestorKeyserverOperator}>
- <CommIcon icon="cloud-filled" size={12} />
- <span>{keyserverOwnerUsername}</span>
- </div>
- <div
- style={threadColorStyle}
- className={classNames(css.ancestorName, css.ancestorKeyserverName)}
- >
- {resolvedCommunity.uiName}
- </div>
- </div>
- ),
- [resolvedCommunity.uiName, keyserverOwnerUsername, threadColorStyle],
- );
+ const threadHasNoAncestors = community === threadInfo;
+
+ const ancestorThreads = ancestorThreadsWithCommunity.slice(1);
- const middlePath = React.useMemo(() => {
- if (ancestorThreads.length < 2) {
+ const chevronRight = React.useMemo(() => {
+ if (threadHasNoAncestors) {
return null;
}
- return (
- <>
- <SWMansionIcon
- className={css.ancestorSeparator}
- icon="chevron-right"
- size={12}
- />
- <div style={threadColorStyle} className={css.ancestorName}>
- &hellip;
- </div>
- </>
- );
- }, [ancestorThreads.length, threadColorStyle]);
-
- const threadHasNoAncestors = community === threadInfo;
+ return <ChevronRight size={20} className={css.chevronRight} />;
+ }, [threadHasNoAncestors]);
const { uiName } = useResolvedThreadInfo(threadInfo);
- const currentThread = React.useMemo(() => {
+
+ const path = React.useMemo(() => {
if (threadHasNoAncestors) {
return null;
}
+ const ancestors = ancestorThreads.map(ancestor => (
+ <ThreadAncestor threadInfo={ancestor} key={ancestor.id} />
+ ));
+ const chatNameClasses = classnames(css.ancestorName, css.chatName);
return (
- <>
- <SWMansionIcon
- className={css.ancestorSeparator}
- icon="chevron-right"
- size={12}
- />
- <div style={threadColorStyle} className={css.ancestorName}>
- {uiName}
- </div>
- </>
+ <div className={css.ancestorThreadsContainer}>
+ {ancestors}
+ <div className={chatNameClasses}>{uiName}</div>
+ </div>
);
- }, [threadHasNoAncestors, threadColorStyle, uiName]);
+ }, [ancestorThreads, threadHasNoAncestors, uiName]);
- let seeFullStructure = null;
- if (SHOW_SEE_FULL_STRUCTURE) {
- seeFullStructure = (
- <button
- style={fullStructureButtonColorStyle}
- className={css.seeFullStructure}
- >
- See full structure
- </button>
- );
- }
+ return (
+ <div className={css.container}>
+ <div className={css.communityName}>{resolvedCommunity.uiName}</div>
+ {chevronRight}
+ {path}
+ </div>
+ );
+}
+function ThreadAncestor(props: ThreadAncestorsProps): React.Node {
+ const { uiName } = useResolvedThreadInfo(props.threadInfo);
+ const chevronClasses = classnames(css.ancestorSeparator, css.chevronRight);
return (
<>
- <div className={css.ancestorThreadsContainer}>
- {keyserverInfo}
- {middlePath}
- {currentThread}
- </div>
- {seeFullStructure}
+ <div className={css.ancestorName}>{uiName}</div>
+ <ChevronRight size={12} className={chevronClasses} />
</>
);
}
diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css
--- a/web/navigation-panels/nav-state-info-bar.css
+++ b/web/navigation-panels/nav-state-info-bar.css
@@ -2,28 +2,17 @@
display: flex;
background-color: var(--bg);
align-items: center;
- justify-content: space-between;
- padding: 0 16px;
color: var(--thread-top-bar-color);
height: 56px;
-}
-
-div.topBarThreadInfo {
- height: 24px;
- display: flex;
- align-items: center;
- column-gap: 8px;
+ overflow: hidden;
}
div.threadColorSquare {
width: 24px;
height: 24px;
border-radius: 4px;
-}
-
-p.threadTitle {
- font-size: var(--m-font-16);
- font-weight: var(--bold);
+ flex: 0 0 auto;
+ margin: 0 12px 0 16px;
}
div.hide {
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -4,7 +4,6 @@
import * as React from 'react';
import type { ThreadInfo } from 'lib/types/thread-types.js';
-import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
import ThreadAncestors from './chat-thread-ancestors.react.js';
import css from './nav-state-info-bar.css';
@@ -22,17 +21,13 @@
[threadInfo.color],
);
- const { uiName } = useResolvedThreadInfo(threadInfo);
return (
<>
- <div className={css.topBarThreadInfo}>
- <div
- className={css.threadColorSquare}
- style={threadBackgroundColorStyle}
- />
- <p className={css.threadTitle}>{uiName}</p>
- <ThreadAncestors threadInfo={threadInfo} />
- </div>
+ <div
+ className={css.threadColorSquare}
+ style={threadBackgroundColorStyle}
+ />
+ <ThreadAncestors threadInfo={threadInfo} />
</>
);
}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -108,8 +108,7 @@
--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-color: var(--shades-white-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);
@@ -211,4 +210,5 @@
--filter-panel-bg: #0d0d0d;
--topbar-button-bg-hover: var(--shades-black-80);
--topbar-button-fg: var(--shades-white-60);
+ --topbar-lines: rgba(255, 255, 255, 0.08);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 3:30 PM (21 h, 33 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2580316
Default Alt Text
D6845.id23684.diff (9 KB)

Event Timeline