External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(post): enable highlighting an already highlighted post by using a different color

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-12-21 16:32:14 +01:00
parent 53638b023d
commit 5a498cbcb6
4 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/reply-quote-preview/reply-quote-preview.tsx
+14 -2
View File
@@ -33,10 +33,20 @@ const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
targetElements.forEach((element) => {
const htmlElement = element as HTMLElement;
if (isInViewport(htmlElement)) {
htmlElement.classList.add('highlight');
const hasHighlight = Array.from(htmlElement.classList).some((className) => className.includes('highlight') && !className.includes('double-highlight'));
if (hasHighlight) {
console.log('contains highlight');
htmlElement.classList.remove('highlight');
htmlElement.classList.add('double-highlight');
} else {
console.log("doesn't contain highlight", htmlElement.classList);
htmlElement.classList.remove('double-highlight');
htmlElement.classList.add('highlight');
}
anyInView = true;
} else {
htmlElement.classList.remove('highlight');
// If not in view, remove both classes
htmlElement.classList.remove('highlight', 'double-highlight');
}
});
@@ -112,6 +122,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
targetElements.forEach((element) => {
element.classList.remove('highlight');
element.classList.remove('double-highlight');
});
}
setHoveredCid(null);
@@ -215,6 +226,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
targetElements.forEach((element) => {
element.classList.remove('highlight');
element.classList.remove('double-highlight');
});
}
setHoveredCid(null);
src/index.css
+12 -1
View File
@@ -71,6 +71,10 @@ hr {
.highlight {
background: var(--reply-highlight-background-color) !important;
}
.double-highlight {
background: var(--reply-double-highlight-background-color) !important;
}
}
@media (min-width: 640px) {
@@ -92,4 +96,11 @@ hr {
border-left: var(--reply-highlight-border-left, revert) !important;
border-top: var(--reply-highlight-border-top, revert) !important;
}
}
.double-highlight {
background: var(--reply-double-highlight-background-color) !important;
border: var(--reply-double-highlight-border) !important;
border-left: var(--reply-double-highlight-border-left, revert) !important;
border-top: var(--reply-double-highlight-border-top, revert) !important;
}
}
src/themes.css
+14
View File
@@ -175,6 +175,8 @@
/* reply highlight */
--reply-highlight-background-color: #f0c0b0;
--reply-highlight-border: 1px solid #d99f91;
--reply-double-highlight-background-color: #e8a690;
--reply-double-highlight-border: 1px solid #d99f91;
/* reply modal */
--reply-modal-field-input-border: 1px solid #aaa;
@@ -382,6 +384,8 @@
/* reply highlight */
--reply-highlight-background-color: #d6bad0;
--reply-highlight-border: 1px solid #ba9dbf;
--reply-double-highlight-background-color: #bfa6ba;
--reply-double-highlight-border: 1px solid #ba9dbf;
/* reply modal */
--reply-modal-field-input-border: 1px solid #aaa;
@@ -564,6 +568,7 @@
/* reply highlight */
--reply-highlight-background-color: #f0c0b0;
--reply-double-highlight-background-color: #e8a690;
/* settings modal */
--settings-modal-background-color: #f0e0d6;
@@ -748,6 +753,7 @@
/* reply highlight */
--reply-highlight-background-color: #d6bad0;
--reply-double-highlight-background-color: #bfa6ba;
/* settings modal */
--settings-modal-background-color: #d6daf0;
@@ -962,6 +968,10 @@
--reply-highlight-border: 1px solid #111;
--reply-highlight-border-left: 1px solid #111;
--reply-highlight-border-top: 1px solid #111;
--reply-double-highlight-background-color: #111;
--reply-double-highlight-border: 1px solid #111;
--reply-double-highlight-border-left: 1px solid #111;
--reply-double-highlight-border-top: 1px solid #111;
/* settings modal */
--settings-modal-font-size: 14px;
@@ -1154,6 +1164,10 @@
--reply-highlight-border: 1px solid #ccc;
--reply-highlight-border-left: 1px solid #ccc;
--reply-highlight-border-top: 1px solid #ccc;
--reply-double-highlight-background-color: #bbb;
--reply-double-highlight-border: 1px solid #ccc;
--reply-double-highlight-border-left: 1px solid #ccc;
--reply-double-highlight-border-top: 1px solid #ccc;
/* reply modal */
--reply-modal-field-input-border: 1px solid #aaa;
src/views/post/post.module.css
+3
View File
@@ -490,6 +490,9 @@
.highlight {
background: var(--reply-highlight-background-color) !important;
border: var(--reply-highlight-border) !important;
border-left: var(--reply-highlight-border-left, revert) !important;
border-top: var(--reply-highlight-border-top, revert) !important;
}
.replyQuotePreview {