michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Merge branch 'dev' into voicemail

Browse source
This commit is contained in:
C0ffeeCode 2022-01-14 20:16:54 +01:00 committed by GitHub
commit 6dc7cf9af5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 464 additions and 237 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -24,11 +24,12 @@ You can serve the application with a webserver of your choosing by simply copyin
Execute the following commands to compile the app from its source code:
```sh
npm install # Installs all dependencies
npm ci # Installs all dependencies
npm run build # Compiles the app into the dist/ directory
```
You can then copy the files to a webserver's webroot of your choice.
You can then copy the files to a webserver's webroot of your choice.
To serve a development version of the app locally for testing, you may also use the command `npm start`.
### Running with Docker

7
src/app/atoms/context-menu/ReusableContextMenu.jsx
View file

@ -23,12 +23,14 @@ function ReusableContextMenu() {
openerRef.current.style.height = `${cords.height}px`;
openerRef.current.click();
}
const handleContextMenuOpen = (placement, cords, render) => {
const handleContextMenuOpen = (placement, cords, render, afterClose) => {
if (key) {
closeMenu();
return;
}
setData({ placement, cords, render });
setData({
placement, cords, render, afterClose,
});
};
navigation.on(cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED, handleContextMenuOpen);
return () => {
@ -44,6 +46,7 @@ function ReusableContextMenu() {
key = Math.random();
return;
}
data?.afterClose?.();
if (setData) setData(null);
if (key === null) return;

33
src/app/molecules/message/Message.scss
View file

@ -303,23 +303,40 @@
// markdown formating
.message__body {
& h1, h2, h3, h4, h5, h6 {
margin: 0;
margin-bottom: var(--sp-ultra-tight);
font-weight: var(--fw-medium);
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
& h1,
& h2 {
color: var(--tc-surface-high);
margin: var(--sp-loose) 0 var(--sp-normal);
line-height: var(--lh-h1);
margin-top: var(--sp-normal);
font-size: var(--fs-h2);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
}
& h3,
& h4 {
color: var(--tc-surface-high);
margin: var(--sp-normal) 0 var(--sp-tight);
line-height: var(--lh-h2);
margin-top: var(--sp-tight);
font-size: var(--fs-s1);
line-height: var(--lh-s1);
letter-spacing: var(--ls-s1);
}
& h5,
& h6 {
color: var(--tc-surface-high);
margin: var(--sp-tight) 0 var(--sp-extra-tight);
line-height: var(--lh-s1);
margin-top: var(--sp-extra-tight);
font-size: var(--fs-b1);
line-height: var(--lh-b1);
letter-spacing: var(--ls-b1);
}
& hr {
border-color: var(--bg-divider);
@ -365,7 +382,7 @@
@include scrollbar.scroll--auto-hide;
}
& pre {
display: inline-block;
width: fit-content;
max-width: 100%;
@include scrollbar.scroll;
@include scrollbar.scroll__h;
@ -376,7 +393,7 @@
}
}
& blockquote {
display: inline-block;
width: fit-content;
max-width: 100%;
@include dir.side(border, 4px solid var(--bg-surface-active), 0);
white-space: initial !important;

2
src/app/molecules/power-level-selector/PowerLevelSelector.jsx
View file

@ -11,7 +11,7 @@ function PowerLevelSelector({
value, max, onSelect,
}) {
const handleSubmit = (e) => {
const powerLevel = e.target.elements['power-level'];
const powerLevel = e.target.elements['power-level']?.value;
if (!powerLevel) return;
onSelect(Number(powerLevel));
};

67
src/app/molecules/room-optons/RoomOptions.jsx Normal file
View file

@ -0,0 +1,67 @@
import React from 'react';
import PropTypes from 'prop-types';
import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix';
import { openInviteUser } from '../../../client/action/navigation';
import * as roomActions from '../../../client/action/room';
import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
import RoomNotification from '../room-notification/RoomNotification';
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
function RoomOptions({ roomId, afterOptionSelect }) {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const canInvite = room?.canInvite(mx.getUserId());
const handleMarkAsRead = () => {
afterOptionSelect();
if (!room) return;
const events = room.getLiveTimeline().getEvents();
mx.sendReadReceipt(events[events.length - 1]);
};
const handleInviteClick = () => {
openInviteUser(roomId);
afterOptionSelect();
};
const handleLeaveClick = () => {
if (confirm('Are you really want to leave this room?')) {
roomActions.leave(roomId);
afterOptionSelect();
}
};
return (
<>
<MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
<MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
<MenuItem
iconSrc={AddUserIC}
onClick={handleInviteClick}
disabled={!canInvite}
>
Invite
</MenuItem>
<MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>Leave</MenuItem>
<MenuHeader>Notification</MenuHeader>
<RoomNotification roomId={roomId} />
</>
);
}
RoomOptions.defaultProps = {
afterOptionSelect: null,
};
RoomOptions.propTypes = {
roomId: PropTypes.string.isRequired,
afterOptionSelect: PropTypes.func,
};
export default RoomOptions;

76
src/app/molecules/room-permissions/RoomPermissions.jsx
View file

@ -1,17 +1,22 @@
import React from 'react';
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import './RoomPermissions.scss';
import initMatrix from '../../../client/initMatrix';
import { getPowerLabel } from '../../../util/matrixUtil';
import { openReusableContextMenu } from '../../../client/action/navigation';
import { getEventCords } from '../../../util/common';
import Text from '../../atoms/text/Text';
import Button from '../../atoms/button/Button';
import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
import PowerLevelSelector from '../power-level-selector/PowerLevelSelector';
import SettingTile from '../setting-tile/SettingTile';
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
import { useForceUpdate } from '../../hooks/useForceUpdate';
const permissionsInfo = {
users_default: {
name: 'Default role',
@ -23,6 +28,12 @@ const permissionsInfo = {
description: 'Set minimum power level to send messages in room.',
default: 0,
},
'm.reaction': {
parent: 'events',
name: 'Send reactions',
description: 'Set minimum power level to send reactions in room.',
default: 0,
},
redact: {
name: 'Delete messages sent by others',
description: 'Set minimum power level to delete messages in room.',
@ -130,7 +141,7 @@ const permissionsInfo = {
};
const roomPermsGroups = {
'General Permissions': ['users_default', 'events_default', 'redact', 'notifications'],
'General Permissions': ['users_default', 'events_default', 'm.reaction', 'redact', 'notifications'],
'Manage members permissions': ['invite', 'kick', 'ban'],
'Room profile permissions': ['m.room.avatar', 'm.room.name', 'm.room.topic'],
'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels', 'm.room.encryption', 'm.room.history_visibility'],
@ -144,13 +155,69 @@ const spacePermsGroups = {
'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels'],
};
function useRoomStateUpdate(roomId) {
const [, forceUpdate] = useForceUpdate();
const mx = initMatrix.matrixClient;
useEffect(() => {
const handleStateEvent = (event) => {
if (event.getRoomId() !== roomId) return;
forceUpdate();
};
mx.on('RoomState.events', handleStateEvent);
return () => {
mx.removeListener('RoomState.events', handleStateEvent);
};
}, [roomId]);
}
function RoomPermissions({ roomId }) {
useRoomStateUpdate(roomId);
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
const permissions = pLEvent.getContent();
const canChangePermission = room.currentState.maySendStateEvent('m.room.power_levels', mx.getUserId());
const handlePowerSelector = (e, permKey, parentKey, powerLevel) => {
const handlePowerLevelChange = (newPowerLevel) => {
if (powerLevel === newPowerLevel) return;
const newPermissions = { ...permissions };
if (parentKey) {
newPermissions[parentKey] = {
...permissions[parentKey],
[permKey]: newPowerLevel,
};
} else if (permKey === 'notifications') {
newPermissions[permKey] = {
...permissions[permKey],
room: newPowerLevel,
};
} else {
newPermissions[permKey] = newPowerLevel;
}
mx.sendStateEvent(roomId, 'm.room.power_levels', newPermissions);
};
openReusableContextMenu(
'bottom',
getEventCords(e, '.btn-surface'),
(closeMenu) => (
<PowerLevelSelector
value={powerLevel}
max={100}
onSelect={(pl) => {
closeMenu();
handlePowerLevelChange(pl);
}}
/>
),
);
};
return (
<div className="room-permissions">
{
@ -182,6 +249,11 @@ function RoomPermissions({ roomId }) {
content={<Text variant="b3">{permInfo.description}</Text>}
options={(
<Button
onClick={
canChangePermission
? (e) => handlePowerSelector(e, permKey, permInfo.parent, powerLevel)
: null
}
iconSrc={canChangePermission ? ChevronBottomIC : null}
>
<Text variant="b2">

11
src/app/molecules/room-selector/RoomSelector.jsx
View file

@ -11,7 +11,8 @@ import NotificationBadge from '../../atoms/badge/NotificationBadge';
import { blurOnBubbling } from '../../atoms/button/script';
function RoomSelectorWrapper({
isSelected, isUnread, onClick, content, options,
isSelected, isUnread, onClick,
content, options, onContextMenu,
}) {
let myClass = isUnread ? ' room-selector--unread' : '';
myClass += isSelected ? ' room-selector--selected' : '';
@ -22,6 +23,7 @@ function RoomSelectorWrapper({
type="button"
onClick={onClick}
onMouseUp={(e) => blurOnBubbling(e, '.room-selector__content')}
onContextMenu={onContextMenu}
>
{content}
</button>
@ -31,6 +33,7 @@ function RoomSelectorWrapper({
}
RoomSelectorWrapper.defaultProps = {
options: null,
onContextMenu: null,
};
RoomSelectorWrapper.propTypes = {
isSelected: PropTypes.bool.isRequired,
@ -38,12 +41,13 @@ RoomSelectorWrapper.propTypes = {
onClick: PropTypes.func.isRequired,
content: PropTypes.node.isRequired,
options: PropTypes.node,
onContextMenu: PropTypes.func,
};
function RoomSelector({
name, parentName, roomId, imageSrc, iconSrc,
isSelected, isUnread, notificationCount, isAlert,
options, onClick,
options, onClick, onContextMenu,
}) {
return (
<RoomSelectorWrapper
@ -78,6 +82,7 @@ function RoomSelector({
)}
options={options}
onClick={onClick}
onContextMenu={onContextMenu}
/>
);
}
@ -87,6 +92,7 @@ RoomSelector.defaultProps = {
imageSrc: null,
iconSrc: null,
options: null,
onContextMenu: null,
};
RoomSelector.propTypes = {
name: PropTypes.string.isRequired,
@ -103,6 +109,7 @@ RoomSelector.propTypes = {
isAlert: PropTypes.bool.isRequired,
options: PropTypes.node,
onClick: PropTypes.func.isRequired,
onContextMenu: PropTypes.func,
};
export default RoomSelector;

15
src/app/organisms/navigation/Selector.jsx
View file

@ -4,12 +4,13 @@ import PropTypes from 'prop-types';
import initMatrix from '../../../client/initMatrix';
import navigation from '../../../client/state/navigation';
import { openRoomOptions } from '../../../client/action/navigation';
import { openReusableContextMenu } from '../../../client/action/navigation';
import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
import { getEventCords, abbreviateNumber } from '../../../util/common';
import IconButton from '../../atoms/button/IconButton';
import RoomSelector from '../../molecules/room-selector/RoomSelector';
import RoomOptions from '../../molecules/room-optons/RoomOptions';
import HashIC from '../../../../public/res/ic/outlined/hash.svg';
import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
@ -49,6 +50,15 @@ function Selector({
};
}, []);
const openRoomOptions = (e) => {
e.preventDefault();
openReusableContextMenu(
'right',
getEventCords(e, '.room-selector'),
(closeMenu) => <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />,
);
};
const joinRuleToIconSrc = (joinRule) => ({
restricted: () => (room.isSpaceRoom() ? SpaceIC : HashIC),
invite: () => (room.isSpaceRoom() ? SpaceLockIC : HashLockIC),
@ -96,13 +106,14 @@ function Selector({
notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
isAlert={noti.getHighlightNoti(roomId) !== 0}
onClick={onClick}
onContextMenu={openRoomOptions}
options={(
<IconButton
size="extra-small"
tooltip="Options"
tooltipPlacement="right"
src={VerticalMenuIC}
onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
onClick={openRoomOptions}
/>
)}
/>

233
src/app/organisms/profile-viewer/ProfileViewer.jsx
View file

@ -7,26 +7,87 @@ import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { selectRoom } from '../../../client/action/navigation';
import { selectRoom, openReusableContextMenu } from '../../../client/action/navigation';
import * as roomActions from '../../../client/action/room';
import { getUsername, getUsernameOfRoomMember, getPowerLabel } from '../../../util/matrixUtil';
import { getEventCords } from '../../../util/common';
import colorMXID from '../../../util/colorMXID';
import Text from '../../atoms/text/Text';
import Chip from '../../atoms/chip/Chip';
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';
import { useForceUpdate } from '../../hooks/useForceUpdate';
function ModerationTools({
roomId, userId,
}) {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const roomMember = room.getMember(userId);
const myPowerLevel = room.getMember(mx.getUserId()).powerLevel;
const powerLevel = roomMember?.powerLevel || 0;
const canIKick = (
roomMember?.membership === 'join'
&& room.currentState.hasSufficientPowerLevelFor('kick', myPowerLevel)
&& powerLevel < myPowerLevel
);
const canIBan = (
['join', 'leave'].includes(roomMember?.membership)
&& room.currentState.hasSufficientPowerLevelFor('ban', myPowerLevel)
&& powerLevel < myPowerLevel
);
const handleKick = (e) => {
e.preventDefault();
const kickReason = e.target.elements['kick-reason']?.value.trim();
roomActions.kick(roomId, userId, kickReason !== '' ? kickReason : undefined);
};
const handleBan = (e) => {
e.preventDefault();
const banReason = e.target.elements['ban-reason']?.value.trim();
roomActions.ban(roomId, userId, banReason !== '' ? banReason : undefined);
};
return (
<div className="moderation-tools">
{canIKick && (
<form onSubmit={handleKick}>
<Input label="Kick reason" name="kick-reason" />
<Button type="submit">Kick</Button>
</form>
)}
{canIBan && (
<form onSubmit={handleBan}>
<Input label="Ban reason" name="ban-reason" />
<Button type="submit">Ban</Button>
</form>
)}
</div>
);
}
ModerationTools.propTypes = {
roomId: PropTypes.string.isRequired,
userId: PropTypes.string.isRequired,
};
function SessionInfo({ userId }) {
const [devices, setDevices] = useState(null);
const [isVisible, setIsVisible] = useState(false);
const mx = initMatrix.matrixClient;
useEffect(() => {
@ -51,10 +112,11 @@ function SessionInfo({ userId }) {
}, [userId]);
function renderSessionChips() {
if (!isVisible) return null;
return (
<div className="session-info__chips">
{devices === null && <Text variant="b3">Loading sessions...</Text>}
{devices?.length === 0 && <Text variant="b3">No session found.</Text>}
{devices === null && <Text variant="b2">Loading sessions...</Text>}
{devices?.length === 0 && <Text variant="b2">No session found.</Text>}
{devices !== null && (devices.map((device) => (
<Chip
key={device.deviceId}
@ -68,10 +130,13 @@ function SessionInfo({ userId }) {
return (
<div className="session-info">
<SettingTile
title="Sessions"
content={renderSessionChips()}
/>
<MenuItem
onClick={() => setIsVisible(!isVisible)}
iconSrc={isVisible ? ChevronBottomIC : ChevronRightIC}
>
<Text variant="b2">{`View ${devices?.length > 0 ? `${devices.length} ` : ''}sessions`}</Text>
</MenuItem>
{renderSessionChips()}
</div>
);
}
@ -98,6 +163,8 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
const userPL = room.getMember(userId)?.powerLevel || 0;
const canIKick = room.currentState.hasSufficientPowerLevelFor('kick', myPowerlevel) && userPL < myPowerlevel;
const isBanned = member?.membership === 'ban';
const onCreated = (dmRoomId) => {
if (isMountedRef.current === false) return;
setIsCreatingDM(false);
@ -119,7 +186,7 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
setIsInviting(false);
}, [userId]);
async function openDM() {
const openDM = async () => {
const directIds = [...initMatrix.roomList.directs];
// Check and open if user already have a DM with userId.
@ -145,9 +212,9 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
if (isMountedRef.current === false) return;
setIsCreatingDM(false);
}
}
};
async function toggleIgnore() {
const toggleIgnore = async () => {
const ignoredUsers = mx.getIgnoredUsers();
const uIndex = ignoredUsers.indexOf(userId);
if (uIndex >= 0) {
@ -165,9 +232,9 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
} catch {
setIsIgnoring(false);
}
}
};
async function toggleInvite() {
const toggleInvite = async () => {
try {
setIsInviting(true);
let isInviteSent = false;
@ -182,7 +249,7 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
} catch {
setIsInviting(false);
}
}
};
return (
<div className="profile-viewer__buttons">
@ -193,7 +260,14 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
>
{isCreatingDM ? 'Creating room...' : 'Message'}
</Button>
{ member?.membership === 'join' && <Button>Mention</Button>}
{ isBanned && canIKick && (
<Button
variant="positive"
onClick={() => roomActions.unban(roomId, userId)}
>
Unban
</Button>
)}
{ (isInvited ? canIKick : room.canInvite(mx.getUserId())) && isInvitable && (
<Button
onClick={toggleInvite}
@ -226,84 +300,137 @@ ProfileFooter.propTypes = {
onRequestClose: PropTypes.func.isRequired,
};
function ProfileViewer() {
function useToggleDialog() {
const [isOpen, setIsOpen] = useState(false);
const [roomId, setRoomId] = useState(null);
const [userId, setUserId] = useState(null);
const mx = initMatrix.matrixClient;
const room = roomId ? mx.getRoom(roomId) : null;
let username = '';
if (room !== null) {
const roomMember = room.getMember(userId);
if (roomMember) username = getUsernameOfRoomMember(roomMember);
else username = getUsername(userId);
}
function loadProfile(uId, rId) {
setIsOpen(true);
setUserId(uId);
setRoomId(rId);
}
useEffect(() => {
const loadProfile = (uId, rId) => {
setIsOpen(true);
setUserId(uId);
setRoomId(rId);
};
navigation.on(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
return () => {
navigation.removeListener(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
};
}, []);
const handleAfterClose = () => {
const closeDialog = () => setIsOpen(false);
const afterClose = () => {
setUserId(null);
setRoomId(null);
};
function renderProfile() {
const member = room.getMember(userId) || mx.getUser(userId) || {};
const avatarMxc = member.getMxcAvatarUrl?.() || member.avatarUrl;
const powerLevel = member.powerLevel || 0;
const canChangeRole = room.currentState.maySendEvent('m.room.power_levels', mx.getUserId());
return [isOpen, roomId, userId, closeDialog, afterClose];
}
function useRerenderOnProfileChange(roomId, userId) {
const mx = initMatrix.matrixClient;
const [, forceUpdate] = useForceUpdate();
useEffect(() => {
const handleProfileChange = (mEvent, member) => {
if (
mEvent.getRoomId() === roomId
&& (member.userId === userId || member.userId === mx.getUserId())
) {
forceUpdate();
}
};
mx.on('RoomMember.powerLevel', handleProfileChange);
mx.on('RoomMember.membership', handleProfileChange);
return () => {
mx.removeListener('RoomMember.powerLevel', handleProfileChange);
mx.removeListener('RoomMember.membership', handleProfileChange);
};
}, [roomId, userId]);
}
function ProfileViewer() {
const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
useRerenderOnProfileChange(roomId, userId);
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
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;
const powerLevel = roomMember.powerLevel || 0;
const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
const canChangeRole = (
room.currentState.maySendEvent('m.room.power_levels', mx.getUserId())
&& (powerLevel < myPowerLevel || userId === mx.getUserId())
);
const handleChangePowerLevel = (newPowerLevel) => {
if (newPowerLevel === powerLevel) return;
if (newPowerLevel === myPowerLevel
? confirm('You will not be able to undo this change as you are promoting the user to have the same power level as yourself. Are you sure?')
: true
) {
roomActions.setPowerLevel(roomId, userId, newPowerLevel);
}
};
const handlePowerSelector = (e) => {
openReusableContextMenu(
'bottom',
getEventCords(e, '.btn-surface'),
(closeMenu) => (
<PowerLevelSelector
value={powerLevel}
max={myPowerLevel}
onSelect={(pl) => {
closeMenu();
handleChangePowerLevel(pl);
}}
/>
),
);
};
return (
<div className="profile-viewer">
<div className="profile-viewer__user">
<Avatar
imageSrc={!avatarMxc ? null : mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop')}
text={username}
bgColor={colorMXID(userId)}
size="large"
/>
<Avatar imageSrc={avatarUrl} text={username} bgColor={colorMXID(userId)} size="large" />
<div className="profile-viewer__user__info">
<Text variant="s1" weight="medium">{twemojify(username)}</Text>
<Text variant="b2">{twemojify(userId)}</Text>
</div>
<div className="profile-viewer__user__role">
<Text variant="b3">Role</Text>
<Button iconSrc={canChangeRole ? ChevronBottomIC : null}>
<Button
onClick={canChangeRole ? handlePowerSelector : null}
iconSrc={canChangeRole ? ChevronBottomIC : null}
>
{`${getPowerLabel(powerLevel) || 'Member'} - ${powerLevel}`}
</Button>
</div>
</div>
<ModerationTools roomId={roomId} userId={userId} />
<SessionInfo userId={userId} />
{ userId !== mx.getUserId() && (
<ProfileFooter
roomId={roomId}
userId={userId}
onRequestClose={() => setIsOpen(false)}
/>
<ProfileFooter roomId={roomId} userId={userId} onRequestClose={closeDialog} />
)}
</div>
);
}
};
return (
<Dialog
className="profile-viewer__dialog"
isOpen={isOpen}
title={`${username} in ${room?.name ?? ''}`}
title={room?.name ?? ''}
onAfterClose={handleAfterClose}
onRequestClose={() => setIsOpen(false)}
contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
onRequestClose={closeDialog}
contentOptions={<IconButton src={CrossIC} onClick={closeDialog} tooltip="Close" />}
>
{roomId ? renderProfile() : <div />}
</Dialog>

43
src/app/organisms/profile-viewer/ProfileViewer.scss
View file

@ -1,3 +1,4 @@
@use '../../partials/flex';
@use '../../partials/dir';
.profile-viewer__dialog {
@ -15,7 +16,6 @@
&__user {
display: flex;
padding-bottom: var(--sp-normal);
border-bottom: 1px solid var(--bg-surface-border);
&__info {
align-self: flex-end;
@ -61,12 +61,47 @@
}
}
.session-info {
& .setting-tile__title .text {
color: var(--tc-surface-high);
.profile-viewer__admin-tool {
.setting-tile {
margin-top: var(--sp-loose);
}
}
.moderation-tools {
& > form {
margin: var(--sp-normal) 0;
display: flex;
align-items: flex-end;
& .input-container {
@extend .cp-fx__item-one;
@include dir.side(margin, 0, var(--sp-tight));
}
& button {
height: 46px;
}
}
}
.session-info {
box-shadow: var(--bs-surface-border);
border-radius: var(--bo-radius);
overflow: hidden;
& .context-menu__item button {
padding: var(--sp-extra-tight);
& .ic-raw {
@include dir.side(margin, 0, var(--sp-extra-tight));
}
}
&__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));

125
src/app/organisms/room-optons/RoomOptions.jsx
View file

@ -1,125 +0,0 @@
import React, { useEffect, useRef } from 'react';
import { twemojify } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { openInviteUser } from '../../../client/action/navigation';
import * as roomActions from '../../../client/action/room';
import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
import RoomNotification from '../../molecules/room-notification/RoomNotification';
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
import { useForceUpdate } from '../../hooks/useForceUpdate';
let isRoomOptionVisible = false;
let roomId = null;
function RoomOptions() {
const openerRef = useRef(null);
const [, forceUpdate] = useForceUpdate();
function openRoomOptions(cords, rId) {
if (roomId !== null || isRoomOptionVisible) {
roomId = null;
if (cords.detail === 0) openerRef.current.click();
return;
}
openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
roomId = rId;
openerRef.current.click();
forceUpdate();
}
const afterRoomOptionsToggle = (isVisible) => {
isRoomOptionVisible = isVisible;
if (!isVisible) {
setTimeout(() => {
if (!isRoomOptionVisible) roomId = null;
}, 500);
}
};
useEffect(() => {
navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
return () => {
navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
};
}, []);
const handleMarkAsRead = () => {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
if (!room) return;
const events = room.getLiveTimeline().getEvents();
mx.sendReadReceipt(events[events.length - 1]);
};
const handleInviteClick = () => openInviteUser(roomId);
const handleLeaveClick = (toggleMenu) => {
if (confirm('Are you really want to leave this room?')) {
roomActions.leave(roomId);
toggleMenu();
}
};
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const canInvite = room?.canInvite(mx.getUserId());
return (
<ContextMenu
afterToggle={afterRoomOptionsToggle}
maxWidth={298}
content={(toggleMenu) => (
<>
<MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
<MenuItem
iconSrc={TickMarkIC}
onClick={() => {
handleMarkAsRead(); toggleMenu();
}}
>
Mark as read
</MenuItem>
<MenuItem
disabled={!canInvite}
iconSrc={AddUserIC}
onClick={() => {
handleInviteClick(); toggleMenu();
}}
>
Invite
</MenuItem>
<MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => handleLeaveClick(toggleMenu)}>Leave</MenuItem>
<MenuHeader>Notification</MenuHeader>
{roomId && <RoomNotification roomId={roomId} />}
</>
)}
render={(toggleMenu) => (
<input
ref={openerRef}
onClick={toggleMenu}
type="button"
style={{
width: '32px',
height: '32px',
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
left: 0,
padding: 0,
border: 'none',
visibility: 'hidden',
}}
/>
)}
/>
);
}
export default RoomOptions;

4
src/app/organisms/room/PeopleDrawer.jsx
View file

@ -107,7 +107,7 @@ function PeopleDrawer({ roomId }) {
let isRoomChanged = false;
const updateMemberList = (event) => {
if (isGettingMembers) return;
if (event && event?.event?.room_id !== roomId) return;
if (event && event?.getRoomId() !== roomId) return;
setMemberList(
simplyfiMembers(
getMembersWithMembership(membership)
@ -125,6 +125,7 @@ function PeopleDrawer({ roomId }) {
asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchData);
mx.on('RoomMember.membership', updateMemberList);
mx.on('RoomMember.powerLevel', updateMemberList);
return () => {
isRoomChanged = true;
setMemberList([]);
@ -132,6 +133,7 @@ function PeopleDrawer({ roomId }) {
setItemCount(PER_PAGE_MEMBER);
asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchData);
mx.removeListener('RoomMember.membership', updateMemberList);
mx.removeListener('RoomMember.powerLevel', updateMemberList);
};
}, [roomId, membership]);

2
src/app/organisms/room/RoomView.scss
View file

@ -15,7 +15,7 @@
&--dropped {
transform: translateY(calc(100% - var(--header-height)));
border-radius: var(--bo-radius) var(--bo-radius) 0 0;
box-shadow: 0 0 0 1px var(--bg-surface-border);
box-shadow: var(--bs-popup);
}
&__content-wrapper {

13
src/app/organisms/room/RoomViewHeader.jsx
View file

@ -8,7 +8,7 @@ import { blurOnBubbling } from '../../atoms/button/script';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { toggleRoomSettings, openRoomOptions } from '../../../client/action/navigation';
import { toggleRoomSettings, openReusableContextMenu } from '../../../client/action/navigation';
import { togglePeopleDrawer } from '../../../client/action/settings';
import colorMXID from '../../../util/colorMXID';
import { getEventCords } from '../../../util/common';
@ -18,6 +18,7 @@ import RawIcon from '../../atoms/system-icons/RawIcon';
import IconButton from '../../atoms/button/IconButton';
import Header, { TitleWrapper } from '../../atoms/header/Header';
import Avatar from '../../atoms/avatar/Avatar';
import RoomOptions from '../../molecules/room-optons/RoomOptions';
import UserIC from '../../../../public/res/ic/outlined/user.svg';
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
@ -60,6 +61,14 @@ function RoomViewHeader({ roomId }) {
};
}, [roomId]);
const openRoomOptions = (e) => {
openReusableContextMenu(
'bottom',
getEventCords(e, '.ic-btn'),
(closeMenu) => <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />,
);
};
return (
<Header>
<button
@ -77,7 +86,7 @@ function RoomViewHeader({ roomId }) {
</button>
<IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
<IconButton
onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
onClick={openRoomOptions}
tooltip="Options"
src={VerticalMenuIC}
/>

4
src/app/templates/client/Client.jsx
View file

@ -4,11 +4,11 @@ import './Client.scss';
import Text from '../../atoms/text/Text';
import Spinner from '../../atoms/spinner/Spinner';
import Navigation from '../../organisms/navigation/Navigation';
import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
import Room from '../../organisms/room/Room';
import Windows from '../../organisms/pw/Windows';
import Dialogs from '../../organisms/pw/Dialogs';
import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
import RoomOptions from '../../organisms/room-optons/RoomOptions';
import logout from '../../../client/action/logout';
import initMatrix from '../../../client/initMatrix';
@ -65,7 +65,7 @@ function Client() {
<Windows />
<Dialogs />
<EmojiBoardOpener />
<RoomOptions />
<ReusableContextMenu />
</div>
);
}

20
src/client/action/navigation.js
View file

@ -87,14 +87,6 @@ export function openReadReceipts(roomId, userIds) {
});
}
export function openRoomOptions(cords, roomId) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_ROOMOPTIONS,
cords,
roomId,
});
}
export function openAttachmentTypeSelector(params) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_ATTACHMENT_TYPE_SELECTOR,
@ -102,15 +94,6 @@ export function openAttachmentTypeSelector(params) {
});
}
export function replyTo(userId, eventId, body) {
appDispatcher.dispatch({
type: cons.actions.navigation.CLICK_REPLY_TO,
userId,
eventId,
body,
});
}
export function openSearch(term) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_SEARCH,
@ -118,11 +101,12 @@ export function openSearch(term) {
});
}
export function openReusableContextMenu(placement, cords, render) {
export function openReusableContextMenu(placement, cords, render, afterClose) {
appDispatcher.dispatch({
type: cons.actions.navigation.OPEN_REUSABLE_CONTEXT_MENU,
placement,
cords,
render,
afterClose,
});
}

31
src/client/action/room.js
View file

@ -192,10 +192,34 @@ async function invite(roomId, userId) {
return result;
}
async function kick(roomId, userId) {
async function kick(roomId, userId, reason) {
const mx = initMatrix.matrixClient;
const result = await mx.kick(roomId, userId);
const result = await mx.kick(roomId, userId, reason);
return result;
}
async function ban(roomId, userId, reason) {
const mx = initMatrix.matrixClient;
const result = await mx.ban(roomId, userId, reason);
return result;
}
async function unban(roomId, userId) {
const mx = initMatrix.matrixClient;
const result = await mx.unban(roomId, userId);
return result;
}
async function setPowerLevel(roomId, userId, powerLevel) {
const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId);
const powerlevelEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
const result = await mx.setPowerLevel(roomId, userId, powerLevel, powerlevelEvent);
return result;
}
@ -215,6 +239,7 @@ function deleteSpaceShortcut(roomId) {
export {
join, leave,
create, invite, kick,
create, invite, kick, ban, unban,
setPowerLevel,
createSpaceShortcut, deleteSpaceShortcut,
};

2
src/client/state/cons.js
View file

@ -39,7 +39,6 @@ const cons = {
OPEN_SETTINGS: 'OPEN_SETTINGS',
OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
OPEN_ROOMOPTIONS: 'OPEN_ROOMOPTIONS',
CLICK_REPLY_TO: 'CLICK_REPLY_TO',
OPEN_SEARCH: 'OPEN_SEARCH',
OPEN_ATTACHMENT_TYPE_SELECTOR: 'OPEN_ATTACHMENT_TYPE_SELECTOR',
@ -77,7 +76,6 @@ const cons = {
PROFILE_VIEWER_OPENED: 'PROFILE_VIEWER_OPENED',
EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
ROOMOPTIONS_OPENED: 'ROOMOPTIONS_OPENED',
REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
OPEN_ATTACHMENT_TYPE_SELECTOR: 'OPEN_ATTACHMENT_TYPE_SELECTOR',
SEARCH_OPENED: 'SEARCH_OPENED',

8
src/client/state/navigation.js
View file

@ -126,13 +126,6 @@ class Navigation extends EventEmitter {
action.userIds,
);
},
[cons.actions.navigation.OPEN_ROOMOPTIONS]: () => {
this.emit(
cons.events.navigation.ROOMOPTIONS_OPENED,
action.cords,
action.roomId,
);
},
[cons.actions.navigation.OPEN_ATTACHMENT_TYPE_SELECTOR]: () => {
this.emit(
cons.events.navigation.OPEN_ATTACHMENT_TYPE_SELECTOR,
@ -160,6 +153,7 @@ class Navigation extends EventEmitter {
action.placement,
action.cords,
action.render,
action.afterClose,
);
},
};