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( - () => ( -
-
- - {keyserverOwnerUsername} -
-
- {resolvedCommunity.uiName} -
-
- ), - [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 ( - <> - -
- … -
- - ); - }, [ancestorThreads.length, threadColorStyle]); - - const threadHasNoAncestors = community === threadInfo; + return ; + }, [threadHasNoAncestors]); const { uiName } = useResolvedThreadInfo(threadInfo); - const currentThread = React.useMemo(() => { + + const path = React.useMemo(() => { if (threadHasNoAncestors) { return null; } + const ancestors = ancestorThreads.map(ancestor => ( + + )); + const chatNameClasses = classnames(css.ancestorName, css.chatName); return ( - <> - -
- {uiName} -
- +
+ {ancestors} +
{uiName}
+
); - }, [threadHasNoAncestors, threadColorStyle, uiName]); + }, [ancestorThreads, threadHasNoAncestors, uiName]); - let seeFullStructure = null; - if (SHOW_SEE_FULL_STRUCTURE) { - seeFullStructure = ( - - ); - } + return ( +
+
{resolvedCommunity.uiName}
+ {chevronRight} + {path} +
+ ); +} +function ThreadAncestor(props: ThreadAncestorsProps): React.Node { + const { uiName } = useResolvedThreadInfo(props.threadInfo); + const chevronClasses = classnames(css.ancestorSeparator, css.chevronRight); return ( <> -
- {keyserverInfo} - {middlePath} - {currentThread} -
- {seeFullStructure} +
{uiName}
+ ); } 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 @@ -3,27 +3,22 @@ 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,7 +21,6 @@ [threadInfo.color], ); - const { uiName } = useResolvedThreadInfo(threadInfo); return ( <>
@@ -30,7 +28,6 @@ className={css.threadColorSquare} style={threadBackgroundColorStyle} /> -

{uiName}

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); }