mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-12 02:00:28 +03:00
New room settings, add customizable power levels and dev tools (#2222)
* WIP - add room settings dialog * join rule setting - WIP * show emojis & stickers in room settings - WIP * restyle join rule switcher * Merge branch 'dev' into new-room-settings * add join rule hook * open room settings from global state * open new room settings from all places * rearrange settings menu item * add option for creating new image pack * room devtools - WIP * render room state events as list * add option to open state event * add option to edit state event * refactor text area code editor into hook * add option to send message and state event * add cutout card component * add hook for room account data * display room account data - WIP * refactor global account data editor component * add account data editor in room * fix font style in devtool * show state events in compact form * add option to delete room image pack * add server badge component * add member tile component * render members in room settings * add search in room settings member * add option to reset member search * add filter in room members * fix member virtual item key * remove color from serve badge in room members * show room in settings * fix loading indicator position * power level tags in room setting - WIP * generate fallback tag in backward compatible way * add color picker * add powers editor - WIP * add props to stop adding emoji to recent usage * add beta feature notice badge * add types for power level tag icon * refactor image pack rooms code to hook * option for adding new power levels tags * remove console log * refactor power icon * add option to edit power level tags * remove power level from powers pill * fix power level labels * add option to delete power levels * fix long power level name shrinks power integer * room permissions - WIP * add power level selector component * add room permissions * move user default permission setting to other group * add power permission peek menu * fix weigh of power switch text * hide above for max power in permission switcher * improve beta badge description * render room profile in room settings * add option to edit room profile * make room topic input text area * add option to enable room encryption in room settings * add option to change message history visibility * add option to change join rule * add option for addresses in room settings * close encryption dialog after enabling
This commit is contained in:
Ajay Bura
GitHub
parent
00f3df8719
commit
286983c833
73 changed files with 6196 additions and 420 deletions
170
src/app/features/room-settings/permissions/Powers.tsx
Normal file
170
src/app/features/room-settings/permissions/Powers.tsx
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
/* eslint-disable react/no-array-index-key */
|
||||
import React, { useState, MouseEventHandler, ReactNode } from 'react';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
Text,
|
||||
RectCords,
|
||||
PopOut,
|
||||
Menu,
|
||||
Scroll,
|
||||
toRem,
|
||||
config,
|
||||
color,
|
||||
} from 'folds';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { getPowers, getTagIconSrc, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { getPermissionPower, IPowerLevels } from '../../../hooks/usePowerLevels';
|
||||
import { useRoom } from '../../../hooks/useRoom';
|
||||
import { PowerColorBadge, PowerIcon } from '../../../components/power';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { stopPropagation } from '../../../utils/keyboard';
|
||||
import { usePermissionGroups } from './usePermissionItems';
|
||||
|
||||
type PeekPermissionsProps = {
|
||||
powerLevels: IPowerLevels;
|
||||
power: number;
|
||||
children: (handleOpen: MouseEventHandler<HTMLButtonElement>, opened: boolean) => ReactNode;
|
||||
};
|
||||
function PeekPermissions({ powerLevels, power, children }: PeekPermissionsProps) {
|
||||
const [menuCords, setMenuCords] = useState<RectCords>();
|
||||
const permissionGroups = usePermissionGroups();
|
||||
|
||||
const handleOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setMenuCords(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
return (
|
||||
<PopOut
|
||||
anchor={menuCords}
|
||||
offset={5}
|
||||
position="Bottom"
|
||||
align="Center"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: () => setMenuCords(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
style={{
|
||||
maxHeight: '75vh',
|
||||
maxWidth: toRem(300),
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<Box grow="Yes" tabIndex={0}>
|
||||
<Scroll size="0" hideTrack visibility="Hover">
|
||||
<Box style={{ padding: config.space.S200 }} direction="Column" gap="400">
|
||||
{permissionGroups.map((group, groupIndex) => (
|
||||
<Box key={groupIndex} direction="Column" gap="100">
|
||||
<Text size="L400">{group.name}</Text>
|
||||
<div>
|
||||
{group.items.map((item, itemIndex) => {
|
||||
const requiredPower = getPermissionPower(powerLevels, item.location);
|
||||
const hasPower = requiredPower <= power;
|
||||
|
||||
return (
|
||||
<Text
|
||||
key={itemIndex}
|
||||
size="T200"
|
||||
style={{
|
||||
color: hasPower ? undefined : color.Critical.Main,
|
||||
}}
|
||||
>
|
||||
{hasPower ? '✅' : '❌'} {item.name}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
{children(handleOpen, !!menuCords)}
|
||||
</PopOut>
|
||||
);
|
||||
}
|
||||
|
||||
type PowersProps = {
|
||||
powerLevels: IPowerLevels;
|
||||
onEdit?: () => void;
|
||||
};
|
||||
export function Powers({ powerLevels, onEdit }: PowersProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const room = useRoom();
|
||||
const [powerLevelTags] = usePowerLevelTags(room, powerLevels);
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="100">
|
||||
<SequenceCard
|
||||
variant="SurfaceVariant"
|
||||
className={SequenceCardStyle}
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Power Levels"
|
||||
description="Manage and customize incremental power levels for users."
|
||||
after={
|
||||
onEdit && (
|
||||
<Box gap="200">
|
||||
<Button
|
||||
variant="Secondary"
|
||||
fill="Soft"
|
||||
size="300"
|
||||
radii="300"
|
||||
outlined
|
||||
onClick={onEdit}
|
||||
>
|
||||
<Text size="B300">Edit</Text>
|
||||
</Button>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<SettingTile>
|
||||
<Box gap="200" wrap="Wrap">
|
||||
{getPowers(powerLevelTags).map((power) => {
|
||||
const tag = powerLevelTags[power];
|
||||
const tagIconSrc = tag.icon && getTagIconSrc(mx, useAuthentication, tag.icon);
|
||||
|
||||
return (
|
||||
<PeekPermissions key={power} powerLevels={powerLevels} power={power}>
|
||||
{(openMenu, opened) => (
|
||||
<Chip
|
||||
onClick={openMenu}
|
||||
variant="Secondary"
|
||||
aria-pressed={opened}
|
||||
radii="300"
|
||||
before={<PowerColorBadge color={tag.color} />}
|
||||
after={tagIconSrc && <PowerIcon size="50" iconSrc={tagIconSrc} />}
|
||||
>
|
||||
<Text size="T300" truncate>
|
||||
<b>{tag.name}</b>
|
||||
</Text>
|
||||
</Chip>
|
||||
)}
|
||||
</PeekPermissions>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</SettingTile>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue