Open settings on sidebar user profile click

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-19 20:05:13 +05:30
parent 27e7a67a9a
commit c4e16418e0
4 changed files with 42 additions and 41 deletions

View file

@ -70,9 +70,6 @@
& .context-menu__item > button { & .context-menu__item > button {
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
& .text {
color: var(--tc-surface-normal);
}
& .ic-raw { & .ic-raw {
@include dir.side(margin, 0, var(--sp-tight)); @include dir.side(margin, 0, var(--sp-tight));
} }

View file

@ -4,7 +4,6 @@ import './SideBar.scss';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import colorMXID from '../../../util/colorMXID'; import colorMXID from '../../../util/colorMXID';
import logout from '../../../client/action/logout';
import { import {
selectTab, openInviteList, openSearch, openSettings, selectTab, openInviteList, openSearch, openSettings,
} from '../../../client/action/navigation'; } from '../../../client/action/navigation';
@ -13,14 +12,11 @@ import { abbreviateNumber } from '../../../util/common';
import ScrollView from '../../atoms/scroll/ScrollView'; import ScrollView from '../../atoms/scroll/ScrollView';
import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar'; import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
import ContextMenu, { MenuItem, MenuHeader, MenuBorder } from '../../atoms/context-menu/ContextMenu';
import HomeIC from '../../../../public/res/ic/outlined/home.svg'; import HomeIC from '../../../../public/res/ic/outlined/home.svg';
import UserIC from '../../../../public/res/ic/outlined/user.svg'; import UserIC from '../../../../public/res/ic/outlined/user.svg';
import SearchIC from '../../../../public/res/ic/outlined/search.svg'; import SearchIC from '../../../../public/res/ic/outlined/search.svg';
import InviteIC from '../../../../public/res/ic/outlined/invite.svg'; import InviteIC from '../../../../public/res/ic/outlined/invite.svg';
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
import PowerIC from '../../../../public/res/ic/outlined/power.svg';
function ProfileAvatarMenu() { function ProfileAvatarMenu() {
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
@ -48,31 +44,12 @@ function ProfileAvatarMenu() {
}, []); }, []);
return ( return (
<ContextMenu <SidebarAvatar
content={(hideMenu) => ( onClick={openSettings}
<> tooltip={profile.displayName}
<MenuHeader>{mx.getUserId()}</MenuHeader> imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
{/* <MenuItem iconSrc={UserIC} onClick={() => ''}>Profile</MenuItem> */} bgColor={colorMXID(mx.getUserId())}
{/* <MenuItem iconSrc={BellIC} onClick={() => ''}>Notification settings</MenuItem> */} text={profile.displayName}
<MenuItem
iconSrc={SettingsIC}
onClick={() => { hideMenu(); openSettings(); }}
>
Settings
</MenuItem>
<MenuBorder />
<MenuItem iconSrc={PowerIC} variant="danger" onClick={logout}>Logout</MenuItem>
</>
)}
render={(toggleMenu) => (
<SidebarAvatar
onClick={toggleMenu}
tooltip={profile.displayName}
imageSrc={profile.avatarUrl !== null ? mx.mxcUrlToHttp(profile.avatarUrl, 42, 42, 'crop') : null}
bgColor={colorMXID(mx.getUserId())}
text={profile.displayName}
/>
)}
/> />
); );
} }

View file

@ -6,6 +6,7 @@ import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons'; import cons from '../../../client/state/cons';
import settings from '../../../client/state/settings'; import settings from '../../../client/state/settings';
import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings'; import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
import logout from '../../../client/action/logout';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../atoms/button/IconButton';
@ -24,6 +25,7 @@ import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
import SunIC from '../../../../public/res/ic/outlined/sun.svg'; import SunIC from '../../../../public/res/ic/outlined/sun.svg';
import LockIC from '../../../../public/res/ic/outlined/lock.svg'; import LockIC from '../../../../public/res/ic/outlined/lock.svg';
import InfoIC from '../../../../public/res/ic/outlined/info.svg'; import InfoIC from '../../../../public/res/ic/outlined/info.svg';
import PowerIC from '../../../../public/res/ic/outlined/power.svg';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import CinnySVG from '../../../../public/res/svg/cinny.svg'; import CinnySVG from '../../../../public/res/svg/cinny.svg';
@ -177,6 +179,10 @@ function Settings({ isOpen, onRequestClose }) {
}]; }];
const [selectedSection, setSelectedSection] = useState(settingSections[0]); const [selectedSection, setSelectedSection] = useState(settingSections[0]);
const handleLogout = () => {
if (confirm('Confirm logout')) logout();
};
return ( return (
<PopupWindow <PopupWindow
className="settings-window" className="settings-window"
@ -184,18 +190,29 @@ function Settings({ isOpen, onRequestClose }) {
onRequestClose={onRequestClose} onRequestClose={onRequestClose}
title="Settings" title="Settings"
contentTitle={selectedSection.name} contentTitle={selectedSection.name}
drawer={ drawer={(
settingSections.map((section) => ( <>
{
settingSections.map((section) => (
<PWContentSelector
key={section.name}
selected={selectedSection.name === section.name}
onClick={() => setSelectedSection(section)}
iconSrc={section.iconSrc}
>
{section.name}
</PWContentSelector>
))
}
<PWContentSelector <PWContentSelector
key={section.name} variant="danger"
selected={selectedSection.name === section.name} onClick={handleLogout}
onClick={() => setSelectedSection(section)} iconSrc={PowerIC}
iconSrc={section.iconSrc}
> >
{section.name} Logout
</PWContentSelector> </PWContentSelector>
)) </>
} )}
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />} contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
> >
{selectedSection.render()} {selectedSection.render()}

View file

@ -1,6 +1,16 @@
@use '../../partials/flex';
@use '../../partials/dir'; @use '../../partials/dir';
.settings-window { .settings-window {
& .pw__drawer__content {
@extend .cp-fx__column;
min-height: 100%;
padding-bottom: var(--sp-extra-tight);
& > .pw-content-selector:last-child {
margin-top: auto;
}
}
& .pw__content-container { & .pw__content-container {
min-height: 100%; min-height: 100%;
} }