feat: note creator improvements
This commit is contained in:
parent
6e47089cc8
commit
225bf04349
@ -1,8 +1,12 @@
|
|||||||
.note-creator {
|
.note-creator {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
background-color: #333;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-creator textarea {
|
.note-creator textarea {
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
border-radius: 10px 10px 0 0;
|
border-radius: 10px 10px 0 0;
|
||||||
@ -11,8 +15,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.note-creator .actions {
|
.note-creator .actions {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-creator .attachment {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border-radius: 0 0 10px 10px;
|
border-radius: 10px;
|
||||||
background-color: #222;
|
}
|
||||||
|
|
||||||
|
.note-creator .attachment .error {
|
||||||
|
font-weight: normal;
|
||||||
|
margin-right: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-creator .btn {
|
||||||
|
border-radius: 20px;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
@ -28,6 +28,7 @@ export function NoteCreator(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function attachFile() {
|
async function attachFile() {
|
||||||
|
try {
|
||||||
let file = await openFile();
|
let file = await openFile();
|
||||||
let rsp = await VoidUpload(file);
|
let rsp = await VoidUpload(file);
|
||||||
let ext = file.name.match(FileExtensionRegex)[1];
|
let ext = file.name.match(FileExtensionRegex)[1];
|
||||||
@ -36,21 +37,26 @@ export function NoteCreator(props) {
|
|||||||
let url = rsp.metadata.url ?? `https://void.cat/d/${rsp.id}.${ext}`;
|
let url = rsp.metadata.url ?? `https://void.cat/d/${rsp.id}.${ext}`;
|
||||||
|
|
||||||
setNote(n => `${n}\n${url}`);
|
setNote(n => `${n}\n${url}`);
|
||||||
|
} catch (error) {
|
||||||
|
setError(error?.message)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
|
{replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
|
||||||
<div className="flex note-creator">
|
<div className="flex note-creator">
|
||||||
<div className="flex f-col mr10 f-grow">
|
<div className="textarea flex f-col mr10 f-grow">
|
||||||
<textarea placeholder="Say something!" value={note} onChange={(e) => setNote(e.target.value)} />
|
<textarea className="textarea" placeholder="Say something!" value={note} onChange={(e) => setNote(e.target.value)} />
|
||||||
<div className="actions">
|
<div className="actions flex f-row">
|
||||||
<FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()}/>
|
<div className="attachment flex f-row">
|
||||||
{error.length > 0 ? <b className="error">{error}</b> : null}
|
{error.length > 0 ? <b className="error">{error}</b> : null}
|
||||||
</div>
|
<FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()}/>
|
||||||
</div>
|
</div>
|
||||||
<div className="btn" onClick={() => sendNote()}>Send</div>
|
<div className="btn" onClick={() => sendNote()}>Send</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user