diff --git a/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts b/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts
index 8738f3b77..be248a3ce 100644
--- a/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts
+++ b/packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts
@@ -36,6 +36,7 @@ export enum PrefKey {
MobileNotesHideEditorIcon = 'mobileHideEditorIcon',
NewNoteTitleFormat = 'newNoteTitleFormat',
CustomNoteTitleFormat = 'customNoteTitleFormat',
+ UpdateSavingStatusIndicator = 'updateSavingStatusIndicator',
}
export enum NewNoteTitleFormat {
@@ -97,4 +98,5 @@ export type PrefValue = {
[PrefKey.CustomNoteTitleFormat]: string
[PrefKey.EditorLineHeight]: EditorLineHeight
[PrefKey.EditorFontSize]: EditorFontSize
+ [PrefKey.UpdateSavingStatusIndicator]: boolean
}
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx b/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx
index 44cef026f..bd45ad662 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx
@@ -1,6 +1,8 @@
import { ElementIds } from '@/Constants/ElementIDs'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
import { classNames } from '@/Utils/ConcatenateClassNames'
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
+import { IconType, PrefKey } from '@standardnotes/snjs'
import Icon from '../Icon/Icon'
export type NoteStatus = {
@@ -9,58 +11,131 @@ export type NoteStatus = {
desc?: string
}
+const IndicatorWithTooltip = ({
+ className,
+ onClick,
+ onBlur,
+ icon,
+ isTooltipVisible,
+ children,
+ animateIcon = false,
+}: {
+ className: string
+ onClick: () => void
+ onBlur: () => void
+ icon: IconType
+ isTooltipVisible: boolean
+ children: ReactNode
+ animateIcon?: boolean
+}) => (
+
+
+
+ Note sync status
+
+
+ {children}
+
+
+)
+
type Props = {
status: NoteStatus | undefined
syncTakingTooLong: boolean
+ updateSavingIndicator?: boolean
}
-const NoteStatusIndicator = ({ status, syncTakingTooLong }: Props) => {
- const [shouldShowTooltip, setShouldShowTooltip] = useState(false)
+const NoteStatusIndicator = ({
+ status,
+ syncTakingTooLong,
+ updateSavingIndicator = PrefDefaults[PrefKey.UpdateSavingStatusIndicator],
+}: Props) => {
+ const [isTooltipVisible, setIsTooltipVisible] = useState(false)
- if (!status) {
+ const onClick = () => setIsTooltipVisible((show) => !show)
+ const onBlur = () => setIsTooltipVisible(false)
+
+ if (updateSavingIndicator && !status) {
return null
}
- return (
-
-
+ {status.message}
+ {status.desc && {status.desc}
}
+
+ )
+ }
+
+ if (syncTakingTooLong) {
+ return (
+
+ {status ? (
+ <>
+ {status.message}
+ {status.desc && {status.desc}
}
+ >
+ ) : (
+ Sync taking too long
+ )}
+
+ )
+ }
+
+ if (updateSavingIndicator && status) {
+ return (
+ setShouldShowTooltip((show) => !show)}
- onBlur={() => setShouldShowTooltip(false)}
- aria-describedby={ElementIds.NoteStatusTooltip}
+ onClick={onClick}
+ onBlur={onBlur}
+ icon={status.type === 'saving' ? 'sync' : 'check'}
+ animateIcon={status.type === 'saving'}
+ isTooltipVisible={isTooltipVisible}
>
-
- Note sync status
-
-
-
+
+ )
+ }
+
+ return (
+
+ Note status updates are disabled
+ They can be re-enabled in the Preferences under General > Tools
+
)
}
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
index 60ac4979b..2396843f5 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -87,6 +87,7 @@ type State = {
monospaceFont?: boolean
lineHeight?: EditorLineHeight
fontSize?: EditorFontSize
+ updateSavingIndicator?: boolean
}
const PlaintextFontSizeMapping: Record = {
@@ -718,6 +719,11 @@ class NoteView extends PureComponent {
const fontSize = this.application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize])
+ const updateSavingIndicator = this.application.getPreference(
+ PrefKey.UpdateSavingStatusIndicator,
+ PrefDefaults[PrefKey.UpdateSavingStatusIndicator],
+ )
+
await this.reloadSpellcheck()
this.setState({
@@ -725,6 +731,7 @@ class NoteView extends PureComponent {
marginResizersEnabled,
lineHeight,
fontSize,
+ updateSavingIndicator,
})
reloadFont(monospaceFont)
@@ -984,7 +991,11 @@ class NoteView extends PureComponent {
autoComplete="off"
/>
-
+
{!this.state.shouldStickyHeader && (
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx
index b65f6318c..d3650a8f8 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx
@@ -7,6 +7,7 @@ import { FunctionComponent, useState } from 'react'
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
import { PrefDefaults } from '@/Constants/PrefDefaults'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
type Props = {
application: WebApplication
@@ -22,6 +23,15 @@ const Tools: FunctionComponent
= ({ application }: Props) => {
application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error)
}
+ const [updateSavingIndicator, setUpdateSavingIndicator] = useState(() =>
+ application.getPreference(PrefKey.UpdateSavingStatusIndicator, PrefDefaults[PrefKey.UpdateSavingStatusIndicator]),
+ )
+
+ const toggleSavingIndicatorUpdates = () => {
+ setUpdateSavingIndicator(!updateSavingIndicator)
+ application.setPreference(PrefKey.UpdateSavingStatusIndicator, !updateSavingIndicator).catch(console.error)
+ }
+
return (
@@ -34,6 +44,17 @@ const Tools: FunctionComponent = ({ application }: Props) => {
+
+
+
+ Show note saving status while editing
+
+ Control whether the animated saving status is shown while editing. Error statuses are always shown
+ regardless of preference.
+
+
+
+
diff --git a/packages/web/src/javascripts/Constants/PrefDefaults.ts b/packages/web/src/javascripts/Constants/PrefDefaults.ts
index f7fcab7da..cec9e5c4f 100644
--- a/packages/web/src/javascripts/Constants/PrefDefaults.ts
+++ b/packages/web/src/javascripts/Constants/PrefDefaults.ts
@@ -26,4 +26,5 @@ export const PrefDefaults = {
[PrefKey.NoteAddToParentFolders]: true,
[PrefKey.NewNoteTitleFormat]: NewNoteTitleFormat.CurrentDateAndTime,
[PrefKey.CustomNoteTitleFormat]: 'YYYY-MM-DD [at] hh:mm A',
+ [PrefKey.UpdateSavingStatusIndicator]: true,
} as const