show no pinned message placeholder

This commit is contained in:
Ajay Bura 2024-12-13 16:36:04 +05:30
parent 59e5f49eb1
commit 2199681ec3
2 changed files with 87 additions and 54 deletions
src/app/features/room

View file

@ -308,23 +308,23 @@ export function RoomViewHeader() {
)}
</TooltipProvider>
)}
{pinnedEvents.length > 0 && (
<TooltipProvider
position="Bottom"
offset={4}
tooltip={
<Tooltip>
<Text>Pinned Messages</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton
style={{ position: 'relative' }}
onClick={handleOpenPinMenu}
ref={triggerRef}
aria-pressed={!!pinMenuAnchor}
>
<TooltipProvider
position="Bottom"
offset={4}
tooltip={
<Tooltip>
<Text>Pinned Messages</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton
style={{ position: 'relative' }}
onClick={handleOpenPinMenu}
ref={triggerRef}
aria-pressed={!!pinMenuAnchor}
>
{pinnedEvents.length > 0 && (
<Badge
style={{
position: 'absolute',
@ -340,11 +340,11 @@ export function RoomViewHeader() {
{pinnedEvents.length}
</Text>
</Badge>
<Icon size="400" src={Icons.Pin} filled={!!pinMenuAnchor} />
</IconButton>
)}
</TooltipProvider>
)}
)}
<Icon size="400" src={Icons.Pin} filled={!!pinMenuAnchor} />
</IconButton>
)}
</TooltipProvider>
<PopOut
anchor={pinMenuAnchor}
position="Bottom"

View file

@ -16,6 +16,7 @@ import {
Scroll,
Spinner,
Text,
toRem,
} from 'folds';
import { Opts as LinkifyOpts } from 'linkifyjs';
import { HTMLReactParserOptions } from 'html-react-parser';
@ -70,6 +71,7 @@ import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
import { VirtualTile } from '../../../components/virtualizer';
import { usePowerLevelsAPI, usePowerLevelsContext } from '../../../hooks/usePowerLevels';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { ContainerColor } from '../../../styles/ContainerColor.css';
type PinnedMessageProps = {
room: Room;
@ -391,40 +393,71 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
<Box grow="Yes">
<Scroll ref={scrollRef} size="300" hideTrack visibility="Hover">
<Box className={css.PinMenuContent} direction="Column" gap="100">
<div
style={{
position: 'relative',
height: virtualizer.getTotalSize(),
}}
>
{virtualizer.getVirtualItems().map((vItem) => {
const eventId = sortedPinnedEvent[vItem.index];
if (!eventId) return null;
{sortedPinnedEvent.length > 0 ? (
<div
style={{
position: 'relative',
height: virtualizer.getTotalSize(),
}}
>
{virtualizer.getVirtualItems().map((vItem) => {
const eventId = sortedPinnedEvent[vItem.index];
if (!eventId) return null;
return (
<VirtualTile
virtualItem={vItem}
style={{ paddingBottom: config.space.S200 }}
ref={virtualizer.measureElement}
key={vItem.index}
>
<SequenceCard
style={{ padding: config.space.S400, borderRadius: config.radii.R300 }}
variant="SurfaceVariant"
direction="Column"
return (
<VirtualTile
virtualItem={vItem}
style={{ paddingBottom: config.space.S200 }}
ref={virtualizer.measureElement}
key={vItem.index}
>
<PinnedMessage
room={room}
eventId={eventId}
renderContent={renderMatrixEvent}
onOpen={handleOpen}
canPinEvent={canPinEvent}
/>
</SequenceCard>
</VirtualTile>
);
})}
</div>
<SequenceCard
style={{ padding: config.space.S400, borderRadius: config.radii.R300 }}
variant="SurfaceVariant"
direction="Column"
>
<PinnedMessage
room={room}
eventId={eventId}
renderContent={renderMatrixEvent}
onOpen={handleOpen}
canPinEvent={canPinEvent}
/>
</SequenceCard>
</VirtualTile>
);
})}
</div>
) : (
<Box
className={ContainerColor({ variant: 'SurfaceVariant' })}
style={{
marginBottom: config.space.S200,
padding: `${config.space.S700} ${config.space.S400} ${toRem(60)}`,
borderRadius: config.radii.R300,
}}
grow="Yes"
direction="Column"
gap="400"
justifyContent="Center"
alignItems="Center"
>
<Icon src={Icons.Pin} size="600" />
<Box
style={{ maxWidth: toRem(300) }}
direction="Column"
gap="200"
alignItems="Center"
>
<Text size="H4" align="Center">
No Pinned Messages
</Text>
<Text size="T400" align="Center">
Users with sufficient power level can pin a messages from its context menu.
</Text>
</Box>
</Box>
)}
</Box>
</Scroll>
</Box>