diff --git a/migrations/20230722130906_increase_reminder_name.sql b/migrations/20230722130906_increase_reminder_name.sql new file mode 100644 index 0000000..fa82303 --- /dev/null +++ b/migrations/20230722130906_increase_reminder_name.sql @@ -0,0 +1,2 @@ +ALTER TABLE reminders MODIFY `name` VARCHAR(100) NOT NULL DEFAULT 'Reminder'; +ALTER TABLE reminder_template MODIFY `name` VARCHAR(100) NOT NULL DEFAULT 'Reminder'; diff --git a/web/src/consts.rs b/web/src/consts.rs index 8ca284a..957eaf4 100644 --- a/web/src/consts.rs +++ b/web/src/consts.rs @@ -2,6 +2,7 @@ pub const DISCORD_OAUTH_TOKEN: &'static str = "https://discord.com/api/oauth2/to pub const DISCORD_OAUTH_AUTHORIZE: &'static str = "https://discord.com/api/oauth2/authorize"; pub const DISCORD_API: &'static str = "https://discord.com/api"; +pub const MAX_NAME_LENGTH: usize = 100; pub const MAX_CONTENT_LENGTH: usize = 2000; pub const MAX_EMBED_DESCRIPTION_LENGTH: usize = 4096; pub const MAX_EMBED_TITLE_LENGTH: usize = 256; diff --git a/web/src/routes/dashboard/mod.rs b/web/src/routes/dashboard/mod.rs index fdfd337..19a3802 100644 --- a/web/src/routes/dashboard/mod.rs +++ b/web/src/routes/dashboard/mod.rs @@ -400,6 +400,7 @@ pub async fn create_reminder( let channel = channel.unwrap(); // validate lengths + check_length!(MAX_NAME_LENGTH, reminder.name); check_length!(MAX_CONTENT_LENGTH, reminder.content); check_length!(MAX_EMBED_DESCRIPTION_LENGTH, reminder.embed_description); check_length!(MAX_EMBED_TITLE_LENGTH, reminder.embed_title); diff --git a/web/static/css/style.css b/web/static/css/style.css index a8001ca..f55adc1 100644 --- a/web/static/css/style.css +++ b/web/static/css/style.css @@ -11,7 +11,7 @@ div.reminderContent.is-collapsed .column.discord-frame { display: none; } -div.reminderContent.is-collapsed .collapses { +div.reminderContent.is-collapsed .column.settings { display: none; } @@ -23,42 +23,42 @@ div.reminderContent .invert-collapses { display: none; } -div.reminderContent.is-collapsed .settings { - display: flex; - flex-direction: row; - padding-bottom: 0; -} - -div.reminderContent.is-collapsed .channel-field { - display: inline-flex; - order: 1; -} - -div.reminderContent.is-collapsed .reminder-topbar { - display: inline-flex; - margin-bottom: 0px; - flex-grow: 1; - order: 2; -} - div.reminderContent.is-collapsed input[name="name"] { display: inline-flex; flex-grow: 1; border: none; - font-weight: 700; background: none; + box-shadow: none; + opacity: 1; } -div.reminderContent.is-collapsed button.hide-box { +div.reminderContent.is-collapsed .hide-box { display: inline-flex; } -div.reminderContent.is-collapsed button.hide-box i { +div.reminderContent.is-collapsed .hide-box i { transform: rotate(90deg); } /* END */ /* dashboard styles */ +.hide-box { + border: none; + background: none; +} + +.hide-box:focus { + outline: none; + box-shadow: none !important; +} + +.channel-bar { + display: flex; + justify-content: center; + flex-direction: column; + font-weight: bold; +} + button.inline-btn { height: 100%; padding: 5px; @@ -85,11 +85,47 @@ div.discord-embed { position: relative; } +div.split-controls { + display: flex; + flex-direction: column; + justify-content: space-between; + flex-grow: 2; +} + +.reminder-topbar > div { + padding-left: 6px; + padding-right: 6px; +} + +.settings { + display: flex; + flex-direction: column; +} + +.name-bar { + flex-grow: 1; + flex-shrink: 0; +} + +.hide-button-bar { + flex-grow: 0; + flex-shrink: 0; +} + +.patreon-only { + padding-bottom: 16px; +} + +.reminder-topbar { + display: flex; +} + div.reminderContent { - padding: 2px; + margin-top: 10px; + margin-bottom: 10px; + padding: 14px; background-color: #f5f5f5; border-radius: 8px; - margin: 8px; } div.interval-group > button { diff --git a/web/static/js/main.js b/web/static/js/main.js index 912cbc1..d66b5a7 100644 --- a/web/static/js/main.js +++ b/web/static/js/main.js @@ -56,6 +56,12 @@ function switch_pane(selector) { } function update_select(sel) { + let channelDisplay = sel.closest("div.reminderContent").querySelector(".channel-bar"); + + if (channelDisplay !== null) { + channelDisplay.textContent = `#${sel.selectedOptions[0].textContent}`; + } + if (sel.selectedOptions[0].dataset["webhookAvatar"]) { sel.closest("div.reminderContent").querySelector("img.discord-avatar").src = sel.selectedOptions[0].dataset["webhookAvatar"]; @@ -231,6 +237,11 @@ async function serialize_reminder(node, mode) { } } + let name = node.querySelector('input[name="name"]').value; + if (name.length > 100) { + return { error: "Name exceeds maximum length (100)." }; + } + let rgb_color = window.getComputedStyle( node.querySelector("div.discord-embed") ).borderLeftColor; @@ -366,6 +377,7 @@ function deserialize_reminder(reminder, frame, mode) { } update_interval(frame); + update_select(frame.querySelector(".channel-selector")); const lastChild = frame.querySelector("div.embed-multifield-box .embed-field-box"); @@ -451,6 +463,12 @@ document.addEventListener("channelsLoaded", () => { document.addEventListener("remindersLoaded", (event) => { const guild = guildId(); + document.querySelectorAll("select.channel-selector").forEach((el) => { + el.addEventListener("change", (e) => { + update_select(e.target); + }); + }); + for (let reminder of event.detail) { let node = reminder.node; diff --git a/web/templates/reminder_dashboard/guild_reminder.html.tera b/web/templates/reminder_dashboard/guild_reminder.html.tera index 5918800..cfbf38c 100644 --- a/web/templates/reminder_dashboard/guild_reminder.html.tera +++ b/web/templates/reminder_dashboard/guild_reminder.html.tera @@ -1,251 +1,262 @@ -
-
-
-
-

- - Image for discord avatar - -

-
-
-
-
- - -
- - +
+
+ {% if not creating %} +
+ #channel +
+ {% endif %} +
+
+
+ + +
+
+
+
+ +
+
+
+
+
+
+

+ + Image for discord avatar + +

+
+
+
+
+ + +
+ + -
-
- -
-
-
-

- - Image for embed author - -

-
- -
- - -
-
- - - -
- - -
- -
-
- -
- - +
+
+ +
+
+
+

+ + Image for embed author + +

- - +
+ + +
+ + + +
+ + +
+ +
+
+ +
+ + +
+ + + +
+
+
+ +
+

+ + Square thumbnail embedded image + +

-
-

- - Square thumbnail embedded image - -

-
-
- -

- - Large embedded image - -

- -
-

+

- Footer profile-like image + Large embedded image

- - -
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
- -
-
+
+

+ + Footer profile-like image + +

-
-
-
-
- -
-
-
- -
-
- + + +
-
-
-
-
- -
-
-
+
+
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+
+
-
-
-
- -
-
-
- - - - -