mirror of
https://github.com/zadam/trilium.git
synced 2026-01-10 16:44:29 +01:00
Save indicator (#8249)
This commit is contained in:
Elian Doran
GitHub
commit
f1f3e66537
@ -23,6 +23,8 @@ export interface SetNoteOpts {
|
||||
|
||||
export type GetTextEditorCallback = (editor: CKTextEditor) => void;
|
||||
|
||||
export type SaveState = "saved" | "saving" | "unsaved" | "error";
|
||||
|
||||
export interface NoteContextDataMap {
|
||||
toc: HeadingContext;
|
||||
pdfPages: {
|
||||
@ -39,6 +41,9 @@ export interface NoteContextDataMap {
|
||||
layers: PdfLayer[];
|
||||
toggleLayer(layerId: string, visible: boolean): void;
|
||||
};
|
||||
saveState: {
|
||||
state: SaveState;
|
||||
};
|
||||
}
|
||||
|
||||
type ContextDataKey = keyof NoteContextDataMap;
|
||||
|
||||
@ -1,22 +1,30 @@
|
||||
import type { SaveState } from "../components/note_context";
|
||||
import { getErrorMessage } from "./utils";
|
||||
|
||||
type Callback = () => Promise<void> | void;
|
||||
|
||||
export type StateCallback = (state: SaveState) => void;
|
||||
|
||||
export default class SpacedUpdate {
|
||||
private updater: Callback;
|
||||
private lastUpdated: number;
|
||||
private changed: boolean;
|
||||
private updateInterval: number;
|
||||
private changeForbidden?: boolean;
|
||||
private stateCallback?: StateCallback;
|
||||
|
||||
constructor(updater: Callback, updateInterval = 1000) {
|
||||
constructor(updater: Callback, updateInterval = 1000, stateCallback?: StateCallback) {
|
||||
this.updater = updater;
|
||||
this.lastUpdated = Date.now();
|
||||
this.changed = false;
|
||||
this.updateInterval = updateInterval;
|
||||
this.stateCallback = stateCallback;
|
||||
}
|
||||
|
||||
scheduleUpdate() {
|
||||
if (!this.changeForbidden) {
|
||||
this.changed = true;
|
||||
this.stateCallback?.("unsaved");
|
||||
setTimeout(() => this.triggerUpdate());
|
||||
}
|
||||
}
|
||||
@ -26,10 +34,13 @@ export default class SpacedUpdate {
|
||||
this.changed = false; // optimistic...
|
||||
|
||||
try {
|
||||
this.stateCallback?.("saving");
|
||||
await this.updater();
|
||||
this.stateCallback?.("saved");
|
||||
} catch (e) {
|
||||
this.changed = true;
|
||||
|
||||
this.stateCallback?.("error");
|
||||
logError(getErrorMessage(e));
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
@ -59,15 +70,22 @@ export default class SpacedUpdate {
|
||||
this.updateInterval = interval;
|
||||
}
|
||||
|
||||
triggerUpdate() {
|
||||
async triggerUpdate() {
|
||||
if (!this.changed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (Date.now() - this.lastUpdated > this.updateInterval) {
|
||||
this.updater();
|
||||
this.stateCallback?.("saving");
|
||||
try {
|
||||
await this.updater();
|
||||
this.stateCallback?.("saved");
|
||||
this.changed = false;
|
||||
} catch (e) {
|
||||
this.stateCallback?.("error");
|
||||
logError(getErrorMessage(e));
|
||||
}
|
||||
this.lastUpdated = Date.now();
|
||||
this.changed = false;
|
||||
} else {
|
||||
// update isn't triggered but changes are still pending, so we need to schedule another check
|
||||
this.scheduleUpdate();
|
||||
|
||||
@ -2208,7 +2208,14 @@
|
||||
"execute_script": "Run script",
|
||||
"execute_script_description": "This note is a script note. Click to execute the script.",
|
||||
"execute_sql": "Run SQL",
|
||||
"execute_sql_description": "This note is a SQL note. Click to execute the SQL query."
|
||||
"execute_sql_description": "This note is a SQL note. Click to execute the SQL query.",
|
||||
"save_status_saved": "Saved",
|
||||
"save_status_saving": "Saving...",
|
||||
"save_status_unsaved": "Unsaved",
|
||||
"save_status_error": "Save failed",
|
||||
"save_status_saving_tooltip": "Changes are being saved.",
|
||||
"save_status_unsaved_tooltip": "There are unsaved changes. They will be saved automatically in a moment.",
|
||||
"save_status_error_tooltip": "An error occurred while saving the note. If possible, try copying the note content elsewhere and reloading the application."
|
||||
},
|
||||
"status_bar": {
|
||||
"language_title": "Change content language",
|
||||
|
||||
@ -2,6 +2,11 @@
|
||||
contain: none;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: var(--default-opacity); }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
.note-badges {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
@ -16,6 +21,23 @@
|
||||
&.share-badge {--color: var(--badge-share-background-color);}
|
||||
&.clipped-note-badge {--color: var(--badge-clipped-note-background-color);}
|
||||
&.execute-badge {--color: var(--badge-execute-background-color);}
|
||||
&.save-status-badge {
|
||||
--default-opacity: 0.4;
|
||||
opacity: var(--default-opacity);
|
||||
transition: opacity 250ms ease-in;
|
||||
color: var(--main-text-color);
|
||||
|
||||
&.error {
|
||||
color: var(--dropdown-item-icon-destructive-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.saved {
|
||||
animation: fadeOut 250ms ease-in 5s forwards;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
min-width: 0;
|
||||
|
||||
.text {
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
import "./NoteBadges.css";
|
||||
|
||||
import { clsx } from "clsx";
|
||||
|
||||
import { copyTextWithToast } from "../../services/clipboard_ext";
|
||||
import { t } from "../../services/i18n";
|
||||
import { goToLinkExt } from "../../services/link";
|
||||
import { Badge, BadgeWithDropdown } from "../react/Badge";
|
||||
import { FormDropdownDivider, FormListItem } from "../react/FormList";
|
||||
import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
|
||||
import { useGetContextData, useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
|
||||
import { useShareState } from "../ribbon/BasicPropertiesTab";
|
||||
import { useShareInfo } from "../shared_info";
|
||||
|
||||
export default function NoteBadges() {
|
||||
return (
|
||||
<div className="note-badges">
|
||||
<SaveStatusBadge />
|
||||
<ReadOnlyBadge />
|
||||
<ShareBadge />
|
||||
<ClippedNoteBadge />
|
||||
@ -105,3 +108,42 @@ function ExecuteBadge() {
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function SaveStatusBadge() {
|
||||
const saveState = useGetContextData("saveState");
|
||||
if (!saveState) return;
|
||||
|
||||
const stateConfig = {
|
||||
saved: {
|
||||
icon: "bx bx-check",
|
||||
title: t("breadcrumb_badges.save_status_saved"),
|
||||
tooltip: undefined
|
||||
},
|
||||
saving: {
|
||||
icon: "bx bx-loader bx-spin",
|
||||
title: t("breadcrumb_badges.save_status_saving"),
|
||||
tooltip: t("breadcrumb_badges.save_status_saving_tooltip")
|
||||
},
|
||||
unsaved: {
|
||||
icon: "bx bx-pencil",
|
||||
title: t("breadcrumb_badges.save_status_unsaved"),
|
||||
tooltip: t("breadcrumb_badges.save_status_unsaved_tooltip")
|
||||
},
|
||||
error: {
|
||||
icon: "bx bxs-error",
|
||||
title: t("breadcrumb_badges.save_status_error"),
|
||||
tooltip: t("breadcrumb_badges.save_status_error_tooltip")
|
||||
}
|
||||
};
|
||||
|
||||
const { icon, title, tooltip } = stateConfig[saveState.state];
|
||||
|
||||
return (
|
||||
<Badge
|
||||
className={clsx("save-status-badge", saveState.state)}
|
||||
icon={icon}
|
||||
text={title}
|
||||
tooltip={tooltip}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ import options, { type OptionValue } from "../../services/options";
|
||||
import protected_session_holder from "../../services/protected_session_holder";
|
||||
import server from "../../services/server";
|
||||
import shortcuts, { Handler, removeIndividualBinding } from "../../services/shortcuts";
|
||||
import SpacedUpdate from "../../services/spaced_update";
|
||||
import SpacedUpdate, { type StateCallback } from "../../services/spaced_update";
|
||||
import toast, { ToastOptions } from "../../services/toast";
|
||||
import tree from "../../services/tree";
|
||||
import utils, { escapeRegExp, getErrorMessage, randomString, reloadFrontendApp } from "../../services/utils";
|
||||
@ -63,22 +63,29 @@ export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler:
|
||||
useDebugValue(() => eventNames.join(", "));
|
||||
}
|
||||
|
||||
export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000) {
|
||||
export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000, stateCallback?: StateCallback) {
|
||||
const callbackRef = useRef(callback);
|
||||
const stateCallbackRef = useRef(stateCallback);
|
||||
const spacedUpdateRef = useRef<SpacedUpdate>(new SpacedUpdate(
|
||||
() => callbackRef.current(),
|
||||
interval
|
||||
interval,
|
||||
(state) => stateCallbackRef.current?.(state)
|
||||
));
|
||||
|
||||
// Update callback ref when it changes
|
||||
useEffect(() => {
|
||||
callbackRef.current = callback;
|
||||
}, [callback]);
|
||||
}, [ callback ]);
|
||||
|
||||
// Update state callback when it changes.
|
||||
useEffect(() => {
|
||||
stateCallbackRef.current = stateCallback;
|
||||
}, [ stateCallback ]);
|
||||
|
||||
// Update interval if it changes
|
||||
useEffect(() => {
|
||||
spacedUpdateRef.current?.setUpdateInterval(interval);
|
||||
}, [interval]);
|
||||
}, [ interval ]);
|
||||
|
||||
return spacedUpdateRef.current;
|
||||
}
|
||||
@ -121,7 +128,12 @@ export function useEditorSpacedUpdate({ note, noteType, noteContext, getData, on
|
||||
dataSaved?.(data);
|
||||
};
|
||||
}, [ note, getData, dataSaved, noteType, parentComponent ]);
|
||||
const spacedUpdate = useSpacedUpdate(callback);
|
||||
const stateCallback = useCallback<StateCallback>((state) => {
|
||||
noteContext?.setContextData("saveState", {
|
||||
state
|
||||
});
|
||||
}, [ noteContext ]);
|
||||
const spacedUpdate = useSpacedUpdate(callback, updateInterval, stateCallback);
|
||||
|
||||
// React to note/blob changes.
|
||||
useEffect(() => {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 7.2 KiB |
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png
generated
vendored
Normal file
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -12,11 +12,10 @@
|
||||
<p>For more information, consult the <a href="#root/_help_AlJ73vBCjWDw">dedicated page</a>.</p>
|
||||
<figure
|
||||
class="image">
|
||||
<img style="aspect-ratio:1150/27;" src="4_New Layout_image.png"
|
||||
<img style="aspect-ratio:1150/27;" src="5_New Layout_image.png"
|
||||
width="1150" height="27">
|
||||
</figure>
|
||||
|
||||
<h3>Inline title</h3>
|
||||
<h3>Inline title</h3>
|
||||
<p>In previous versions of Trilium, the title bar was fixed at all times.
|
||||
In the new layout, there is both a fixed title bar and one that scrolls
|
||||
with the text. The newly introduced title is called the <em>Inline title</em> and
|
||||
@ -38,45 +37,46 @@ class="image">
|
||||
can be scrolled past.</figcaption>
|
||||
</figure>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:910/104;" src="3_New Layout_image.png"
|
||||
<img style="aspect-ratio:910/104;" src="4_New Layout_image.png"
|
||||
width="910" height="104">
|
||||
<figcaption>The fixed title bar. The title only appears after scrolling past the <em>Inline title</em>.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h3>New note type switcher</h3>
|
||||
<h3>New note type switcher</h3>
|
||||
<p>When a new <a class="reference-link" href="#root/_help_iPIMuisry3hd">Text</a> or
|
||||
<a
|
||||
class="reference-link" href="#root/_help_6f9hih2hXXZk">Code</a> note is created, a note type switcher will appear below
|
||||
the <em>Inline title</em>. Apart from changing the note type, it's also
|
||||
possible to apply a <a href="#root/_help_KC1HB96bqqHX">template</a>.</p>
|
||||
<p>The switcher will disappear as soon as a text is entered.</p>
|
||||
<img src="5_New Layout_image.png"
|
||||
width="735" height="143">
|
||||
|
||||
<h3>Note badges</h3>
|
||||
<p>
|
||||
<img src="6_New Layout_image.png" width="735"
|
||||
height="143">
|
||||
</p>
|
||||
<h3>Note badges</h3>
|
||||
<p>Note badges appear near the fixed note title and indicate important information
|
||||
about the note such as whether it is read-only. Some of the badges are
|
||||
also interactive.</p>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:910/49;" src="2_New Layout_image.png"
|
||||
<img style="aspect-ratio:910/49;" src="3_New Layout_image.png"
|
||||
width="910" height="49">
|
||||
</figure>
|
||||
<p>The following badges are available:</p>
|
||||
<ul>
|
||||
<li><strong>Read-only badge</strong>, which will be shown if the note is not
|
||||
<li data-list-item-id="e27c647a2fb2066455e2838bb97b70f96"><strong>Read-only badge</strong>, which will be shown if the note is not
|
||||
editable due to either automatic read-only or manual read-only. Clicking
|
||||
on the badge will temporarily edit the note (similar to the Edit <a href="#root/_help_XpOYSgsLkTJy">floating button</a>).</li>
|
||||
<li><strong>Share badge</strong>, which will indicate that the current note
|
||||
<li
|
||||
data-list-item-id="ef60c0c30855b13cd03a90d8a8152290f"><strong>Share badge</strong>, which will indicate that the current note
|
||||
is shared. The badge will also indicate if the share is on the local network
|
||||
(for the desktop application without <a class="reference-link" href="#root/_help_cbkrhQjrkKrh">Synchronization</a> set
|
||||
up) or publicly accessible (for the server).</li>
|
||||
<li><strong>Web clip badge</strong>, which will indicate if the note was clipped
|
||||
using the <a class="reference-link" href="#root/_help_MtPxeAWVAzMg">Web Clipper</a>.
|
||||
The badge acts as a link, so it can be clicked on to navigate to the page
|
||||
or right clicked for more options.</li>
|
||||
<li><strong>Execute badge</strong>, for <a href="#root/_help_CdNpE2pqjmI6">scripts</a> or
|
||||
<a
|
||||
href="#root/_help_YKWqdJhzi2VY">saved SQL queries</a>which have an execute button or a description.</li>
|
||||
<li data-list-item-id="e612e0099e7c44dd0b0a2dfe41f00e7b4"><strong>Web clip badge</strong>, which will indicate if the note was clipped
|
||||
using the <a class="reference-link" href="#root/_help_MtPxeAWVAzMg">Web Clipper</a>.
|
||||
The badge acts as a link, so it can be clicked on to navigate to the page
|
||||
or right clicked for more options.</li>
|
||||
<li data-list-item-id="e8c8d943f232b9dcf2060b06b0e778d0a"><strong>Execute badge</strong>, for <a href="#root/_help_CdNpE2pqjmI6">scripts</a> or
|
||||
<a
|
||||
href="#root/_help_YKWqdJhzi2VY">saved SQL queries</a>which have an execute button or a description.</li>
|
||||
</ul>
|
||||
<p>Some of these badges replace the dedicated panels at the top of the note.</p>
|
||||
<h3>Collapsible sections</h3>
|
||||
@ -86,28 +86,52 @@ class="image">
|
||||
</figure>
|
||||
<p>The following sections have been made collapsible:</p>
|
||||
<ul>
|
||||
<li><em>Promoted Attributes</em>
|
||||
<li class="ck-list-marker-italic" data-list-item-id="ec19f54556602e6a0baf9b108ef006a7a"><em>Promoted Attributes</em>
|
||||
<ul>
|
||||
<li>For full-height notes such as <a class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a>,
|
||||
<li data-list-item-id="e2e83c3aa6052259f583dbc778ae706de">For full-height notes such as <a class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a>,
|
||||
the promoted attributes are collapsed by default to make room.</li>
|
||||
<li>The keyboard shortcut previously used to trigger the promoted attributes
|
||||
<li
|
||||
data-list-item-id="ed77db95ba33399a342c274c5efc85dd0">The keyboard shortcut previously used to trigger the promoted attributes
|
||||
ribbon tab (which was no longer working) has been repurposed to toggle
|
||||
the promoted attributes instead.</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><em>Edited Notes</em>, which appears for <a class="reference-link"
|
||||
<li data-list-item-id="eb36d11574ab53fb5df25a94b21e9b413"><em>Edited Notes</em>, which appears for <a class="reference-link"
|
||||
href="#root/_help_l0tKav7yLHGF">Day Notes</a> is now shown underneath the
|
||||
title.
|
||||
<ul>
|
||||
<li>Whether the section is collapsed or not depends on the choice in
|
||||
<li data-list-item-id="ee67e21f9cc7b41e82fdd4bc0be330655">Whether the section is collapsed or not depends on the choice in
|
||||
<a
|
||||
class="reference-link" href="#root/_help_4TIF1oA4VQRO">Options</a> → Appearance.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><em>Search Properties</em>, which appears for the full <a class="reference-link"
|
||||
<li data-list-item-id="e4f1d866d84dc1588e01f7a0073a8a98e"><em>Search Properties</em>, which appears for the full <a class="reference-link"
|
||||
href="#root/_help_eIg8jdvaoNNd">Search</a> and <a class="reference-link"
|
||||
href="#root/_help_m523cpzocqaD">Saved Search</a>.</li>
|
||||
</ul>
|
||||
<h3>Save status indicator</h3>
|
||||
<p>
|
||||
<img class="image-style-align-right" src="2_New Layout_image.png"
|
||||
width="168" height="47">To the right of the note title, a temporary indicators appears after making
|
||||
a change to the document that indicates whether the document has been saved.</p>
|
||||
<p>It indicates the following states:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e18b0ea6f55c8b55c58f2b58221b75a34">
|
||||
<p><em>Unsaved</em>, if the changes will be saved soon.</p>
|
||||
</li>
|
||||
<li data-list-item-id="ef4d7326f08098852c38c625f86fdefeb">
|
||||
<p><em>Saving</em>, if the changes are being saved.</p>
|
||||
</li>
|
||||
<li data-list-item-id="e3fe2056a826febd860d2a06d88a394db">
|
||||
<p><em>Saved</em>, if all the changes were successfully saved to the server.</p>
|
||||
</li>
|
||||
<li data-list-item-id="e414b330778bf4cf8c8bd92106f700a95">
|
||||
<p><em>Error</em>, if the changes could not be saved, for example due to
|
||||
a communication server with the server.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>After all changes have been saved, the indicator will hide automatically
|
||||
after a few seconds.</p>
|
||||
<h2>Changing to the existing layout</h2>
|
||||
<h3>Removal of the ribbon</h3>
|
||||
<p>The most significant change is the removal of the ribbon. All the actions
|
||||
@ -115,75 +139,78 @@ class="image">
|
||||
<p>Here's how all the different tabs that were once part of the ribbon are
|
||||
now available in the new layout:</p>
|
||||
<ul>
|
||||
<li>“Formatting toolbar” was relocated to the top of the page.
|
||||
<li data-list-item-id="e4e724a52193eec292b0132f498b28e2e">“Formatting toolbar” was relocated to the top of the page.
|
||||
<ul>
|
||||
<li>Instead of having one per split, now there is a single formatting toolbar
|
||||
<li data-list-item-id="ec9d8994f4abad721a94554a089f6c85b">Instead of having one per split, now there is a single formatting toolbar
|
||||
per tab. This allows more space for the toolbar items.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>“Owned attributes” and “Inherited attributes” were merged and moved to
|
||||
<li data-list-item-id="ebfad18074b46e3f162fbaa383882ae79">“Owned attributes” and “Inherited attributes” were merged and moved to
|
||||
the status bar region (displayed one above the other).</li>
|
||||
<li>“Basic Properties” were integrated in the <a class="reference-link"
|
||||
<li data-list-item-id="e3c5b46bc67b289baca06b1210c5b2ff1">“Basic Properties” were integrated in the <a class="reference-link"
|
||||
href="#root/_help_8YBEPzcpUgxw">Note buttons</a> menu.
|
||||
<ul>
|
||||
<li>The only exception here is the Language combo box which can now be found
|
||||
<li data-list-item-id="eee0c34be858b607f43d970bd478ee2ad">The only exception here is the Language combo box which can now be found
|
||||
in the status bar (top-right of the screen).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>“File” and “Image” tabs
|
||||
<li data-list-item-id="ea444f18eef5f56400f9aa537c243a135">“File” and “Image” tabs
|
||||
<ul>
|
||||
<li>The buttons were moved to the right of the note title, as dedicated entries
|
||||
<li data-list-item-id="e9a1870922341463cc637d249e237cfd3">The buttons were moved to the right of the note title, as dedicated entries
|
||||
in <a class="reference-link" href="#root/_help_8YBEPzcpUgxw">Note buttons</a>.</li>
|
||||
<li>The info section has been merged into the <em>Note info</em> section of
|
||||
<li
|
||||
data-list-item-id="eabde0c91d6c7fc44835221b14e7e27ae">The info section has been merged into the <em>Note info</em> section of
|
||||
the status bar.</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Edited notes
|
||||
<li data-list-item-id="e0ad47e6386b1a8df602021d9a971ea46">Edited notes
|
||||
<ul>
|
||||
<li>Moved underneath the title, displayed under a collapsible area and the
|
||||
<li data-list-item-id="e632ebb7cc4006257ae194245b014f9f0">Moved underneath the title, displayed under a collapsible area and the
|
||||
notes are represented as badges/chips.</li>
|
||||
<li>Whether the section is expanded or collapsed depends on the “Edited Notes
|
||||
<li data-list-item-id="e3954fdff89bbd93839a38b56fa522f2a">Whether the section is expanded or collapsed depends on the “Edited Notes
|
||||
ribbon tab will automatically open on day notes” setting from Options →
|
||||
Appearance.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Search definition tab
|
||||
<li data-list-item-id="e69502ea8c2f20c3ae5132d9122db4c62">Search definition tab
|
||||
<ul>
|
||||
<li>Moved underneath the title under a collapsible area.</li>
|
||||
<li>Expanded by default for new searches, collapsed for saved searches.</li>
|
||||
<li data-list-item-id="e80a71a94f6e1de008cd053cee6c88233">Moved underneath the title under a collapsible area.</li>
|
||||
<li data-list-item-id="e7e1ddae18168eceacf921be46f0c8ee5">Expanded by default for new searches, collapsed for saved searches.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The Note map is now available in the Note actions menu.
|
||||
<li data-list-item-id="e4084159f41b1ba0e29a827fb80eadb23">The Note map is now available in the Note actions menu.
|
||||
<ul>
|
||||
<li>Instead of opening into a panel in the ribbon, the note map now opens
|
||||
<li data-list-item-id="e193c55be765a3949a9578354c722ede5">Instead of opening into a panel in the ribbon, the note map now opens
|
||||
in a side split (similar to the in-app help).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>“Note info” tab was moved to a small (i) icon in the status bar.</li>
|
||||
<li>“Similar notes” tab
|
||||
<li data-list-item-id="eebd3e1c9108a38eb9658ffe75045422f">“Note info” tab was moved to a small (i) icon in the status bar.</li>
|
||||
<li
|
||||
data-list-item-id="e65f1a8b738e67ad6c4a6b9f27c926701">“Similar notes” tab
|
||||
<ul>
|
||||
<li>Moved to the status bar, by going to the “Note info” section and pressing
|
||||
<li data-list-item-id="ec9530445e061ad95879833d0c3818acc">Moved to the status bar, by going to the “Note info” section and pressing
|
||||
the button to show similar notes.</li>
|
||||
<li>Displayed as a fixed panel, similar to the attributes.</li>
|
||||
<li data-list-item-id="e4f55a13d7404cb1deb1135fa69d29292">Displayed as a fixed panel, similar to the attributes.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>The Collection properties tab were relocated under the note title and
|
||||
grouped into:
|
||||
<ul>
|
||||
<li>A combo box to quickly switch between views.</li>
|
||||
<li>Individual settings for the current view in a submenu.</li>
|
||||
</li>
|
||||
<li data-list-item-id="eae03caa575e445fff79d7515b37a865b">The Collection properties tab were relocated under the note title and
|
||||
grouped into:
|
||||
<ul>
|
||||
<li data-list-item-id="e239167382e9f975f1a4e173ab0765806">A combo box to quickly switch between views.</li>
|
||||
<li data-list-item-id="ebca89c6a405b4f5e0c2a0297b3bcdb7b">Individual settings for the current view in a submenu.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="ed0020506e136cf9e10339b8b43c0a871">Some smaller ribbon tabs were converted to badges that appear near the
|
||||
note title in the breadcrumb section:
|
||||
<ul>
|
||||
<li data-list-item-id="e3dd382eb6392e49f0dbb7a0424fd2967">Original URL indicator for clipped web pages (<code spellcheck="false">#pageUrl</code>).</li>
|
||||
<li
|
||||
data-list-item-id="e819c1d03763d1643af2b9da6695eccaa">SQL and script execute buttons.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Some smaller ribbon tabs were converted to badges that appear near the
|
||||
note title in the breadcrumb section:
|
||||
<ul>
|
||||
<li>Original URL indicator for clipped web pages (<code>#pageUrl</code>).</li>
|
||||
<li>SQL and script execute buttons.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
<aside class="admonition note">
|
||||
<p>The ribbon keyboard shortcuts (e.g. <code>toggleRibbonTabClassicEditor</code>)
|
||||
<p>The ribbon keyboard shortcuts (e.g. <code spellcheck="false">toggleRibbonTabClassicEditor</code>)
|
||||
have been repurposed to work on the new layout, where they will toggle
|
||||
the appropriate panel.</p>
|
||||
</aside>
|
||||
@ -192,11 +219,13 @@ class="image">
|
||||
the <a class="reference-link" href="#root/_help_8YBEPzcpUgxw">Note buttons</a> area,
|
||||
with the exception of:</p>
|
||||
<ul>
|
||||
<li>The Edit button is displayed near the note title, as a badge.</li>
|
||||
<li><em>Backlinks</em> is displayed in the status bar. When clicked, the same
|
||||
<li data-list-item-id="efe8209d6c6fd0e90b4cc1c8923fb1be7">The Edit button is displayed near the note title, as a badge.</li>
|
||||
<li
|
||||
data-list-item-id="ef5b93dbd5f2df8eaede5a71dbba00fcf"><em>Backlinks</em> is displayed in the status bar. When clicked, the same
|
||||
list of backlinks is displayed.</li>
|
||||
<li>Relation map zoom buttons are now part of the relation map itself.</li>
|
||||
<li>Export image to PNG/SVG are now in the Note actions menu, in the <em>Export as image</em> option.</li>
|
||||
<li data-list-item-id="e9ffa907f97720695d82b0f2463166478">Relation map zoom buttons are now part of the relation map itself.</li>
|
||||
<li
|
||||
data-list-item-id="e6406bd30bb1f1cbcb5f707c82cc8f4a6">Export image to PNG/SVG are now in the Note actions menu, in the <em>Export as image</em> option.</li>
|
||||
</ul>
|
||||
<h3>Changes to the sidebar</h3>
|
||||
<p>The sidebar (also known as the right pane) also received some important
|
||||
|
||||
102
docs/User Guide/!!!meta.json
vendored
102
docs/User Guide/!!!meta.json
vendored
@ -3642,7 +3642,7 @@
|
||||
"dataFileName": "1_New Layout_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "KvNAEoJjRhyr",
|
||||
"attachmentId": "a7dHjn9Uqvsc",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
@ -3650,7 +3650,7 @@
|
||||
"dataFileName": "2_New Layout_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "lEKxf6dYMG6u",
|
||||
"attachmentId": "KvNAEoJjRhyr",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
@ -3658,7 +3658,7 @@
|
||||
"dataFileName": "3_New Layout_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "SYOTVGCyx749",
|
||||
"attachmentId": "lEKxf6dYMG6u",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
@ -3666,12 +3666,20 @@
|
||||
"dataFileName": "4_New Layout_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "wCwzwfGspejR",
|
||||
"attachmentId": "SYOTVGCyx749",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "5_New Layout_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "wCwzwfGspejR",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "6_New Layout_image.png"
|
||||
}
|
||||
],
|
||||
"dirFileName": "New Layout",
|
||||
@ -9979,87 +9987,94 @@
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "iPIMuisry3hd",
|
||||
"value": "XJGJrpu7F9sh",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "0Ofbk1aSuVRu",
|
||||
"value": "iPIMuisry3hd",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "XpOYSgsLkTJy",
|
||||
"value": "0Ofbk1aSuVRu",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "wX4HbRucYSDD",
|
||||
"value": "XpOYSgsLkTJy",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "ODY7qQn5m2FT",
|
||||
"value": "wX4HbRucYSDD",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "mHbBMPDPkVV5",
|
||||
"value": "ODY7qQn5m2FT",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "6f9hih2hXXZk",
|
||||
"value": "mHbBMPDPkVV5",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "BlN9DFI679QC",
|
||||
"value": "6f9hih2hXXZk",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "0vhv7lsOLy82",
|
||||
"value": "BlN9DFI679QC",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "8YBEPzcpUgxw",
|
||||
"value": "0vhv7lsOLy82",
|
||||
"isInheritable": false,
|
||||
"position": 110
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "0ESUbbAxVnoK",
|
||||
"value": "8YBEPzcpUgxw",
|
||||
"isInheritable": false,
|
||||
"position": 120
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "nBAXQFj20hS1",
|
||||
"value": "0ESUbbAxVnoK",
|
||||
"isInheritable": false,
|
||||
"position": 130
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "nBAXQFj20hS1",
|
||||
"isInheritable": false,
|
||||
"position": 140
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
@ -10073,13 +10088,6 @@
|
||||
"value": "bx bx-file-blank",
|
||||
"isInheritable": false,
|
||||
"position": 140
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "XJGJrpu7F9sh",
|
||||
"isInheritable": false,
|
||||
"position": 150
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
@ -10152,47 +10160,47 @@
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bxs-file-pdf",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "IjZS7iK5EXtb",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "RnaPdbciOfeq",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "0vhv7lsOLy82",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "wy8So3yZZlH9",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "IjZS7iK5EXtb",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "RnaPdbciOfeq",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "R9pX4DGra2Vt",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bxs-file-pdf",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 7.2 KiB |
BIN
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png
vendored
Normal file
BIN
docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
@ -9,7 +9,7 @@ At the bottom of the window there is a new bar called the _Status bar_. This bar
|
||||
|
||||
For more information, consult the [dedicated page](New%20Layout/Status%20bar.md).
|
||||
|
||||
<figure class="image"><img style="aspect-ratio:1150/27;" src="4_New Layout_image.png" width="1150" height="27"></figure>
|
||||
<figure class="image"><img style="aspect-ratio:1150/27;" src="5_New Layout_image.png" width="1150" height="27"></figure>
|
||||
|
||||
### Inline title
|
||||
|
||||
@ -21,7 +21,7 @@ This only affects <a class="reference-link" href="../../Note%20Types/Text.md">T
|
||||
|
||||
Depending on the note type, the inline title will also present some more interactive options such as being able to switch the note type (see below).
|
||||
|
||||
<figure class="image"><img style="aspect-ratio:899/122;" src="New Layout_image.png" width="899" height="122"><figcaption>The <em>Inline title</em>, which is displayed at the top of the note and can be scrolled past.</figcaption></figure><figure class="image"><img style="aspect-ratio:910/104;" src="3_New Layout_image.png" width="910" height="104"><figcaption>The fixed title bar. The title only appears after scrolling past the <em>Inline title</em>.</figcaption></figure>
|
||||
<figure class="image"><img style="aspect-ratio:899/122;" src="New Layout_image.png" width="899" height="122"><figcaption>The <em>Inline title</em>, which is displayed at the top of the note and can be scrolled past.</figcaption></figure><figure class="image"><img style="aspect-ratio:910/104;" src="4_New Layout_image.png" width="910" height="104"><figcaption>The fixed title bar. The title only appears after scrolling past the <em>Inline title</em>.</figcaption></figure>
|
||||
|
||||
### New note type switcher
|
||||
|
||||
@ -29,13 +29,13 @@ When a new <a class="reference-link" href="../../Note%20Types/Text.md">Text</a>
|
||||
|
||||
The switcher will disappear as soon as a text is entered.
|
||||
|
||||
<img src="5_New Layout_image.png" width="735" height="143">
|
||||
<img src="6_New Layout_image.png" width="735" height="143">
|
||||
|
||||
### Note badges
|
||||
|
||||
Note badges appear near the fixed note title and indicate important information about the note such as whether it is read-only. Some of the badges are also interactive.
|
||||
|
||||
<figure class="image"><img style="aspect-ratio:910/49;" src="2_New Layout_image.png" width="910" height="49"></figure>
|
||||
<figure class="image"><img style="aspect-ratio:910/49;" src="3_New Layout_image.png" width="910" height="49"></figure>
|
||||
|
||||
The following badges are available:
|
||||
|
||||
@ -59,6 +59,19 @@ The following sections have been made collapsible:
|
||||
* Whether the section is collapsed or not depends on the choice in <a class="reference-link" href="Options.md">Options</a> → Appearance.
|
||||
* _Search Properties_, which appears for the full <a class="reference-link" href="../Navigation/Search.md">Search</a> and <a class="reference-link" href="../../Note%20Types/Saved%20Search.md">Saved Search</a>.
|
||||
|
||||
### Save status indicator
|
||||
|
||||
<img class="image-style-align-right" src="2_New Layout_image.png" width="168" height="47">To the right of the note title, a temporary indicators appears after making a change to the document that indicates whether the document has been saved.
|
||||
|
||||
It indicates the following states:
|
||||
|
||||
* _Unsaved_, if the changes will be saved soon.
|
||||
* _Saving_, if the changes are being saved.
|
||||
* _Saved_, if all the changes were successfully saved to the server.
|
||||
* _Error_, if the changes could not be saved, for example due to a communication server with the server.
|
||||
|
||||
After all changes have been saved, the indicator will hide automatically after a few seconds.
|
||||
|
||||
## Changing to the existing layout
|
||||
|
||||
### Removal of the ribbon
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user