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

chore: improve contacts list ui

Browse Source
This commit is contained in:
Aman Harwara
2023-09-11 14:02:32 +05:30
parent 5fc8f6e6a0
commit 98dff43ab5
2 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Contacts/ContactItem.tsx
View File

@@ -5,6 +5,8 @@ import { TrustedContactInterface, classNames } from '@standardnotes/snjs'
import EditContactModal from './EditContactModal'
import { useCallback, useState } from 'react'
import { useApplication } from '@/Components/ApplicationProvider'
import { VisuallyHidden } from '@ariakit/react'
import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
type Props = {
contact: TrustedContactInterface
@@ -30,9 +32,9 @@ const ContactItem = ({ contact }: Props) => {
<EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
</ModalOverlay>
<div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
<Icon type="user" size="custom" className="mt-2 h-5 w-5 flex-shrink-0" />
<div className="flex flex-col gap-1 overflow-hidden py-1.5">
<div className="flex items-start gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
<div className="grid grid-cols-[1fr,auto] grid-rows-2 place-items-center overflow-hidden [column-gap:0.875rem] [row-gap:0.25rem]">
<Icon type="user" size="custom" className="h-5 w-5 flex-shrink-0" />
<span
className={classNames(
'w-full overflow-hidden text-ellipsis text-base font-bold',
@@ -41,13 +43,25 @@ const ContactItem = ({ contact }: Props) => {
>
{contact.name}
</span>
<span className="w-full overflow-hidden text-ellipsis text-sm">{collaborationID}</span>
<div className="mt-1.5 flex flex-row">
<Button label="Edit" className="mr-3" onClick={() => setIsContactModalOpen(true)} />
{!contact.isMe && <Button label="Delete" className="mr-3" onClick={deleteContact} />}
</div>
<span className="col-start-2 w-full overflow-hidden text-ellipsis text-sm brightness-75">
{collaborationID}
</span>
</div>
<div className="flex gap-3">
<StyledTooltip label="Edit contact">
<Button className="!px-2 py-2" onClick={() => setIsContactModalOpen(true)}>
<VisuallyHidden>Edit</VisuallyHidden>
<Icon type="pencil-filled" size="medium" />
</Button>
</StyledTooltip>
{!contact.isMe && (
<StyledTooltip label="Delete contact">
<Button className="!px-2 py-2" onClick={deleteContact}>
<VisuallyHidden>Delete</VisuallyHidden>
<Icon type="trash-filled" className="text-danger" size="medium" />
</Button>
</StyledTooltip>
)}
</div>
</div>
</>

9
packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
View File

@@ -1,6 +1,6 @@
import { classNames } from '@standardnotes/snjs'
import { ReactNode, useState, useRef, useEffect } from 'react'
import { Tooltip, TooltipAnchor, TooltipOptions, useTooltipStore } from '@ariakit/react'
import { Tooltip, TooltipAnchor, TooltipOptions, TooltipStoreProps, useTooltipStore } from '@ariakit/react'
import { Slot } from '@radix-ui/react-slot'
import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
import { getPositionedPopoverStyles } from '../Popover/GetPositionedPopoverStyles'
@@ -14,6 +14,7 @@ const StyledTooltip = ({
showOnMobile = false,
showOnHover = true,
interactive = false,
type = 'label',
...props
}: {
children: ReactNode
@@ -22,6 +23,7 @@ const StyledTooltip = ({
showOnMobile?: boolean
showOnHover?: boolean
interactive?: boolean
type?: TooltipStoreProps['type']
} & Partial<TooltipOptions>) => {
const [forceOpen, setForceOpen] = useState<boolean | undefined>()
@@ -32,6 +34,7 @@ const StyledTooltip = ({
skipTimeout: 0,
open: forceOpen,
animated: true,
type,
})
const anchorRef = useRef<HTMLElement>(null)
@@ -84,8 +87,8 @@ const StyledTooltip = ({
autoFocusOnShow={!showOnHover}
store={tooltip}
className={classNames(
'z-tooltip max-w-max rounded border border-border translucent-ui:border-[--popover-border-color] bg-contrast translucent-ui:bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-3 py-1.5 text-sm text-foreground shadow',
'opacity-60 [&[data-enter]]:opacity-100 [&[data-leave]]:opacity-60 transition-opacity duration-75',
'z-tooltip max-w-max rounded border border-border bg-contrast px-3 py-1.5 text-sm text-foreground shadow [backdrop-filter:var(--popover-backdrop-filter)] translucent-ui:border-[--popover-border-color] translucent-ui:bg-[--popover-background-color]',
'opacity-60 transition-opacity duration-75 [&[data-enter]]:opacity-100 [&[data-leave]]:opacity-60',
'focus-visible:shadow-none focus-visible:outline-none',
className,
)}