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

fix: make modals mobile-friendly (#1337)

Browse Source
This commit is contained in:
Aman Harwara
2022-07-25 20:18:24 +05:30
committed by GitHub
parent 36288ad36a
commit 7b6b2bc5b1
11 changed files with 91 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
View File

@@ -46,7 +46,7 @@ const HistoryListContainer: FunctionComponent<Props> = ({ features, noteHistoryC
}
return (
<div className={'flex h-full min-w-60 flex-col overflow-auto border-r border-solid border-border'}>
<div className={'flex h-full flex-grow flex-col overflow-auto border-r border-solid border-border'}>
<div className="flex border-b border-solid border-border">
<TabButton type={RevisionType.Remote} />
<TabButton type={RevisionType.Session} />

15
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
View File

@@ -1,20 +1,12 @@
import { getPlatformString } from '@/Utils'
import { DialogOverlay, DialogContent } from '@reach/dialog'
import { ReactNode } from 'react'
import styled from 'styled-components'
type Props = {
children: ReactNode
onDismiss: () => void
}
const StyledDialogContent = styled(DialogContent)`
width: 90%;
max-width: 90%;
min-height: 90%;
background: var(--modal-background-color);
`
const HistoryModalDialog = ({ children, onDismiss }: Props) => {
return (
<DialogOverlay
@@ -22,9 +14,12 @@ const HistoryModalDialog = ({ children, onDismiss }: Props) => {
onDismiss={onDismiss}
aria-label="Note revision history"
>
<StyledDialogContent aria-label="Note revision history" className="rounded-md p-0 shadow-lg">
<DialogContent
aria-label="Note revision history"
className="my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)] p-0 shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]"
>
<div className="flex h-full flex-col overflow-hidden bg-default">{children}</div>
</StyledDialogContent>
</DialogContent>
</DialogOverlay>
)
}

47
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
View File

@@ -5,6 +5,8 @@ import { RevisionHistoryModalContentProps } from './RevisionHistoryModalProps'
import HistoryModalFooter from './HistoryModalFooter'
import HistoryModalContentPane from './HistoryModalContentPane'
import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
import Icon from '../Icon/Icon'
import { classNames } from '@/Utils/ConcatenateClassNames'
const HistoryModalDialogContent = ({
application,
@@ -16,11 +18,52 @@ const HistoryModalDialogContent = ({
}: RevisionHistoryModalContentProps) => {
const [noteHistoryController] = useState(() => new NoteHistoryController(application, note, selectionController))
const [selectedMobileTab, setSelectedMobileTab] = useState<'List' | 'Content'>('Content')
return (
<>
<div className="flex items-center border-b border-border md:hidden">
<button
className={classNames(
'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
selectedMobileTab === 'List' ? 'font-medium text-info shadow-bottom' : 'text-text',
)}
onClick={() => {
setSelectedMobileTab('List')
}}
>
List
</button>
<button
className={classNames(
'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
selectedMobileTab === 'Content' ? 'font-medium text-info shadow-bottom' : 'text-text',
)}
onClick={() => {
setSelectedMobileTab('Content')
}}
>
Content
</button>
<button className="ml-auto mr-2 rounded-full border border-border p-1.5" onClick={dismissModal}>
<Icon type="close" className="h-4 w-4" />
</button>
</div>
<div className="flex min-h-0 flex-grow">
<HistoryListContainer features={application.features} noteHistoryController={noteHistoryController} />
<div className="relative flex flex-grow flex-col">
<div
className={classNames(
'w-full md:flex md:w-auto md:min-w-60',
selectedMobileTab === 'List' ? 'flex' : 'hidden',
)}
>
<HistoryListContainer features={application.features} noteHistoryController={noteHistoryController} />
</div>
<div
className={classNames(
'relative flex-grow flex-col md:flex',
selectedMobileTab === 'Content' ? 'flex' : 'hidden',
)}
>
<HistoryModalContentPane
application={application}
noteHistoryController={noteHistoryController}

18
packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalFooter.tsx
View File

@@ -41,20 +41,22 @@ const HistoryModalFooter = ({ dismissModal, noteHistoryController }: Props) => {
}, [deleteRemoteRevision, selectedEntry])
return (
<div className="min-h-6 flex flex-shrink-0 items-center justify-between border-t border-solid border-border px-2.5 py-2">
<div>
<Button className="py-1.35" label="Close" onClick={dismissModal} />
</div>
<div className="min-h-6 flex flex-shrink-0 flex-wrap items-center gap-2.5 border-t border-solid border-border px-2.5 py-2 md:justify-between">
<Button className="py-1.35" label="Close" onClick={dismissModal} />
{selectedRevision && (
<div className="flex items-center">
<>
{(selectedEntry as RevisionListEntry).uuid && (
<Button className="mr-2.5" onClick={deleteSelectedRevision}>
<Button className="md:ml-auto" onClick={deleteSelectedRevision}>
{isDeletingRevision ? <Spinner className="my-1 h-3 w-3" /> : 'Delete this revision'}
</Button>
)}
<Button className="mr-2.5" label="Restore as a copy" onClick={restoreAsCopy} />
<Button
className={!(selectedEntry as RevisionListEntry).uuid ? 'md:ml-auto' : ''}
label="Restore as a copy"
onClick={restoreAsCopy}
/>
<Button className="" label="Restore version" onClick={restoreSelectedRevision} primary />
</div>
</>
)}
</div>
)