Page MenuHomePhabricator
Differential D6845

[web] Style navigation state info in the top bar
ClosedPublic
Actions

Authored by inka on Feb 23 2023, 5:14 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 9, 12:52 AM
Unknown Object (File)
Wed, Apr 9, 12:24 AM
Unknown Object (File)
Wed, Apr 9, 12:20 AM
Unknown Object (File)
Tue, Apr 8, 11:02 PM
Unknown Object (File)
Tue, Apr 8, 9:56 PM
Unknown Object (File)
Tue, Apr 8, 9:32 PM
Unknown Object (File)
Fri, Apr 4, 4:38 PM
Unknown Object (File)
Fri, Apr 4, 3:39 PM
View All Files
Subscribers
ashoat
atul
tomek

Details

Reviewers
kamil
michal
bartek
Commits
rCOMM966d977bbe17: [web] Style navigation state info in the top bar
Summary

issue: https://linear.app/comm/issue/ENG-2740/add-navigation-state-info-to-the-top-bar
Styling the nav state info according to the designs: https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=7780%3A136895&t=zg5f0X86eUyYnqI7-4

image.png (246×2 px, 37 KB)

image.png (252×2 px, 35 KB)

image.png (244×2 px, 36 KB)

Test Plan

Run web app, check that the navigation state info in the top bar displays correctly

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

inka created this revision.Feb 23 2023, 5:14 AM
Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptFeb 23 2023, 5:14 AM
inka edited the summary of this revision. (Show Details)Feb 23 2023, 5:15 AM
inka edited the test plan for this revision. (Show Details)
inka attached a referenced file: F398087: Screen Recording 2023-02-23 at 13.34.36.mov. (Show Details)
inka added a parent revision: D6842: [web] Add navigation state info to the topbar.
inka added a child revision: D6848: [web] Fix filter panel showing over the topbar.Feb 23 2023, 5:28 AM
Harbormaster completed remote builds in B16813: Diff 22987.Feb 23 2023, 5:30 AM
inka requested review of this revision.Feb 23 2023, 5:30 AM
inka planned changes to this revision.Feb 27 2023, 12:07 AM

The idea to have the overflow: scroll was not accepted by the design team, so I'll have to update that once we decide what to do instead.

inka updated this revision to Diff 23532.Mar 8 2023, 3:26 AM

Change overflow: scroll to hidden. It has been decided that we want to "bias" towards the last item, hence the "flex-shrink: 0.5" for the last item

inka edited the summary of this revision. (Show Details)Mar 8 2023, 3:32 AM
Harbormaster completed remote builds in B17182: Diff 23532.Mar 8 2023, 3:42 AM
kamil accepted this revision.Mar 13 2023, 2:37 AM
This revision is now accepted and ready to land.Mar 13 2023, 2:37 AM
inka mentioned this in D6745: [web] Split ThreadTopBar into two components.Mar 13 2023, 4:05 AM
inka updated this revision to Diff 23667.Mar 13 2023, 4:10 AM

Remove unnnecessary div

Harbormaster completed remote builds in B17278: Diff 23667.Mar 13 2023, 4:25 AM
Closed by commit rCOMM966d977bbe17: [web] Style navigation state info in the top bar (authored by • InkaSokolowska). · Explain WhyMar 13 2023, 6:35 AM
This revision was automatically updated to reflect the committed changes.
• InkaSokolowska added a commit: rCOMM966d977bbe17: [web] Style navigation state info in the top bar.
inka mentioned this in D6393: Fixed incorret display for long thread names on web..Mar 14 2023, 7:37 AM

Revision Contents
Changeset List

Diff 23684

View Options

web/navigation-panels/chat-thread-ancestors.css

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
pushTypes, pushTypes,
type CreateMessageInfoParams, type CreateMessageInfoParams,
type MessageSpec, type MessageSpec,
type NotificationTextsParams,
} from './message-spec.js'; } from './message-spec.js';
import { joinResult } from './utils.js'; import { joinResult } from './utils.js';
import type { PlatformDetails } from '../../types/device-types.js'; import type { PlatformDetails } from '../../types/device-types.js';
import { messageTypes } from '../../types/message-types.js'; import { messageTypes } from '../../types/message-types.js';
import type { import type {
MessageInfo, MessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types.js'; } from '../../types/message-types.js';
import type { import type {
CreateSidebarMessageData, CreateSidebarMessageData,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
} from '../../types/messages/create-sidebar.js'; } from '../../types/messages/create-sidebar.js';
import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js'; import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js';
import type { NotifTexts } from '../../types/notif-types.js'; import type { NotifTexts } from '../../types/notif-types.js';
import type { ThreadInfo } from '../../types/thread-types.js'; import type { ThreadInfo } from '../../types/thread-types.js';
import type { RelativeUserInfo } from '../../types/user-types.js'; import type { RelativeUserInfo } from '../../types/user-types.js';
import { import {
ET, ET,
type EntityText, type EntityText,
pluralizeEntityText, pluralizeEntityText,
} from '../../utils/entity-text.js'; } from '../../utils/entity-text.js';
import { isMentioned } from '../mention-utils.js';
import { hasMinCodeVersion } from '../version-utils.js'; import { hasMinCodeVersion } from '../version-utils.js';
export const createSidebarMessageSpec: MessageSpec< export const createSidebarMessageSpec: MessageSpec<
CreateSidebarMessageData, CreateSidebarMessageData,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
> = Object.freeze({ > = Object.freeze({
messageContentForServerDB( messageContentForServerDB(
▲ Show 20 Lines • Show All 134 Lines • ▼ Show 20 Lines unshimMessageInfo(
unwrapped: RawCreateSidebarMessageInfo, unwrapped: RawCreateSidebarMessageInfo,
): RawCreateSidebarMessageInfo { ): RawCreateSidebarMessageInfo {
return unwrapped; return unwrapped;
}, },
async notificationTexts( async notificationTexts(
messageInfos: $ReadOnlyArray<MessageInfo>, messageInfos: $ReadOnlyArray<MessageInfo>,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
params: NotificationTextsParams,
): Promise<NotifTexts> { ): Promise<NotifTexts> {
const firstMessageInfo = messageInfos[0]; const firstMessageInfo = messageInfos[0];
invariant( invariant(
firstMessageInfo.type === messageTypes.CREATE_SIDEBAR, firstMessageInfo.type === messageTypes.CREATE_SIDEBAR,
'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!', 'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!',
); );
const creator = ET.user({ userInfo: firstMessageInfo.creator }); const creator = ET.user({ userInfo: firstMessageInfo.creator });
const prefix = ET`${creator}`; const prefix = ET`${creator}`;
const initialName = firstMessageInfo.initialThreadState.name; const initialName = firstMessageInfo.initialThreadState.name;
const sourceMessageAuthorPossessive = ET.user({ const sourceMessageAuthorPossessive = ET.user({
userInfo: firstMessageInfo.sourceMessageAuthor, userInfo: firstMessageInfo.sourceMessageAuthor,
possessive: true, possessive: true,
}); });
let body = `started a thread in response to `; let body = `started a thread in response to `;
body = ET`${body} ${sourceMessageAuthorPossessive} message`; body = ET`${body} ${sourceMessageAuthorPossessive} message`;
if (initialName) {
const { username } = params.notifTargetUserInfo;
const secondMessageInfo = messageInfos[1];
if (
username &&
secondMessageInfo &&
secondMessageInfo.type === messageTypes.SIDEBAR_SOURCE &&
secondMessageInfo.sourceMessage.type === messageTypes.TEXT &&
isMentioned(username, secondMessageInfo.sourceMessage.text)
) {
body = ET`${body} that tagged you`;
} else if (initialName) {
body = ET`${body} "${initialName}"`; body = ET`${body} "${initialName}"`;
} }
return { return {
merged: ET`${prefix} ${body}`, merged: ET`${prefix} ${body}`,
body, body,
title: threadInfo.uiName, title: threadInfo.uiName,
prefix, prefix,
Show All 20 Lines
View Options

web/navigation-panels/chat-thread-ancestors.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
pushTypes, pushTypes,
type CreateMessageInfoParams, type CreateMessageInfoParams,
type MessageSpec, type MessageSpec,
type NotificationTextsParams,
} from './message-spec.js'; } from './message-spec.js';
import { joinResult } from './utils.js'; import { joinResult } from './utils.js';
import type { PlatformDetails } from '../../types/device-types.js'; import type { PlatformDetails } from '../../types/device-types.js';
import { messageTypes } from '../../types/message-types.js'; import { messageTypes } from '../../types/message-types.js';
import type { import type {
MessageInfo, MessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types.js'; } from '../../types/message-types.js';
import type { import type {
CreateSidebarMessageData, CreateSidebarMessageData,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
} from '../../types/messages/create-sidebar.js'; } from '../../types/messages/create-sidebar.js';
import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js'; import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js';
import type { NotifTexts } from '../../types/notif-types.js'; import type { NotifTexts } from '../../types/notif-types.js';
import type { ThreadInfo } from '../../types/thread-types.js'; import type { ThreadInfo } from '../../types/thread-types.js';
import type { RelativeUserInfo } from '../../types/user-types.js'; import type { RelativeUserInfo } from '../../types/user-types.js';
import { import {
ET, ET,
type EntityText, type EntityText,
pluralizeEntityText, pluralizeEntityText,
} from '../../utils/entity-text.js'; } from '../../utils/entity-text.js';
import { isMentioned } from '../mention-utils.js';
import { hasMinCodeVersion } from '../version-utils.js'; import { hasMinCodeVersion } from '../version-utils.js';
export const createSidebarMessageSpec: MessageSpec< export const createSidebarMessageSpec: MessageSpec<
CreateSidebarMessageData, CreateSidebarMessageData,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
> = Object.freeze({ > = Object.freeze({
messageContentForServerDB( messageContentForServerDB(
▲ Show 20 Lines • Show All 134 Lines • ▼ Show 20 Lines unshimMessageInfo(
unwrapped: RawCreateSidebarMessageInfo, unwrapped: RawCreateSidebarMessageInfo,
): RawCreateSidebarMessageInfo { ): RawCreateSidebarMessageInfo {
return unwrapped; return unwrapped;
}, },
async notificationTexts( async notificationTexts(
messageInfos: $ReadOnlyArray<MessageInfo>, messageInfos: $ReadOnlyArray<MessageInfo>,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
params: NotificationTextsParams,
): Promise<NotifTexts> { ): Promise<NotifTexts> {
const firstMessageInfo = messageInfos[0]; const firstMessageInfo = messageInfos[0];
invariant( invariant(
firstMessageInfo.type === messageTypes.CREATE_SIDEBAR, firstMessageInfo.type === messageTypes.CREATE_SIDEBAR,
'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!', 'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!',
); );
const creator = ET.user({ userInfo: firstMessageInfo.creator }); const creator = ET.user({ userInfo: firstMessageInfo.creator });
const prefix = ET`${creator}`; const prefix = ET`${creator}`;
const initialName = firstMessageInfo.initialThreadState.name; const initialName = firstMessageInfo.initialThreadState.name;
const sourceMessageAuthorPossessive = ET.user({ const sourceMessageAuthorPossessive = ET.user({
userInfo: firstMessageInfo.sourceMessageAuthor, userInfo: firstMessageInfo.sourceMessageAuthor,
possessive: true, possessive: true,
}); });
let body = `started a thread in response to `; let body = `started a thread in response to `;
body = ET`${body} ${sourceMessageAuthorPossessive} message`; body = ET`${body} ${sourceMessageAuthorPossessive} message`;
if (initialName) {
const { username } = params.notifTargetUserInfo;
const secondMessageInfo = messageInfos[1];
if (
username &&
secondMessageInfo &&
secondMessageInfo.type === messageTypes.SIDEBAR_SOURCE &&
secondMessageInfo.sourceMessage.type === messageTypes.TEXT &&
isMentioned(username, secondMessageInfo.sourceMessage.text)
) {
body = ET`${body} that tagged you`;
} else if (initialName) {
body = ET`${body} "${initialName}"`; body = ET`${body} "${initialName}"`;
} }
return { return {
merged: ET`${prefix} ${body}`, merged: ET`${prefix} ${body}`,
body, body,
title: threadInfo.uiName, title: threadInfo.uiName,
prefix, prefix,
Show All 20 Lines
View Options

web/navigation-panels/nav-state-info-bar.css

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
pushTypes, pushTypes,
type CreateMessageInfoParams, type CreateMessageInfoParams,
type MessageSpec, type MessageSpec,
type NotificationTextsParams,
} from './message-spec.js'; } from './message-spec.js';
import { joinResult } from './utils.js'; import { joinResult } from './utils.js';
import type { PlatformDetails } from '../../types/device-types.js'; import type { PlatformDetails } from '../../types/device-types.js';
import { messageTypes } from '../../types/message-types.js'; import { messageTypes } from '../../types/message-types.js';
import type { import type {
MessageInfo, MessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types.js'; } from '../../types/message-types.js';
import type { import type {
CreateSidebarMessageData, CreateSidebarMessageData,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
} from '../../types/messages/create-sidebar.js'; } from '../../types/messages/create-sidebar.js';
import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js'; import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js';
import type { NotifTexts } from '../../types/notif-types.js'; import type { NotifTexts } from '../../types/notif-types.js';
import type { ThreadInfo } from '../../types/thread-types.js'; import type { ThreadInfo } from '../../types/thread-types.js';
import type { RelativeUserInfo } from '../../types/user-types.js'; import type { RelativeUserInfo } from '../../types/user-types.js';
import { import {
ET, ET,
type EntityText, type EntityText,
pluralizeEntityText, pluralizeEntityText,
} from '../../utils/entity-text.js'; } from '../../utils/entity-text.js';
import { isMentioned } from '../mention-utils.js';
import { hasMinCodeVersion } from '../version-utils.js'; import { hasMinCodeVersion } from '../version-utils.js';
export const createSidebarMessageSpec: MessageSpec< export const createSidebarMessageSpec: MessageSpec<
CreateSidebarMessageData, CreateSidebarMessageData,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
> = Object.freeze({ > = Object.freeze({
messageContentForServerDB( messageContentForServerDB(
▲ Show 20 Lines • Show All 134 Lines • ▼ Show 20 Lines unshimMessageInfo(
unwrapped: RawCreateSidebarMessageInfo, unwrapped: RawCreateSidebarMessageInfo,
): RawCreateSidebarMessageInfo { ): RawCreateSidebarMessageInfo {
return unwrapped; return unwrapped;
}, },
async notificationTexts( async notificationTexts(
messageInfos: $ReadOnlyArray<MessageInfo>, messageInfos: $ReadOnlyArray<MessageInfo>,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
params: NotificationTextsParams,
): Promise<NotifTexts> { ): Promise<NotifTexts> {
const firstMessageInfo = messageInfos[0]; const firstMessageInfo = messageInfos[0];
invariant( invariant(
firstMessageInfo.type === messageTypes.CREATE_SIDEBAR, firstMessageInfo.type === messageTypes.CREATE_SIDEBAR,
'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!', 'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!',
); );
const creator = ET.user({ userInfo: firstMessageInfo.creator }); const creator = ET.user({ userInfo: firstMessageInfo.creator });
const prefix = ET`${creator}`; const prefix = ET`${creator}`;
const initialName = firstMessageInfo.initialThreadState.name; const initialName = firstMessageInfo.initialThreadState.name;
const sourceMessageAuthorPossessive = ET.user({ const sourceMessageAuthorPossessive = ET.user({
userInfo: firstMessageInfo.sourceMessageAuthor, userInfo: firstMessageInfo.sourceMessageAuthor,
possessive: true, possessive: true,
}); });
let body = `started a thread in response to `; let body = `started a thread in response to `;
body = ET`${body} ${sourceMessageAuthorPossessive} message`; body = ET`${body} ${sourceMessageAuthorPossessive} message`;
if (initialName) {
const { username } = params.notifTargetUserInfo;
const secondMessageInfo = messageInfos[1];
if (
username &&
secondMessageInfo &&
secondMessageInfo.type === messageTypes.SIDEBAR_SOURCE &&
secondMessageInfo.sourceMessage.type === messageTypes.TEXT &&
isMentioned(username, secondMessageInfo.sourceMessage.text)
) {
body = ET`${body} that tagged you`;
} else if (initialName) {
body = ET`${body} "${initialName}"`; body = ET`${body} "${initialName}"`;
} }
return { return {
merged: ET`${prefix} ${body}`, merged: ET`${prefix} ${body}`,
body, body,
title: threadInfo.uiName, title: threadInfo.uiName,
prefix, prefix,
Show All 20 Lines
View Options

web/navigation-panels/nav-state-info-bar.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
pushTypes, pushTypes,
type CreateMessageInfoParams, type CreateMessageInfoParams,
type MessageSpec, type MessageSpec,
type NotificationTextsParams,
} from './message-spec.js'; } from './message-spec.js';
import { joinResult } from './utils.js'; import { joinResult } from './utils.js';
import type { PlatformDetails } from '../../types/device-types.js'; import type { PlatformDetails } from '../../types/device-types.js';
import { messageTypes } from '../../types/message-types.js'; import { messageTypes } from '../../types/message-types.js';
import type { import type {
MessageInfo, MessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types.js'; } from '../../types/message-types.js';
import type { import type {
CreateSidebarMessageData, CreateSidebarMessageData,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
} from '../../types/messages/create-sidebar.js'; } from '../../types/messages/create-sidebar.js';
import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js'; import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js';
import type { NotifTexts } from '../../types/notif-types.js'; import type { NotifTexts } from '../../types/notif-types.js';
import type { ThreadInfo } from '../../types/thread-types.js'; import type { ThreadInfo } from '../../types/thread-types.js';
import type { RelativeUserInfo } from '../../types/user-types.js'; import type { RelativeUserInfo } from '../../types/user-types.js';
import { import {
ET, ET,
type EntityText, type EntityText,
pluralizeEntityText, pluralizeEntityText,
} from '../../utils/entity-text.js'; } from '../../utils/entity-text.js';
import { isMentioned } from '../mention-utils.js';
import { hasMinCodeVersion } from '../version-utils.js'; import { hasMinCodeVersion } from '../version-utils.js';
export const createSidebarMessageSpec: MessageSpec< export const createSidebarMessageSpec: MessageSpec<
CreateSidebarMessageData, CreateSidebarMessageData,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
> = Object.freeze({ > = Object.freeze({
messageContentForServerDB( messageContentForServerDB(
▲ Show 20 Lines • Show All 134 Lines • ▼ Show 20 Lines unshimMessageInfo(
unwrapped: RawCreateSidebarMessageInfo, unwrapped: RawCreateSidebarMessageInfo,
): RawCreateSidebarMessageInfo { ): RawCreateSidebarMessageInfo {
return unwrapped; return unwrapped;
}, },
async notificationTexts( async notificationTexts(
messageInfos: $ReadOnlyArray<MessageInfo>, messageInfos: $ReadOnlyArray<MessageInfo>,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
params: NotificationTextsParams,
): Promise<NotifTexts> { ): Promise<NotifTexts> {
const firstMessageInfo = messageInfos[0]; const firstMessageInfo = messageInfos[0];
invariant( invariant(
firstMessageInfo.type === messageTypes.CREATE_SIDEBAR, firstMessageInfo.type === messageTypes.CREATE_SIDEBAR,
'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!', 'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!',
); );
const creator = ET.user({ userInfo: firstMessageInfo.creator }); const creator = ET.user({ userInfo: firstMessageInfo.creator });
const prefix = ET`${creator}`; const prefix = ET`${creator}`;
const initialName = firstMessageInfo.initialThreadState.name; const initialName = firstMessageInfo.initialThreadState.name;
const sourceMessageAuthorPossessive = ET.user({ const sourceMessageAuthorPossessive = ET.user({
userInfo: firstMessageInfo.sourceMessageAuthor, userInfo: firstMessageInfo.sourceMessageAuthor,
possessive: true, possessive: true,
}); });
let body = `started a thread in response to `; let body = `started a thread in response to `;
body = ET`${body} ${sourceMessageAuthorPossessive} message`; body = ET`${body} ${sourceMessageAuthorPossessive} message`;
if (initialName) {
const { username } = params.notifTargetUserInfo;
const secondMessageInfo = messageInfos[1];
if (
username &&
secondMessageInfo &&
secondMessageInfo.type === messageTypes.SIDEBAR_SOURCE &&
secondMessageInfo.sourceMessage.type === messageTypes.TEXT &&
isMentioned(username, secondMessageInfo.sourceMessage.text)
) {
body = ET`${body} that tagged you`;
} else if (initialName) {
body = ET`${body} "${initialName}"`; body = ET`${body} "${initialName}"`;
} }
return { return {
merged: ET`${prefix} ${body}`, merged: ET`${prefix} ${body}`,
body, body,
title: threadInfo.uiName, title: threadInfo.uiName,
prefix, prefix,
Show All 20 Lines
View Options

web/theme.css

Loading...