DEV: add toggle to mini-buttons for mobile

This commit is contained in:
chapoi
2025-07-24 14:48:05 +02:00
parent abfec74971
commit e9625c1461
3 changed files with 27 additions and 2 deletions
@@ -162,7 +162,11 @@ export default class TocContents extends Component {
<template>
{{#unless @renderTimeline}}
<TocMiniButtons @renderTimeline={{@renderTimeline}} @postID={{@postID}} />
<TocMiniButtons
@renderTimeline={{@renderTimeline}}
@postID={{@postID}}
@expandAll={{this.args.expandAll}}
/>
{{/unless}}
<div
id="d-toc"
@@ -6,6 +6,10 @@ import DButton from "discourse/components/d-button";
export default class TocMiniButtons extends Component {
@service tocProcessor;
get expandLabel() {
return this.args.expandAll ? "Reset expand" : "Expand all";
}
@action
callCloseOverlay() {
this.tocProcessor.setOverlayVisible(false);
@@ -16,16 +20,29 @@ export default class TocMiniButtons extends Component {
this.tocProcessor.jumpToEnd(this.args.renderTimeline, this.args.postID);
}
@action
toggleExpandAll() {
this.args.expandAll = !this.args.expandAll;
}
<template>
<div class="d-toc-icons">
<DButton
@action={{this.callJumpToEnd}}
@icon="downward"
aria-label="Scroll to bottom"
class="btn btn-transparent scroll-to-bottom"
/>
<DButton
@action={{this.toggleExpandAll}}
aria-label={{this.expandLabel}}
class="d-toc__btn-expand btn-transparent btn-small"
@icon="angles-down"
/>
<DButton
@action={{this.closeOverlay}}
@icon="xmark"
aria-label="close table of contents"
class="btn btn-transparent d-toc-close"
/>
</div>