note creator button and reply adjustments
This commit is contained in:
Alejandro Gomez
parent
8fb06e5765
commit
54394c8aa1
|
|
@ -28,6 +28,7 @@
|
|||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.5.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-textarea-autosize": "^8.4.0",
|
||||
"react-twitter-embed": "^4.0.4",
|
||||
"typescript": "^4.9.4",
|
||||
"uuid": "^9.0.0"
|
||||
|
|
|
|||
|
|
@ -4,8 +4,13 @@
|
|||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.note-reply {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.note-creator textarea {
|
||||
outline: none;
|
||||
resize: none;
|
||||
min-height: 40px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
max-width: -webkit-fill-available;
|
||||
|
|
@ -15,11 +20,6 @@
|
|||
min-width: -webkit-fill-available;
|
||||
min-width: -moz-available;
|
||||
min-width: fill-available;
|
||||
transition: min-height .5s;
|
||||
}
|
||||
|
||||
.note-creator .textarea--focused {
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.note-creator .actions {
|
||||
|
|
@ -43,4 +43,7 @@
|
|||
.note-creator .btn {
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
background-color: var(--gray-secondary);
|
||||
color: var(--gray-superlight);
|
||||
border-color: var(--gray-superlight);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export function NoteCreator(props) {
|
|||
const replyTo = props.replyTo;
|
||||
const onSend = props.onSend;
|
||||
const show = props.show || false;
|
||||
const autoFocus = props.autoFocus || false;
|
||||
const publisher = useEventPublisher();
|
||||
const [note, setNote] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
|
@ -49,8 +50,8 @@ export function NoteCreator(props) {
|
|||
|
||||
function onChange(ev) {
|
||||
const { value } = ev.target
|
||||
setNote(value)
|
||||
if (value) {
|
||||
setNote(value)
|
||||
setActive(true)
|
||||
} else {
|
||||
setActive(false)
|
||||
|
|
@ -60,22 +61,28 @@ export function NoteCreator(props) {
|
|||
if (!show) return false;
|
||||
return (
|
||||
<>
|
||||
{replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
|
||||
<div className="flex note-creator">
|
||||
<div
|
||||
key={replyTo ? `note-reply-${replyTo.Id}` : `note-creator`}
|
||||
className={`flex note-creator ${replyTo ? 'note-reply' : ''}`}
|
||||
>
|
||||
<div className="flex f-col mr10 f-grow">
|
||||
<Textarea
|
||||
autoFocus={autoFocus}
|
||||
className={`textarea ${active ? "textarea--focused" : ""}`}
|
||||
users={users}
|
||||
onChange={onChange}
|
||||
onBlur={() => setActive(false)}
|
||||
onFocus={() => setActive(true)}
|
||||
/>
|
||||
<div className="actions flex f-row">
|
||||
<div className="attachment flex f-row">
|
||||
{error.length > 0 ? <b className="error">{error}</b> : null}
|
||||
<FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
|
||||
</div>
|
||||
<div className="btn" onClick={() => sendNote()}>Send</div>
|
||||
</div>
|
||||
{active && note && (
|
||||
<div className="actions flex f-row">
|
||||
<div className="attachment flex f-row">
|
||||
{error.length > 0 ? <b className="error">{error}</b> : null}
|
||||
<FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
|
||||
</div>
|
||||
<div disabled={note} className="btn" onClick={() => sendNote()}>Send</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -104,8 +104,13 @@ export default function NoteFooter(props) {
|
|||
)
|
||||
})}
|
||||
</div>
|
||||
<NoteCreator replyTo={ev} onSend={(e) => setReply(false)} show={reply} />
|
||||
<NoteCreator
|
||||
autoFocus={true}
|
||||
replyTo={ev}
|
||||
onSend={(e) => setReply(false)}
|
||||
show={reply}
|
||||
/>
|
||||
<LNURLTip svc={author?.lud16 || author?.lud06} onClose={(e) => setTip(false)} show={tip} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default function NoteReaction(props) {
|
|||
const root = extractRoot();
|
||||
const opt = {
|
||||
showHeader: ev?.Kind === EventKind.Repost,
|
||||
showFooter: false,
|
||||
showFooter: ev?.Kind === EventKind.Repost,
|
||||
};
|
||||
return (
|
||||
<div className="reaction">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { useSelector } from "react-redux";
|
|||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
|
||||
import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
|
||||
import TextareaAutosize from "react-textarea-autosize";
|
||||
|
||||
// @ts-expect-error
|
||||
import Nip05 from "./Nip05";
|
||||
|
|
@ -61,6 +62,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
|
|||
loadingComponent={() => <span>Loading....</span>}
|
||||
placeholder="Say something!"
|
||||
onChange={onChange}
|
||||
textAreaComponent={TextareaAutosize}
|
||||
trigger={{
|
||||
"@": {
|
||||
afterWhitespace: true,
|
||||
|
|
|
|||
|
|
@ -199,6 +199,7 @@ span.pill {
|
|||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
user-select: none;
|
||||
color: var(--font-color);
|
||||
margin: 2px 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
28
yarn.lock
28
yarn.lock
|
|
@ -1024,7 +1024,7 @@
|
|||
"@babel/helper-validator-option" "^7.18.6"
|
||||
"@babel/plugin-transform-typescript" "^7.18.6"
|
||||
|
||||
"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
version "7.20.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
|
||||
integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
|
||||
|
|
@ -8048,6 +8048,15 @@ react-scripts@5.0.1:
|
|||
optionalDependencies:
|
||||
fsevents "^2.3.2"
|
||||
|
||||
react-textarea-autosize@^8.4.0:
|
||||
version "8.4.0"
|
||||
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz#4d0244d6a50caa897806b8c44abc0540a69bfc8c"
|
||||
integrity sha512-YrTFaEHLgJsi8sJVYHBzYn+mkP3prGkmP2DKb/tm0t7CLJY5t1Rxix8070LAKb0wby7bl/lf2EeHkuMihMZMwQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.10.2"
|
||||
use-composed-ref "^1.3.0"
|
||||
use-latest "^1.2.1"
|
||||
|
||||
react-twitter-embed@^4.0.4:
|
||||
version "4.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
|
||||
|
|
@ -9335,6 +9344,23 @@ url-parse@^1.5.3:
|
|||
querystringify "^2.1.1"
|
||||
requires-port "^1.0.0"
|
||||
|
||||
use-composed-ref@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
|
||||
integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
|
||||
|
||||
use-isomorphic-layout-effect@^1.1.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
|
||||
integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
|
||||
|
||||
use-latest@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2"
|
||||
integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==
|
||||
dependencies:
|
||||
use-isomorphic-layout-effect "^1.1.1"
|
||||
|
||||
use-sync-external-store@^1.0.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
|
||||
|
|
|
|||
Loading…
Reference in New Issue