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

focus on text area after message

Browse Source
This commit is contained in:
balzack 2024-12-19 18:04:15 -08:00
parent 260f08ce25
commit 01c8c2773c
4 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,6 +36,7 @@ export function Conversation() {
const attachAudio = useRef({ click: ()=>{} } as HTMLInputElement);
const attachBinary = useRef({ click: ()=>{} } as HTMLInputElement);
const { width, height, ref } = useResizeDetector();
const input = useRef();
const addImage = (image: File | undefined) => {
if (image) {
@ -117,6 +118,10 @@ export function Conversation() {
}
}
useEffect(() => {
input.current.focus();
}, [sending]);
const topics = state.topics.map((topic, idx) => {
const { host } = state;
const card = state.cards.get(topic.guid) || null;
@ -216,7 +221,7 @@ export function Conversation() {
<div className={classes.files}>
{ media }
</div>
<Textarea 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)}} />
<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 && (
<ActionIcon className={classes.attach} variant="light" disabled={!state.detail || state.detail.locked || sending} onClick={() => attachImage.current.click()}>

5
app/client/web/src/message/Message.module.css
View File

@ -91,6 +91,11 @@
padding-right: 8px;
min-width: 0;
.padding {
padding-top: 8px;
padding-bottom: 4px;
}
.text {
word-wrap:break-word;
white-space: pre-wrap;

4
app/client/web/src/message/Message.tsx
View File

@ -119,7 +119,9 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
</div>
{ !locked && status === 'confirmed' && text && (
<div style={textStyle}>
<span className={classes.text}>{ message }</span>
<div className={classes.padding}>
<span className={classes.text}>{ message }</span>
</div>
</div>
)}
{ !locked && status !== 'confirmed' && (

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

@ -10,7 +10,7 @@
top: 0;
width: 100%;
text-align: center;
font-size: 12px;
font-size: 14px;
}
.play {