jude/reminder-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Add mention support

Browse Source 
Allow vertical resizing of inputs
This commit is contained in:
jude
2024-03-03 21:44:35 +00:00
parent 66135ecd08
commit 329492b244
11 changed files with 219 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
reminder-dashboard/src/components/Reminder/Embed/Author.tsx
View File

@ -1,5 +1,7 @@
import { ImagePicker } from "../ImagePicker";
import { Reminder } from "../../../api";
import { useMentions } from "../../App/useMentions";
import { useRef } from "preact/hooks";
type Props = {
name: string;
@ -8,6 +10,9 @@ type Props = {
};
export const Author = ({ name, icon, setReminder }: Props) => {
const input = useRef(null);
useMentions(input);
return (
<div class="embed-author-box">
<div class="a">
@ -34,6 +39,7 @@ export const Author = ({ name, icon, setReminder }: Props) => {
class="discord-embed-author message-input autoresize"
placeholder="Embed Author..."
rows={1}
ref={input}
maxlength={256}
name="embed_author"
value={name}

45
reminder-dashboard/src/components/Reminder/Embed/Description.tsx
View File

@ -1,18 +1,27 @@
export const Description = ({ description, onInput }) => (
<>
<label class="is-sr-only" for="embedDescription">
Embed Description
</label>
<textarea
class="discord-description message-input autoresize "
placeholder="Embed Description..."
maxlength={4096}
name="embed_description"
rows={1}
value={description}
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea>
</>
);
import { useMentions } from "../../App/useMentions";
import { useRef } from "preact/hooks";
export const Description = ({ description, onInput }) => {
const input = useRef(null);
useMentions(input);
return (
<>
<label class="is-sr-only" for="embedDescription">
Embed Description
</label>
<textarea
class="discord-description message-input autoresize "
placeholder="Embed Description..."
maxlength={4096}
name="embed_description"
rows={1}
ref={input}
value={description}
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea>
</>
);
};

7
reminder-dashboard/src/components/Reminder/Embed/Fields/Field.tsx
View File

@ -1,4 +1,10 @@
import { useRef } from "preact/hooks";
import { useMentions } from "../../../App/useMentions";
export const Field = ({ title, value, inline, index, onUpdate }) => {
const input = useRef(null);
useMentions(input);
return (
<div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
<label class="is-sr-only" for="embedFieldTitle">
@ -44,6 +50,7 @@ export const Field = ({ title, value, inline, index, onUpdate }) => {
maxlength={1024}
name="embed_field_value[]"
rows={1}
ref={input}
value={value}
onInput={(ev) =>
onUpdate({

68
reminder-dashboard/src/components/Reminder/Embed/Footer.tsx
View File

@ -1,5 +1,7 @@
import { Reminder } from "../../../api";
import { ImagePicker } from "../ImagePicker";
import { useMentions } from "../../App/useMentions";
import { useRef } from "preact/hooks";
type Props = {
footer: string;
@ -7,37 +9,43 @@ type Props = {
setReminder: (r: (reminder: Reminder) => Reminder) => void;
};
export const Footer = ({ footer, icon, setReminder }: Props) => (
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<ImagePicker
class="is-rounded embed_footer_url"
url={icon}
alt="Footer profile-like image"
setImage={(url: string) => {
export const Footer = ({ footer, icon, setReminder }: Props) => {
const input = useRef(null);
useMentions(input);
return (
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<ImagePicker
class="is-rounded embed_footer_url"
url={icon}
alt="Footer profile-like image"
setImage={(url: string) => {
setReminder((reminder) => ({
...reminder,
embed_footer_url: url,
}));
}}
></ImagePicker>
</p>
<label class="is-sr-only" for="embedFooter">
Embed Footer text
</label>
<textarea
class="discord-embed-footer message-input autoresize "
placeholder="Embed Footer..."
maxlength={2048}
name="embed_footer"
rows={1}
ref={input}
value={footer}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_footer_url: url,
embed_footer: ev.currentTarget.value,
}));
}}
></ImagePicker>
</p>
<label class="is-sr-only" for="embedFooter">
Embed Footer text
</label>
<textarea
class="discord-embed-footer message-input autoresize "
placeholder="Embed Footer..."
maxlength={2048}
name="embed_footer"
rows={1}
value={footer}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_footer: ev.currentTarget.value,
}));
}}
></textarea>
</div>
);
></textarea>
</div>
);
};

46
reminder-dashboard/src/components/Reminder/Embed/Title.tsx
View File

@ -1,18 +1,28 @@
export const Title = ({ title, onInput }) => (
<>
<label class="is-sr-only" for="embedTitle">
Embed Title
</label>
<textarea
class="discord-title message-input autoresize"
placeholder="Embed Title..."
maxlength={256}
rows={1}
name="embed_title"
value={title}
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea>
</>
);
import { useParams } from "wouter";
import { useRef } from "preact/hooks";
import { useMentions } from "../../App/useMentions";
export const Title = ({ title, onInput }) => {
const input = useRef(null);
useMentions(input);
return (
<>
<label class="is-sr-only" for="embedTitle">
Embed Title
</label>
<textarea
class="discord-title message-input autoresize"
placeholder="Embed Title..."
maxlength={256}
rows={1}
ref={input}
name="embed_title"
value={title}
onInput={(ev) => {
onInput(ev.currentTarget.value);
}}
></textarea>
</>
);
};