corbz/relay
1
0
Fork 0
Code Issues 2 Pull Requests Actions Releases Activity

feat: colour picker on message style edit modal
Some checks failed
Build / build (push) Failing after 40s
Details

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-05-05 23:06:05 +01:00
parent 99a59c61e7
commit e9807ee6f6
3 changed files with 67 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/client/src/ts/guild/styles.ts
View File

@ -6,7 +6,7 @@ import HSSelect, { ISelectOptions, ISingleOption } from "@preline/select";
import HSDataTable, { IDataTableOptions } from "@preline/datatable";
import DataTable, { Api, ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
import { formatTimestamp } from "../../../src/ts/main";
import { formatTimestamp, genHexString } from "../../../src/ts/main";
import prisma from "../../../../../generated/prisma";
declare let guildId: string;
@ -95,11 +95,12 @@ const columnDefs: ConfigColumnDefs[] = [
className: "size-px whitespace-nowrap",
render: (data: string, type: string) => {
if (type !== "display") return data;
if (!data) return "";
const wrapper = $("<div>").addClass("px-6 py-4");
const badge = $("<span>").addClass("inline-flex items-center whitespace-nowrap gap-1 py-1 px-2.5 border text-xs rounded-md bg-white dark:bg-neutral-800 border-gray-200 dark:border-neutral-700 text-gray-800 dark:text-neutral-200");
badge.text(data);
badge.text(textMutators[data]);
wrapper.append(badge);
return wrapper.get(0);
@ -113,11 +114,12 @@ const columnDefs: ConfigColumnDefs[] = [
className: "size-px whitespace-nowrap",
render: (data: string, type: string) => {
if (type !== "display") return data;
if (!data) return "";
const wrapper = $("<div>").addClass("px-6 py-4");
const badge = $("<span>").addClass("inline-flex items-center whitespace-nowrap gap-1 py-1 px-2.5 border text-xs rounded-md bg-white dark:bg-neutral-800 border-gray-200 dark:border-neutral-700 text-gray-800 dark:text-neutral-200");
badge.text(data);
badge.text(textMutators[data]);
wrapper.append(badge);
return wrapper.get(0);
@ -392,9 +394,8 @@ $(document).on("click", ".open-edit-modal-js", async event => {
const clearEditModalData = () => {
$(editModal.el).removeData("id");
// TODO: clear values
$("#formName").val("");
$("#formColour").val("");
updateColourInput("#5865F2");
titleMutatorSelect.setValue("");
descriptionMutatorSelect.setValue("");
@ -414,7 +415,17 @@ const loadEditModalData = async (id: number) => {
$(editModal.el).data("id", style.id);
// TODO: set values
$("#formName").val(style.name);
updateColourInput("#5865F2");
titleMutatorSelect.setValue(style.title_mutator || "");
descriptionMutatorSelect.setValue(style.description_mutator || "");
$("#formShowAuthor").prop("checked", style.show_author);
$("#formShowImage").prop("checked", style.show_image);
$("#formShowThumbnail").prop("checked", style.show_thumbnail);
$("#formShowFooter").prop("checked", style.show_footer);
$("#formShowTimestamp").prop("checked", style.show_timestamp);
}
const openEditModal = async (id: number | undefined) => {
@ -477,6 +488,24 @@ Object.entries(textMutators).forEach(([key, description]) => {
} as ISingleOption)
})
const colourPicker = $("#formColour") as JQuery<HTMLInputElement>;
const colourTextInput = $("#formColourInput") as JQuery<HTMLInputElement>;
const colourRandomBtn = $("#formColourRandomBtn") as JQuery<HTMLButtonElement>;
const updateColourInput = (value: string) => {
value = "#" + value.replace(/[^A-F0-9]/gi, '')
.toUpperCase()
.slice(0, 6)
.padEnd(6, "0");
colourPicker.val(value);
colourTextInput.val(value);
};
colourPicker.on("change", _ => updateColourInput(colourPicker.val()));
colourTextInput.on("change", _ => updateColourInput(colourTextInput.val()));
colourRandomBtn.on("click", _ => updateColourInput(genHexString(6)));
$("#editForm").on("submit", async event => {
event.preventDefault();

10
src/client/src/ts/main.ts
View File

@ -42,4 +42,12 @@ export const verifyChannels = (data: prisma.Channel[], channels: Channel[]) => {
return data.some(item => {
return channels.map(channel => channel.id).includes(item.channel_id);
});
};
};
export function genHexString(len=6) {
let output = '';
for (let i = 0; i < len; ++i) {
output += (Math.floor(Math.random() * 16)).toString(16);
}
return output;
}

36
src/client/views/guild/styles.ejs
View File

@ -180,7 +180,7 @@
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-800 dark:text-neutral-200">Message Style</h2>
<p class="text-sm text-gray-600 dark:text-neutral-400">
message style placeholder description.
Customise the appearance of Discord Embeds containing feed content.
</p>
</div>
<form id="editForm" novalidate class="group grid sm:grid-cols-2 gap-y-4 sm:gap-y-6 md:gap-y-8 gap-x-6 sm:gap-x-8 md:gap-x-10">
@ -196,12 +196,22 @@
</p>
</div>
<div>
<label for="formColour" class="text-input-label">Colour</label>
<input type="text" id="formColour" name="colour" class="form-input text-input peer invalid:group-[.submitted]:border-red-500 invalid:group-[.submitted]:ring-red-500" required>
<p class="text-input-help block peer-invalid:group-[.submitted]:hidden">
hex colour placeholder
<label for="formColour" class="text-input-label">Embed Colour</label>
<div class="flex rounded-lg peer border-gray-200 dark:border-neutral-700">
<input type="color" id="formColour" name="colour" class="size-11.5 shrink-0 inline-flex justify-center items-center px-1 py-0.5 rounded-s-lg border border-inherit border-e-0 focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" required>
<input type="text" id="formColourInput" class="form-input text-input !border-s-0 !rounded-none" required>
<button type="button" id="formColourRandomBtn" class="size-11.5 shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M2.578 8.174a.327.327 0 0 0-.328.326v8c0 .267.143.514.373.648l8.04 4.69a.391.391 0 0 0 .587-.338v-7.75a.991.991 0 0 0-.492-.855L2.742 8.217a.327.327 0 0 0-.164-.043Zm2.176 2.972a.964.964 0 0 1 .389.067c.168.067.27.149.367.234.192.171.343.372.48.61.138.238.236.466.287.718.026.127.046.259.02.438a.89.89 0 0 1-.422.642.89.89 0 0 1-.768.045 1.172 1.172 0 0 1-.367-.236 2.368 2.368 0 0 1-.48-.607 2.377 2.377 0 0 1-.287-.721 1.183 1.183 0 0 1-.02-.438.89.89 0 0 1 .422-.642.818.818 0 0 1 .379-.11Zm3.25 1.702a.956.956 0 0 1 .389.064c.168.067.27.151.367.236.192.171.343.37.48.608.138.238.236.468.287.72.026.127.046.259.02.438a.89.89 0 0 1-.422.643c-.293.169-.6.11-.768.043a1.17 1.17 0 0 1-.367-.235 2.378 2.378 0 0 1-.48-.61 2.366 2.366 0 0 1-.287-.718 1.183 1.183 0 0 1-.02-.437.89.89 0 0 1 .422-.643.823.823 0 0 1 .379-.11Zm-3.25 1.5a.956.956 0 0 1 .389.064c.168.067.27.151.367.236.192.171.343.37.48.608.138.238.236.468.287.72.026.127.046.259.02.438a.89.89 0 0 1-.422.643c-.293.169-.6.11-.768.043a1.17 1.17 0 0 1-.367-.235 2.378 2.378 0 0 1-.48-.61 2.366 2.366 0 0 1-.287-.718 1.183 1.183 0 0 1-.02-.437.89.89 0 0 1 .422-.643.823.823 0 0 1 .379-.11Zm3.25 1.75a.956.956 0 0 1 .389.064c.168.067.27.151.367.236.192.171.343.37.48.608.138.238.236.468.287.72.026.127.046.259.02.438a.89.89 0 0 1-.422.643c-.293.169-.6.11-.768.043a1.17 1.17 0 0 1-.367-.235 2.378 2.378 0 0 1-.48-.61 2.366 2.366 0 0 1-.287-.718 1.183 1.183 0 0 1-.02-.437.89.89 0 0 1 .422-.643.823.823 0 0 1 .379-.11Zm13.443-7.924a.327.327 0 0 0-.19.043l-8.015 4.678a.991.991 0 0 0-.492.855v7.799a.363.363 0 0 0 .547.312l8.08-4.713a.752.752 0 0 0 .373-.648v-8a.327.327 0 0 0-.303-.326Zm-5.502 4.707a.83.83 0 0 1 .43.111.89.89 0 0 1 .422.643c.026.179.006.311-.02.437-.051.253-.15.481-.287.719a2.378 2.378 0 0 1-.48.61 1.17 1.17 0 0 1-.367.234.889.889 0 0 1-.768-.043.89.89 0 0 1-.422-.643 1.183 1.183 0 0 1 .02-.437c.051-.253.15-.483.287-.721.137-.238.288-.437.48-.607.097-.086.2-.17.367-.237a.96.96 0 0 1 .338-.066zm3.25 1.5a.83.83 0 0 1 .43.111.89.89 0 0 1 .422.643c.026.179.006.311-.02.437-.051.253-.15.481-.287.719a2.378 2.378 0 0 1-.48.61 1.17 1.17 0 0 1-.367.234.889.889 0 0 1-.768-.043.89.89 0 0 1-.422-.643 1.183 1.183 0 0 1 .02-.437c.051-.253.15-.483.287-.721.137-.238.288-.437.48-.607.097-.086.2-.17.367-.237a.96.96 0 0 1 .338-.066zM12 1.5c-.13 0-.26.033-.377.102L3.533 6.32a.36.36 0 0 0 0 .623l7.74 4.516a1.44 1.44 0 0 0 1.454 0l7.765-4.531a.343.343 0 0 0 0-.592l-8.115-4.734A.745.745 0 0 0 12 1.5Zm-.094 4.078h.102c.274 0 .523.03.767.111.123.041.247.091.39.204a.886.886 0 0 1 .343.685.886.886 0 0 1-.344.686 1.19 1.19 0 0 1-.389.203 2.376 2.376 0 0 1-.767.111c-.275 0-.523-.03-.768-.111a1.19 1.19 0 0 1-.388-.203.886.886 0 0 1-.344-.686c0-.338.201-.573.344-.685a1.19 1.19 0 0 1 .388-.204 2.28 2.28 0 0 1 .666-.11z"></path>
</svg>
</button>
</div>
<p class="text-input-help block peer-has-invalid:group-[.submitted]:hidden">
The colour of the Discord Embed.
</p>
<p class="mt-2 text-sm text-red-500 hidden peer-invalid:group-[.submitted]:block">
<p class="mt-2 text-sm text-red-500 hidden peer-has-invalid:group-[.submitted]:block">
Please enter a colour.
</p>
</div>
@ -211,7 +221,7 @@
<option value="">Choose</option>
</select>
<p class="text-input-help block peer-has-invalid:group-[.submitted]:hidden">
title mutator placeholder.
An optional humorous text mutator for the title.
</p>
</div>
<div class="relative">
@ -220,7 +230,7 @@
<option value="">Choose</option>
</select>
<p class="text-input-help block peer-has-invalid:group-[.submitted]:hidden">
title mutator placeholder.
An optional humorous text mutator for the description.
</p>
</div>
@ -230,7 +240,7 @@
<span class="flex flex-col">
<span class="block text-sm dark:text-neutral-400">Show author</span>
<span class="block text-sm text-gray-500 dark:text-neutral-500">
Show author placeholder
Show the content author in the message.
</span>
</span>
</label>
@ -241,7 +251,7 @@
<span class="flex flex-col">
<span class="block text-sm dark:text-neutral-400">Show image</span>
<span class="block text-sm text-gray-500 dark:text-neutral-500">
Show image placeholder
Show the content image in the message.
</span>
</span>
</label>
@ -252,7 +262,7 @@
<span class="flex flex-col">
<span class="block text-sm dark:text-neutral-400">Show thumbnail</span>
<span class="block text-sm text-gray-500 dark:text-neutral-500">
Show thumbnail placeholder
Show the content thumbnail in the message.
</span>
</span>
</label>
@ -263,7 +273,7 @@
<span class="flex flex-col">
<span class="block text-sm dark:text-neutral-400">Show footer</span>
<span class="block text-sm text-gray-500 dark:text-neutral-500">
Show footer placeholder
Show a footer in the Discord Embed.
</span>
</span>
</label>
@ -274,7 +284,7 @@
<span class="flex flex-col">
<span class="block text-sm dark:text-neutral-400">Show timestamp</span>
<span class="block text-sm text-gray-500 dark:text-neutral-500">
Show timestamp placeholder
Show a timestamp in the message.
</span>
</span>
</label>