From 8ab5edeccc07600466256d9b82cf5ab1a0f31fa8 Mon Sep 17 00:00:00 2001 From: Zef Hemel Date: Tue, 2 Jan 2024 11:01:34 +0100 Subject: [PATCH] Tweaks in rendering and buttons --- plugs/index/index.plug.yaml | 4 +- plugs/index/linked_mentions.ts | 23 +++++--- plugs/index/toc.ts | 4 +- web/client.ts | 100 +++++++++++++++++---------------- web/navigator.ts | 17 ++++-- web/styles/editor.scss | 26 ++++++--- web/styles/theme.scss | 2 +- 7 files changed, 102 insertions(+), 74 deletions(-) diff --git a/plugs/index/index.plug.yaml b/plugs/index/index.plug.yaml index 672f74f2..a18d9109 100644 --- a/plugs/index/index.plug.yaml +++ b/plugs/index/index.plug.yaml @@ -178,8 +178,8 @@ functions: env: client panelWidget: top - refreshTOC: - path: toc.ts:refreshTOC + refreshWidgets: + path: toc.ts:refreshWidgets lintYAML: path: lint.ts:lintYAML diff --git a/plugs/index/linked_mentions.ts b/plugs/index/linked_mentions.ts index 767f3718..ee85cf17 100644 --- a/plugs/index/linked_mentions.ts +++ b/plugs/index/linked_mentions.ts @@ -13,12 +13,10 @@ export async function toggleMentions() { } export async function renderMentions(): Promise { - console.log("Hide mentions", await clientStore.get(hideMentionsKey)); if (await clientStore.get(hideMentionsKey)) { return null; } - console.log("Stil here"); const page = await editor.getCurrentPage(); const linksResult = await queryObjects("link", { // Query all links that point to this page, excluding those that are inside directives and self pointers. @@ -43,12 +41,21 @@ export async function renderMentions(): Promise { } return { markdown: renderedMd, - buttons: [{ - description: "Hide", - svg: - ``, - invokeFunction: "index.toggleMentions", - }], + buttons: [ + { + description: "Reload", + svg: + ``, + invokeFunction: "index.refreshWidgets", + }, + + { + description: "Hide", + svg: + ``, + invokeFunction: "index.toggleMentions", + }, + ], }; } } diff --git a/plugs/index/toc.ts b/plugs/index/toc.ts index 6d7cc5a3..2af741b7 100644 --- a/plugs/index/toc.ts +++ b/plugs/index/toc.ts @@ -23,7 +23,7 @@ export async function toggleTOC() { await codeWidget.refreshAll(); } -export async function refreshTOC() { +export async function refreshWidgets() { await codeWidget.refreshAll(); } @@ -66,7 +66,7 @@ export async function renderTOC(): Promise { description: "Reload", svg: ``, - invokeFunction: "index.refreshTOC", + invokeFunction: "index.refreshWidgets", }, { description: "Hide", diff --git a/web/client.ts b/web/client.ts index cdd97d71..5d1f5c9e 100644 --- a/web/client.ts +++ b/web/client.ts @@ -287,57 +287,59 @@ export class Client { cleanPageRef(this.settings.indexPage), ); - this.pageNavigator.subscribe(async (pageName, pos: number | string) => { - console.log("Now navigating to", pageName); + this.pageNavigator.subscribe( + async (pageName, pos: number | string | undefined) => { + console.log("Now navigating to", pageName, pos); - const stateRestored = await this.loadPage(pageName); - if (pos) { - if (typeof pos === "string") { - console.log("Navigating to anchor", pos); + const stateRestored = await this.loadPage(pageName, pos === undefined); + if (pos) { + if (typeof pos === "string") { + console.log("Navigating to anchor", pos); - // We're going to look up the anchor through a API invocation - const matchingAnchor = await this.system.system.localSyscall( - "index", - "system.invokeFunction", - ["getObjectByRef", pageName, "anchor", `${pageName}$${pos}`], - ); - - if (!matchingAnchor) { - return this.flashNotification( - `Could not find anchor $${pos}`, - "error", + // We're going to look up the anchor through a API invocation + const matchingAnchor = await this.system.system.localSyscall( + "index", + "system.invokeFunction", + ["getObjectByRef", pageName, "anchor", `${pageName}$${pos}`], ); - } else { - pos = matchingAnchor.pos as number; - } - } - setTimeout(() => { - this.editorView.dispatch({ - selection: { anchor: pos as number }, - effects: EditorView.scrollIntoView(pos as number, { y: "start" }), - }); - }); - } else if (!stateRestored) { - // Somewhat ad-hoc way to determine if the document contains frontmatter and if so, putting the cursor _after it_. - const pageText = this.editorView.state.sliceDoc(); - // Default the cursor to be at position 0 - let initialCursorPos = 0; - const match = frontMatterRegex.exec(pageText); - if (match) { - // Frontmatter found, put cursor after it - initialCursorPos = match[0].length; + if (!matchingAnchor) { + return this.flashNotification( + `Could not find anchor $${pos}`, + "error", + ); + } else { + pos = matchingAnchor.pos as number; + } + } + setTimeout(() => { + this.editorView.dispatch({ + selection: { anchor: pos as number }, + effects: EditorView.scrollIntoView(pos as number, { y: "start" }), + }); + }); + } else if (!stateRestored) { + // Somewhat ad-hoc way to determine if the document contains frontmatter and if so, putting the cursor _after it_. + const pageText = this.editorView.state.sliceDoc(); + + // Default the cursor to be at position 0 + let initialCursorPos = 0; + const match = frontMatterRegex.exec(pageText); + if (match) { + // Frontmatter found, put cursor after it + initialCursorPos = match[0].length; + } + // By default scroll to the top + this.editorView.scrollDOM.scrollTop = 0; + this.editorView.dispatch({ + selection: { anchor: initialCursorPos }, + // And then scroll down if required + scrollIntoView: true, + }); } - // By default scroll to the top - this.editorView.scrollDOM.scrollTop = 0; - this.editorView.dispatch({ - selection: { anchor: initialCursorPos }, - // And then scroll down if required - scrollIntoView: true, - }); - } - await this.stateDataStore.set(["client", "lastOpenedPage"], pageName); - }); + await this.stateDataStore.set(["client", "lastOpenedPage"], pageName); + }, + ); if (location.hash === "#boot") { (async () => { @@ -846,11 +848,13 @@ export class Client { await this.pageNavigator!.navigate(name, pos, replaceState); } - async loadPage(pageName: string): Promise { + async loadPage(pageName: string, restoreState = true): Promise { const loadingDifferentPage = pageName !== this.currentPage; const editorView = this.editorView; const previousPage = this.currentPage; + // console.log("Navigating to", pageName, restoreState); + // Persist current page state and nicely close page if (previousPage) { this.openPages.saveState(previousPage); @@ -915,7 +919,7 @@ export class Client { if (editorView.contentDOM) { this.tweakEditorDOM(editorView.contentDOM); } - const stateRestored = this.openPages.restoreState(pageName); + const stateRestored = restoreState && this.openPages.restoreState(pageName); this.space.watchPage(pageName); // Note: these events are dispatched asynchronously deliberately (not waiting for results) diff --git a/web/navigator.ts b/web/navigator.ts index 8fafc03a..e18a4896 100644 --- a/web/navigator.ts +++ b/web/navigator.ts @@ -13,20 +13,24 @@ export class PathPageNavigator { constructor(readonly indexPage: string, readonly root: string = "") {} - async navigate(page: string, pos?: number | string, replaceState = false) { + async navigate( + page: string, + pos?: number | string | undefined, + replaceState = false, + ) { let encodedPage = encodePageUrl(page); if (page === this.indexPage) { encodedPage = ""; } if (replaceState) { window.history.replaceState( - { page, pos }, + { page }, page, `${this.root}/${encodedPage}`, ); } else { window.history.pushState( - { page, pos }, + { page }, page, `${this.root}/${encodedPage}`, ); @@ -43,7 +47,10 @@ export class PathPageNavigator { } subscribe( - pageLoadCallback: (pageName: string, pos: number | string) => Promise, + pageLoadCallback: ( + pageName: string, + pos: number | string | undefined, + ) => Promise, ): void { const cb = (event?: PopStateEvent) => { const gotoPage = this.getCurrentPage(); @@ -53,7 +60,7 @@ export class PathPageNavigator { safeRun(async () => { await pageLoadCallback( this.getCurrentPage(), - event?.state?.pos || this.getCurrentPos(), + event?.state?.pos, ); if (this.navigationResolve) { this.navigationResolve(); diff --git a/web/styles/editor.scss b/web/styles/editor.scss index 8c0d1136..f54fbbdf 100644 --- a/web/styles/editor.scss +++ b/web/styles/editor.scss @@ -471,7 +471,7 @@ overflow-y: auto; border: 1px solid var(--editor-directive-background-color); border-radius: 5px; - white-space: wrap; + white-space: normal; position: relative; ul, @@ -520,21 +520,27 @@ background-color: var(--editor-code-background-color); } - // Button bar - &:hover .button-bar, - &:active .button-bar { + // Only show the button bar on hover on non-touch devices + &:hover .button-bar { display: block; } + // Always show button bar on touch devices + @media (hover: none) and (pointer: coarse) { + .button-bar { + display: block !important; + } + } + .button-bar { position: absolute; - right: 10px; - top: 10px; + right: 0; + top: 0; display: none; background: var(--editor-directive-background-color); padding-inline: 3px; - padding-bottom: 1px; - border-radius: 5px; + padding: 4px 0; + // border-radius: 0 5px; button { @@ -545,6 +551,10 @@ margin-right: -8px; } + button:last-of-type { + margin-right: 2px; + } + } } diff --git a/web/styles/theme.scss b/web/styles/theme.scss index 3e9aca9c..d8271b9d 100644 --- a/web/styles/theme.scss +++ b/web/styles/theme.scss @@ -101,7 +101,7 @@ html { --editor-frontmatter-background-color: rgba(255, 246, 189, 0.5); --editor-frontmatter-color: var(--subtle-color); --editor-frontmatter-marker-color: #89000080; - --editor-directive-background-color: rgb(233, 233, 233, 50%); + --editor-directive-background-color: rgb(238, 238, 238); --editor-directive-border-color: #0000000f; --editor-directive-color: #5b5b5b; --editor-directive-info-color: var(--subtle-color);