prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1455 from omnivore-app/feat/delete-confirmation-preview

Browse source 
Show the being deleted item in the confirmation modal
This commit is contained in:
Jackson Harper 2022-11-24 17:21:36 +08:00 committed by GitHub
commit eb920eeae8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 109 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift
View file

@ -397,9 +397,9 @@ import Views
}
.padding(.top, 0)
.listStyle(PlainListStyle())
.alert("Are you sure you want to remove this item? All associated notes and highlights will be deleted.",
.alert("Are you sure you want to delete this item? All associated notes and highlights will be deleted.",
isPresented: $confirmationShown) {
Button("Remove Item") {
Button("Delete Item") {
if let itemToRemove = itemToRemove {
withAnimation {
viewModel.removeLink(dataService: dataService, objectID: itemToRemove.objectID)
@ -486,8 +486,8 @@ import Views
}
}
}
.alert("Are you sure you want to remove this item? All associated notes and highlights will be deleted.", isPresented: $confirmationShown) {
Button("Remove Item", role: .destructive) {
.alert("Are you sure you want to delete this item? All associated notes and highlights will be deleted.", isPresented: $confirmationShown) {
Button("Delete Item", role: .destructive) {
if let itemToRemove = itemToRemove {
withAnimation {
viewModel.removeLink(dataService: dataService, objectID: itemToRemove.objectID)

16
packages/web/components/elements/StyledText.tsx
View file

@ -52,9 +52,10 @@ const textVariants = {
margin: 0,
},
modalTitle: {
fontSize: '29px',
lineHeight: '37.7px',
color: '$textDefault',
fontSize: '16px',
fontWeight: '600',
color: '$grayText',
lineHeight: '1.50',
margin: 0,
},
boldText: {
@ -194,13 +195,10 @@ export const StyledList = styled('ul', {
color: '$grayTextContrast',
})
export const StyledImg = styled('img', {
})
export const StyledImg = styled('img', {})
export const StyledAnchor = styled('a', {
textDecoration: 'none'
textDecoration: 'none',
})
export const StyledMark = styled('mark', {
})
export const StyledMark = styled('mark', {})

7
packages/web/components/patterns/ConfirmationModal.tsx
View file

@ -11,6 +11,7 @@ import { useEffect, useRef } from 'react'
type ConfirmationModalProps = {
message?: string
richMessage?: React.ReactNode
icon?: React.ReactNode
acceptButtonLabel?: string
onAccept: () => void
@ -24,7 +25,11 @@ export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
<ModalContent css={{ bg: '$grayBg', maxWidth: '20em' }}>
<VStack alignment="center" distribution="center" css={{ p: '$2' }}>
{props.icon ? props.icon : null}
<StyledText>{props.message}</StyledText>
{props.richMessage ? (
props.richMessage
) : (
<StyledText>{props.message}</StyledText>
)}
<HStack distribution="center" css={{ pt: '$2' }}>
<Button
style="ctaOutlineYellow"

66
packages/web/components/patterns/DeleteItemConfirmationModal.tsx Normal file
View file

@ -0,0 +1,66 @@
import {
ModalRoot,
ModalContent,
ModalOverlay,
} from '../elements/ModalPrimitives'
import { VStack, HStack } from '../elements/LayoutPrimitives'
import { Button } from '../elements/Button'
import { StyledText } from '../elements/StyledText'
import { useConfirmListener } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
import { useEffect, useRef } from 'react'
type ConfirmationModalProps = {
message?: string
richMessage?: React.ReactNode
icon?: React.ReactNode
acceptButtonLabel?: string
onAccept: () => void
onOpenChange: (open: boolean) => void
}
export function DeleteItemConfirmationModal(
props: ConfirmationModalProps
): JSX.Element {
return (
<ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
<ModalOverlay />
<ModalContent css={{ bg: '$grayBg', maxWidth: '20em' }}>
<VStack alignment="center" distribution="end" css={{ p: '$2' }}>
{props.icon ? props.icon : null}
{props.richMessage ? (
props.richMessage
) : (
<StyledText>{props.message}</StyledText>
)}
<HStack distribution="end" css={{ pt: '$2' }}>
<Button
style="ctaOutlineYellow"
css={{ mr: '$2' }}
onClick={() => props.onOpenChange(false)}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault()
props.onOpenChange(false)
}
}}
>
Cancel
</Button>
<Button
style="ctaDarkYellow"
onClick={props.onAccept}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault()
props.onAccept()
}
}}
>
{props.acceptButtonLabel ?? 'Confirm'}
</Button>
</HStack>
</VStack>
</ModalContent>
</ModalRoot>
)
}

28
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View file

@ -1158,10 +1158,34 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
)}
{showRemoveLinkConfirmation && (
<ConfirmationModal
message={
'Are you sure you want to remove this item? All associated notes and highlights will be deleted.'
richMessage={
<VStack alignment="center" distribution="center">
<StyledText style="modalTitle" css={{ margin: '0px 8px' }}>
Are you sure you want to delete this item? All associated notes
and highlights will be deleted.
</StyledText>
{props.linkToRemove?.node && viewerData?.me && (
<Box
css={{
transform: 'scale(0.6)',
opacity: 0.8,
pointerEvents: 'none',
filter: 'grayscale(1)',
}}
>
<LinkedItemCard
item={props.linkToRemove?.node}
viewer={viewerData.me}
layout="GRID_LAYOUT"
// eslint-disable-next-line @typescript-eslint/no-empty-function
handleAction={() => {}}
/>
</Box>
)}
</VStack>
}
onAccept={removeItem}
acceptButtonLabel="Delete Item"
onOpenChange={() => setShowRemoveLinkConfirmation(false)}
/>
)}