diff --git a/apps/client/src/components/note_context.ts b/apps/client/src/components/note_context.ts index 6c7b184ddf..afcaaf0918 100644 --- a/apps/client/src/components/note_context.ts +++ b/apps/client/src/components/note_context.ts @@ -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; diff --git a/apps/client/src/services/spaced_update.ts b/apps/client/src/services/spaced_update.ts index 938fceb004..3728ece78a 100644 --- a/apps/client/src/services/spaced_update.ts +++ b/apps/client/src/services/spaced_update.ts @@ -1,22 +1,30 @@ +import type { SaveState } from "../components/note_context"; +import { getErrorMessage } from "./utils"; + type Callback = () => Promise | 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(); diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 3fc4342c12..457f01eb60 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -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", diff --git a/apps/client/src/widgets/layout/NoteBadges.css b/apps/client/src/widgets/layout/NoteBadges.css index 8de12b8107..ec163da6f2 100644 --- a/apps/client/src/widgets/layout/NoteBadges.css +++ b/apps/client/src/widgets/layout/NoteBadges.css @@ -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 { diff --git a/apps/client/src/widgets/layout/NoteBadges.tsx b/apps/client/src/widgets/layout/NoteBadges.tsx index 245f231999..b4fba9e28a 100644 --- a/apps/client/src/widgets/layout/NoteBadges.tsx +++ b/apps/client/src/widgets/layout/NoteBadges.tsx @@ -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 (
+ @@ -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 ( + + ); +} diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 4b499dd5ae..7fade29b97 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -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(eventNames: T[], handler: useDebugValue(() => eventNames.join(", ")); } -export function useSpacedUpdate(callback: () => void | Promise, interval = 1000) { +export function useSpacedUpdate(callback: () => void | Promise, interval = 1000, stateCallback?: StateCallback) { const callbackRef = useRef(callback); + const stateCallbackRef = useRef(stateCallback); const spacedUpdateRef = useRef(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((state) => { + noteContext?.setContextData("saveState", { + state + }); + }, [ noteContext ]); + const spacedUpdate = useSpacedUpdate(callback, updateInterval, stateCallback); // React to note/blob changes. useEffect(() => { diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png index 10676a08ef..efd435a32d 100644 Binary files a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png differ diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png index b4452f6952..10676a08ef 100644 Binary files a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png differ diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png index 4a2f36ae2e..b4452f6952 100644 Binary files a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png differ diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png index ca7593700b..4a2f36ae2e 100644 Binary files a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png differ diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png new file mode 100644 index 0000000000..ca7593700b Binary files /dev/null and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png differ diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.html index 32e170fa69..71a2dba500 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.html @@ -12,11 +12,10 @@

For more information, consult the dedicated page.

-
- -

Inline title

+

Inline title

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 Inline title and @@ -38,45 +37,46 @@ class="image"> can be scrolled past.

-
The fixed title bar. The title only appears after scrolling past the Inline title.
- -

New note type switcher

+

New note type switcher

When a new Text or  Code note is created, a note type switcher will appear below the Inline title. Apart from changing the note type, it's also possible to apply a template.

The switcher will disappear as soon as a text is entered.

- - -

Note badges

+

+ +

+

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.

-

The following badges are available:

    -
  • Read-only badge, which will be shown if the note is not +
  • Read-only badge, 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 floating button).
    • -
  • Share badge, which will indicate that the current note +
  • Share badge, 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 Synchronization set up) or publicly accessible (for the server).
    • -
  • Web clip badge, which will indicate if the note was clipped - using the Web Clipper. - The badge acts as a link, so it can be clicked on to navigate to the page - or right clicked for more options.
    • -
  • Execute badge, for scripts or - saved SQL querieswhich have an execute button or a description.
    • +
  • Web clip badge, which will indicate if the note was clipped + using the Web Clipper. + The badge acts as a link, so it can be clicked on to navigate to the page + or right clicked for more options.
    • +
  • Execute badge, for scripts or + saved SQL querieswhich have an execute button or a description.

Some of these badges replace the dedicated panels at the top of the note.

Collapsible sections

@@ -86,28 +86,52 @@ class="image">

The following sections have been made collapsible:

    -
  • Promoted Attributes +
  • Promoted Attributes
      -
    • For full-height notes such as Canvas, +
    • For full-height notes such as Canvas, the promoted attributes are collapsed by default to make room.
      • -
    • The keyboard shortcut previously used to trigger the promoted attributes +
    • 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.
      • -
    +
-
  • Edited Notes, which appears for Edited Notes, which appears for Day Notes is now shown underneath the title.
      -
    • Whether the section is collapsed or not depends on the choice in  +
    • Whether the section is collapsed or not depends on the choice in  Options → Appearance.
    • -
  • Search Properties, which appears for the full Search Properties, which appears for the full Search and Saved Search.
    • +

    Save status indicator

    +

    + 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

    The most significant change is the removal of the ribbon. All the actions @@ -115,75 +139,78 @@ class="image">

    Here's how all the different tabs that were once part of the ribbon are now available in the new layout:

      -
    • “Formatting toolbar” was relocated to the top of the page. +
    • “Formatting toolbar” was relocated to the top of the page.
        -
      • Instead of having one per split, now there is a single formatting toolbar +
      • Instead of having one per split, now there is a single formatting toolbar per tab. This allows more space for the toolbar items.
      • -
    • “Owned attributes” and “Inherited attributes” were merged and moved to +
    • “Owned attributes” and “Inherited attributes” were merged and moved to the status bar region (displayed one above the other).
      • -
    • “Basic Properties” were integrated in the “Basic Properties” were integrated in the Note buttons menu.
        -
      • The only exception here is the Language combo box which can now be found +
      • The only exception here is the Language combo box which can now be found in the status bar (top-right of the screen).
      • -
    • “File” and “Image” tabs +
    • “File” and “Image” tabs
        -
      • The buttons were moved to the right of the note title, as dedicated entries +
      • The buttons were moved to the right of the note title, as dedicated entries in Note buttons.
        • -
      • The info section has been merged into the Note info section of +
      • The info section has been merged into the Note info section of the status bar.
        • -
      +
    -
  • Edited notes +
  • Edited notes
      -
    • Moved underneath the title, displayed under a collapsible area and the +
    • Moved underneath the title, displayed under a collapsible area and the notes are represented as badges/chips.
      • -
    • Whether the section is expanded or collapsed depends on the “Edited Notes +
    • Whether the section is expanded or collapsed depends on the “Edited Notes ribbon tab will automatically open on day notes” setting from Options → Appearance.
    • -
  • Search definition tab +
  • Search definition tab
      -
    • Moved underneath the title under a collapsible area.
      • -
    • Expanded by default for new searches, collapsed for saved searches.
      • +
    • Moved underneath the title under a collapsible area.
      • +
    • Expanded by default for new searches, collapsed for saved searches.
    • -
  • The Note map is now available in the Note actions menu. +
  • The Note map is now available in the Note actions menu.
      -
    • Instead of opening into a panel in the ribbon, the note map now opens +
    • Instead of opening into a panel in the ribbon, the note map now opens in a side split (similar to the in-app help).
    • -
  • “Note info” tab was moved to a small (i) icon in the status bar.
    • -
  • “Similar notes” tab +
  • “Note info” tab was moved to a small (i) icon in the status bar.
    • +
  • “Similar notes” tab
      -
    • Moved to the status bar, by going to the “Note info” section and pressing +
    • Moved to the status bar, by going to the “Note info” section and pressing the button to show similar notes.
      • -
    • Displayed as a fixed panel, similar to the attributes.
      • +
    • Displayed as a fixed panel, similar to the attributes.
    -
    • -
  • The Collection properties tab were relocated under the note title and - grouped into: -
      -
    • A combo box to quickly switch between views.
      • -
    • Individual settings for the current view in a submenu.
      • + +
    • The Collection properties tab were relocated under the note title and + grouped into: +
        +
      • A combo box to quickly switch between views.
        • +
      • Individual settings for the current view in a submenu.
        • +
      +
      • +
    • Some smaller ribbon tabs were converted to badges that appear near the + note title in the breadcrumb section: +
        +
      • Original URL indicator for clipped web pages (#pageUrl).
        • +
      • SQL and script execute buttons.
      -
      • -
    • Some smaller ribbon tabs were converted to badges that appear near the - note title in the breadcrumb section: -
        -
      • Original URL indicator for clipped web pages (#pageUrl).
        • -
      • SQL and script execute buttons.
        • -
      -
      • +
    @@ -192,11 +219,13 @@ class="image"> the Note buttons area, with the exception of:

      -
    • The Edit button is displayed near the note title, as a badge.
      • -
    • Backlinks is displayed in the status bar. When clicked, the same +
    • The Edit button is displayed near the note title, as a badge.
      • +
    • Backlinks is displayed in the status bar. When clicked, the same list of backlinks is displayed.
      • -
    • Relation map zoom buttons are now part of the relation map itself.
      • -
    • Export image to PNG/SVG are now in the Note actions menu, in the Export as image option.
      • +
    • Relation map zoom buttons are now part of the relation map itself.
      • +
    • Export image to PNG/SVG are now in the Note actions menu, in the Export as image option.

    Changes to the sidebar

    The sidebar (also known as the right pane) also received some important diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json index 2553f6e558..272c4dbfe0 100644 --- a/docs/User Guide/!!!meta.json +++ b/docs/User Guide/!!!meta.json @@ -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", diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png index 10676a08ef..efd435a32d 100644 Binary files a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/2_New Layout_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png index b4452f6952..10676a08ef 100644 Binary files a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/3_New Layout_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png index 4a2f36ae2e..b4452f6952 100644 Binary files a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/4_New Layout_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png index ca7593700b..4a2f36ae2e 100644 Binary files a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/5_New Layout_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png new file mode 100644 index 0000000000..ca7593700b Binary files /dev/null and b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/6_New Layout_image.png differ diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md index 160258a30b..3f30c6ee55 100644 --- a/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md +++ b/docs/User Guide/User Guide/Basic Concepts and Features/UI Elements/New Layout.md @@ -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). -

    +
    ### Inline title @@ -21,7 +21,7 @@ This only affects 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). -
    The Inline title, which is displayed at the top of the note and can be scrolled past.
    The fixed title bar. The title only appears after scrolling past the Inline title.
    +
    The Inline title, which is displayed at the top of the note and can be scrolled past.
    The fixed title bar. The title only appears after scrolling past the Inline title.
    ### New note type switcher @@ -29,13 +29,13 @@ When a new     Text The switcher will disappear as soon as a text is entered. - + ### 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. -
    +
    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 Options → Appearance. * _Search Properties_, which appears for the full Search and Saved Search. +### Save status indicator + +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