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

chore: edit vault modal ui fixes

Browse Source
This commit is contained in:
Aman Harwara
2023-08-08 22:44:29 +05:30
parent 9b66c2f9f7
commit ebffb6e901
2 changed files with 86 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/EditVaultModal.tsx
View File

@@ -221,84 +221,81 @@ const EditVaultModal: FunctionComponent<Props> = ({ onCloseDialog, existingVault
setShouldShowIconPicker((shouldShow) => !shouldShow) setShouldShowIconPicker((shouldShow) => !shouldShow)
}, []) }, [])
const canShowMembers =
members.length > 0 && !members.every((member) => application.vaultUsers.isVaultUserOwner(member))
if (existingVault && application.vaultLocks.isVaultLocked(existingVault)) { if (existingVault && application.vaultLocks.isVaultLocked(existingVault)) {
return <div>Vault is locked.</div> return <div>Vault is locked.</div>
} }
return ( return (
<Modal title={existingVault ? 'Edit Vault' : 'Create New Vault'} close={handleDialogClose} actions={modalActions}> <Modal title={existingVault ? 'Edit Vault' : 'Create New Vault'} close={handleDialogClose} actions={modalActions}>
<div className="px-4.5 pb-1.5 pt-4"> <div className="px-4.5 pb-1.5 pt-4 flex w-full flex-col">
<div className="flex w-full flex-col"> <div className="mb-3">
<div className="mb-3"> <div className="text-lg">Vault Info</div>
<div className="text-lg">Vault Info</div> <div className="mt-1">The vault name and description are end-to-end encrypted.</div>
<div className="mt-1">The vault name and description are end-to-end encrypted.</div>
<div className="flex items-center mt-4 gap-4">
<StyledTooltip className="!z-modal" label="Choose icon">
<Button className="!px-1.5" ref={iconPickerButtonRef} onClick={toggleIconPicker}>
<Icon type={iconString} />
</Button>
</StyledTooltip>
<Popover
title="Choose icon"
open={shouldShowIconPicker}
anchorElement={iconPickerButtonRef.current}
togglePopover={toggleIconPicker}
align="start"
overrideZIndex="z-modal"
hideOnClickInModal
>
<div className="p-2">
<IconPicker
selectedValue={iconString || 'safe-square'}
onIconChange={(value?: VectorIconNameOrEmoji) => {
setIconString(value ?? 'safe-square')
toggleIconPicker()
}}
platform={application.platform}
useIconGrid={true}
/>
</div>
</Popover>
<DecoratedInput
className={{
container: 'flex-grow',
}}
ref={nameInputRef}
value={name}
placeholder="Vault Name"
onChange={(value) => {
setName(value)
}}
/>
</div>
<div className="flex items-center mt-4 gap-4">
<StyledTooltip className="!z-modal" label="Choose icon">
<Button className="!px-1.5" ref={iconPickerButtonRef} onClick={toggleIconPicker}>
<Icon type={iconString} />
</Button>
</StyledTooltip>
<Popover
title="Choose icon"
open={shouldShowIconPicker}
anchorElement={iconPickerButtonRef.current}
togglePopover={toggleIconPicker}
align="start"
overrideZIndex="z-modal"
hideOnClickInModal
>
<div className="p-2">
<IconPicker
selectedValue={iconString || 'safe-square'}
onIconChange={(value?: VectorIconNameOrEmoji) => {
setIconString(value ?? 'safe-square')
toggleIconPicker()
}}
platform={application.platform}
useIconGrid={true}
/>
</div>
</Popover>
<DecoratedInput <DecoratedInput
className={{ container: 'mt-4' }} className={{
value={description} container: 'flex-grow',
placeholder="Vault description" }}
ref={nameInputRef}
value={name}
placeholder="Vault Name"
onChange={(value) => { onChange={(value) => {
setDescription(value) setName(value)
}} }}
/> />
</div> </div>
{existingVault && ( <DecoratedInput
<VaultModalMembers vault={existingVault} members={members} onChange={reloadVaultInfo} isAdmin={isAdmin} /> className={{ container: 'mt-4' }}
)} value={description}
placeholder="Vault description"
{existingVault && invites.length > 0 && ( onChange={(value) => {
<VaultModalInvites invites={invites} onChange={reloadVaultInfo} isAdmin={isAdmin} /> setDescription(value)
)} }}
<PasswordTypePreference
value={passwordType}
onChange={setPasswordType}
onCustomKeyChange={setCustomPassword}
/> />
<KeyStoragePreference value={keyStorageMode} onChange={setKeyStorageMode} />
</div> </div>
{existingVault && canShowMembers && (
<VaultModalMembers vault={existingVault} members={members} onChange={reloadVaultInfo} isAdmin={isAdmin} />
)}
{existingVault && invites.length > 0 && (
<VaultModalInvites invites={invites} onChange={reloadVaultInfo} isAdmin={isAdmin} />
)}
<PasswordTypePreference value={passwordType} onChange={setPasswordType} onCustomKeyChange={setCustomPassword} />
<KeyStoragePreference value={keyStorageMode} onChange={setKeyStorageMode} />
</div> </div>
</Modal> </Modal>
) )

51
packages/web/src/javascripts/Components/Preferences/Panes/Vaults/Vaults/VaultModal/VaultModalInvites.tsx
View File

@@ -26,34 +26,35 @@ export const VaultModalInvites = ({
return ( return (
<div className="mb-3"> <div className="mb-3">
<div className="mb-3 text-lg">Pending Invites</div> <div className="mb-3 text-lg">Pending Invites</div>
{invites.map((invite) => { <div className="flex flex-col gap-3">
const contact = application.contacts.findContactForInvite(invite) {invites.map((invite) => {
return ( const contact = application.contacts.findContactForInvite(invite)
<div key={invite.uuid} className="flex gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow"> return (
<Icon type="user" size="custom" className="mt-2 h-5.5 w-5.5 flex-shrink-0" /> <div key={invite.uuid} className="flex gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
<div className="flex flex-col gap-2 py-1.5"> <Icon type="user" size="custom" className="mt-2 h-5.5 w-5.5 flex-shrink-0" />
<div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold"> <div className="flex flex-col gap-2 py-1.5">
<span>{contact?.name || invite.user_uuid}</span> <div className="flex items-center gap-2 overflow-hidden text-ellipsis text-base font-bold">
{contact ? ( <span>{contact?.name || invite.user_uuid}</span>
<div className="flex items-center bg-success text-success-contrast rounded gap-1 text-xs px-1 py-0.5"> {contact ? (
<Icon type="check-circle" size="small" /> <div className="flex items-center bg-success text-success-contrast rounded gap-1 text-xs px-1 py-0.5">
Trusted <Icon type="check-circle" size="small" />
</div> Trusted
) : ( </div>
<div className="flex items-center bg-danger text-danger-contrast rounded gap-1 text-xs px-1 pr-1.5 py-0.5"> ) : (
<Icon type="clear-circle-filled" size="small" /> <div className="flex items-center bg-danger text-danger-contrast rounded gap-1 text-xs px-1 pr-1.5 py-0.5">
Untrusted <Icon type="clear-circle-filled" size="small" />
</div> Untrusted
</div>
)}
</div>
{isAdmin && (
<Button label="Cancel Invite" className="mt-1 mr-3 text-xs" onClick={() => deleteInvite(invite)} />
)} )}
</div> </div>
{isAdmin && (
<Button label="Cancel Invite" className="mt-1 mr-3 text-xs" onClick={() => deleteInvite(invite)} />
)}
</div> </div>
</div> )
) })}
})} </div>
</div> </div>
) )
} }