From 388453a05998282023266361479cfd3ed1e104ba Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Tue, 12 Nov 2024 15:06:48 +0000 Subject: [PATCH 01/14] Added Link Hitbox Scaling --- assets/chat/css/messages/_base.scss | 16 ++++++++++++++++ assets/chat/css/messages/user/_index.scss | 2 ++ assets/chat/js/chat.js | 3 +++ assets/chat/js/const.js | 1 + assets/chat/js/menus/ChatSettingsMenu.js | 4 +++- assets/views/embed.html | 6 ++++++ 6 files changed, 31 insertions(+), 1 deletion(-) diff --git a/assets/chat/css/messages/_base.scss b/assets/chat/css/messages/_base.scss index d8349e4f..3616acf3 100644 --- a/assets/chat/css/messages/_base.scss +++ b/assets/chat/css/messages/_base.scss @@ -23,6 +23,8 @@ $link-color-map: ( cursor: pointer; margin-left: a.$gutter-sm; color: a.$color-label-user; + position: relative; + z-index: 2; } .chat-user { @@ -50,6 +52,15 @@ $link-color-map: ( color: a.$color-link; position: relative; + // Links are over emotes and text but under usernames and the embed button + z-index: 1; + // If this calculation produces fractional pixel values the link can shift by up to half a pixel. + // This could be fixed by using pixels instead of em, but we then lose scaling of the hitboxes by + // font size + padding: calc(var(--link-size) * 1em); + margin: calc(var(--link-size) * -1em); + + &:visited { color: a.$color-link-visited; } @@ -59,6 +70,10 @@ $link-color-map: ( color: a.$color-link-hover; } } + &:last-child .externallink { + padding-bottom: 0px; + margin-bottom: 0px; + } @each $type, $color in $link-color-map { .#{$type}-link { @@ -78,6 +93,7 @@ $link-color-map: ( margin-left: a.$gutter-sm; margin-right: a.$gutter-xs; opacity: 0.5; + z-index: 2; &:hover { opacity: 1; diff --git a/assets/chat/css/messages/user/_index.scss b/assets/chat/css/messages/user/_index.scss index 83ed7413..fb276fd4 100644 --- a/assets/chat/css/messages/user/_index.scss +++ b/assets/chat/css/messages/user/_index.scss @@ -9,6 +9,8 @@ vertical-align: text-top; align-items: center; margin-left: -(a.$gutter-xs); + position: relative; + z-index: 2; } .flair { diff --git a/assets/chat/js/chat.js b/assets/chat/js/chat.js index fe71483b..0b5da475 100644 --- a/assets/chat/js/chat.js +++ b/assets/chat/js/chat.js @@ -712,6 +712,9 @@ class Chat { $(document.body).toggleClass(`pref-fontscale`, fontscale !== 'auto'); $(document.body).attr('data-fontscale', fontscale); + // Link Hitbox Scaling + $(document.body).css('--link-size', this.settings.get('linksize')); + for (const window of this.windows.values()) { window.updateMessages(this); } diff --git a/assets/chat/js/const.js b/assets/chat/js/const.js index 7b518a4e..6787d3e4 100644 --- a/assets/chat/js/const.js +++ b/assets/chat/js/const.js @@ -139,6 +139,7 @@ const settingsdefault = new Map( fontscale: 'auto', censorbadwords: false, disableanimations: false, + linksize: 1, }), ); diff --git a/assets/chat/js/menus/ChatSettingsMenu.js b/assets/chat/js/menus/ChatSettingsMenu.js index d9052f92..c15a6ecd 100644 --- a/assets/chat/js/menus/ChatSettingsMenu.js +++ b/assets/chat/js/menus/ChatSettingsMenu.js @@ -10,7 +10,7 @@ export default class ChatSettingsMenu extends ChatMenu { this.notificationEl = this.ui.find( '#chat-settings-notification-permissions', ); - this.ui.on('change', 'input[type="checkbox"],select', (e) => + this.ui.on('change', 'input[type="checkbox"],select,input[type="number"]', (e) => this.onSettingsChange(e), ); this.ui.on('keypress blur', 'textarea[name="customhighlight"]', (e) => @@ -117,6 +117,7 @@ export default class ChatSettingsMenu extends ChatMenu { } if ( e.getAttribute('type') === 'text' || + e.getAttribute('type') === 'number' || e.nodeName.toLocaleLowerCase() === 'select' ) { return $(e).val(); @@ -132,6 +133,7 @@ export default class ChatSettingsMenu extends ChatMenu { ); } else if ( e.getAttribute('type') === 'text' || + e.getAttribute('type') === 'number' || e.nodeName.toLocaleLowerCase() === 'select' ) { $(e).val(val); diff --git a/assets/views/embed.html b/assets/views/embed.html index 2fe68d05..5f20b418 100644 --- a/assets/views/embed.html +++ b/assets/views/embed.html @@ -236,6 +236,12 @@

Autocomplete

Auto-complete helper + +

Links

+
+ + +
From 0f583dc0e993d2ea6972cb8d90fb21972df1d513 Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Tue, 12 Nov 2024 15:27:48 +0000 Subject: [PATCH 02/14] Added user info menu button to view rustlesearch.dev logs --- assets/chat/css/menus/_user-info.scss | 1 + assets/chat/img/icon-rustle.svg | 1 + assets/chat/js/menus/ChatUserInfoMenu.js | 3 +++ assets/views/embed.html | 3 +++ 4 files changed, 8 insertions(+) create mode 100644 assets/chat/img/icon-rustle.svg diff --git a/assets/chat/css/menus/_user-info.scss b/assets/chat/css/menus/_user-info.scss index b1129101..c3ee98e1 100644 --- a/assets/chat/css/menus/_user-info.scss +++ b/assets/chat/css/menus/_user-info.scss @@ -7,6 +7,7 @@ $toolbar-icons-map: ( 'whisper': 'whispers', 'ignore': 'ignore', 'unignore': 'unignore', + 'rustle': 'rustle' ); #chat-user-info { diff --git a/assets/chat/img/icon-rustle.svg b/assets/chat/img/icon-rustle.svg new file mode 100644 index 00000000..ef6b1bd4 --- /dev/null +++ b/assets/chat/img/icon-rustle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/chat/js/menus/ChatUserInfoMenu.js b/assets/chat/js/menus/ChatUserInfoMenu.js index 088f16d1..d64dd671 100644 --- a/assets/chat/js/menus/ChatUserInfoMenu.js +++ b/assets/chat/js/menus/ChatUserInfoMenu.js @@ -34,6 +34,7 @@ export default class ChatUserInfoMenu extends ChatMenuFloating { this.whisperUserBtn = this.ui.find('#whisper-user-btn'); this.ignoreUserBtn = this.ui.find('#ignore-user-btn'); this.unignoreUserBtn = this.ui.find('#unignore-user-btn'); + this.rustleUserBtn = this.ui.find('#rustle-user-btn'); this.actionInputs = this.ui.find('#action-durations'); this.muteDurations = ['1m', '10m', '1h', '1d']; @@ -155,6 +156,8 @@ export default class ChatUserInfoMenu extends ChatMenuFloating { this.ignoreUserBtn.toggleClass('hidden', false); this.unignoreUserBtn.toggleClass('hidden', true); } + + this.rustleUserBtn.attr("href", `https://rustlesearch.dev/?username=${encodeURIComponent(this.clickedNick)}`); } setInputVisibility(button) { diff --git a/assets/views/embed.html b/assets/views/embed.html index 5f20b418..0a0731f0 100644 --- a/assets/views/embed.html +++ b/assets/views/embed.html @@ -305,6 +305,9 @@
Selected messages:
+ + + From 78283082e88c7eb9830588b0b50ab260e732330e Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Tue, 12 Nov 2024 16:15:28 +0000 Subject: [PATCH 03/14] Swapped all icons for Lucide icons and added tippy tooltips. --- assets/chat/css/chat/_toolbar.scss | 1 + assets/chat/css/menus/_user-info.scss | 3 +++ assets/chat/css/style.scss | 6 +++--- assets/chat/img/icon-ban.svg | 2 +- assets/chat/img/icon-close.svg | 5 +---- assets/chat/img/icon-emotes.svg | 5 +---- assets/chat/img/icon-favorite-fill.svg | 5 +---- assets/chat/img/icon-favorite.svg | 5 +---- assets/chat/img/icon-ignore.svg | 2 +- assets/chat/img/icon-lock.svg | 3 +-- assets/chat/img/icon-logs.svg | 2 +- assets/chat/img/icon-mute.svg | 2 +- assets/chat/img/icon-open-in-new.svg | 5 +---- assets/chat/img/icon-pin.svg | 5 +---- assets/chat/img/icon-settings.svg | 3 +-- assets/chat/img/icon-share.svg | 3 +-- assets/chat/img/icon-unignore.svg | 2 +- assets/chat/img/icon-unpin.svg | 6 +----- assets/chat/img/icon-users.svg | 3 +-- assets/chat/img/icon-watching.svg | 2 +- assets/chat/img/icon-whisper.svg | 3 +-- assets/chat/img/icon-whispers.svg | 3 +-- assets/chat/js/chat.js | 4 ++-- assets/chat/js/menus/ChatUserMenu.js | 2 +- assets/views/embed.html | 22 +++++++++++----------- 25 files changed, 40 insertions(+), 64 deletions(-) diff --git a/assets/chat/css/chat/_toolbar.scss b/assets/chat/css/chat/_toolbar.scss index b325eb5c..7fe14f99 100644 --- a/assets/chat/css/chat/_toolbar.scss +++ b/assets/chat/css/chat/_toolbar.scss @@ -12,6 +12,7 @@ $toolbar-icons-map: ( display: flex; position: relative; user-select: none; + margin: 0 -0.25em; } .chat-tools-group { diff --git a/assets/chat/css/menus/_user-info.scss b/assets/chat/css/menus/_user-info.scss index c3ee98e1..803ac948 100644 --- a/assets/chat/css/menus/_user-info.scss +++ b/assets/chat/css/menus/_user-info.scss @@ -58,6 +58,9 @@ $toolbar-icons-map: ( } } + width: 2.75em; + height: 2.75em; + @each $id, $icon in $toolbar-icons-map { &##{$id}-user-btn .btn-icon { @include a.icon-background('../img/icon-#{$icon}.svg'); diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 64d9fe72..b9e5912a 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -103,12 +103,12 @@ hr { .tippy-box[data-theme~='dgg'] { text-align: center; - background-color: white; - color: #000; + background-color: a.$color-surface-dark4; + color: a.$color-chat-text1; } .tippy-box[data-theme~='dgg'] > .tippy-svg-arrow { - fill: white; + fill: a.$color-surface-dark4; } /* Small screen, non-retina */ diff --git a/assets/chat/img/icon-ban.svg b/assets/chat/img/icon-ban.svg index 019f12ef..60d6c784 100644 --- a/assets/chat/img/icon-ban.svg +++ b/assets/chat/img/icon-ban.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-close.svg b/assets/chat/img/icon-close.svg index 765ce09c..3d214cb1 100644 --- a/assets/chat/img/icon-close.svg +++ b/assets/chat/img/icon-close.svg @@ -1,4 +1 @@ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-emotes.svg b/assets/chat/img/icon-emotes.svg index a3a27d43..931fd6d8 100644 --- a/assets/chat/img/icon-emotes.svg +++ b/assets/chat/img/icon-emotes.svg @@ -1,4 +1 @@ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-favorite-fill.svg b/assets/chat/img/icon-favorite-fill.svg index 94cb9592..6d32cb6f 100644 --- a/assets/chat/img/icon-favorite-fill.svg +++ b/assets/chat/img/icon-favorite-fill.svg @@ -1,4 +1 @@ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-favorite.svg b/assets/chat/img/icon-favorite.svg index f4176b52..084e3750 100644 --- a/assets/chat/img/icon-favorite.svg +++ b/assets/chat/img/icon-favorite.svg @@ -1,4 +1 @@ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-ignore.svg b/assets/chat/img/icon-ignore.svg index 9c378868..af80724e 100644 --- a/assets/chat/img/icon-ignore.svg +++ b/assets/chat/img/icon-ignore.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-lock.svg b/assets/chat/img/icon-lock.svg index b7ef390c..56ca56f9 100644 --- a/assets/chat/img/icon-lock.svg +++ b/assets/chat/img/icon-lock.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-logs.svg b/assets/chat/img/icon-logs.svg index 2af06e34..9b23aff4 100644 --- a/assets/chat/img/icon-logs.svg +++ b/assets/chat/img/icon-logs.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-mute.svg b/assets/chat/img/icon-mute.svg index 45c91387..8d25cf43 100644 --- a/assets/chat/img/icon-mute.svg +++ b/assets/chat/img/icon-mute.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-open-in-new.svg b/assets/chat/img/icon-open-in-new.svg index 13f0cd4c..66b5c517 100644 --- a/assets/chat/img/icon-open-in-new.svg +++ b/assets/chat/img/icon-open-in-new.svg @@ -1,4 +1 @@ - - - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-pin.svg b/assets/chat/img/icon-pin.svg index e96113ff..fc910344 100644 --- a/assets/chat/img/icon-pin.svg +++ b/assets/chat/img/icon-pin.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/assets/chat/img/icon-settings.svg b/assets/chat/img/icon-settings.svg index aa870ff9..5f45db06 100644 --- a/assets/chat/img/icon-settings.svg +++ b/assets/chat/img/icon-settings.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-share.svg b/assets/chat/img/icon-share.svg index af15296d..3d9a7597 100644 --- a/assets/chat/img/icon-share.svg +++ b/assets/chat/img/icon-share.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-unignore.svg b/assets/chat/img/icon-unignore.svg index 35acc10f..d4741791 100644 --- a/assets/chat/img/icon-unignore.svg +++ b/assets/chat/img/icon-unignore.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-unpin.svg b/assets/chat/img/icon-unpin.svg index a9e4f843..d59ff8f7 100644 --- a/assets/chat/img/icon-unpin.svg +++ b/assets/chat/img/icon-unpin.svg @@ -1,5 +1 @@ - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-users.svg b/assets/chat/img/icon-users.svg index 81db5a65..b94f2296 100644 --- a/assets/chat/img/icon-users.svg +++ b/assets/chat/img/icon-users.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-watching.svg b/assets/chat/img/icon-watching.svg index 35acc10f..d4741791 100644 --- a/assets/chat/img/icon-watching.svg +++ b/assets/chat/img/icon-watching.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-whisper.svg b/assets/chat/img/icon-whisper.svg index 9c9b2237..177a0c6b 100644 --- a/assets/chat/img/icon-whisper.svg +++ b/assets/chat/img/icon-whisper.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/img/icon-whispers.svg b/assets/chat/img/icon-whispers.svg index 72351a73..82ff56db 100644 --- a/assets/chat/img/icon-whispers.svg +++ b/assets/chat/img/icon-whispers.svg @@ -1,2 +1 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/assets/chat/js/chat.js b/assets/chat/js/chat.js index 0b5da475..f5aeac2e 100644 --- a/assets/chat/js/chat.js +++ b/assets/chat/js/chat.js @@ -299,9 +299,9 @@ class Chat { })(); // Tooltips + tippy.setDefaultProps({ delay: [500, 0] }); tippy('[data-tippy-content]', { arrow: roundArrow, - delay: 0, duration: 0, maxWidth: 250, hideOnClick: false, @@ -713,7 +713,7 @@ class Chat { $(document.body).attr('data-fontscale', fontscale); // Link Hitbox Scaling - $(document.body).css('--link-size', this.settings.get('linksize')); + $(document.body).css('--link-size', this.settings.get('linksize') - 1); for (const window of this.windows.values()) { window.updateMessages(this); diff --git a/assets/chat/js/menus/ChatUserMenu.js b/assets/chat/js/menus/ChatUserMenu.js index 788c6bef..6cd3a484 100644 --- a/assets/chat/js/menus/ChatUserMenu.js +++ b/assets/chat/js/menus/ChatUserMenu.js @@ -244,7 +244,7 @@ export default class ChatUserMenu extends ChatMenu { const features = user.features.length === 0 ? 'nofeature' : user.features.join(' '); const usr = $( - `
${label}
`, + `
${label}
`, ); const section = this.sections.get(this.highestSection(user)); diff --git a/assets/views/embed.html b/assets/views/embed.html index 0a0731f0..9a2716b1 100644 --- a/assets/views/embed.html +++ b/assets/views/embed.html @@ -49,10 +49,10 @@
- + - +
@@ -64,10 +64,10 @@ > - + - +
@@ -287,25 +287,25 @@
Selected messages:
- + - + - + - + - + - + - +
From 0b3a76c664835777f104eeb9853cada7466774b7 Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Thu, 14 Nov 2024 09:34:06 +0000 Subject: [PATCH 04/14] Link now uses ::before element for hitbox. Fixes nsfw/nsfl underline positioning --- assets/chat/css/messages/_base.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/assets/chat/css/messages/_base.scss b/assets/chat/css/messages/_base.scss index 3616acf3..d42f32d3 100644 --- a/assets/chat/css/messages/_base.scss +++ b/assets/chat/css/messages/_base.scss @@ -54,12 +54,13 @@ $link-color-map: ( // Links are over emotes and text but under usernames and the embed button z-index: 1; - // If this calculation produces fractional pixel values the link can shift by up to half a pixel. - // This could be fixed by using pixels instead of em, but we then lose scaling of the hitboxes by - // font size - padding: calc(var(--link-size) * 1em); - margin: calc(var(--link-size) * -1em); - + &::before { + content: ""; + position: absolute; + width: calc(100% + var(--link-size) * 1em); + height: calc(100% + var(--link-size) * 1em); + margin: calc(var(--link-size) * -0.5em + 2px); + } &:visited { color: a.$color-link-visited; From 55d5e6806423d44785c3d02e7a3073e73247b26e Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Thu, 14 Nov 2024 20:19:11 +0000 Subject: [PATCH 05/14] Fixed issue with incorrect link bounds on wrapped lines --- assets/chat/css/messages/_base.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/chat/css/messages/_base.scss b/assets/chat/css/messages/_base.scss index d42f32d3..57018673 100644 --- a/assets/chat/css/messages/_base.scss +++ b/assets/chat/css/messages/_base.scss @@ -48,9 +48,10 @@ $link-color-map: ( .externallink { border-style: solid; border-color: transparent; - border-width: 1px 0 1px 0; color: a.$color-link; position: relative; + display: inline-block; + border-width: 0px; // Links are over emotes and text but under usernames and the embed button z-index: 1; From ef9a31037f86ece6bd27b4eb1e4774f5771ca127 Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Thu, 14 Nov 2024 22:01:16 +0000 Subject: [PATCH 06/14] Fixed clipping issue on emote favourite icon --- assets/chat/css/menus/_emote-tooltip.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/chat/css/menus/_emote-tooltip.scss b/assets/chat/css/menus/_emote-tooltip.scss index 6f3f605b..c922bb69 100644 --- a/assets/chat/css/menus/_emote-tooltip.scss +++ b/assets/chat/css/menus/_emote-tooltip.scss @@ -45,12 +45,14 @@ transition: background-color 500ms; height: 20px; aspect-ratio: 1; - mask: url('../img/icon-favorite.svg'); + mask-size: 20px; + mask-image: url('../img/icon-favorite.svg'); background-color: a.$text-color2; } &.favorited .btn-icon { - mask: url('../img/icon-favorite-fill.svg'); + mask-size: 20px; + mask-image: url('../img/icon-favorite-fill.svg'); } &:hover .btn-icon { From 74f2979bf2c8c398d18adedd23930a0f57ad5feb Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Thu, 14 Nov 2024 22:02:32 +0000 Subject: [PATCH 07/14] Removed unused icon --- assets/chat/img/icon-open-in-new.svg | 1 - 1 file changed, 1 deletion(-) delete mode 100644 assets/chat/img/icon-open-in-new.svg diff --git a/assets/chat/img/icon-open-in-new.svg b/assets/chat/img/icon-open-in-new.svg deleted file mode 100644 index 66b5c517..00000000 --- a/assets/chat/img/icon-open-in-new.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From bbc90761b590b907a50f8219ad278ffb92e9ef5b Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Thu, 14 Nov 2024 22:23:36 +0000 Subject: [PATCH 08/14] User message panel now uses tippy --- assets/chat/js/menus/ChatUserMenu.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/assets/chat/js/menus/ChatUserMenu.js b/assets/chat/js/menus/ChatUserMenu.js index 6cd3a484..f1ca092c 100644 --- a/assets/chat/js/menus/ChatUserMenu.js +++ b/assets/chat/js/menus/ChatUserMenu.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import { debounce } from 'throttle-debounce'; import ChatMenu from './ChatMenu'; import ChatUser from '../user'; +import tippy, { roundArrow } from 'tippy.js'; // sections in order. const UserMenuSections = [ @@ -244,8 +245,18 @@ export default class ChatUserMenu extends ChatMenu { const features = user.features.length === 0 ? 'nofeature' : user.features.join(' '); const usr = $( - `
${label}
`, + `
${label}
`, ); + usr.find('[data-tippy-content]').each(function () { + tippy(this, { + content: this.getAttribute('data-tippy-content'), + arrow: roundArrow, + duration: 0, + maxWidth: 250, + hideOnClick: false, + theme: 'dgg', + }) + }); const section = this.sections.get(this.highestSection(user)); if (sort && section.users.children.length > 0) { From 4b40997ef6a9a38a0e882f344ce5fd387f53853e Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Thu, 14 Nov 2024 22:38:59 +0000 Subject: [PATCH 09/14] Updated Embed Video icon to Lucide --- assets/chat/js/formatters/UrlFormatter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/chat/js/formatters/UrlFormatter.js b/assets/chat/js/formatters/UrlFormatter.js index ebc694ac..e103c9f2 100644 --- a/assets/chat/js/formatters/UrlFormatter.js +++ b/assets/chat/js/formatters/UrlFormatter.js @@ -46,7 +46,7 @@ export default class UrlFormatter { const embedTarget = chat.isBigscreenEmbed() ? '_top' : '_blank'; const embedUrl = `${chat.config.dggOrigin}${chat.bigscreenPath}${embedHashLink}`; return embedHashLink - ? `${urlText}` + ? `${urlText}` : `${urlText}${extra}`; } return url; From ec4840c635b450453520e562b46e8a2393f00843 Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Thu, 14 Nov 2024 22:40:51 +0000 Subject: [PATCH 10/14] Revert "Fixed issue with incorrect link bounds on wrapped lines" This reverts commit 55d5e6806423d44785c3d02e7a3073e73247b26e. --- assets/chat/css/messages/_base.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/chat/css/messages/_base.scss b/assets/chat/css/messages/_base.scss index 57018673..d42f32d3 100644 --- a/assets/chat/css/messages/_base.scss +++ b/assets/chat/css/messages/_base.scss @@ -48,10 +48,9 @@ $link-color-map: ( .externallink { border-style: solid; border-color: transparent; + border-width: 1px 0 1px 0; color: a.$color-link; position: relative; - display: inline-block; - border-width: 0px; // Links are over emotes and text but under usernames and the embed button z-index: 1; From 0632356a1ba38f230253f4a3416ee2b3597c1cb1 Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Thu, 14 Nov 2024 22:41:03 +0000 Subject: [PATCH 11/14] Revert "Link now uses ::before element for hitbox. Fixes nsfw/nsfl underline positioning" This reverts commit 0b3a76c664835777f104eeb9853cada7466774b7. --- assets/chat/css/messages/_base.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/assets/chat/css/messages/_base.scss b/assets/chat/css/messages/_base.scss index d42f32d3..3616acf3 100644 --- a/assets/chat/css/messages/_base.scss +++ b/assets/chat/css/messages/_base.scss @@ -54,13 +54,12 @@ $link-color-map: ( // Links are over emotes and text but under usernames and the embed button z-index: 1; - &::before { - content: ""; - position: absolute; - width: calc(100% + var(--link-size) * 1em); - height: calc(100% + var(--link-size) * 1em); - margin: calc(var(--link-size) * -0.5em + 2px); - } + // If this calculation produces fractional pixel values the link can shift by up to half a pixel. + // This could be fixed by using pixels instead of em, but we then lose scaling of the hitboxes by + // font size + padding: calc(var(--link-size) * 1em); + margin: calc(var(--link-size) * -1em); + &:visited { color: a.$color-link-visited; From b49f0c94aa9a9cf23e68f47dbe2de459670108a7 Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Thu, 14 Nov 2024 22:41:38 +0000 Subject: [PATCH 12/14] Revert "Added Link Hitbox Scaling" This reverts commit 388453a05998282023266361479cfd3ed1e104ba. --- assets/chat/css/messages/_base.scss | 16 ---------------- assets/chat/css/messages/user/_index.scss | 2 -- assets/chat/js/chat.js | 3 --- assets/chat/js/const.js | 1 - assets/chat/js/menus/ChatSettingsMenu.js | 4 +--- assets/views/embed.html | 6 ------ 6 files changed, 1 insertion(+), 31 deletions(-) diff --git a/assets/chat/css/messages/_base.scss b/assets/chat/css/messages/_base.scss index 3616acf3..d8349e4f 100644 --- a/assets/chat/css/messages/_base.scss +++ b/assets/chat/css/messages/_base.scss @@ -23,8 +23,6 @@ $link-color-map: ( cursor: pointer; margin-left: a.$gutter-sm; color: a.$color-label-user; - position: relative; - z-index: 2; } .chat-user { @@ -52,15 +50,6 @@ $link-color-map: ( color: a.$color-link; position: relative; - // Links are over emotes and text but under usernames and the embed button - z-index: 1; - // If this calculation produces fractional pixel values the link can shift by up to half a pixel. - // This could be fixed by using pixels instead of em, but we then lose scaling of the hitboxes by - // font size - padding: calc(var(--link-size) * 1em); - margin: calc(var(--link-size) * -1em); - - &:visited { color: a.$color-link-visited; } @@ -70,10 +59,6 @@ $link-color-map: ( color: a.$color-link-hover; } } - &:last-child .externallink { - padding-bottom: 0px; - margin-bottom: 0px; - } @each $type, $color in $link-color-map { .#{$type}-link { @@ -93,7 +78,6 @@ $link-color-map: ( margin-left: a.$gutter-sm; margin-right: a.$gutter-xs; opacity: 0.5; - z-index: 2; &:hover { opacity: 1; diff --git a/assets/chat/css/messages/user/_index.scss b/assets/chat/css/messages/user/_index.scss index fb276fd4..83ed7413 100644 --- a/assets/chat/css/messages/user/_index.scss +++ b/assets/chat/css/messages/user/_index.scss @@ -9,8 +9,6 @@ vertical-align: text-top; align-items: center; margin-left: -(a.$gutter-xs); - position: relative; - z-index: 2; } .flair { diff --git a/assets/chat/js/chat.js b/assets/chat/js/chat.js index f5aeac2e..00e6ee87 100644 --- a/assets/chat/js/chat.js +++ b/assets/chat/js/chat.js @@ -712,9 +712,6 @@ class Chat { $(document.body).toggleClass(`pref-fontscale`, fontscale !== 'auto'); $(document.body).attr('data-fontscale', fontscale); - // Link Hitbox Scaling - $(document.body).css('--link-size', this.settings.get('linksize') - 1); - for (const window of this.windows.values()) { window.updateMessages(this); } diff --git a/assets/chat/js/const.js b/assets/chat/js/const.js index 6787d3e4..7b518a4e 100644 --- a/assets/chat/js/const.js +++ b/assets/chat/js/const.js @@ -139,7 +139,6 @@ const settingsdefault = new Map( fontscale: 'auto', censorbadwords: false, disableanimations: false, - linksize: 1, }), ); diff --git a/assets/chat/js/menus/ChatSettingsMenu.js b/assets/chat/js/menus/ChatSettingsMenu.js index c15a6ecd..d9052f92 100644 --- a/assets/chat/js/menus/ChatSettingsMenu.js +++ b/assets/chat/js/menus/ChatSettingsMenu.js @@ -10,7 +10,7 @@ export default class ChatSettingsMenu extends ChatMenu { this.notificationEl = this.ui.find( '#chat-settings-notification-permissions', ); - this.ui.on('change', 'input[type="checkbox"],select,input[type="number"]', (e) => + this.ui.on('change', 'input[type="checkbox"],select', (e) => this.onSettingsChange(e), ); this.ui.on('keypress blur', 'textarea[name="customhighlight"]', (e) => @@ -117,7 +117,6 @@ export default class ChatSettingsMenu extends ChatMenu { } if ( e.getAttribute('type') === 'text' || - e.getAttribute('type') === 'number' || e.nodeName.toLocaleLowerCase() === 'select' ) { return $(e).val(); @@ -133,7 +132,6 @@ export default class ChatSettingsMenu extends ChatMenu { ); } else if ( e.getAttribute('type') === 'text' || - e.getAttribute('type') === 'number' || e.nodeName.toLocaleLowerCase() === 'select' ) { $(e).val(val); diff --git a/assets/views/embed.html b/assets/views/embed.html index 9a2716b1..71f78c22 100644 --- a/assets/views/embed.html +++ b/assets/views/embed.html @@ -236,12 +236,6 @@

Autocomplete

Auto-complete helper
- -

Links

-
- - -
From 228ca0702f59d314d95178a82b848990b5202af0 Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Fri, 15 Nov 2024 02:45:14 +0000 Subject: [PATCH 13/14] Prettier formatting --- assets/chat/js/menus/ChatUserInfoMenu.js | 5 ++++- assets/chat/js/menus/ChatUserMenu.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/assets/chat/js/menus/ChatUserInfoMenu.js b/assets/chat/js/menus/ChatUserInfoMenu.js index d64dd671..d97f366c 100644 --- a/assets/chat/js/menus/ChatUserInfoMenu.js +++ b/assets/chat/js/menus/ChatUserInfoMenu.js @@ -157,7 +157,10 @@ export default class ChatUserInfoMenu extends ChatMenuFloating { this.unignoreUserBtn.toggleClass('hidden', true); } - this.rustleUserBtn.attr("href", `https://rustlesearch.dev/?username=${encodeURIComponent(this.clickedNick)}`); + this.rustleUserBtn.attr( + 'href', + `https://rustlesearch.dev/?username=${encodeURIComponent(this.clickedNick)}`, + ); } setInputVisibility(button) { diff --git a/assets/chat/js/menus/ChatUserMenu.js b/assets/chat/js/menus/ChatUserMenu.js index f1ca092c..cdb984fc 100644 --- a/assets/chat/js/menus/ChatUserMenu.js +++ b/assets/chat/js/menus/ChatUserMenu.js @@ -255,7 +255,7 @@ export default class ChatUserMenu extends ChatMenu { maxWidth: 250, hideOnClick: false, theme: 'dgg', - }) + }); }); const section = this.sections.get(this.highestSection(user)); From a7c948d2fe560b77ec301a507cb5a54a71e55424 Mon Sep 17 00:00:00 2001 From: Alex Davies Date: Sat, 16 Nov 2024 05:54:01 +0000 Subject: [PATCH 14/14] ESLint + Prettier --- assets/chat/css/menus/_user-info.scss | 2 +- assets/chat/js/menus/ChatUserMenu.js | 4 +- assets/views/embed.html | 79 +++++++++++++++++++++++---- 3 files changed, 71 insertions(+), 14 deletions(-) diff --git a/assets/chat/css/menus/_user-info.scss b/assets/chat/css/menus/_user-info.scss index 803ac948..d91a0c80 100644 --- a/assets/chat/css/menus/_user-info.scss +++ b/assets/chat/css/menus/_user-info.scss @@ -7,7 +7,7 @@ $toolbar-icons-map: ( 'whisper': 'whispers', 'ignore': 'ignore', 'unignore': 'unignore', - 'rustle': 'rustle' + 'rustle': 'rustle', ); #chat-user-info { diff --git a/assets/chat/js/menus/ChatUserMenu.js b/assets/chat/js/menus/ChatUserMenu.js index cdb984fc..cfc54ceb 100644 --- a/assets/chat/js/menus/ChatUserMenu.js +++ b/assets/chat/js/menus/ChatUserMenu.js @@ -1,8 +1,8 @@ import $ from 'jquery'; import { debounce } from 'throttle-debounce'; +import tippy, { roundArrow } from 'tippy.js'; import ChatMenu from './ChatMenu'; import ChatUser from '../user'; -import tippy, { roundArrow } from 'tippy.js'; // sections in order. const UserMenuSections = [ @@ -247,7 +247,7 @@ export default class ChatUserMenu extends ChatMenu { const usr = $( `
${label}
`, ); - usr.find('[data-tippy-content]').each(function () { + usr.find('[data-tippy-content]').each(function registerTippy() { tippy(this, { content: this.getAttribute('data-tippy-content'), arrow: roundArrow, diff --git a/assets/views/embed.html b/assets/views/embed.html index 71f78c22..44e03984 100644 --- a/assets/views/embed.html +++ b/assets/views/embed.html @@ -49,10 +49,20 @@
- + - +
@@ -64,10 +74,20 @@ > - + - +
@@ -281,25 +301,62 @@
Selected messages:
- + - + - + - + - + - + - +