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

chore: minor vaults ui improvements

Browse Source
This commit is contained in:
Aman Harwara
2023-08-07 15:36:26 +05:30
parent ee473fe34d
commit e2215f9a1f
6 changed files with 111 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import Button from '@/Components/Button/Button'
import Icon from '@/Components/Icon/Icon'
import ModalOverlay from '@/Components/Modal/ModalOverlay'
import { TrustedContactInterface } from '@standardnotes/snjs'
import { TrustedContactInterface, classNames } from '@standardnotes/snjs'
import EditContactModal from './EditContactModal'
import { useCallback, useState } from 'react'
import { useApplication } from '@/Components/ApplicationProvider'
@@ -28,15 +28,19 @@ const ContactItem = ({ contact }: Props) => {
<EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
</ModalOverlay>
<div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 shadow-md">
<Icon type={'user'} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-2 py-1.5">
<div className="bg-gray-100 flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
<Icon type="user" size="custom" className="mt-2 h-5 w-5 flex-shrink-0" />
<div className="flex flex-col gap-1 py-1.5 overflow-hidden">
<span
className={`mr-auto overflow-hidden text-ellipsis text-base font-bold ${contact.isMe ? 'text-info' : ''}`}
className={classNames(
'mr-auto overflow-hidden text-ellipsis text-base font-bold w-full',
contact.isMe ? 'text-info' : '',
)}
>
{contact.name}
</span>
<span className="mr-auto overflow-hidden text-ellipsis text-sm">{collaborationID}</span>
<span className="mr-auto overflow-hidden text-ellipsis text-sm w-full">{collaborationID}</span>
<div className="mt-2.5 flex flex-row">
<Button label="Edit" className={'mr-3 text-xs'} onClick={() => setIsContactModalOpen(true)} />

35
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults.tsx
View File

@@ -19,6 +19,8 @@ import VaultItem from './Vaults/VaultItem'
import Button from '@/Components/Button/Button'
import InviteItem from './Invites/InviteItem'
import EditVaultModal from './Vaults/VaultModal/EditVaultModal'
import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
import { ToastType, addToast } from '@standardnotes/toast'
const Vaults = () => {
const application = useApplication()
@@ -94,7 +96,7 @@ const Vaults = () => {
}, [])
return (
<>
<PreferencesPane>
<ModalOverlay isOpen={isAddContactModalOpen} close={closeAddContactModal}>
<EditContactModal onCloseDialog={closeAddContactModal} />
</ModalOverlay>
@@ -147,23 +149,42 @@ const Vaults = () => {
<Title>CollaborationID</Title>
<Subtitle>Share your CollaborationID with collaborators to join their vaults.</Subtitle>
{contactService.isCollaborationEnabled() ? (
<div className="mt-2.5 flex flex-row">
<code>
<pre>{contactService.getCollaborationID()}</pre>
<>
<code className="mt-2.5 overflow-hidden whitespace-pre-wrap break-words p-3 border border-border rounded bg-contrast">
{contactService.getCollaborationID()}
</code>
</div>
<Button
label="Copy ID"
className="mt-2"
onClick={async () => {
try {
await navigator.clipboard.writeText(contactService.getCollaborationID())
addToast({
type: ToastType.Success,
message: 'Copied to clipboard',
})
} catch (error) {
addToast({
type: ToastType.Error,
message: 'Failed to copy to clipboard',
})
console.error(error)
}
}}
/>
</>
) : (
<div className="mt-2.5 flex flex-row">
<Button
label="Enable Vault Sharing"
className={'mr-3 text-xs'}
className="mr-3 text-xs"
onClick={() => contactService.enableCollaboration()}
/>
</div>
)}
</PreferencesSegment>
</PreferencesGroup>
</>
</PreferencesPane>
)
}