From 74464992e61467ee6e05624c634bb7da7174560f Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Thu, 13 Jan 2022 09:42:23 +0530 Subject: [PATCH] Redesign session chip in profile viewer Signed-off-by: Ajay Bura --- .../profile-viewer/ProfileViewer.jsx | 30 ++++++++++--------- .../profile-viewer/ProfileViewer.scss | 14 ++++++--- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/src/app/organisms/profile-viewer/ProfileViewer.jsx b/src/app/organisms/profile-viewer/ProfileViewer.jsx index 6eb370d..fc33b6d 100644 --- a/src/app/organisms/profile-viewer/ProfileViewer.jsx +++ b/src/app/organisms/profile-viewer/ProfileViewer.jsx @@ -20,11 +20,13 @@ import IconButton from '../../atoms/button/IconButton'; import Input from '../../atoms/input/Input'; import Avatar from '../../atoms/avatar/Avatar'; import Button from '../../atoms/button/Button'; +import { MenuItem } from '../../atoms/context-menu/ContextMenu'; import PowerLevelSelector from '../../molecules/power-level-selector/PowerLevelSelector'; import Dialog from '../../molecules/dialog/Dialog'; import SettingTile from '../../molecules/setting-tile/SettingTile'; import ShieldEmptyIC from '../../../../public/res/ic/outlined/shield-empty.svg'; +import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; @@ -86,6 +88,7 @@ ModerationTools.propTypes = { function SessionInfo({ userId }) { const [devices, setDevices] = useState(null); + const [isVisible, setIsVisible] = useState(false); const mx = initMatrix.matrixClient; useEffect(() => { @@ -110,10 +113,11 @@ function SessionInfo({ userId }) { }, [userId]); function renderSessionChips() { + if (!isVisible) return null; return (
- {devices === null && Loading sessions...} - {devices?.length === 0 && No session found.} + {devices === null && Loading sessions...} + {devices?.length === 0 && No session found.} {devices !== null && (devices.map((device) => ( - + setIsVisible(!isVisible)} + iconSrc={isVisible ? ChevronBottomIC : ChevronRightIC} + > + {`View ${devices?.length > 0 ? `${devices.length} ` : ''}sessions`} + + {renderSessionChips()}
); } @@ -340,14 +347,9 @@ function ProfileViewer() { const mx = initMatrix.matrixClient; const room = mx.getRoom(roomId); - let [roomMember, username] = [null, null]; - - if (roomId) { - roomMember = room.getMember(userId); - username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(userId); - } - const renderProfile = () => { + const roomMember = room.getMember(userId); + const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(userId); const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId).avatarUrl; const avatarUrl = (avatarMxc && avatarMxc !== 'null') ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop') : null; @@ -417,7 +419,7 @@ function ProfileViewer() { } diff --git a/src/app/organisms/profile-viewer/ProfileViewer.scss b/src/app/organisms/profile-viewer/ProfileViewer.scss index b8c4642..35119b9 100644 --- a/src/app/organisms/profile-viewer/ProfileViewer.scss +++ b/src/app/organisms/profile-viewer/ProfileViewer.scss @@ -16,7 +16,6 @@ &__user { display: flex; padding-bottom: var(--sp-normal); - border-bottom: 1px solid var(--bg-surface-border); &__info { align-self: flex-end; @@ -84,11 +83,18 @@ } .session-info { - & .setting-tile__title .text { - color: var(--tc-surface-high); - } + box-shadow: var(--bs-surface-border); + border-radius: var(--bo-radius); + overflow: hidden; + &__chips { + border-top: 1px solid var(--bg-surface-border); + padding: var(--sp-tight); padding-top: var(--sp-ultra-tight); + + & > .text { + margin-top: var(--sp-extra-tight); + } & .chip { margin-top: var(--sp-extra-tight); @include dir.side(margin, 0, var(--sp-extra-tight));