TheRON/core
1
0
Fork 0
mirror of https://framagit.org/hubzilla/core.git synced 2026-06-21 00:52:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

implement indenting of already expanded but flattened items and add dblclick info badge

Browse Source
This commit is contained in:
Mario
2025-06-11 19:35:17 +00:00
parent 76296e72be
commit 391c8d7cba
4 changed files with 51 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
include/js_strings.php
View File

@@ -36,6 +36,7 @@ function js_strings() {
'$pinned' => t('Pinned'),
'$pin_item' => t('Pin to the top'),
'$unpin_item' => t('Unpin from the top'),
'$dblclick_to_exit_zoom' => t('Double click to exit zoom'),
// translatable prefix and suffix strings for jquery.timeago -
// using the defaults set below if left untranslated, empty strings if

16
view/css/conversation.css
View File

@@ -287,6 +287,22 @@ a.wall-item-name-link {
bottom: 0;
}
.wall-item-expanded:before {
content: var(--hz-wall-item-expanded-before-content, "");;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%); /* Example styles: */
background: var(--bs-info-bg-subtle);
color: var(--bs-info-text-emphasis);
border-radius: var(--bs-border-radius-pill);
padding: 0.35em 0.65em;
font-size: 0.73em;
font-weight: 700;
z-index: 3;
text-transform: uppercase;
}
/* comment_item */

38
view/js/main.js
View File

@@ -118,6 +118,7 @@ $(document).ready(function() {
// Set visual styles using UUID
subThreadWrapper.style.setProperty('--hz-item-indent', stringToHslColor(uuid));
threadWrapper.style.setProperty('--hz-item-highlight', stringToHslColor(uuid));
threadWrapper.style.setProperty('--hz-wall-item-expanded-before-content', '"' + aStr.dblclick_to_exit_zoom + '"');
// Clear previous highlights
parentSubThreadWrapper.querySelectorAll('.thread-wrapper.item-highlight').forEach(el => el.classList.remove('item-highlight'));
@@ -128,7 +129,7 @@ $(document).ready(function() {
} else {
// Handle indentation and zooming
let ancestor = subThreadWrapper.parentElement;
ancestorIds.push(ancestor.id.slice(15));
ancestorIds.push(ancestor.id.slice(15)); // thread-wrapper-1234
while (ancestor) {
if (ancestor.classList.contains('item-indent') && ancestor.classList.contains('wall-item-sub-thread-wrapper')) {
@@ -157,22 +158,47 @@ $(document).ready(function() {
// Exit zoom on double-click
newFirstWrapper.addEventListener('dblclick', function() {
parentWrapper.querySelectorAll('.wall-item-comment.indented').forEach(el => el.classList.remove('indented'));
parentWrapper.querySelectorAll('.wall-item-comment.collapsed').forEach(el => el.classList.remove('collapsed'));
parentWrapper.classList.remove('wall-item-backdrop');
parentWrapper.querySelectorAll('.wall-item-sub-thread-wrapper.item-indent').forEach(el => el.classList.remove('item-indent'));
parentWrapper.querySelectorAll('.wall-item-sub-thread-wrapper.d-none').forEach(el => el.classList.remove('d-none'));
parentWrapper.querySelectorAll('.thread-wrapper.wall-item-expanded').forEach(el => el.classList.remove('wall-item-expanded', 'shadow'));
}, { once: true });
}
// Indent the subthread
subThreadWrapper.classList.add('item-indent', 'item-expanded');
// Toggle sub-thread visibility if indented
if (isUserClick && target.classList.contains('indented')) {
doRequest = false;
subThreadWrapper.classList.toggle('d-none');
target.classList.toggle('collapsed');
doRequest = false;
}
// Indenting of already expanded but flattened items
if (isUserClick && subThreadWrapper.classList.contains('item-expanded') && !subThreadWrapper.classList.contains('item-indent')) {
doRequest = false;
threadWrapper.querySelectorAll('.wall-item-sub-thread-wrapper.item-expanded').forEach(function (el, i) {
el.classList.add('item-indent');
el.querySelectorAll('.wall-item-comment.expanded').forEach(function (el, i) {
el.classList.add('indented');
});
if (i >= 2) {
el.querySelectorAll('.wall-item-comment.expanded').forEach(function (el, i) {
el.classList.add('collapsed');
});
}
if (i >= 3) {
el.classList.add('d-none');
}
});
}
// Indent the subthread
subThreadWrapper.classList.add('item-indent', 'item-expanded');
// Mark as indented after visibility toggle
target.classList.add('indented');
}
@@ -217,8 +243,10 @@ $(document).ready(function() {
// Exit zoom on double-click
wrapper.addEventListener('dblclick', function() {
parent.querySelectorAll('.wall-item-comment.indented').forEach(el => el.classList.remove('indented'));
parent.querySelectorAll('.wall-item-comment.collapsed').forEach(el => el.classList.remove('collapsed'));
parent.classList.remove('wall-item-backdrop');
parent.querySelectorAll('.wall-item-sub-thread-wrapper.item-indent').forEach(el => el.classList.remove('item-indent'));
parent.querySelectorAll('.wall-item-sub-thread-wrapper.d-none').forEach(el => el.classList.remove('d-none'));
parent.querySelectorAll('.thread-wrapper.wall-item-expanded').forEach(el => el.classList.remove('wall-item-expanded', 'shadow'));
}, { once: true });

1
view/tpl/js_strings.tpl
View File

@@ -36,6 +36,7 @@
'pinned' : "{{$pinned}}",
'pin_item' : "{{$pin_item}}",
'unpin_item' : "{{$unpin_item}}",
'dblclick_to_exit_zoom' : "{{$dblclick_to_exit_zoom}}",
'monthNames' : [ "{{$January}}","{{$February}}","{{$March}}","{{$April}}","{{$May}}","{{$June}}","{{$July}}","{{$August}}","{{$September}}","{{$October}}","{{$November}}","{{$December}}" ],
'monthNamesShort' : [ "{{$Jan}}","{{$Feb}}","{{$Mar}}","{{$Apr}}","{{$MayShort}}","{{$Jun}}","{{$Jul}}","{{$Aug}}","{{$Sep}}","{{$Oct}}","{{$Nov}}","{{$Dec}}" ],