diff --git a/include/js_strings.php b/include/js_strings.php index 1772cb66b..6f2ffd351 100644 --- a/include/js_strings.php +++ b/include/js_strings.php @@ -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 diff --git a/view/css/conversation.css b/view/css/conversation.css index afae221db..caa355b43 100644 --- a/view/css/conversation.css +++ b/view/css/conversation.css @@ -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 */ diff --git a/view/js/main.js b/view/js/main.js index 19bfc00f9..a52dd72e8 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -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 }); diff --git a/view/tpl/js_strings.tpl b/view/tpl/js_strings.tpl index 2a374fdf8..0e438f450 100644 --- a/view/tpl/js_strings.tpl +++ b/view/tpl/js_strings.tpl @@ -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}}" ],