Rosetta/desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Улучшенный UI изображений

Browse Source
This commit is contained in:
RoyceDa
2026-02-19 22:35:02 +02:00
parent b31c757a32
commit d435809ae8
1 changed files with 38 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/components/MessageAttachments/MessageImage.tsx
View File

@@ -1,7 +1,7 @@
import { useRosettaColors } from "@/app/hooks/useRosettaColors"; import { useRosettaColors } from "@/app/hooks/useRosettaColors";
import { DeliveredMessageState } from "@/app/providers/DialogProvider/DialogProvider"; import { DeliveredMessageState } from "@/app/providers/DialogProvider/DialogProvider";
import { useImageViewer } from "@/app/providers/ImageViewerProvider/useImageViewer"; import { useImageViewer } from "@/app/providers/ImageViewerProvider/useImageViewer";
import { AspectRatio, Box, Flex, Overlay, Portal, Text } from "@mantine/core"; import { AspectRatio, Box, Flex, Loader, Overlay, Portal, Text } from "@mantine/core";
import { IconArrowDown, IconCircleX, IconFlameFilled } from "@tabler/icons-react"; import { IconArrowDown, IconCircleX, IconFlameFilled } from "@tabler/icons-react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { AttachmentProps } from "./MessageAttachments"; import { AttachmentProps } from "./MessageAttachments";
@@ -111,7 +111,43 @@ export function MessageImage(props: AttachmentProps) {
<AnimatedRoundedProgress size={40} value={uploadedPercentage > 95 ? 95 : uploadedPercentage}></AnimatedRoundedProgress> <AnimatedRoundedProgress size={40} value={uploadedPercentage > 95 ? 95 : uploadedPercentage}></AnimatedRoundedProgress>
</Box> </Box>
</Flex> </Flex>
</Portal>} </Portal>}
{props.delivered == DeliveredMessageState.WAITING && uploadedPercentage == 0 && isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length) &&
<Portal target={mainRef.current!}>
<Flex direction={'column'} pos={'absolute'} justify={'center'} top={0} h={'100%'} align={'center'} gap={'xs'}>
<Box p={'xs'} style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: 8,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: 4
}}>
<Loader size={15} type={'dots'} color={'white'}></Loader>
<Text size={'xs'} c={'white'}>
Encrypting...
</Text>
</Box>
</Flex>
</Portal>}
{downloadStatus == DownloadStatus.DECRYPTING &&
<Portal target={mainRef.current!}>
<Flex direction={'column'} pos={'absolute'} justify={'center'} top={0} h={'100%'} align={'center'} gap={'xs'}>
<Box p={'xs'} style={{
backgroundColor: 'rgba(0, 0, 0, 0.3)',
borderRadius: 8,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: 4
}}>
<Loader size={15} type={'dots'} color={'white'}></Loader>
<Text size={'xs'} c={'white'}>
Decrypting...
</Text>
</Box>
</Flex>
</Portal>}
{(props.delivered == DeliveredMessageState.ERROR || (props.delivered != DeliveredMessageState.DELIVERED && {(props.delivered == DeliveredMessageState.ERROR || (props.delivered != DeliveredMessageState.DELIVERED &&
!isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length) !isMessageDeliveredByTime(props.timestamp || 0, props.attachments.length)
)) && ( )) && (