mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-02-23 21:53:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

add open message button in notifications

Browse source
This commit is contained in:
Ajay Bura 2024-03-22 10:01:45 +05:30
parent a2b0e4ce2e
commit 07c2083622
2 changed files with 42 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/app/pages/client/inbox/Notifications.tsx
View file

@ -1,5 +1,5 @@
/* eslint-disable react/destructuring-assignment */ /* eslint-disable react/destructuring-assignment */
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import React, { MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { import {
Avatar, Avatar,
AvatarFallback, AvatarFallback,
@ -55,6 +55,7 @@ import { ImageViewer } from '../../../components/image-viewer';
import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room'; import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room';
import { useMatrixEventRenderer } from '../../../hooks/useMatrixEventRenderer'; import { useMatrixEventRenderer } from '../../../hooks/useMatrixEventRenderer';
import * as customHtmlCss from '../../../styles/CustomHtml.css'; import * as customHtmlCss from '../../../styles/CustomHtml.css';
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
type RoomNotificationsGroup = { type RoomNotificationsGroup = {
roomId: string; roomId: string;
@ -155,12 +156,14 @@ type RoomNotificationsGroupProps = {
notifications: INotification[]; notifications: INotification[];
mediaAutoLoad?: boolean; mediaAutoLoad?: boolean;
urlPreview?: boolean; urlPreview?: boolean;
onOpen: (roomId: string, eventId: string) => void;
}; };
function RoomNotificationsGroupComp({ function RoomNotificationsGroupComp({
room, room,
notifications, notifications,
mediaAutoLoad, mediaAutoLoad,
urlPreview, urlPreview,
onOpen,
}: RoomNotificationsGroupProps) { }: RoomNotificationsGroupProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const htmlReactParserOptions = useMemo<HTMLReactParserOptions>( const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
@ -257,11 +260,17 @@ function RoomNotificationsGroupComp({
} }
); );
const handleOpenClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
const eventId = evt.currentTarget.getAttribute('data-event-id');
if (!eventId) return;
onOpen(room.roomId, eventId);
};
return ( return (
<> <Box direction="Column" gap="200">
<Header size="300"> <Header size="300">
<Box gap="200"> <Box gap="200">
<Avatar size="200"> <Avatar size="200" radii="300">
<RoomAvatar <RoomAvatar
variant="SurfaceVariant" variant="SurfaceVariant"
src={getRoomAvatarUrl(mx, room, 96)} src={getRoomAvatarUrl(mx, room, 96)}
@ -278,7 +287,7 @@ function RoomNotificationsGroupComp({
</Text> </Text>
</Box> </Box>
</Header> </Header>
<Box direction="Column" gap="100"> <Box direction="Column">
{notifications.map((notification) => { {notifications.map((notification) => {
const { event } = notification; const { event } = notification;
@ -293,8 +302,8 @@ function RoomNotificationsGroupComp({
<SequenceCard <SequenceCard
key={notification.event.event_id} key={notification.event.event_id}
style={{ padding: config.space.S400 }} style={{ padding: config.space.S400 }}
outlined
direction="Column" direction="Column"
gap="200"
> >
<ModernLayout <ModernLayout
before={ before={
@ -318,15 +327,25 @@ function RoomNotificationsGroupComp({
</AvatarBase> </AvatarBase>
} }
> >
<Box gap="300" justifyContent="SpaceBetween" alignItems="Baseline" grow="Yes"> <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
<Username style={{ color: colorMXID(event.sender) }}> <Box gap="200" alignItems="Baseline">
<Text> <Username style={{ color: colorMXID(event.sender) }}>
<b>{displayName}</b> <Text as="span" truncate>
</Text> <b>{displayName}</b>
</Username> </Text>
<Box shrink="No" gap="100"> </Username>
<Time ts={event.origin_server_ts} /> <Time ts={event.origin_server_ts} />
</Box> </Box>
<Box shrink="No" gap="200" alignItems="Center">
<Chip
data-event-id={event.event_id}
onClick={handleOpenClick}
variant="Secondary"
radii="Pill"
>
<Text size="T200">Open</Text>
</Chip>
</Box>
</Box> </Box>
{renderMatrixEvent(event.type, false, event, displayName, getContent)} {renderMatrixEvent(event.type, false, event, displayName, getContent)}
</ModernLayout> </ModernLayout>
@ -334,7 +353,7 @@ function RoomNotificationsGroupComp({
); );
})} })}
</Box> </Box>
</> </Box>
); );
} }
@ -350,6 +369,8 @@ export function Notifications() {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad'); const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
const [urlPreview] = useSetting(settingsAtom, 'urlPreview'); const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
const { navigateRoom } = useRoomNavigate();
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const notificationsSearchParams = getNotificationsSearchParams(searchParams); const notificationsSearchParams = getNotificationsSearchParams(searchParams);
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
@ -460,7 +481,7 @@ export function Notifications() {
> >
<IconButton <IconButton
onClick={() => virtualizer.scrollToOffset(0)} onClick={() => virtualizer.scrollToOffset(0)}
variant="Secondary" variant="SurfaceVariant"
radii="Pill" radii="Pill"
outlined outlined
size="300" size="300"
@ -485,10 +506,9 @@ export function Notifications() {
<Box <Box
style={{ style={{
position: 'absolute', position: 'absolute',
top: 0, top: vItem.start,
left: 0, left: 0,
width: '100%', width: '100%',
transform: `translateY(${vItem.start}px)`,
paddingTop: config.space.S500, paddingTop: config.space.S500,
}} }}
data-index={vItem.index} data-index={vItem.index}
@ -502,6 +522,7 @@ export function Notifications() {
notifications={group.notifications} notifications={group.notifications}
mediaAutoLoad={mediaAutoLoad} mediaAutoLoad={mediaAutoLoad}
urlPreview={urlPreview} urlPreview={urlPreview}
onOpen={navigateRoom}
/> />
</Box> </Box>
); );
@ -509,9 +530,9 @@ export function Notifications() {
</div> </div>
{timelineState.status === AsyncStatus.Loading && ( {timelineState.status === AsyncStatus.Loading && (
<Box direction="Column" gap="100"> <Box direction="Column">
{[...Array(8).keys()].map((key) => ( {[...Array(8).keys()].map((key) => (
<SequenceCard key={key} style={{ minHeight: toRem(80) }} /> <SequenceCard outlined key={key} style={{ minHeight: toRem(80) }} />
))} ))}
</Box> </Box>
)} )}

4
src/app/styles/ContainerColor.css.ts
View file

@ -1,5 +1,5 @@
import { ComplexStyleRule } from '@vanilla-extract/css'; import { ComplexStyleRule } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes'; import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { ContainerColor as TContainerColor, DefaultReset, color } from 'folds'; import { ContainerColor as TContainerColor, DefaultReset, color } from 'folds';
const getVariant = (variant: TContainerColor): ComplexStyleRule => ({ const getVariant = (variant: TContainerColor): ComplexStyleRule => ({
@ -29,3 +29,5 @@ export const ContainerColor = recipe({
variant: 'Surface', variant: 'Surface',
}, },
}); });
export type ContainerColorVariants = RecipeVariants<typeof ContainerColor>;