martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-03-13 00:50:03 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

style improvements to thread asset rendering

Browse Source
This commit is contained in:
balzack 2025-03-05 21:46:10 -08:00
parent 078ca0f623
commit dcc1ad31d0
6 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/web/package.json
View File

@ -24,7 +24,7 @@
"@types/react-dom": "18.0.6",
"@vitejs/plugin-react": "4.3.1",
"crypto-js": "^4.2.0",
"databag-client-sdk": "^0.0.30",
"databag-client-sdk": "^0.0.29",
"jest": "29.1.1",
"jsencrypt": "^3.3.2",
"react": "18.3.1",

2
app/client/web/src/message/audioAsset/AudioAsset.tsx
View File

@ -79,7 +79,7 @@ export function AudioAsset({ topicId, asset }: { topicId: string, asset: MediaAs
{ state.loading && state.loadPercent > 0 && (
<Progress className={classes.progress} value={state.loadPercent} />
)}
<ActionIcon className={classes.close} variant="subtle" size="lg" onClick={hide}>
<ActionIcon className={classes.close} variant="filled" size="lg" onClick={hide}>
<IconX size="lg" />
</ActionIcon>
</div>

2
app/client/web/src/message/binaryAsset/BinaryAsset.tsx
View File

@ -64,7 +64,7 @@ export function BinaryAsset({ topicId, asset }: { topicId: string, asset: MediaA
{ state.loading && state.loadPercent > 0 && (
<Progress className={classes.progress} value={state.loadPercent} />
)}
<ActionIcon className={classes.close} variant="subtle" size="lg" onClick={hide}>
<ActionIcon className={classes.close} variant="filled" size="lg" onClick={hide}>
<IconX size="lg" />
</ActionIcon>
</div>

8
app/client/web/src/message/imageAsset/ImageAsset.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import { MediaAsset } from '../../conversation/Conversation';
import { useImageAsset } from './useImageAsset.hook';
import { Progress, ActionIcon, Image } from '@mantine/core'
import { Progress, Surface, ActionIcon, Image } from '@mantine/core'
import classes from './ImageAsset.module.css'
import { IconX } from '@tabler/icons-react'
@ -42,14 +42,14 @@ export function ImageAsset({ topicId, asset }: { topicId: string, asset: MediaAs
<Image className={classes.image} fit="contain" src={state.thumbUrl} />
</div>
{ state.dataUrl && (
<div className={classes.frame}>
<img className={classes.image} src={state.dataUrl} />
<div className={classes.frame} style={ state.loaded ? { opacity: 1 } : { opacity: 0 }}>
<Image className={classes.image} fit="contain" src={state.dataUrl} onLoad={actions.setLoaded} />
</div>
)}
{ state.loading && state.loadPercent > 0 && (
<Progress className={classes.progress} value={state.loadPercent} />
)}
<ActionIcon className={classes.close} variant="subtle" size="lg" onClick={hide}>
<ActionIcon className={classes.close} variant="filled" size="lg" onClick={hide}>
<IconX size="lg" />
</ActionIcon>
</div>

4
app/client/web/src/message/imageAsset/useImageAsset.hook.ts
View File

@ -11,6 +11,7 @@ export function useImageAsset(topicId: string, asset: MediaAsset) {
dataUrl: null,
loading: false,
loadPercent: 0,
loaded: false,
})
const cancelled = useRef(false);
@ -37,6 +38,9 @@ export function useImageAsset(topicId: string, asset: MediaAsset) {
}, [asset]);
const actions = {
setLoaded: () => {
updateState({ loaded: true });
},
cancelLoad: () => {
cancelled.current = true;
},

2
app/client/web/src/message/videoAsset/VideoAsset.tsx
View File

@ -52,7 +52,7 @@ export function VideoAsset({ topicId, asset }: { topicId: string, asset: MediaAs
{ state.loading && state.loadPercent > 0 && (
<Progress className={classes.progress} value={state.loadPercent} />
)}
<ActionIcon className={classes.close} variant="subtle" size="lg" onClick={hide}>
<ActionIcon className={classes.close} variant="filled" size="lg" onClick={hide}>
<IconX size="lg" />
</ActionIcon>
</div>