REVERT: reverting toggle to do display issues (#72)
This commit is contained in:
Kris
GitHub
parent
fc53d7efa2
commit
3179e886a3
|
|
@ -15,11 +15,4 @@
|
|||
c18.825,0,34.133-15.309,34.133-34.133S419.883,443.733,401.067,443.733z"/>
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<symbol id="timeline" viewBox="0 0 3.24 10.5">
|
||||
<path d="M0 4.26v1.98c0 .74.5 1.34 1.12 1.34h1c.62 0 1.12-.6 1.12-1.34V4.26c0-.74-.5-1.34-1.12-1.34h-1C.5 2.92 0 3.52 0 4.26Z" class="cls-1"/>
|
||||
<rect width="1.08" height="10.5" x="1.08" class="cls-1" rx=".38" ry=".38"/>
|
||||
</symbol>
|
||||
|
||||
</svg>
|
||||
</symbol></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 850 B |
|
|
@ -1,41 +1,26 @@
|
|||
$padding-basis: 0.75em;
|
||||
|
||||
.d-toc-available {
|
||||
// the toc increases the timeline container's width
|
||||
// so as long as the toc is available in a topic
|
||||
// we want this width to remain for the timeline
|
||||
// so if the toc is toggled off, the position doesn't shift
|
||||
|
||||
@media screen and (max-width: 1109px) {
|
||||
.d-toc-wrapper {
|
||||
width: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1110px) {
|
||||
.container.posts {
|
||||
grid-template-columns: auto 14.6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-toc-main {
|
||||
display: none;
|
||||
width: 225px;
|
||||
@media screen and (max-width: 1045px) {
|
||||
.desktop-view & {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
border-left: 1px solid var(--primary-low);
|
||||
box-sizing: border-box;
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.15em 0;
|
||||
color: var(--primary-700);
|
||||
color: var(--primary-medium);
|
||||
&.scroll-to-bottom {
|
||||
color: var(--tertiary);
|
||||
padding-left: $padding-basis;
|
||||
margin-top: 0.5em;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
#d-toc {
|
||||
max-height: calc(100dvh - 7em - var(--header-offset));
|
||||
max-height: calc(100vh - 4.5em - var(--header-offset));
|
||||
padding-bottom: 0.5em;
|
||||
overflow: auto;
|
||||
ul {
|
||||
list-style-type: none;
|
||||
|
|
@ -62,7 +47,7 @@ $padding-basis: 0.75em;
|
|||
}
|
||||
}
|
||||
> a:hover {
|
||||
color: var(--primary);
|
||||
color: var(--primary-high);
|
||||
}
|
||||
&.direct-active > a {
|
||||
position: relative;
|
||||
|
|
@ -139,77 +124,17 @@ a.d-toc-close {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.d-toc-timeline-toggle {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@include ellipsis;
|
||||
.d-icon-timeline {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
@media screen and (min-height: 1200px) {
|
||||
// on tall screens we don't want this button
|
||||
// to be incredibly distant
|
||||
position: absolute;
|
||||
.d-toc-timeline-visible & {
|
||||
bottom: -4em;
|
||||
}
|
||||
bottom: -6.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-navigation.with-timeline:has(.timeline-docked) {
|
||||
// hide toggle when timeline is docked
|
||||
// (firefox doesn't support :has yet)
|
||||
.d-toc-timeline-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.d-toc-timeline-toggleable {
|
||||
.d-toc-timeline-toggle {
|
||||
display: block;
|
||||
z-index: z("timeline");
|
||||
@media screen and (max-height: 480px) {
|
||||
// avoid overlapping timeline
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.with-topic-progress {
|
||||
.d-toc-main {
|
||||
display: block;
|
||||
}
|
||||
.d-toc-timeline-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-toc-timeline-visible {
|
||||
.d-toc-main,
|
||||
.d-toc-mini {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// core overrides when timeline is active
|
||||
.timeline-container {
|
||||
display: none;
|
||||
}
|
||||
.container.posts .topic-navigation.with-topic-progress {
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
// overlayed timeline (on mobile and narrow screens)
|
||||
.topic-navigation.with-topic-progress {
|
||||
.d-toc-timeline-toggle {
|
||||
display: none;
|
||||
}
|
||||
.d-toc-wrapper {
|
||||
position: fixed;
|
||||
margin-top: 0.25em;
|
||||
height: calc(100dvh - 50px - var(--header-offset));
|
||||
height: calc(100vh - 50px - var(--header-offset));
|
||||
opacity: 0.5;
|
||||
right: -100vw;
|
||||
top: var(--header-offset);
|
||||
|
|
@ -224,24 +149,17 @@ a.d-toc-close {
|
|||
padding: 0.5em;
|
||||
height: 100%;
|
||||
#d-toc {
|
||||
max-height: calc(100% - 2.25em);
|
||||
max-height: calc(100% - 3em);
|
||||
}
|
||||
}
|
||||
&.overlay {
|
||||
right: 0;
|
||||
width: 75vw;
|
||||
opacity: 1;
|
||||
.d-toc-main {
|
||||
display: block;
|
||||
#d-toc li.d-toc-item ul {
|
||||
.d-toc-main #d-toc li.d-toc-item ul {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.scroll-to-bottom {
|
||||
margin-top: 0.33em;
|
||||
}
|
||||
|
||||
a.scroll-to-bottom,
|
||||
a.d-toc-close {
|
||||
|
|
@ -250,36 +168,18 @@ a.d-toc-close {
|
|||
}
|
||||
|
||||
.d-toc-icons {
|
||||
position: absolute;
|
||||
background: var(--secondary);
|
||||
right: 1.5em;
|
||||
top: 0.25em;
|
||||
z-index: z("timeline");
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-progress-wrapper {
|
||||
align-items: stretch;
|
||||
.d-toc-mini {
|
||||
// core overrides when timeline is active
|
||||
.timeline-container,
|
||||
#topic-progress {
|
||||
display: none;
|
||||
|
||||
height: 100%;
|
||||
.btn {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.staff & {
|
||||
.topic-admin-menu-button-container {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-toc-timeline-toggleable {
|
||||
#topic-progress-wrapper .d-toc-mini {
|
||||
display: block;
|
||||
.container.posts .topic-navigation.with-topic-progress {
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -332,5 +232,11 @@ a.d-toc-close {
|
|||
.below-docs-topic-outlet.d-toc-wrapper {
|
||||
position: sticky;
|
||||
top: calc(var(--header-offset, 60px) + 1em);
|
||||
max-height: calc(100dvh - 2em - var(--header-offset, 60px));
|
||||
max-height: calc(100vh - 2em - var(--header-offset, 60px));
|
||||
.mobile-view & {
|
||||
display: none;
|
||||
}
|
||||
.d-toc-main {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<div class="d-toc-mini">
|
||||
<DButton
|
||||
class="btn-primary"
|
||||
@action={{this.showTOCOverlay}}
|
||||
@label={{theme-prefix "table_of_contents"}}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -6,9 +6,4 @@ export default class DTocMini extends Component {
|
|||
showTOCOverlay() {
|
||||
document.querySelector(".d-toc-wrapper").classList.toggle("overlay");
|
||||
}
|
||||
|
||||
@action
|
||||
resetBodyClass() {
|
||||
document.body.classList.add("d-toc-timeline-visible");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="d-toc-mini" {{did-insert this.resetBodyClass}}>
|
||||
<DButton class="btn-primary" @action={{this.showTOCOverlay}} @icon="stream" />
|
||||
</div>
|
||||
|
|
@ -6,8 +6,6 @@ import { iconHTML } from "discourse-common/lib/icon-library";
|
|||
import domUtils from "discourse-common/utils/dom-utils";
|
||||
import I18n from "I18n";
|
||||
|
||||
let TOChidden = localStorage.getItem("discourse_toc-hidden") === "true";
|
||||
|
||||
export default {
|
||||
name: "disco-toc-main",
|
||||
|
||||
|
|
@ -82,31 +80,13 @@ export default {
|
|||
);
|
||||
|
||||
api.onAppEvent("topic:current-post-changed", (args) => {
|
||||
const hasCookedTOC = document.querySelector(".d-toc-cooked");
|
||||
|
||||
// manages the timeline area width via CSS
|
||||
if (hasCookedTOC) {
|
||||
document.body.classList.add("d-toc-available");
|
||||
if (!document.querySelector(".d-toc-cooked")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// manages timeline visibility
|
||||
if (hasCookedTOC && args.post.post_number === 1) {
|
||||
if (!TOChidden) {
|
||||
handleButtonAndBody("show");
|
||||
if (args.post.post_number === 1) {
|
||||
document.body.classList.add("d-toc-timeline-visible");
|
||||
} else {
|
||||
handleButtonAndBody("hide");
|
||||
}
|
||||
|
||||
// don't show the toggle if there's only 1 post
|
||||
if (hasCookedTOC && args.post.topic.posts_count !== 1) {
|
||||
document.body.classList.add("d-toc-timeline-toggleable");
|
||||
}
|
||||
} else {
|
||||
handleButtonAndBody("hide");
|
||||
}
|
||||
|
||||
if (args.post.topic.posts_count === 1) {
|
||||
document.body.classList.remove("d-toc-timeline-toggleable");
|
||||
document.body.classList.remove("d-toc-timeline-visible");
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -123,7 +103,7 @@ export default {
|
|||
});
|
||||
|
||||
api.cleanupStream(() => {
|
||||
document.body.classList.remove("d-toc-available");
|
||||
document.body.classList.remove("d-toc-timeline-visible");
|
||||
document.removeEventListener("click", this.clickTOC, false);
|
||||
});
|
||||
});
|
||||
|
|
@ -170,65 +150,36 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
createMainDiv() {
|
||||
insertTOC(headings) {
|
||||
const dToc = document.createElement("div");
|
||||
dToc.classList.add("d-toc-main");
|
||||
dToc.innerHTML = `<div class="d-toc-icons"><a href="#" class="d-toc-close">${iconHTML(
|
||||
"times"
|
||||
)}</a></div>`;
|
||||
return dToc;
|
||||
},
|
||||
|
||||
createScrollLink() {
|
||||
const scrollLink = document.createElement("a");
|
||||
scrollLink.href = "#";
|
||||
scrollLink.className = "scroll-to-bottom";
|
||||
scrollLink.title = I18n.t(themePrefix("post_bottom_tooltip"));
|
||||
scrollLink.innerHTML = `${iconHTML("downward")} ${I18n.t(
|
||||
themePrefix("jump_bottom")
|
||||
)}`;
|
||||
return scrollLink;
|
||||
},
|
||||
|
||||
createToggleButton() {
|
||||
const toggleButton = document.createElement("button");
|
||||
toggleButton.className =
|
||||
"d-toc-timeline-toggle btn btn-default btn-icon-text";
|
||||
toggleButton.innerHTML =
|
||||
iconHTML("timeline") + I18n.t(themePrefix("topic_timeline"));
|
||||
|
||||
return toggleButton;
|
||||
},
|
||||
|
||||
insertTOC(headings) {
|
||||
const dToc = this.createMainDiv();
|
||||
const scrollLink = this.createScrollLink();
|
||||
this.toggleButton = this.createToggleButton();
|
||||
dToc.innerHTML = `<div class="d-toc-icons">
|
||||
<a href="#" class="scroll-to-bottom" title="${I18n.t(
|
||||
themePrefix("post_bottom_tooltip")
|
||||
)}">${iconHTML("downward")}</a>
|
||||
<a href="#" class="d-toc-close">${iconHTML("times")}</a></div>`;
|
||||
|
||||
const existing = document.querySelector(".d-toc-wrapper .d-toc-main");
|
||||
const wrapper = document.querySelector(".d-toc-wrapper");
|
||||
|
||||
if (existing) {
|
||||
wrapper.replaceChild(dToc, existing);
|
||||
document.querySelector(".d-toc-wrapper").replaceChild(dToc, existing);
|
||||
} else {
|
||||
wrapper.appendChild(dToc);
|
||||
wrapper.appendChild(this.toggleButton);
|
||||
document.querySelector(".d-toc-wrapper").appendChild(dToc);
|
||||
}
|
||||
|
||||
const result = this.buildTOC(Array.from(headings));
|
||||
dToc.appendChild(result);
|
||||
dToc.appendChild(scrollLink);
|
||||
document.querySelector(".d-toc-main").appendChild(result);
|
||||
document.addEventListener("click", this.clickTOC, false);
|
||||
},
|
||||
|
||||
clickTOC(e) {
|
||||
const classNames = ["d-toc-timeline-visible", "archetype-docs-topic"];
|
||||
|
||||
// toggle timeline visibility
|
||||
if (e.target.closest(".d-toc-timeline-toggle")) {
|
||||
handleButtonAndBody("toggle");
|
||||
e.preventDefault();
|
||||
return false;
|
||||
if (
|
||||
!classNames.some((className) =>
|
||||
document.body.classList.contains(className)
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// link to each heading
|
||||
|
|
@ -261,7 +212,7 @@ export default {
|
|||
top: rect.bottom + window.scrollY - headerOffset() - 10,
|
||||
behavior: "smooth",
|
||||
});
|
||||
document.querySelector(".d-toc-wrapper").classList.remove("overlay");
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
|
@ -283,14 +234,6 @@ export default {
|
|||
if (!e.target.closest(".d-toc-wrapper.overlay")) {
|
||||
document.querySelector(".d-toc-wrapper").classList.remove("overlay");
|
||||
}
|
||||
|
||||
if (
|
||||
!classNames.some((className) =>
|
||||
document.body.classList.contains(className)
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
buildTOC(headings) {
|
||||
|
|
@ -374,42 +317,3 @@ function parentsUntil(el, selector, filter) {
|
|||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function handleButtonAndBody(action) {
|
||||
const body = document.body;
|
||||
const button = document.querySelector("button.d-toc-timeline-toggle");
|
||||
|
||||
switch (action) {
|
||||
case "toggle":
|
||||
body.classList.toggle("d-toc-timeline-visible");
|
||||
TOChidden = !TOChidden;
|
||||
localStorage.setItem("discourse_toc-hidden", TOChidden.toString());
|
||||
|
||||
break;
|
||||
|
||||
case "hide":
|
||||
body.classList.remove(
|
||||
"d-toc-timeline-visible",
|
||||
"d-toc-timeline-toggleable"
|
||||
);
|
||||
break;
|
||||
|
||||
case "show":
|
||||
body.classList.add("d-toc-timeline-visible", "d-toc-timeline-toggleable");
|
||||
break;
|
||||
}
|
||||
|
||||
if (button) {
|
||||
const translationKey = body.classList.contains("d-toc-timeline-visible")
|
||||
? "topic_timeline"
|
||||
: "table_of_contents";
|
||||
|
||||
const icon = body.classList.contains("d-toc-timeline-visible")
|
||||
? "timeline"
|
||||
: "stream";
|
||||
|
||||
button.innerHTML = `${iconHTML(icon)}${I18n.t(
|
||||
themePrefix(translationKey)
|
||||
)} `;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
en:
|
||||
table_of_contents: Table of contents
|
||||
topic_timeline: Topic timeline
|
||||
jump_bottom: Jump to replies
|
||||
table_of_contents: table of contents
|
||||
insert_table_of_contents: Insert table of contents
|
||||
post_bottom_tooltip: Navigate to post controls
|
||||
theme_metadata:
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { click, visit } from "@ember/test-helpers";
|
||||
import { visit } from "@ember/test-helpers";
|
||||
import { test } from "qunit";
|
||||
import topicFixtures from "discourse/tests/fixtures/topic";
|
||||
import {
|
||||
|
|
@ -66,14 +66,6 @@ acceptance("DiscoTOC - main", function (needs) {
|
|||
"heading gets an ID even when it has no Latin characters"
|
||||
);
|
||||
});
|
||||
|
||||
test("TOC can be toggled to reveal timeline", async function (assert) {
|
||||
await visit("/t/internationalization-localization/280");
|
||||
assert.ok(exists(".d-toc-timeline-toggle"), "TOC toggle exists");
|
||||
|
||||
await click(".d-toc-timeline-toggle");
|
||||
assert.ok(exists(".topic-timeline"), "The timeline is shown on toggle");
|
||||
});
|
||||
});
|
||||
|
||||
acceptance("DiscoTOC - off", function (needs) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue