From e9807ee6f6f0066e0351b58a1e53653af9993874 Mon Sep 17 00:00:00 2001 From: Corban-Lee Jones Date: Mon, 5 May 2025 23:06:05 +0100 Subject: [PATCH] feat: colour picker on message style edit modal --- src/client/src/ts/guild/styles.ts | 41 ++++++++++++++++++++++++++----- src/client/src/ts/main.ts | 10 +++++++- src/client/views/guild/styles.ejs | 36 +++++++++++++++++---------- 3 files changed, 67 insertions(+), 20 deletions(-) diff --git a/src/client/src/ts/guild/styles.ts b/src/client/src/ts/guild/styles.ts index 10986e0..205386c 100644 --- a/src/client/src/ts/guild/styles.ts +++ b/src/client/src/ts/guild/styles.ts @@ -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 = $("
").addClass("px-6 py-4"); const badge = $("").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 = $("
").addClass("px-6 py-4"); const badge = $("").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; +const colourTextInput = $("#formColourInput") as JQuery; +const colourRandomBtn = $("#formColourRandomBtn") as JQuery; + +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(); diff --git a/src/client/src/ts/main.ts b/src/client/src/ts/main.ts index d31a48b..794ac52 100644 --- a/src/client/src/ts/main.ts +++ b/src/client/src/ts/main.ts @@ -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); }); -}; \ No newline at end of file +}; + +export function genHexString(len=6) { + let output = ''; + for (let i = 0; i < len; ++i) { + output += (Math.floor(Math.random() * 16)).toString(16); + } + return output; +} \ No newline at end of file diff --git a/src/client/views/guild/styles.ejs b/src/client/views/guild/styles.ejs index 8b54066..be7d1a4 100644 --- a/src/client/views/guild/styles.ejs +++ b/src/client/views/guild/styles.ejs @@ -180,7 +180,7 @@

Message Style

- message style placeholder description. + Customise the appearance of Discord Embeds containing feed content.

@@ -196,12 +196,22 @@

- - -

- hex colour placeholder + +

+ + + +
+ + +

+ The colour of the Discord Embed.

-
@@ -211,7 +221,7 @@

- title mutator placeholder. + An optional humorous text mutator for the title.

@@ -220,7 +230,7 @@

- title mutator placeholder. + An optional humorous text mutator for the description.

@@ -230,7 +240,7 @@ Show author - Show author placeholder + Show the content author in the message. @@ -241,7 +251,7 @@ Show image - Show image placeholder + Show the content image in the message. @@ -252,7 +262,7 @@ Show thumbnail - Show thumbnail placeholder + Show the content thumbnail in the message. @@ -263,7 +273,7 @@ Show footer - Show footer placeholder + Show a footer in the Discord Embed. @@ -274,7 +284,7 @@ Show timestamp - Show timestamp placeholder + Show a timestamp in the message.