mirror of
https://github.com/zadam/trilium.git
synced 2026-01-29 09:54:25 +01:00
Merge b70ec18732a7c62cff59831a0c2400b4897de380 into d639de03c3a20b5263a40f1f96c3ee4d4478fb8e
This commit is contained in:
Wael Nasreddine
GitHub
commit
bcca403cbc
@ -5,6 +5,7 @@ import setupSearch from "./modules/search.js";
|
||||
import setupThemeSelector from "./modules/theme.js";
|
||||
import setupMermaid from "./modules/mermaid.js";
|
||||
import setupMath from "./modules/math.js";
|
||||
import setupSidebars from "./modules/sidebar.js";
|
||||
import api from "./modules/api.js";
|
||||
import "highlight.js/styles/default.css";
|
||||
import "@triliumnext/ckeditor5/src/theme/ck-content.css";
|
||||
@ -24,6 +25,7 @@ $try(setupToC);
|
||||
$try(setupExpanders);
|
||||
$try(setupMobileMenu);
|
||||
$try(setupSearch);
|
||||
$try(setupSidebars);
|
||||
|
||||
function setupTextNote() {
|
||||
$try(setupMermaid);
|
||||
|
||||
@ -2,24 +2,24 @@ import parents from "../common/parents.js";
|
||||
|
||||
|
||||
export default function setupMobileMenu() {
|
||||
function toggleMobileMenu(event: MouseEvent) {
|
||||
event.stopPropagation(); // Don't prevent default for links
|
||||
|
||||
const isOpen = document.body.classList.contains("menu-open");
|
||||
if (isOpen) return document.body.classList.remove("menu-open");
|
||||
return document.body.classList.add("menu-open");
|
||||
function closeMobileMenus() {
|
||||
document.body.classList.remove("menu-open");
|
||||
document.body.classList.remove("toc-open");
|
||||
}
|
||||
|
||||
const showMenuButton = document.getElementById("show-menu-button");
|
||||
showMenuButton?.addEventListener("click", toggleMobileMenu);
|
||||
|
||||
window.addEventListener("click", e => {
|
||||
const isOpen = document.body.classList.contains("menu-open");
|
||||
if (!isOpen) return; // This listener is only to close
|
||||
const isMenuOpen = document.body.classList.contains("menu-open");
|
||||
const isTocOpen = document.body.classList.contains("toc-open");
|
||||
if (!isMenuOpen && !isTocOpen) return;
|
||||
|
||||
// If the click was anywhere in the mobile nav, don't close
|
||||
// If the click was anywhere in the mobile nav or TOC, don't close
|
||||
if (parents(e.target as HTMLElement, "#left-pane").length) return;
|
||||
return toggleMobileMenu(e);
|
||||
if (parents(e.target as HTMLElement, "#toc-pane").length) return;
|
||||
|
||||
// If the click was on one of the toggle buttons, the button's own listener will handle it
|
||||
if (parents(e.target as HTMLElement, ".header-button").length) return;
|
||||
|
||||
return closeMobileMenus();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
32
packages/share-theme/src/scripts/modules/sidebar.ts
Normal file
32
packages/share-theme/src/scripts/modules/sidebar.ts
Normal file
@ -0,0 +1,32 @@
|
||||
export default function setupSidebars() {
|
||||
const splitPane = document.getElementById("split-pane");
|
||||
|
||||
const leftToggle = document.getElementById("left-pane-toggle-button");
|
||||
const tocToggle = document.getElementById("toc-pane-toggle-button");
|
||||
|
||||
if (leftToggle && splitPane) {
|
||||
leftToggle.addEventListener("click", () => {
|
||||
const isMobile = window.innerWidth <= 768; // 48em
|
||||
if (isMobile) {
|
||||
document.body.classList.toggle("menu-open");
|
||||
document.body.classList.remove("toc-open");
|
||||
} else {
|
||||
const isCollapsed = splitPane.classList.toggle("left-pane-collapsed");
|
||||
localStorage.setItem("left-pane-collapsed", isCollapsed ? "true" : "false");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (tocToggle && splitPane) {
|
||||
tocToggle.addEventListener("click", () => {
|
||||
const isMobile = window.innerWidth <= 768; // 48em
|
||||
if (isMobile) {
|
||||
document.body.classList.toggle("toc-open");
|
||||
document.body.classList.remove("menu-open");
|
||||
} else {
|
||||
const isCollapsed = splitPane.classList.toggle("toc-pane-collapsed");
|
||||
localStorage.setItem("toc-pane-collapsed", isCollapsed ? "true" : "false");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -80,3 +80,9 @@ body.type-webView {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* table styles */
|
||||
.ck-content table td,
|
||||
.ck-content table th {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
@ -2,28 +2,76 @@ html,
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#split-pane {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#left-pane {
|
||||
display: flex;
|
||||
min-width: fit-content;
|
||||
max-width: 20vw;
|
||||
height: calc(100vh);
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
width: 20vw;
|
||||
height: 100%;
|
||||
background: var(--background-secondary);
|
||||
border-right: 5px solid var(--background-highlight);
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
transition: width 0.3s ease, margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.left-pane-collapsed #left-pane {
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
margin-left: -5px; /* offset the border */
|
||||
overflow: hidden;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.pane-toggle {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
background: var(--background-highlight);
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
width: 24px;
|
||||
height: 48px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
display: none; /* Hide standard toggles, using header buttons instead */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s ease, left 0.3s ease, right 0.3s ease;
|
||||
}
|
||||
|
||||
.pane-toggle:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#left-pane-toggle {
|
||||
left: 20vw;
|
||||
}
|
||||
|
||||
#toc-pane-toggle {
|
||||
left: -24px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
#right-pane {
|
||||
@ -31,6 +79,7 @@ body {
|
||||
margin: 0 auto;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main {
|
||||
@ -40,10 +89,20 @@ body {
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
transition: max-width 0.3s ease;
|
||||
}
|
||||
|
||||
.left-pane-collapsed #main,
|
||||
.toc-pane-collapsed #main {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.left-pane-collapsed.toc-pane-collapsed #main {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#main {
|
||||
padding: 0 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,82 +1,104 @@
|
||||
#mobile-header {
|
||||
display: none;
|
||||
#header {
|
||||
background: var(--background-secondary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 12px;
|
||||
border-bottom: 1px solid var(--background-highlight);
|
||||
}
|
||||
|
||||
#mobile-header a {
|
||||
#header-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#mobile-header a img {
|
||||
#header-logo img {
|
||||
max-width: 32px;
|
||||
}
|
||||
|
||||
#mobile-header button {
|
||||
.header-button {
|
||||
color: var(--text-menu);
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 4px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transform: rotate(0);
|
||||
transition: background-color 200ms ease, transform 200ms ease;
|
||||
}
|
||||
|
||||
.header-button:hover {
|
||||
background-color: var(--background-highlight);
|
||||
}
|
||||
|
||||
.header-button-placeholder {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
width: unset;
|
||||
height: unset;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#split-pane {
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#right-pane, #main {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
#main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#mobile-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#mobile-header button svg {
|
||||
|
||||
#header .header-button svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#left-pane {
|
||||
|
||||
#left-pane, #toc-pane {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
transform: translateX(-100%);
|
||||
bottom: 0;
|
||||
width: 80%;
|
||||
max-width: 300px;
|
||||
background: var(--background-secondary);
|
||||
transition: transform 200ms ease;
|
||||
z-index: 2;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-open #left-pane {
|
||||
|
||||
#left-pane {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
#toc-pane {
|
||||
display: flex !important;
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#toc-pane h3,
|
||||
#toc-pane #toc {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.menu-open #left-pane,
|
||||
.toc-open #toc-pane {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
display: block;
|
||||
@ -90,14 +112,14 @@
|
||||
transition: background-color 200ms ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body.menu-open::before {
|
||||
|
||||
body.menu-open::before,
|
||||
body.toc-open::before {
|
||||
background: rgba(0,0,0, 0.6);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
body.menu-open #show-menu-button {
|
||||
background: var(--background-highlight);
|
||||
transform: rotate(90deg);
|
||||
|
||||
.toc-pane-collapsed #toc-pane {
|
||||
width: 80%; /* Don't collapse to 0 on mobile */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,13 +4,6 @@
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
#site-header > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
@ -138,4 +131,4 @@ input:checked ~ .dark-icon {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,26 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
order: 3;
|
||||
/* padding: 16px 16px 16px 32px; */
|
||||
transition: width 0.3s ease, margin-right 0.3s ease;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.toc-pane-collapsed #toc-pane {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.toc-pane-collapsed #toc-pane h3,
|
||||
.toc-pane-collapsed #toc-pane #toc {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.toc-pane-collapsed #toc-pane-toggle {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.toc-pane-collapsed #toc-pane-toggle svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
#toc-pane h3 {
|
||||
@ -91,4 +110,4 @@
|
||||
#toc-pane {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,6 +66,13 @@
|
||||
isStatic: <%= !!isStatic %>,
|
||||
theme
|
||||
};
|
||||
|
||||
(function() {
|
||||
const leftCollapsed = localStorage.getItem("left-pane-collapsed") === "true";
|
||||
const tocCollapsed = localStorage.getItem("toc-pane-collapsed") === "true";
|
||||
if (leftCollapsed) document.documentElement.classList.add("left-pane-collapsed");
|
||||
if (tocCollapsed) document.documentElement.classList.add("toc-pane-collapsed");
|
||||
})();
|
||||
</script>
|
||||
<!-- HTML Meta Tags -->
|
||||
<meta name="description" content="<%= note.getLabelValue("shareDescription") %>">
|
||||
@ -104,21 +111,23 @@ content = content.replaceAll(headingRe, (...match) => {
|
||||
%>
|
||||
<body data-note-id="<%= note.noteId %>" class="type-<%= note.type %>" data-ancestor-note-id="<%= subRoot.note.noteId %>">
|
||||
<%- renderSnippets("body:start") %>
|
||||
<div id="mobile-header">
|
||||
<a href="<%= shareRootLink %>">
|
||||
<div id="header">
|
||||
<button aria-label="Toggle Navigation" id="left-pane-toggle-button" class="header-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg></button>
|
||||
<a href="<%= shareRootLink %>" id="header-logo">
|
||||
<img src="<%= logoUrl %>" width="32" height="<%= mobileLogoHeight %>" alt="Logo" />
|
||||
<%= subRoot.note.title %>
|
||||
</a>
|
||||
<button aria-label="Show Mobile Menu" id="show-menu-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg></button>
|
||||
<% if (headingMatches.length > 1) { %>
|
||||
<button aria-label="Toggle Table of Contents" id="toc-pane-toggle-button" class="header-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10V7h2v2h-2zm0 6h2v-2h-2v2z"></path></svg></button>
|
||||
<% } else { %>
|
||||
<div class="header-button-placeholder"></div>
|
||||
<% } %>
|
||||
</div>
|
||||
<div id="split-pane">
|
||||
<button id="left-pane-toggle" class="pane-toggle" aria-label="Toggle Navigation"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg></button>
|
||||
<div id="left-pane">
|
||||
<div id="navigation">
|
||||
<div id="site-header">
|
||||
<a href="<%= shareRootLink %>">
|
||||
<img src="<%= logoUrl %>" width="<%= logoWidth %>" height="<%= logoHeight %>" alt="Logo" />
|
||||
<%= subRoot.note.title %>
|
||||
</a>
|
||||
<div class="theme-selection">
|
||||
<span id="sitetheme"><%= t("share_theme.site-theme") %></span>
|
||||
<label class="switch">
|
||||
@ -223,6 +232,7 @@ content = content.replaceAll(headingRe, (...match) => {
|
||||
}
|
||||
%>
|
||||
<div id="toc-pane">
|
||||
<button id="toc-pane-toggle" class="pane-toggle" aria-label="Toggle Table of Contents"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></button>
|
||||
<h3><%= t("share_theme.on-this-page") %></h3>
|
||||
<ul id="toc">
|
||||
<% for (const entry of toc) { %>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user