rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: protected overlay on mobile (#1621)

Browse Source
This commit is contained in:
Aman Harwara
2022-09-23 16:16:04 +05:30
committed by GitHub
parent 696327ff03
commit 51e50433d3
3 changed files with 38 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/web/src/javascripts/Components/FileView/FileView.tsx
View File

@@ -28,16 +28,12 @@ const FileView = ({ application, viewControllerManager, file }: FileViewProps) =
}, [application, file])
return shouldShowProtectedOverlay ? (
<div aria-label="Note" className="section editor sn-component">
<div className="flex h-full items-center justify-center">
<ProtectedItemOverlay
viewControllerManager={viewControllerManager}
hasProtectionSources={application.hasProtectionSources()}
onViewItem={dismissProtectedOverlay}
itemType={'note'}
/>
</div>
</div>
<ProtectedItemOverlay
viewControllerManager={viewControllerManager}
hasProtectionSources={application.hasProtectionSources()}
onViewItem={dismissProtectedOverlay}
itemType={'file'}
/>
) : (
<FileViewWithoutProtection application={application} viewControllerManager={viewControllerManager} file={file} />
)

18
packages/web/src/javascripts/Components/NoteView/NoteView.tsx
View File

@@ -874,18 +874,12 @@ class NoteView extends PureComponent<NoteViewProps, State> {
override render() {
if (this.state.showProtectedWarning) {
return (
<div aria-label="Note" className="section editor sn-component">
{this.state.showProtectedWarning && (
<div className="flex h-full items-center justify-center">
<ProtectedItemOverlay
viewControllerManager={this.viewControllerManager}
hasProtectionSources={this.application.hasProtectionSources()}
onViewItem={this.dismissProtectedWarning}
itemType={'note'}
/>
</div>
)}
</div>
<ProtectedItemOverlay
viewControllerManager={this.viewControllerManager}
hasProtectionSources={this.application.hasProtectionSources()}
onViewItem={this.dismissProtectedWarning}
itemType={'note'}
/>
)
}

44
packages/web/src/javascripts/Components/ProtectedItemOverlay/ProtectedItemOverlay.tsx
View File

@@ -1,5 +1,6 @@
import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
import Button from '@/Components/Button/Button'
import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
type Props = {
viewControllerManager: ViewControllerManager
@@ -14,24 +15,31 @@ const ProtectedItemOverlay = ({ viewControllerManager, onViewItem, hasProtection
: `Add a passcode or create an account to require authentication to view this ${itemType}.`
return (
<div className="flex max-w-md flex-col items-center justify-center text-center">
<h1 className="m-0 w-full text-2xl font-bold">This {itemType} is protected</h1>
<p className="mt-2 w-full text-lg">{instructionText}</p>
<div className="mt-4 flex gap-3">
{!hasProtectionSources && (
<Button
primary
small
onClick={() => {
viewControllerManager.accountMenuController.setShow(true)
}}
>
Open account menu
</Button>
)}
<Button small onClick={onViewItem}>
{hasProtectionSources ? 'Authenticate' : `View ${itemType}`}
</Button>
<div aria-label="Protected overlay" className="section editor sn-component">
<div className="flex h-full flex-grow flex-col justify-center md:flex-row md:items-center">
<div className="mb-auto p-4 md:hidden">
<MobileItemsListButton />
</div>
<div className="mb-auto flex max-w-md flex-col items-center justify-center text-center md:mb-0">
<h1 className="m-0 w-full text-2xl font-bold">This {itemType} is protected</h1>
<p className="mt-2 w-full text-lg">{instructionText}</p>
<div className="mt-4 flex gap-3">
{!hasProtectionSources && (
<Button
primary
small
onClick={() => {
viewControllerManager.accountMenuController.setShow(true)
}}
>
Open account menu
</Button>
)}
<Button small onClick={onViewItem}>
{hasProtectionSources ? 'Authenticate' : `View ${itemType}`}
</Button>
</div>
</div>
</div>
</div>
)