Skip to content

Commit

Permalink
fix: note creator mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
v0l committed Oct 21, 2023
1 parent 63950f1 commit c2991b8
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 31 deletions.
3 changes: 1 addition & 2 deletions packages/app/src/Element/AsyncIcon.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Icon from "Icons/Icon";
import useLoading from "Hooks/useLoading";
import Spinner from "Icons/Spinner";
import classNames from "classnames";

export type AsyncIconProps = React.HTMLProps<HTMLDivElement> & {
iconName: string;
Expand All @@ -17,7 +16,7 @@ export function AsyncIcon(props: AsyncIconProps) {
delete mergedProps["iconSize"];
delete mergedProps["loading"];
return (
<div {...mergedProps} onClick={handle} className={classNames("button-icon-sm", props.className)}>
<div {...mergedProps} onClick={handle} className={props.className}>
{loading ? <Spinner /> : <Icon name={props.iconName} size={props.iconSize} />}
{props.children}
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/Element/Chat/DmWindow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function DmWindow({ id }: { id: string }) {
<div>
<div className="flex flex-col">{chat && <DmChatSelected chat={chat} />}</div>
</div>
<div>
<div className="flex g8">
<WriteMessage chat={chat} />
</div>
</div>
Expand Down
26 changes: 6 additions & 20 deletions packages/app/src/Element/Chat/WriteMessage.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import { useState } from "react";
import { NostrEvent, NostrLink, NostrPrefix } from "@snort/system";
import useEventPublisher from "Hooks/useEventPublisher";
import Icon from "Icons/Icon";
import Spinner from "Icons/Spinner";
import { useState } from "react";
import useFileUpload from "Upload";
import { openFile } from "SnortUtils";
import Textarea from "../Textarea";
import { Chat } from "chat";
import { AsyncIcon } from "Element/AsyncIcon";

export default function WriteMessage({ chat }: { chat: Chat }) {
const [msg, setMsg] = useState("");
const [sending, setSending] = useState(false);
const [uploading, setUploading] = useState(false);
const [otherEvents, setOtherEvents] = useState<Array<NostrEvent>>([]);
const [error, setError] = useState("");
const { publisher, system } = useEventPublisher();
Expand All @@ -31,7 +28,6 @@ export default function WriteMessage({ chat }: { chat: Chat }) {
}

async function uploadFile(file: File | Blob) {
setUploading(true);
try {
if (file) {
const rx = await uploader.upload(file, file.name);
Expand All @@ -51,25 +47,19 @@ export default function WriteMessage({ chat }: { chat: Chat }) {
if (e instanceof Error) {
setError(e.message);
}
} finally {
setUploading(false);
}
}

async function sendMessage() {
if (msg && publisher && chat) {
setSending(true);
const ev = await chat.createMessage(msg, publisher);
await chat.sendMessage(ev, system);
setMsg("");
setSending(false);
}
}

function onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
if (!sending) {
setMsg(e.target.value);
}
setMsg(e.target.value);
}

async function onEnter(e: React.KeyboardEvent<HTMLTextAreaElement>) {
Expand All @@ -82,10 +72,8 @@ export default function WriteMessage({ chat }: { chat: Chat }) {

return (
<>
<button className="circle flex items-center" onClick={() => attachFile()}>
{uploading ? <Spinner width={20} /> : <Icon name="attachment" size={20} />}
</button>
<div className="w-max">
<AsyncIcon className="circle flex items-center button" iconName="attachment" onClick={() => attachFile()} />
<div className="grow">
<Textarea
autoFocus={true}
placeholder=""
Expand All @@ -99,9 +87,7 @@ export default function WriteMessage({ chat }: { chat: Chat }) {
/>
{error && <b className="error">{error}</b>}
</div>
<button className="circle flex items-center" onClick={() => sendMessage()}>
{sending ? <Spinner width={20} /> : <Icon name="arrow-right" size={20} />}
</button>
<AsyncIcon className="circle flex items-center button" iconName="arrow-right" onClick={() => sendMessage()} />
</>
);
}
1 change: 1 addition & 0 deletions packages/app/src/Element/Event/NoteCreator.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
.note-creator-modal .note.card {
padding: 0;
border: none;
min-height: unset;
}

.note-creator-modal .note.card.note-quote {
Expand Down
8 changes: 5 additions & 3 deletions packages/app/src/Element/Event/NoteCreator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -465,7 +465,9 @@ export function NoteCreator() {
onClick={() => note.update(v => (v.advanced = !v.advanced))}
className={classNames("note-creator-icon", { active: note.advanced })}
/>
<FormattedMessage defaultMessage="Preview" />
<span className="sm:inline hidden">
<FormattedMessage defaultMessage="Preview" />
</span>
<ToggleSwitch
onClick={() => loadPreview()}
size={40}
Expand Down Expand Up @@ -546,10 +548,10 @@ export function NoteCreator() {
)}
{note.preview && getPreviewNote()}
{!note.preview && (
<div onPaste={handlePaste} className={`note-creator${note.pollOptions ? " poll" : ""}`}>
<div onPaste={handlePaste} className={classNames("note-creator", { poll: Boolean(note.pollOptions) })}>
<Textarea
autoFocus
className={`textarea ${note.active ? "textarea--focused" : ""}`}
className={classNames("textarea", { "textarea--focused": note.active })}
onChange={c => onChange(c)}
value={note.note}
onFocus={() => note.update(v => (v.active = true))}
Expand Down
14 changes: 9 additions & 5 deletions packages/app/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -241,10 +241,7 @@ small {
line-height: 22px; /* 157.143% */
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
.button {
position: relative;
cursor: pointer;
padding: 10px 16px;
Expand All @@ -257,6 +254,13 @@ button,
outline: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
@apply button;
}

.btn,
input,
select {
Expand Down Expand Up @@ -809,7 +813,7 @@ button.tall {
}
}

.rta__textarea {
.note-creator-modal .rta__textarea {
/* Fix width calculation to account for 32px padding on input */
width: calc(100% - 32px) !important;
font-size: 15px !important;
Expand Down

0 comments on commit c2991b8

Please sign in to comment.