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

Color picker

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
package-lock.json generated
View File

@ -11,6 +11,7 @@
"bulma": "^0.9.4",
"luxon": "^3.4.3",
"preact": "^10.13.1",
"react-colorful": "^5.6.1",
"react-query": "^3.39.3",
"tributejs": "^5.1.3",
"wouter": "^2.12.1"
@ -3899,6 +3900,28 @@
"node": ">=0.10.0"
}
},
"node_modules/react-colorful": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
"integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
},
"peerDependencies": {
"react": "^18.2.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -4098,6 +4121,15 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/scheduler": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
}
},
"node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",

1
package.json
View File

@ -13,6 +13,7 @@
"bulma": "^0.9.4",
"luxon": "^3.4.3",
"preact": "^10.13.1",
"react-colorful": "^5.6.1",
"react-query": "^3.39.3",
"tributejs": "^5.1.3",
"wouter": "^2.12.1"

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>
);
};

1
vite.config.ts
View File

@ -7,5 +7,6 @@ export default defineConfig({
build: {
assetsDir: "static/assets",
sourcemap: true,
copyPublicDir: false,
},
});