rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 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]) }, [application, file])
return shouldShowProtectedOverlay ? ( return shouldShowProtectedOverlay ? (
<div aria-label="Note" className="section editor sn-component"> <ProtectedItemOverlay
<div className="flex h-full items-center justify-center"> viewControllerManager={viewControllerManager}
<ProtectedItemOverlay hasProtectionSources={application.hasProtectionSources()}
viewControllerManager={viewControllerManager} onViewItem={dismissProtectedOverlay}
hasProtectionSources={application.hasProtectionSources()} itemType={'file'}
onViewItem={dismissProtectedOverlay} />
itemType={'note'}
/>
</div>
</div>
) : ( ) : (
<FileViewWithoutProtection application={application} viewControllerManager={viewControllerManager} file={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() { override render() {
if (this.state.showProtectedWarning) { if (this.state.showProtectedWarning) {
return ( return (
<div aria-label="Note" className="section editor sn-component"> <ProtectedItemOverlay
{this.state.showProtectedWarning && ( viewControllerManager={this.viewControllerManager}
<div className="flex h-full items-center justify-center"> hasProtectionSources={this.application.hasProtectionSources()}
<ProtectedItemOverlay onViewItem={this.dismissProtectedWarning}
viewControllerManager={this.viewControllerManager} itemType={'note'}
hasProtectionSources={this.application.hasProtectionSources()} />
onViewItem={this.dismissProtectedWarning}
itemType={'note'}
/>
</div>
)}
</div>
) )
} }

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

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