feat: reworked ToC according to new design (#3841)

* feat: implemented new button states

* feat: reworked ToC appearance

* fix: moved images to assets

* fix: fix toc interactivity

* fix: fixed problem with hover on touch screens

* fix: open toc no mobile

* fix scripts loading in safari

* fix: fixed overlap of dropdown with toc on desktop

* fix: fixed closing toc on mobile

* fix: versions dropdown position

* fix: version selector position

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_tokens/colors.scss

@@ -5,7 +5,7 @@
 :root {
   // Interface
   --color-key-blue: rgb(48, 127, 255); //#307FFF;
-  --color-key-blue-05: rgb(48, 127, 255, 0.5);
+  --color-key-blue-50: rgb(48, 127, 255, 0.5);
   --color-background-nav: rgb(39, 40, 44);
   --color-background-nav-dt: rgb(50, 50, 55);
   --color-background-page: rgb(255, 255, 255);
@@ -21,6 +21,7 @@
 
   // Generic monochrome
   --color-w05: rgba(255, 255, 255, 0.05);
+  --color-w08: rgba(255, 255, 255, 0.08);
   --color-w10: rgba(255, 255, 255, 0.1);
   --color-w16: rgba(255, 255, 255, 0.16);
   --color-w50: rgba(255, 255, 255, 0.5);

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss

@@ -29,8 +29,10 @@
     padding: var(--size-s2);
   }
 
-  &:hover {
-    background-color: var(--color-b08);
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-b08);
+    }
   }
 
   &:active {
@@ -70,6 +72,8 @@
   &_dropdown {
     padding: var(--size-s2);
 
+    font: var(--font-text-s);
+
     &::after {
       display: block;
 

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/index.ts

@@ -14,13 +14,13 @@ function initDropdowns(): void {
   const dropdowns = document.querySelectorAll(DROPDOWN);
   dropdowns.forEach((dropdown: Element) => {
     dropdown.querySelectorAll(DROPDOWN_TOGGLE)?.forEach((button: Element) => {
-      button.addEventListener('click', (event) => onToggleDropdown(event, dropdown));
+      button.addEventListener('click', () => onToggleDropdown(dropdown));
     });
     addKeyboardNavigation(dropdown as HTMLElement);
   });
 }
 
-function onToggleDropdown(_: Event, dropdown: Element): void {
+export function onToggleDropdown(dropdown: Element): void {
   const buttons = dropdown.querySelectorAll(DROPDOWN_TOGGLE);
   buttons?.forEach(toggleDropdownButton);
   const list = dropdown.querySelector(DROPDOWN_LIST);
@@ -40,10 +40,14 @@ function toggleDropdownList(list: Element | null): void {
 function handleOutsideClick(event: MouseEvent): void {
   const target = event.target as HTMLElement;
   if (!hasAncestorWithClass(target, 'dropdown') || target.className === 'dropdown--overlay') {
-    const dropdowns = document.querySelectorAll('.button_dropdown');
+    const dropdowns = document.querySelectorAll(DROPDOWN);
     dropdowns.forEach((dropdown) => {
-      dropdown.classList.remove('button_dropdown_active');
-      dropdown.parentNode?.querySelector('.dropdown--list')?.classList.remove('dropdown--list_expanded');
+      dropdown.querySelectorAll(DROPDOWN_TOGGLE)?.forEach((button: Element) => {
+        button.classList.remove('button_dropdown_active');
+      });
+      dropdown.querySelectorAll(DROPDOWN_LIST)?.forEach((list: Element) => {
+        list.classList.remove('dropdown--list_expanded');
+      });
     });
   }
 }
@@ -52,7 +56,7 @@ function addKeyboardNavigation(dropdown: HTMLElement): void {
   new FocusTrap(dropdown);
   dropdown.addEventListener('keydown', function (event) {
     if (event.key === 'Escape') {
-      onToggleDropdown(event, dropdown);
+      onToggleDropdown(dropdown);
       (dropdown.querySelector(DROPDOWN_TOGGLE) as HTMLElement)?.focus();
     }
   });

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss

@@ -21,6 +21,8 @@
 
     overflow-y: auto;
 
+    width: fit-content;
+
     min-width: 272px;
     max-width: 360px;
     max-height: 400px;
@@ -48,9 +50,48 @@
       max-width: unset;
     }
 
+    &_positioned_right {
+      right: 0;
+    }
+
+    &_positioned_left {
+      left: 0;
+
+      @media (width < $breakpoint-desktop-min) {
+        left: unset;
+      }
+    }
+
     &_expanded {
       display: block;
     }
+
+    &_toc-list {
+      @media (width >= $breakpoint-desktop-min) {
+        position: relative;
+
+        top: 0;
+
+        display: block;
+
+        min-width: unset;
+        max-width: unset;
+
+        max-height: unset;
+
+        padding: 0;
+
+        border: none;
+
+        background-color: transparent;
+
+        box-shadow: none;
+      }
+
+      @media (width >= $breakpoint-tablet-min) and (width < $breakpoint-desktop-min) {
+        width: 408px;
+      }
+    }
   }
 
   &--option {
@@ -113,7 +154,7 @@
 
   &--overlay {
     position: absolute;
-    z-index: 1;
+    z-index: 4;
 
     top: 0;
     right: 0;
@@ -147,6 +188,8 @@
     align-items: center;
     justify-content: space-between;
 
+    height: 52px;
+
     padding-left: var(--size-s3);
 
     color: var(--color-w70);

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss

@@ -5,7 +5,7 @@
 
 :root {
   --color-background: var(--color-background-page);
-  --focus-outline: 4px solid var(--color-key-blue-05);
+  --focus-outline: 4px solid var(--color-key-blue-50);
 }
 
 .theme-dark {

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/styles.scss

@@ -21,6 +21,12 @@
   .theme-dark & {
     filter: none;
   }
+
+  @media (width < $breakpoint-desktop-min) {
+    .theme-dark_mobile & {
+      filter: none;
+    }
+  }
 }
 
 .ui-kit-icon_arrow-down {

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts

@@ -13,6 +13,7 @@ import * as navbarButton from './navbar-button/index';
 import * as platformTag from './platform-tag/index';
 import * as platformTags from './platform-tags/index';
 import * as tabs from './tabs/index';
+import * as tocTree from './toc-tree/index';
 import './helpers.scss';
 import './global.scss';
 
@@ -29,4 +30,5 @@ export {
   platformTag,
   platformTags,
   tabs,
+  tocTree,
 };

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/styles.scss

@@ -4,6 +4,10 @@
 @import '../_tokens/index';
 
 .library-version {
+  box-sizing: border-box;
+
+  padding-top: 1px;
+
   color: var(--color-text-dt);
 
   font: var(--font-text-s);
@@ -14,6 +18,8 @@
 
     height: 52px;
 
+    padding-left: 12px;
+
     background-color: var(--color-text);
   }
 }

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/index.ts

@@ -2,3 +2,33 @@
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */
 import './styles.scss';
+import { onToggleDropdown } from '../dropdown';
+
+function initTocToggle() {
+  const tocToggle = document.getElementById('toc-toggle');
+  const tocDropdown = document.getElementById('toc-dropdown');
+  if (!tocToggle || !tocDropdown) {
+    console.warn('Dokka: toc toggle or dropdown is not found');
+    return;
+  }
+  tocToggle.addEventListener('click', (event) => {
+    event.stopPropagation();
+    onToggleDropdown(tocDropdown);
+  });
+}
+
+export function toggleTocDropdown(): void {
+  const tocDropdown = document.getElementById('toc-dropdown');
+  if (!tocDropdown) {
+    console.warn('Dokka: toc dropdown is not found');
+    return;
+  }
+  onToggleDropdown(tocDropdown);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as any).toggleTocDropdown = toggleTocDropdown;
+
+document.addEventListener('DOMContentLoaded', () => {
+  initTocToggle();
+});

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss

@@ -50,7 +50,13 @@
   line-height: 0;
   will-change: background-color;
 
-  &:hover {
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-b08);
+    }
+  }
+
+  &:active {
     background-color: var(--color-w10);
   }
 
@@ -76,7 +82,7 @@
   background-image: url('../_assets/homepage.svg');
 }
 
-.navigation-controls--btn_menu {
+.navigation-controls--btn_toc {
   margin-left: auto;
 
   background-image: url('../_assets/burger.svg');

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss

@@ -8,7 +8,7 @@
 
   padding: 10px 12px;
 
-  letter-spacing: -0.03em;
+  cursor: pointer;
 
   text-transform: capitalize;
 
@@ -70,7 +70,14 @@ button.platform-tag {
   --platform-tag-color: #9585f9;
 }
 
-.filter-section .platform-tag[data-active]:hover {
+@media (hover: hover) {
+  .filter-section .platform-tag[data-active]:hover {
+    color: #fff;
+    background-color: rgba(186, 186, 187, 0.7);
+  }
+}
+
+.filter-section .platform-tag[data-active]:active {
   color: #fff;
   background-color: rgba(186, 186, 187, 0.7);
 }

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/toc-tree/index.ts

@@ -0,0 +1,4 @@
+/*
+ * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+import './styles.scss';