REVERT: reverting toggle to do display issues (#72)

assets/sprite.svg

@@ -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></svg>
-
-<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>

common/common.scss

@@ -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 {
+        .d-toc-main #d-toc li.d-toc-item ul {
-        display: block;
-        #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;
+        text-align: right;
-      background: var(--secondary);
-      right: 1.5em;
-      top: 0.25em;
-      z-index: z("timeline");
       }
     }
   }
 
-#topic-progress-wrapper {
+  // core overrides when timeline is active
-  align-items: stretch;
+  .timeline-container,
-  .d-toc-mini {
+  #topic-progress {
     display: none;
-
-    height: 100%;
-    .btn {
-      height: 100%;
   }
-  }
+  .container.posts .topic-navigation.with-topic-progress {
-
+    align-self: start;
-  .staff & {
-    .topic-admin-menu-button-container {
-      margin-left: 0.5em;
-    }
-  }
-}
-
-.d-toc-timeline-toggleable {
-  #topic-progress-wrapper .d-toc-mini {
-    display: block;
   }
 }
 
@@ -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;
+  }
 }

javascripts/discourse/connectors/after-topic-progress/d-toc-mini.hbs

@@ -0,0 +1,7 @@
+<div class="d-toc-mini">
+  <DButton
+    class="btn-primary"
+    @action={{this.showTOCOverlay}}
+    @label={{theme-prefix "table_of_contents"}}
+  />
+</div>

javascripts/discourse/connectors/after-topic-progress/d-toc-mini.js

@@ -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");
-  }
 }

javascripts/discourse/connectors/before-topic-progress/d-toc-mini.hbs

@@ -1,3 +0,0 @@
-<div class="d-toc-mini" {{did-insert this.resetBodyClass}}>
-  <DButton class="btn-primary" @action={{this.showTOCOverlay}} @icon="stream" />
-</div>

javascripts/discourse/initializers/disco-toc-main.js

@@ -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");
+        if (!document.querySelector(".d-toc-cooked")) {
-
+          return;
-        // manages the timeline area width via CSS
-        if (hasCookedTOC) {
-          document.body.classList.add("d-toc-available");
         }
-
+        if (args.post.post_number === 1) {
-        // manages timeline visibility
+          document.body.classList.add("d-toc-timeline-visible");
-        if (hasCookedTOC && args.post.post_number === 1) {
-          if (!TOChidden) {
-            handleButtonAndBody("show");
         } else {
-            handleButtonAndBody("hide");
+          document.body.classList.remove("d-toc-timeline-visible");
-          }
-
-          // 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");
         }
       });
 
@@ -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(
+    dToc.innerHTML = `<div class="d-toc-icons">
-      "times"
+              <a href="#" class="scroll-to-bottom" title="${I18n.t(
-    )}</a></div>`;
+                themePrefix("post_bottom_tooltip")
-    return dToc;
+              )}">${iconHTML("downward")}</a>
-  },
+              <a href="#" class="d-toc-close">${iconHTML("times")}</a></div>`;
-
-  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();
 
     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);
+      document.querySelector(".d-toc-wrapper").appendChild(dToc);
-      wrapper.appendChild(this.toggleButton);
     }
 
     const result = this.buildTOC(Array.from(headings));
-    dToc.appendChild(result);
+    document.querySelector(".d-toc-main").appendChild(result);
-    dToc.appendChild(scrollLink);
     document.addEventListener("click", this.clickTOC, false);
   },
 
   clickTOC(e) {
     const classNames = ["d-toc-timeline-visible", "archetype-docs-topic"];
 
-    // toggle timeline visibility
+    if (
-    if (e.target.closest(".d-toc-timeline-toggle")) {
+      !classNames.some((className) =>
-      handleButtonAndBody("toggle");
+        document.body.classList.contains(className)
-      e.preventDefault();
+      )
-      return false;
+    ) {
+      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)
-    )} `;
-  }
-}

locales/en.yml

@@ -1,7 +1,5 @@
 en:
-  table_of_contents: Table of contents
+  table_of_contents: table of contents
-  topic_timeline: Topic timeline
-  jump_bottom: Jump to replies
   insert_table_of_contents: Insert table of contents
   post_bottom_tooltip: Navigate to post controls
   theme_metadata:

test/acceptance/toc-test.js

@@ -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) {