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

chore: hide collaboration options if no account

Browse Source
This commit is contained in:
Aman Harwara
2023-09-08 19:14:41 +05:30
parent 5faeaaf330
commit 126e9abd9c
2 changed files with 63 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,6 +27,8 @@ import NoProSubscription from '../Account/NoProSubscription'
const Vaults = () => { const Vaults = () => {
const application = useApplication() const application = useApplication()
const hasAccount = application.hasAccount()
const [vaults, setVaults] = useState<VaultListingInterface[]>([]) const [vaults, setVaults] = useState<VaultListingInterface[]>([])
const [canCreateMoreVaults, setCanCreateMoreVaults] = useState(true) const [canCreateMoreVaults, setCanCreateMoreVaults] = useState(true)
const [invites, setInvites] = useState<InviteRecord[]>([]) const [invites, setInvites] = useState<InviteRecord[]>([])
@@ -140,21 +142,23 @@ const Vaults = () => {
</PreferencesGroup> </PreferencesGroup>
)} )}
<PreferencesGroup> {hasAccount && (
<PreferencesSegment> <PreferencesGroup>
<Title>Contacts</Title> <PreferencesSegment>
{contacts.length > 0 && ( <Title>Contacts</Title>
<div className="my-2 flex flex-col gap-3.5"> {contacts.length > 0 && (
{contacts.map((contact) => { <div className="my-2 flex flex-col gap-3.5">
return <ContactItem contact={contact} key={contact.uuid} /> {contacts.map((contact) => {
})} return <ContactItem contact={contact} key={contact.uuid} />
})}
</div>
)}
<div className="mt-2.5 flex flex-row">
<Button label="Add New Contact" className={'mr-3 text-xs'} onClick={createNewContact} />
</div> </div>
)} </PreferencesSegment>
<div className="mt-2.5 flex flex-row"> </PreferencesGroup>
<Button label="Add New Contact" className={'mr-3 text-xs'} onClick={createNewContact} /> )}
</div>
</PreferencesSegment>
</PreferencesGroup>
<PreferencesGroup> <PreferencesGroup>
<PreferencesSegment> <PreferencesSegment>
@@ -181,46 +185,48 @@ const Vaults = () => {
</PreferencesSegment> </PreferencesSegment>
</PreferencesGroup> </PreferencesGroup>
<PreferencesGroup> {hasAccount && (
<PreferencesSegment> <PreferencesGroup>
<Title>CollaborationID</Title> <PreferencesSegment>
<Subtitle>Share your CollaborationID with collaborators to join their vaults.</Subtitle> <Title>CollaborationID</Title>
{contactService.isCollaborationEnabled() ? ( <Subtitle>Share your CollaborationID with collaborators to join their vaults.</Subtitle>
<> {contactService.isCollaborationEnabled() ? (
<code className="mt-2.5 overflow-hidden whitespace-pre-wrap break-words rounded border border-border bg-contrast p-3"> <>
{contactService.getCollaborationID()} <code className="mt-2.5 overflow-hidden whitespace-pre-wrap break-words rounded border border-border bg-contrast p-3">
</code> {contactService.getCollaborationID()}
<Button </code>
label="Copy ID" <Button
className="mt-2" label="Copy ID"
onClick={async () => { className="mt-2"
try { onClick={async () => {
await navigator.clipboard.writeText(contactService.getCollaborationID()) try {
addToast({ await navigator.clipboard.writeText(contactService.getCollaborationID())
type: ToastType.Success, addToast({
message: 'Copied to clipboard', type: ToastType.Success,
}) message: 'Copied to clipboard',
} catch (error) { })
addToast({ } catch (error) {
type: ToastType.Error, addToast({
message: 'Failed to copy to clipboard', type: ToastType.Error,
}) message: 'Failed to copy to clipboard',
console.error(error) })
} console.error(error)
}} }
/> }}
</> />
) : ( </>
<div className="mt-2.5 flex flex-row"> ) : (
<Button <div className="mt-2.5 flex flex-row">
label="Enable Vault Sharing" <Button
className="mr-3 text-xs" label="Enable Vault Sharing"
onClick={() => contactService.enableCollaboration()} className="mr-3 text-xs"
/> onClick={() => contactService.enableCollaboration()}
</div> />
)} </div>
</PreferencesSegment> )}
</PreferencesGroup> </PreferencesSegment>
</PreferencesGroup>
)}
</PreferencesPane> </PreferencesPane>
) )
} }

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

@@ -138,7 +138,7 @@ const VaultItem = ({ vault }: Props) => {
<EditVaultModal existingVaultUuid={vault.uuid} onCloseDialog={closeVaultModal} /> <EditVaultModal existingVaultUuid={vault.uuid} onCloseDialog={closeVaultModal} />
</ModalOverlay> </ModalOverlay>
<div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow"> <div className="flex flex-row gap-3.5 rounded-lg border border-border px-3.5 py-2.5 shadow-sm">
<Icon type={vault.iconString} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" /> <Icon type={vault.iconString} size="custom" className="mt-2.5 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex flex-col gap-1.5 py-1.5"> <div className="flex flex-col gap-1.5 py-1.5">
<span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span> <span className="mr-auto overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>
@@ -164,14 +164,14 @@ const VaultItem = ({ vault }: Props) => {
)} )}
{vault.isSharedVaultListing() ? ( {vault.isSharedVaultListing() ? (
<Button colorStyle="info" label="Invite Contacts" className="text-xs" onClick={openInviteModal} /> <Button colorStyle="info" label="Invite Contacts" className="text-xs" onClick={openInviteModal} />
) : ( ) : application.hasAccount() ? (
<Button <Button
colorStyle="info" colorStyle="info"
label="Enable Collaboration" label="Enable Collaboration"
className="text-xs" className="text-xs"
onClick={convertToSharedVault} onClick={convertToSharedVault}
/> />
)} ) : null}
</div> </div>
</div> </div>
</div> </div>