Add ability to change room permissions

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-13 13:26:38 +05:30
parent 568cf5e2ad
commit 8c55f38b07
3 changed files with 75 additions and 2 deletions

View file

@ -1,17 +1,22 @@
import React from 'react'; import React, { useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './RoomPermissions.scss'; import './RoomPermissions.scss';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import { getPowerLabel } from '../../../util/matrixUtil'; import { getPowerLabel } from '../../../util/matrixUtil';
import { openReusableContextMenu } from '../../../client/action/navigation';
import { getEventCords } from '../../../util/common';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import Button from '../../atoms/button/Button'; import Button from '../../atoms/button/Button';
import { MenuHeader } from '../../atoms/context-menu/ContextMenu'; import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
import PowerLevelSelector from '../power-level-selector/PowerLevelSelector';
import SettingTile from '../setting-tile/SettingTile'; import SettingTile from '../setting-tile/SettingTile';
import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg'; import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
import { useForceUpdate } from '../../hooks/useForceUpdate';
const permissionsInfo = { const permissionsInfo = {
users_default: { users_default: {
name: 'Default role', name: 'Default role',
@ -144,13 +149,69 @@ const spacePermsGroups = {
'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels'], '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 }) { function RoomPermissions({ roomId }) {
useRoomStateUpdate(roomId);
const mx = initMatrix.matrixClient; const mx = initMatrix.matrixClient;
const room = mx.getRoom(roomId); const room = mx.getRoom(roomId);
const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0]; const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
const permissions = pLEvent.getContent(); const permissions = pLEvent.getContent();
const canChangePermission = room.currentState.maySendStateEvent('m.room.power_levels', mx.getUserId()); 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 ( return (
<div className="room-permissions"> <div className="room-permissions">
{ {
@ -182,6 +243,11 @@ function RoomPermissions({ roomId }) {
content={<Text variant="b3">{permInfo.description}</Text>} content={<Text variant="b3">{permInfo.description}</Text>}
options={( options={(
<Button <Button
onClick={
canChangePermission
? (e) => handlePowerSelector(e, permKey, permInfo.parent, powerLevel)
: null
}
iconSrc={canChangePermission ? ChevronBottomIC : null} iconSrc={canChangePermission ? ChevronBottomIC : null}
> >
<Text variant="b2"> <Text variant="b2">

View file

@ -87,6 +87,13 @@
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
overflow: hidden; overflow: hidden;
& .context-menu__item button {
padding: var(--sp-extra-tight);
& .ic-raw {
@include dir.side(margin, 0, var(--sp-extra-tight));
}
}
&__chips { &__chips {
border-top: 1px solid var(--bg-surface-border); border-top: 1px solid var(--bg-surface-border);
padding: var(--sp-tight); padding: var(--sp-tight);

View file

@ -15,7 +15,7 @@
&--dropped { &--dropped {
transform: translateY(calc(100% - var(--header-height))); transform: translateY(calc(100% - var(--header-height)));
border-radius: var(--bo-radius) var(--bo-radius) 0 0; 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 { &__content-wrapper {