mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-13 18:50:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve Members Right Panel (#1286)

Browse source 
* fix room members hook

* fix resize observer hook

* add intersection observer hook

* install react-virtual lib

* improve right panel - WIP

* add filters for members

* fix bug in async search

* categories members and add search

* show spinner on room member fetch

* make invite member btn clickable

* so no member text

* add line between room view and member drawer

* fix imports

* add screen size hook

* fix set setting hook

* make member drawer responsive

* extract power level tags hook

* fix room members hook

* fix use async search api

* produce search result on filter change
This commit is contained in:
Ajay Bura 2023-06-22 09:14:50 +10:00 • committed by GitHub
parent da32d0d9e7
commit c07905c360
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 984 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/app/organisms/room/RoomInput.tsx
View file

@ -97,7 +97,7 @@ import { MessageReply } from '../../molecules/message/Message';
import colorMXID from '../../../util/colorMXID';
import { parseReplyBody, parseReplyFormattedBody } from '../../utils/room';
import { sanitizeText } from '../../utils/sanitize';
import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
import { useScreenSize } from '../../hooks/useScreenSize';
interface RoomInputProps {
roomViewRef: RefObject<HTMLElement>;
@ -161,15 +161,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
const handlePaste = useFilePasteHandler(handleFiles);
const dropZoneVisible = useFileDropZone(roomViewRef, handleFiles);
const [mobile, setMobile] = useState(document.body.clientWidth < 500);
useResizeObserver(
document.body,
useCallback((entries) => {
const bodyEntry = getResizeObserverEntry(document.body, entries);
if (bodyEntry && bodyEntry.contentRect.width < 500) setMobile(true);
else setMobile(false);
}, [])
);
const [, screenWidth] = useScreenSize();
const hideStickerBtn = screenWidth < 500;
useEffect(() => {
Transforms.insertFragment(editor, msgDraft);
@ -515,7 +508,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
>
{(anchorRef) => (
<>
{!mobile && (
{!hideStickerBtn && (
<IconButton
aria-pressed={emojiBoardTab === EmojiBoardTab.Sticker}
onClick={() => setEmojiBoardTab(EmojiBoardTab.Sticker)}
@ -532,7 +525,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
<IconButton
ref={anchorRef}
aria-pressed={
mobile ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
hideStickerBtn ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
}
onClick={() => setEmojiBoardTab(EmojiBoardTab.Emoji)}
variant="SurfaceVariant"
@ -542,7 +535,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
<Icon
src={Icons.Smile}
filled={
mobile ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
hideStickerBtn
? !!emojiBoardTab
: emojiBoardTab === EmojiBoardTab.Emoji
}
/>
</IconButton>