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

Color picker

Browse Source
This commit is contained in:
jude
2023-10-30 18:07:07 +00:00
parent d5f1a2e3a1
commit 3372933044
6 changed files with 153 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/EditReminder/Embed/Color.tsx Normal file
View File

@ -0,0 +1,91 @@
import { useState } from "preact/hooks";
import { HexColorPicker } from "react-colorful";
export const Color = ({ color: colorProp, onChange }) => {
const [modalOpen, setModalOpen] = useState(false);
const [color, setColor] = useState(colorProp);
return (
<>
{modalOpen && (
<ColorModal
color={color}
setModalOpen={setModalOpen}
onSave={setColor}
></ColorModal>
)}
<button
class="change-color button is-rounded is-small"
onClick={() => {
setModalOpen(true);
}}
>
<span class="is-sr-only">Choose embed color</span>
<i class="fas fa-eye-dropper"></i>
</button>
</>
);
};
const ColorModal = ({ setModalOpen, color: colorProp, onSave }) => {
const [color, setColor] = useState(colorProp);
return (
<div class="modal is-active" id="pickColorModal">
<div
class="modal-background"
onClick={() => {
setModalOpen(false);
}}
></div>
<div class="modal-card">
<header class="modal-card-head">
<label class="modal-card-title" for="colorInput">
Select Color
</label>
<button
class="delete close-modal"
aria-label="close"
onClick={() => {
setModalOpen(false);
}}
></button>
</header>
<section class="modal-card-body">
<div class="colorpicker-container">
<HexColorPicker color={color} onChange={setColor}></HexColorPicker>
</div>
<br></br>
<input
class="input"
id="colorInput"
value={color}
onChange={(ev) => {
setColor(ev.currentTarget.value);
}}
></input>
</section>
<footer class="modal-card-foot">
<button class="button is-success" onChange={onSave}>
Save
</button>
<button
class="button close-modal"
onClick={() => {
setModalOpen(false);
}}
>
Cancel
</button>
</footer>
</div>
<button
class="modal-close is-large close-modal"
aria-label="close"
onClick={() => {
setModalOpen(false);
}}
></button>
</div>
);
};

24
src/components/EditReminder/Embed/Footer.tsx Normal file
View File

@ -0,0 +1,24 @@
export const Footer = ({ footer, icon }) => (
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<a>
<img
class="is-rounded embed_footer_url"
src={icon || "/static/img/bg.webp"}
alt="Footer profile-like image"
></img>
</a>
</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}
></textarea>
</div>
);

30
src/components/EditReminder/Embed/index.tsx
View File

@ -1,15 +1,14 @@
import { Author } from "./Author";
import { Title } from "./Title";
import { Description } from "./Description";
import { Footer } from "./Footer";
import { Color } from "./Color";
export const Embed = ({ reminder }) => {
return (
<div class="discord-embed">
<div class="embed-body">
<button class="change-color button is-rounded is-small">
<span class="is-sr-only">Choose embed color</span>
<i class="fas fa-eye-dropper"></i>
</button>
<Color color={reminder.embed_color} onChange={() => {}}></Color>
<div class="a">
<Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
<Title title={reminder.embed_title}></Title>
@ -73,28 +72,7 @@ export const Embed = ({ reminder }) => {
</a>
</p>
<div class="embed-footer-box">
<p class="image is-20x20 customizable">
<a>
<img
class="is-rounded embed_footer_url"
src="/static/img/bg.webp"
alt="Footer profile-like image"
></img>
</a>
</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}
></textarea>
</div>
<Footer footer={reminder.embed_footer} icon={reminder.embed_footer_url}></Footer>
</div>
);
};