diff --git a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx index 11026f65b..38951fe7d 100644 --- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx +++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx @@ -10,6 +10,7 @@ type Props = { onClick: () => void onDelete: () => void renameDescriptor: (label: string) => void + hideOptions: boolean } export const WorkspaceMenuItem: FunctionComponent = ({ @@ -17,6 +18,7 @@ export const WorkspaceMenuItem: FunctionComponent = ({ onClick, onDelete, renameDescriptor, + hideOptions, }) => { const [isRenaming, setIsRenaming] = useState(false) const inputRef = useRef(null) @@ -58,7 +60,7 @@ export const WorkspaceMenuItem: FunctionComponent = ({ ) : (
{descriptor.label}
)} - {descriptor.primary && ( + {descriptor.primary && !hideOptions && (
)} + {shouldShowWorkspaceSwitcher && ( + + )} ) diff --git a/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx b/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx new file mode 100644 index 000000000..f9f382d80 --- /dev/null +++ b/app/assets/javascripts/Components/ChallengeModal/LockscreenWorkspaceSwitcher.tsx @@ -0,0 +1,78 @@ +import { ApplicationGroup } from '@/UIModels/ApplicationGroup' +import { AppState } from '@/UIModels/AppState' +import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle' +import { FunctionComponent } from 'preact' +import { useEffect, useRef, useState } from 'preact/hooks' +import { WorkspaceSwitcherMenu } from '@/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu' +import { Button } from '@/Components/Button/Button' +import { Icon } from '@/Components/Icon' +import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside' + +type Props = { + mainApplicationGroup: ApplicationGroup + appState: AppState +} + +export const LockscreenWorkspaceSwitcher: FunctionComponent = ({ + mainApplicationGroup, + appState, +}) => { + const buttonRef = useRef(null) + const menuRef = useRef(null) + const containerRef = useRef(null) + const [isOpen, setIsOpen] = useState(false) + const [menuStyle, setMenuStyle] = useState() + + useCloseOnClickOutside(containerRef, () => setIsOpen(false)) + + const toggleMenu = () => { + if (!isOpen) { + const menuPosition = calculateSubmenuStyle(buttonRef.current) + if (menuPosition) { + setMenuStyle(menuPosition) + } + } + + setIsOpen(!isOpen) + } + + useEffect(() => { + if (isOpen) { + const timeToWaitBeforeCheckingMenuCollision = 0 + setTimeout(() => { + const newMenuPosition = calculateSubmenuStyle(buttonRef.current, menuRef.current) + + if (newMenuPosition) { + setMenuStyle(newMenuPosition) + } + }, timeToWaitBeforeCheckingMenuCollision) + } + }, [isOpen]) + + return ( +
+ + {isOpen && ( +
+ +
+ )} +
+ ) +} diff --git a/app/assets/javascripts/Components/Navigation/index.tsx b/app/assets/javascripts/Components/Navigation/index.tsx index 6f1d3e408..e29fe6ca0 100644 --- a/app/assets/javascripts/Components/Navigation/index.tsx +++ b/app/assets/javascripts/Components/Navigation/index.tsx @@ -6,7 +6,12 @@ import { ApplicationEvent, PrefKey } from '@standardnotes/snjs' import { observer } from 'mobx-react-lite' import { FunctionComponent } from 'preact' import { useCallback, useEffect, useMemo, useState } from 'preact/hooks' -import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer' +import { + PanelSide, + ResizeFinishCallback, + PanelResizer, + PanelResizeType, +} from '@/Components/PanelResizer' type Props = { application: WebApplication diff --git a/app/assets/javascripts/Components/NotesView/index.tsx b/app/assets/javascripts/Components/NotesView/index.tsx index 305b4d4ef..d0b7d1e26 100644 --- a/app/assets/javascripts/Components/NotesView/index.tsx +++ b/app/assets/javascripts/Components/NotesView/index.tsx @@ -10,7 +10,12 @@ import { NoAccountWarning } from '@/Components/NoAccountWarning' import { NotesList } from '@/Components/NotesList' import { NotesListOptionsMenu } from '@/Components/NotesList/NotesListOptionsMenu' import { SearchOptions } from '@/Components/SearchOptions' -import { PanelSide, ResizeFinishCallback, PanelResizer, PanelResizeType } from '@/Components/PanelResizer' +import { + PanelSide, + ResizeFinishCallback, + PanelResizer, + PanelResizeType, +} from '@/Components/PanelResizer' import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure' import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur' diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx index c07dded54..ce1be0b8a 100644 --- a/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx +++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Advanced.tsx @@ -1,5 +1,8 @@ import { FunctionalComponent } from 'preact' -import { PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents' +import { + PreferencesGroup, + PreferencesSegment, +} from '@/Components/Preferences/PreferencesComponents' import { OfflineSubscription } from '@/Components/Preferences/Panes/Account/OfflineSubscription' import { WebApplication } from '@/UIModels/Application' import { observer } from 'mobx-react-lite' diff --git a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx index b440a211e..b9d8822f8 100644 --- a/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx +++ b/app/assets/javascripts/Components/Preferences/Panes/Account/Subscription/Subscription.tsx @@ -1,4 +1,8 @@ -import { PreferencesGroup, PreferencesSegment, Title } from '@/Components/Preferences/PreferencesComponents' +import { + PreferencesGroup, + PreferencesSegment, + Title, +} from '@/Components/Preferences/PreferencesComponents' import { WebApplication } from '@/UIModels/Application' import { SubscriptionInformation } from './SubscriptionInformation' import { NoSubscription } from './NoSubscription' diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx index bd5f660b3..23f494f7c 100644 --- a/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx +++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/DataBackups.tsx @@ -17,7 +17,13 @@ import { JSXInternal } from 'preact/src/jsx' import TargetedEvent = JSXInternal.TargetedEvent import { AppState } from '@/UIModels/AppState' import { observer } from 'mobx-react-lite' -import { PreferencesGroup, PreferencesSegment, Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents' +import { + PreferencesGroup, + PreferencesSegment, + Title, + Text, + Subtitle, +} from '@/Components/Preferences/PreferencesComponents' import { Button } from '@/Components/Button/Button' type Props = { diff --git a/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx b/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx index 350c18801..769425131 100644 --- a/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx +++ b/app/assets/javascripts/Components/Preferences/Panes/Backups/EmailBackups.tsx @@ -3,7 +3,13 @@ import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Strings' import { useCallback, useEffect, useState } from 'preact/hooks' import { WebApplication } from '@/UIModels/Application' import { observer } from 'mobx-react-lite' -import { PreferencesGroup, PreferencesSegment, Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents' +import { + PreferencesGroup, + PreferencesSegment, + Subtitle, + Text, + Title, +} from '@/Components/Preferences/PreferencesComponents' import { Dropdown, DropdownItem } from '@/Components/Dropdown' import { Switch } from '@/Components/Switch' import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator' diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx index 887d4fe1f..b7e0a7771 100644 --- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx +++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx @@ -1,7 +1,12 @@ import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs' import { Button } from '@/Components/Button/Button' import { FunctionComponent } from 'preact' -import { Title, Text, Subtitle, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents' +import { + Title, + Text, + Subtitle, + PreferencesSegment, +} from '@/Components/Preferences/PreferencesComponents' export const ConfirmCustomExtension: FunctionComponent<{ component: SNComponent diff --git a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx index deae4da31..caec18d0a 100644 --- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx +++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx @@ -1,6 +1,10 @@ import { FunctionComponent } from 'preact' import { SNComponent } from '@standardnotes/snjs' -import { PreferencesSegment, SubtitleLight, Title } from '@/Components/Preferences/PreferencesComponents' +import { + PreferencesSegment, + SubtitleLight, + Title, +} from '@/Components/Preferences/PreferencesComponents' import { Switch } from '@/Components/Switch' import { WebApplication } from '@/UIModels/Application' import { useState } from 'preact/hooks' diff --git a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx index 4ac4ce7f8..bdb486b1b 100644 --- a/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx +++ b/app/assets/javascripts/Components/Preferences/Panes/Security/Encryption.tsx @@ -3,7 +3,12 @@ import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED } import { AppState } from '@/UIModels/AppState' import { observer } from 'mobx-react-lite' import { ComponentChild, FunctionComponent } from 'preact' -import { PreferencesGroup, PreferencesSegment, Text, Title } from '@/Components/Preferences/PreferencesComponents' +import { + PreferencesGroup, + PreferencesSegment, + Text, + Title, +} from '@/Components/Preferences/PreferencesComponents' const formatCount = (count: number, itemType: string) => `${count} / ${count} ${itemType}` diff --git a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx index c9ab5fbfc..0d842301a 100644 --- a/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx +++ b/app/assets/javascripts/Components/Preferences/Panes/TwoFactorAuth/TwoFactorAuthView.tsx @@ -1,5 +1,10 @@ import { FunctionComponent } from 'preact' -import { Title, Text, PreferencesGroup, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents' +import { + Title, + Text, + PreferencesGroup, + PreferencesSegment, +} from '@/Components/Preferences/PreferencesComponents' import { Switch } from '@/Components/Switch' import { observer } from 'mobx-react-lite' import { is2FAActivation, is2FADisabled, TwoFactorAuth } from './TwoFactorAuth'