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

styling attach media buttons
Some checks are pending
CI / CI (push) Waiting to run
Details

Browse Source
This commit is contained in:
balzack 2025-03-06 21:19:45 -08:00
parent 0b483272d9
commit 5f57f4b0f6
2 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/client/mobile/src/conversation/Conversation.tsx
View File

@ -303,11 +303,21 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
{ avoid && (<View style={{ ...styles.avoid, height: offset }} />) }
<View style={styles.controls}>
<Pressable style={styles.control} disabled={disableImage} onPress={addImage}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="camera" size={24} color={disableImage ? Colors.placeholder : Colors.primary} /></Surface></Pressable>
<Pressable style={styles.control} disabled={disableVideo} onPress={addVideo}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="video-outline" size={24} color={disableVideo ? Colors.placeholder : Colors.primary} /></Surface></Pressable>
<Pressable style={styles.control} disabled={disableAudio} onPress={addAudio}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="volume-high" size={24} color={disableAudio ? Colors.placeholder : Colors.primary} /></Surface></Pressable>
<Pressable style={styles.control} disabled={disableBinary} onPress={addBinary}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="file-outline" size={24} color={disableBinary ? Colors.placeholder : Colors.primary} /></Surface></Pressable>
<Divider style={styles.separator} />
{ !disableImage && (
<Pressable style={styles.control} onPress={addImage}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
)}
{ !disableVideo && (
<Pressable style={styles.control} onPress={addVideo}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
)}
{ !disableAudio && (
<Pressable style={styles.control} onPress={addAudio}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="volume-high" size={24} color={Colors.primary} /></Surface></Pressable>
)}
{ !disableBinary && (
<Pressable style={styles.control} onPress={addBinary}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="file-outline" size={24} color={Colors.primary} /></Surface></Pressable>
)}
{ (!disableImage || !disableVideo || !disableAudio || !disableBinary) && (
<Divider style={styles.separator} />
)}
<Pressable style={styles.control} onPress={()=>setColorMenu(true)}>
<Surface style={styles.surface} elevation={2} mode="flat">
<Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} />

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

@ -151,6 +151,11 @@ export function Conversation({ openDetails }: { openDetails: ()=>void }) {
}
});
const enableImage = state.detail?.enableImage;
const enableVideo = state.detail?.enableVideo;
const enableAudio = state.detail?.enableAudio;
const enableBinary = state.detail?.enableBinary;
return (
<div className={classes.conversation}>
<div className={classes.header}>
@ -225,27 +230,29 @@ export function Conversation({ openDetails }: { openDetails: ()=>void }) {
</div>
<Textarea ref={input} className={classes.message} placeholder={state.strings.newMessage} styles={{ input: {color: state.textColorSet ? state.textColor : undefined, fontSize: state.textSizeSet ? state.textSize : undefined }}} value={state.message} onChange={(event) => actions.setMessage(event.currentTarget.value)} disabled={!state.detail || state.detail.locked || sending} onKeyDown={(e) => { keyDown(e.key, e.shiftKey)}} />
<div className={classes.controls}>
{ state.detail?.enableImage && (
{ enableImage && (
<ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending} onClick={() => attachImage.current.click()}>
<IconCamera />
</ActionIcon>
)}
{ state.detail?.enableVideo && (
{ enableVideo && (
<ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending} onClick={() => attachVideo.current.click()}>
<IconVideo />
</ActionIcon>
)}
{ state.detail?.enableAudio && (
{ enableAudio && (
<ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending} onClick={() => attachAudio.current.click()}>
<IconDisc />
</ActionIcon>
)}
{ state.detail?.enableBinary && (
{ enableBinary && (
<ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending} onClick={() => attachBinary.current.click()}>
<IconFile />
</ActionIcon>
)}
<Divider size="sm" orientation="vertical" />
{ (enableImage || enableVideo || enableAudio || enableBinary) && (
<Divider size="sm" orientation="vertical" />
)}
<Menu shadow="md" position="top">
<Menu.Target>
<ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending}>