martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 10:05:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added button to remove staged asset

Browse Source
This commit is contained in:
Roland Osborne 2024-12-16 15:16:40 -08:00
parent 9f78c7b54b
commit 2cd0cde5fc
10 changed files with 65 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/client/web/src/conversation/Conversation.tsx
View File

@ -134,18 +134,16 @@ export function Conversation() {
const media = state.assets.map((asset, index: number) => {
if (asset.type === 'image') {
return <ImageFile key={index} source={asset.file} />
return <ImageFile key={index} source={asset.file} disabled={sending} remove={() => actions.removeAsset(index)} />
} else if (asset.type === 'video') {
return <VideoFile key={index} source={asset.file} thumbPosition={(position: number) => actions.setThumbPosition(index, position)} disabled={sending} />
return <VideoFile key={index} source={asset.file} thumbPosition={(position: number) => actions.setThumbPosition(index, position)} disabled={sending} remove={() => actions.removeAsset(index)}/>
} else if (asset.type === 'audio') {
return <AudioFile key={index} source={asset.file} updateLabel={(label: string) => actions.setLabel(index, label)} disabled={sending} />
return <AudioFile key={index} source={asset.file} updateLabel={(label: string) => actions.setLabel(index, label)} disabled={sending} remove={() => actions.removeAsset(index)} />
} else {
return <BinaryFile key={index} source={asset.file} />
return <BinaryFile key={index} source={asset.file} disabled={sending} remove={() => actions.removeAsset(index)} />
}
});
console.log("HIIGHT: ", height);
return (
<div className={classes.conversation}>
<div className={classes.header}>
@ -209,7 +207,7 @@ console.log("HIIGHT: ", height);
<div className={classes.progress} style={{ width: `${state.progress}%` }}/>
)}
</div>
<AnimateHeight className={classes.add} duration={500} height={height}>
<AnimateHeight className={classes.add} duration={333} height={height ? height : 132}>
<div ref={ref} className={classes.staging}>
<input type='file' name="asset" accept="image/*" ref={attachImage} onChange={e => addImage(e.target?.files?.[0])} style={{display: 'none'}}/>
<input type='file' name="asset" accept="video/*" ref={attachVideo} onChange={e => addVideo(e.target?.files?.[0])} style={{display: 'none'}}/>

14
app/client/web/src/conversation/audioFile/AudioFile.module.css
View File

@ -1,6 +1,9 @@
.asset {
padding-top: 16px;
margin-top: 16px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
.thumb {
width: auto;
@ -8,14 +11,17 @@
}
.label {
padding-top: 16px;
padding-left: 2px;
padding-right: 2px;
position: absolute;
font-size: 8px;
bottom: 0;
}
.close {
position: absolute;
right: 0;
top: 0;
left: 0;
height: 67%;
}
}

8
app/client/web/src/conversation/audioFile/AudioFile.tsx
View File

@ -1,10 +1,11 @@
import React from 'react';
import { Image, Textarea } from '@mantine/core'
import { ActionIcon, Image, Textarea } from '@mantine/core'
import { useAudioFile } from './useAudioFile.hook';
import classes from './AudioFile.module.css'
import audio from '../../images/audio.png'
import { IconX } from '@tabler/icons-react'
export function AudioFile({ source, updateLabel, disabled }: {source: File, updateLabel: (label: string)=>void, disabled: boolean}) {
export function AudioFile({ source, updateLabel, disabled, remove }: {source: File, updateLabel: (label: string)=>void, disabled: boolean, remove: ()=>void}) {
const { state, actions } = useAudioFile(source);
const setLabel = (label: string) => {
@ -16,6 +17,9 @@ export function AudioFile({ source, updateLabel, disabled }: {source: File, upda
<div className={classes.asset}>
<Image radius="sm" className={classes.thumb} src={audio} />
<Textarea className={classes.label} size="xs" value={state.label} onChange={(event) => setLabel(event.currentTarget.value)} disabled={disabled} />
<ActionIcon className={classes.close} variant="subtle" disabled={disabled} onClick={remove}>
<IconX />
</ActionIcon>
</div>
);
}

6
app/client/web/src/conversation/binaryFile/BinaryFile.module.css
View File

@ -26,5 +26,11 @@
width: 100%;
text-align: center;
}
.close {
position: absolute;
right: 0;
top: 0;
}
}

8
app/client/web/src/conversation/binaryFile/BinaryFile.tsx
View File

@ -1,10 +1,11 @@
import React from 'react';
import { Text, Image } from '@mantine/core'
import { ActionIcon, Text, Image } from '@mantine/core'
import { useBinaryFile } from './useBinaryFile.hook';
import classes from './BinaryFile.module.css'
import binary from '../../images/binary.png'
import { IconX } from '@tabler/icons-react'
export function BinaryFile({ source }: {source: File}) {
export function BinaryFile({ source, disabled, remove }: {source: File, disabled: boolean, remove: ()=>void}) {
const { state, actions } = useBinaryFile(source);
return (
@ -12,6 +13,9 @@ export function BinaryFile({ source }: {source: File}) {
<Image radius="sm" className={classes.thumb} src={binary} />
<Text className={classes.name}>{ state.name }</Text>
<Text className={classes.extension}>{ state.extension }</Text>
<ActionIcon className={classes.close} variant="subtle" disabled={disabled} onClick={remove}>
<IconX />
</ActionIcon>
</div>
);
}

7
app/client/web/src/conversation/imageFile/ImageFile.module.css
View File

@ -1,9 +1,16 @@
.asset {
position: relative;
padding-top: 16px;
.thumb {
width: auto;
height: 92px;
}
.close {
position: absolute;
top: 16px;
right: 0;
}
}

10
app/client/web/src/conversation/imageFile/ImageFile.tsx
View File

@ -1,9 +1,10 @@
import React from 'react';
import { Image } from '@mantine/core'
import { ActionIcon, Image } from '@mantine/core'
import { useImageFile } from './useImageFile.hook';
import classes from './ImageFile.module.css'
import { IconX } from '@tabler/icons-react'
export function ImageFile({ source }: {source: File}) {
export function ImageFile({ source, disabled, remove }: {source: File, disabled: boolean, remove: ()=>void}) {
const { state, actions } = useImageFile(source);
return (
@ -11,6 +12,11 @@ export function ImageFile({ source }: {source: File}) {
{ state.thumbUrl && (
<Image radius="sm" className={classes.thumb} src={state.thumbUrl} />
)}
{ state.thumbUrl && (
<ActionIcon className={classes.close} variant="subtle" disabled={disabled} onClick={remove}>
<IconX />
</ActionIcon>
)}
</div>
);
}

4
app/client/web/src/conversation/useConversation.hook.ts
View File

@ -207,6 +207,10 @@ export function useConversation() {
setLabel: (index: number, label: string) => {
updateAsset(index, { label });
},
removeAsset: (index: number) => {
state.assets.splice(index, 1);
updateState({ assets: [ ...state.assets ] });
},
more: async () => {
const focus = app.state.focus;
if (focus) {

6
app/client/web/src/conversation/videoFile/VideoFile.module.css
View File

@ -22,5 +22,11 @@
width: auto;
height: 64px;
}
.close {
position: absolute;
right: 0;
top: 0;
}
}

9
app/client/web/src/conversation/videoFile/VideoFile.tsx
View File

@ -2,9 +2,9 @@ import React, { useRef, useState } from 'react';
import { ActionIcon, Image } from '@mantine/core'
import { useVideoFile } from './useVideoFile.hook';
import classes from './VideoFile.module.css'
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
export function VideoFile({ source, thumbPosition, disabled }: {source: File, thumbPosition: (position: number)=>void, disabled: boolean}) {
export function VideoFile({ source, thumbPosition, disabled, remove }: {source: File, thumbPosition: (position: number)=>void, disabled: boolean, remove: ()=>void}) {
const { state, actions } = useVideoFile(source);
const [loaded, setLoaded] = useState(false);
const position = useRef(0);
@ -49,6 +49,11 @@ export function VideoFile({ source, thumbPosition, disabled }: {source: File, th
<IconChevronLeft />
</ActionIcon>
)}
{ loaded && (
<ActionIcon className={classes.close} variant="subtle" disabled={disabled} onClick={remove}>
<IconX />
</ActionIcon>
)}
</div>
);
}