Page MenuHomePhabricator
Differential D3321

[web] Add logged in section
ClosedPublic
Actions

Authored by tomek on Mar 2 2022, 7:03 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 2, 7:27 PM
Unknown Object (File)
Tue, Apr 1, 10:24 PM
Unknown Object (File)
Mon, Mar 31, 11:29 PM
Unknown Object (File)
Mon, Mar 31, 3:51 PM
Unknown Object (File)
Mon, Mar 31, 9:43 AM
Unknown Object (File)
Mon, Mar 31, 7:42 AM
Unknown Object (File)
Mon, Mar 31, 6:55 AM
Unknown Object (File)
Mon, Mar 31, 3:27 AM
View All Files
Subscribers
• adrian
ashoat
• karol

Details

Reviewers
• benschac
atul
• jacek
Commits
rCOMM18dec803fe3a: [web] Add logged in section
Summary

Display a label and username
https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=1272%3A88750

account-settings-3.png (786×1 px, 35 KB)

account-settings-8.png (688×1 px, 33 KB)

Depends on D3320

Test Plan

Render the page instead of Calendar and check if it matches the design and if current username was displayed

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

tomek created this revision.Mar 2 2022, 7:03 AM
Herald added subscribers: • karol, • adrian, ashoat. · View Herald TranscriptMar 2 2022, 7:03 AM
tomek edited the summary of this revision. (Show Details)Mar 2 2022, 7:03 AM
tomek edited the summary of this revision. (Show Details)
tomek edited the summary of this revision. (Show Details)
tomek added a parent revision: D3320: [web] Introduce empty account page.
Harbormaster completed remote builds in B7108: Diff 10018.Mar 2 2022, 7:08 AM
tomek requested review of this revision.Mar 2 2022, 7:08 AM
tomek planned changes to this revision.Mar 2 2022, 7:51 AM
tomek updated this revision to Diff 10024.Mar 2 2022, 8:01 AM

Handle long usernames

tomek added inline comments.Mar 2 2022, 8:02 AM
web/settings/account-settings.css
28–31 ↗(On Diff #10024)

We're settings these so that username is truncated. Setting the color is necessary here, as the color of ellipsis is taken from parent instead of the child that is truncated (we want for the ellipsis to have the same color as the username).

tomek edited the summary of this revision. (Show Details)Mar 2 2022, 8:03 AM
tomek added a child revision: D3322: [web] Add logout button.Mar 2 2022, 8:04 AM
Harbormaster completed remote builds in B7114: Diff 10024.Mar 2 2022, 8:06 AM
tomek updated this revision to Diff 10027.Mar 2 2022, 8:08 AM

Fix rebase issue

Harbormaster completed remote builds in B7117: Diff 10027.Mar 2 2022, 8:20 AM
• benschac requested changes to this revision.Mar 2 2022, 8:40 AM
• benschac added inline comments.
web/settings/account-settings.css
13

I like to avoid margin as much as possible. Could we get the same result using padding or flex-box?

23

nit: could padding-bottom: 24px work?

web/settings/account-settings.react.js
11

It's wild that this screen would show up in a logged out state and force us to write this conditional.

22

doing a git grep of the project we don't normally add strings like this `{'Logged in as '} . Why do it this way here?

This revision now requires changes to proceed.Mar 2 2022, 8:40 AM
tomek added inline comments.Mar 4 2022, 5:21 AM
web/settings/account-settings.css
13

Ok, will change that

23

No, as the border is rendered between the padding and the margin. We can use padding top though.

web/settings/account-settings.react.js
11

This screen shouldn't be visible for logged out users... We can replace this conditional with invariant, but I prefer avoiding them because they caused a lot of issues in the past. We can also just render null (or some message) in case of the user being logged out, which sounds like a reasonable solution here.

22

This string ends with a space, and if you search for '} then there are a couple of usages. If this notation is confusing I can use non-breaking space (which might be a better fit here).

tomek updated this revision to Diff 10073.Mar 4 2022, 7:02 AM

Use paddings and do not render logged out state

Harbormaster completed remote builds in B7147: Diff 10073.Mar 4 2022, 7:07 AM
• benschac accepted this revision.Mar 4 2022, 8:12 AM
• benschac added inline comments.
web/settings/account-settings.react.js
22

that makes sense!

This revision is now accepted and ready to land.Mar 4 2022, 8:12 AM
atul accepted this revision.Mar 8 2022, 8:24 AM

Looks good!

tomek updated this revision to Diff 10192.Mar 9 2022, 4:22 AM
tomek marked 4 inline comments as done.

Rebase

Harbormaster completed remote builds in B7238: Diff 10192.Mar 9 2022, 4:32 AM
Closed by commit rCOMM18dec803fe3a: [web] Add logged in section (authored by tomek). · Explain WhyMar 9 2022, 4:37 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMM18dec803fe3a: [web] Add logged in section.

Revision Contents
Changeset List

PathSize
web/
settings/
30 lines
17 lines
1 line

Diff 10027

View Options

web/settings/account-settings.css

Show All 20 Lines
import { import {
useServerCall, useServerCall,
useDispatchActionPromise, useDispatchActionPromise,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import MenuItem from '../components/menu-item.react'; import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react'; import Menu from '../components/menu.react';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react'; import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react'; import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react'; import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react'; import ThreadMembersModal from '../modals/threads/members/members-modal.react';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react'; import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react'; import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react'; import SWMansionIcon from '../SWMansionIcon.react';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Lines return (
text="Leave Thread" text="Leave Thread"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo]);
const onClickPromoteSidebarToThread = React.useCallback(
() =>
pushModal(
<SidebarPromoteModal
threadInfo={threadInfo}
onClose={popModal}
onConfirm={onPromoteSidebar}
/>,
),
[pushModal, threadInfo, popModal, onPromoteSidebar],
);
const promoteSidebar = React.useMemo(() => { const promoteSidebar = React.useMemo(() => {
return ( return (
<MenuItem <MenuItem
key="promote" key="promote"
text="Promote Thread" text="Promote Thread"
icon="message-square-lines" icon="message-square-lines"
onClick={onPromoteSidebar} onClick={onClickPromoteSidebarToThread}
/> />
); );
}, [onPromoteSidebar]); }, [onClickPromoteSidebarToThread]);
const menuItems = React.useMemo(() => { const menuItems = React.useMemo(() => {
const notificationsItem = ( const notificationsItem = (
<MenuItem key="notifications" text="Notifications" icon="bell" /> <MenuItem key="notifications" text="Notifications" icon="bell" />
); );
const separator = <hr key="separator" className={css.separator} />; const separator = <hr key="separator" className={css.separator} />;
// TODO: Enable menu items when the modals are implemented // TODO: Enable menu items when the modals are implemented
Show All 33 Lines
View Options

web/settings/account-settings.react.js

Show All 20 Lines
import { import {
useServerCall, useServerCall,
useDispatchActionPromise, useDispatchActionPromise,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import MenuItem from '../components/menu-item.react'; import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react'; import Menu from '../components/menu.react';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react'; import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react'; import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react'; import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react'; import ThreadMembersModal from '../modals/threads/members/members-modal.react';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react'; import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react'; import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react'; import SWMansionIcon from '../SWMansionIcon.react';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Lines return (
text="Leave Thread" text="Leave Thread"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo]);
const onClickPromoteSidebarToThread = React.useCallback(
() =>
pushModal(
<SidebarPromoteModal
threadInfo={threadInfo}
onClose={popModal}
onConfirm={onPromoteSidebar}
/>,
),
[pushModal, threadInfo, popModal, onPromoteSidebar],
);
const promoteSidebar = React.useMemo(() => { const promoteSidebar = React.useMemo(() => {
return ( return (
<MenuItem <MenuItem
key="promote" key="promote"
text="Promote Thread" text="Promote Thread"
icon="message-square-lines" icon="message-square-lines"
onClick={onPromoteSidebar} onClick={onClickPromoteSidebarToThread}
/> />
); );
}, [onPromoteSidebar]); }, [onClickPromoteSidebarToThread]);
const menuItems = React.useMemo(() => { const menuItems = React.useMemo(() => {
const notificationsItem = ( const notificationsItem = (
<MenuItem key="notifications" text="Notifications" icon="bell" /> <MenuItem key="notifications" text="Notifications" icon="bell" />
); );
const separator = <hr key="separator" className={css.separator} />; const separator = <hr key="separator" className={css.separator} />;
// TODO: Enable menu items when the modals are implemented // TODO: Enable menu items when the modals are implemented
Show All 33 Lines
View Options

web/theme.css

Show All 20 Lines
import { import {
useServerCall, useServerCall,
useDispatchActionPromise, useDispatchActionPromise,
} from 'lib/utils/action-utils'; } from 'lib/utils/action-utils';
import MenuItem from '../components/menu-item.react'; import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react'; import Menu from '../components/menu.react';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react'; import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react'; import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react'; import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react'; import ThreadMembersModal from '../modals/threads/members/members-modal.react';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react'; import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react'; import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
import { useSelector } from '../redux/redux-utils'; import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react'; import SWMansionIcon from '../SWMansionIcon.react';
import css from './thread-menu.css'; import css from './thread-menu.css';
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Lines return (
text="Leave Thread" text="Leave Thread"
icon="logout" icon="logout"
dangerous dangerous
onClick={onClickLeaveThread} onClick={onClickLeaveThread}
/> />
); );
}, [onClickLeaveThread, threadInfo]); }, [onClickLeaveThread, threadInfo]);
const onClickPromoteSidebarToThread = React.useCallback(
() =>
pushModal(
<SidebarPromoteModal
threadInfo={threadInfo}
onClose={popModal}
onConfirm={onPromoteSidebar}
/>,
),
[pushModal, threadInfo, popModal, onPromoteSidebar],
);
const promoteSidebar = React.useMemo(() => { const promoteSidebar = React.useMemo(() => {
return ( return (
<MenuItem <MenuItem
key="promote" key="promote"
text="Promote Thread" text="Promote Thread"
icon="message-square-lines" icon="message-square-lines"
onClick={onPromoteSidebar} onClick={onClickPromoteSidebarToThread}
/> />
); );
}, [onPromoteSidebar]); }, [onClickPromoteSidebarToThread]);
const menuItems = React.useMemo(() => { const menuItems = React.useMemo(() => {
const notificationsItem = ( const notificationsItem = (
<MenuItem key="notifications" text="Notifications" icon="bell" /> <MenuItem key="notifications" text="Notifications" icon="bell" />
); );
const separator = <hr key="separator" className={css.separator} />; const separator = <hr key="separator" className={css.separator} />;
// TODO: Enable menu items when the modals are implemented // TODO: Enable menu items when the modals are implemented
Show All 33 Lines