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 {
border-radius: var(--bo-radius);
& .text {
color: var(--tc-surface-normal);
}
& .ic-raw {
@include dir.side(margin, 0, var(--sp-tight));
}

View file

@ -4,7 +4,6 @@ import './SideBar.scss';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import colorMXID from '../../../util/colorMXID';
import logout from '../../../client/action/logout';
import {
selectTab, openInviteList, openSearch, openSettings,
} from '../../../client/action/navigation';
@ -13,14 +12,11 @@ import { abbreviateNumber } from '../../../util/common';
import ScrollView from '../../atoms/scroll/ScrollView';
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 UserIC from '../../../../public/res/ic/outlined/user.svg';
import SearchIC from '../../../../public/res/ic/outlined/search.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() {
const mx = initMatrix.matrixClient;
@ -48,32 +44,13 @@ function ProfileAvatarMenu() {
}, []);
return (
<ContextMenu
content={(hideMenu) => (
<>
<MenuHeader>{mx.getUserId()}</MenuHeader>
{/* <MenuItem iconSrc={UserIC} onClick={() => ''}>Profile</MenuItem> */}
{/* <MenuItem iconSrc={BellIC} onClick={() => ''}>Notification settings</MenuItem> */}
<MenuItem
iconSrc={SettingsIC}
onClick={() => { hideMenu(); openSettings(); }}
>
Settings
</MenuItem>
<MenuBorder />
<MenuItem iconSrc={PowerIC} variant="danger" onClick={logout}>Logout</MenuItem>
</>
)}
render={(toggleMenu) => (
<SidebarAvatar
onClick={toggleMenu}
onClick={openSettings}
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 settings from '../../../client/state/settings';
import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
import logout from '../../../client/action/logout';
import Text from '../../atoms/text/Text';
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 LockIC from '../../../../public/res/ic/outlined/lock.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 CinnySVG from '../../../../public/res/svg/cinny.svg';
@ -177,6 +179,10 @@ function Settings({ isOpen, onRequestClose }) {
}];
const [selectedSection, setSelectedSection] = useState(settingSections[0]);
const handleLogout = () => {
if (confirm('Confirm logout')) logout();
};
return (
<PopupWindow
className="settings-window"
@ -184,7 +190,9 @@ function Settings({ isOpen, onRequestClose }) {
onRequestClose={onRequestClose}
title="Settings"
contentTitle={selectedSection.name}
drawer={
drawer={(
<>
{
settingSections.map((section) => (
<PWContentSelector
key={section.name}
@ -196,6 +204,15 @@ function Settings({ isOpen, onRequestClose }) {
</PWContentSelector>
))
}
<PWContentSelector
variant="danger"
onClick={handleLogout}
iconSrc={PowerIC}
>
Logout
</PWContentSelector>
</>
)}
contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
>
{selectedSection.render()}

View file

@ -1,6 +1,16 @@
@use '../../partials/flex';
@use '../../partials/dir';
.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 {
min-height: 100%;
}