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

chore: improve vault ui element sizing

Browse Source
This commit is contained in:
Aman Harwara
2023-09-08 20:00:32 +05:30
parent dfa994ee8d
commit 0447b450d7
4 changed files with 32 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,23 +30,23 @@ const ContactItem = ({ contact }: Props) => {
<EditContactModal editContactUuid={contact.contactUuid} onCloseDialog={closeContactModal} />
</ModalOverlay>
<div className="flex flex-row gap-3.5 rounded-lg px-3.5 py-2.5 border border-border shadow">
<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 py-1.5 overflow-hidden">
<div className="flex flex-col gap-1 overflow-hidden py-1.5">
<span
className={classNames(
'mr-auto overflow-hidden text-ellipsis text-base font-bold w-full',
'w-full overflow-hidden text-ellipsis text-base font-bold',
contact.isMe ? 'text-info' : '',
)}
>
{contact.name}
</span>
<span className="mr-auto overflow-hidden text-ellipsis text-sm w-full">{collaborationID}</span>
<span className="w-full overflow-hidden text-ellipsis text-sm">{collaborationID}</span>
<div className="mt-2.5 flex flex-row">
<Button label="Edit" className={'mr-3 text-xs'} onClick={() => setIsContactModalOpen(true)} />
{!contact.isMe && <Button label="Delete" className={'mr-3 text-xs'} onClick={deleteContact} />}
<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>
</div>
</div>

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

@@ -154,7 +154,7 @@ const Vaults = () => {
</div>
)}
<div className="mt-2.5 flex flex-row">
<Button label="Add New Contact" className={'mr-3 text-xs'} onClick={createNewContact} />
<Button label="Add New Contact" className="mr-3" onClick={createNewContact} />
</div>
</PreferencesSegment>
</PreferencesGroup>
@@ -172,7 +172,7 @@ const Vaults = () => {
)}
{canCreateMoreVaults ? (
<div className="mt-2.5 flex flex-row">
<Button label="Create New Vault" className={'mr-3 text-xs'} onClick={createNewVault} />
<Button label="Create New Vault" className="mr-3" onClick={createNewVault} />
</div>
) : (
<div className="mt-3.5">

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

@@ -141,36 +141,23 @@ const VaultItem = ({ vault }: Props) => {
<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" />
<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>
{vault.description && (
<span className="mr-auto overflow-hidden text-ellipsis text-sm">{vault.description}</span>
)}
<span className="mr-auto overflow-hidden text-ellipsis text-sm">Vault ID: {vault.systemIdentifier}</span>
<span className="overflow-hidden text-ellipsis text-base font-bold">{vault.name}</span>
{vault.description && <span className="overflow-hidden text-ellipsis text-sm">{vault.description}</span>}
<span className="overflow-hidden text-ellipsis text-sm">Vault ID: {vault.systemIdentifier}</span>
{!!vault.sharing?.fileBytesUsed && (
<span className="mr-auto overflow-hidden text-ellipsis text-sm">
<span className="overflow-hidden text-ellipsis text-sm">
File storage used: {formatSizeToReadableString(vault.sharing?.fileBytesUsed ?? 0)}
</span>
)}
<div className="mt-2 flex w-full flex-wrap gap-3">
<Button label="Edit" className="text-xs" onClick={openEditModal} />
{isVaultLockable && (
<Button label={isVaultLocked ? 'Unlock' : 'Lock'} className="text-xs" onClick={toggleLock} />
)}
{isAdmin && <Button colorStyle="danger" label="Delete" className="text-xs" onClick={deleteVault} />}
{!isAdmin && vault.isSharedVaultListing() && (
<Button label="Leave Vault" className="text-xs" onClick={leaveVault} />
)}
<Button label="Edit" onClick={openEditModal} />
{isVaultLockable && <Button label={isVaultLocked ? 'Unlock' : 'Lock'} onClick={toggleLock} />}
{isAdmin && <Button colorStyle="danger" label="Delete" onClick={deleteVault} />}
{!isAdmin && vault.isSharedVaultListing() && <Button label="Leave Vault" onClick={leaveVault} />}
{vault.isSharedVaultListing() ? (
<Button colorStyle="info" label="Invite Contacts" className="text-xs" onClick={openInviteModal} />
<Button colorStyle="info" label="Invite Contacts" onClick={openInviteModal} />
) : application.hasAccount() ? (
<Button
colorStyle="info"
label="Enable Collaboration"
className="text-xs"
onClick={convertToSharedVault}
/>
<Button colorStyle="info" label="Enable Collaboration" onClick={convertToSharedVault} />
) : null}
</div>
</div>

33
packages/web/src/javascripts/Components/Vaults/AddToVaultMenuOption.tsx
View File

@@ -61,12 +61,8 @@ const VaultMenu = observer(({ items }: { items: DecryptedItemInterface[] }) => {
void removeItemsFromVault()
}}
>
<span className="flex overflow-hidden overflow-ellipsis whitespace-nowrap">
<Icon type="close" className="mr-2 text-neutral" />
<div className="flex w-full items-center gap-1">
Move out of {singleItemVault ? singleItemVault.name : 'vaults'}
</div>
</span>
<Icon type="close" className="mr-2 text-neutral" />
Move out of {singleItemVault ? singleItemVault.name : 'vaults'}
</MenuItem>
)}
{!vaults.length && <div className="flex flex-col items-center justify-center py-1">No vaults found</div>}
@@ -81,23 +77,20 @@ const VaultMenu = observer(({ items }: { items: DecryptedItemInterface[] }) => {
onClick={() => {
doesVaultContainItems(vault) ? void removeItemsFromVault() : void addItemsToVault(vault)
}}
className={doesVaultContainItems(vault) ? 'font-bold' : ''}
>
<span
<Icon
type={vault.iconString}
size="custom"
className={classNames(
'flex overflow-ellipsis whitespace-nowrap',
doesVaultContainItems(vault) ? 'font-bold' : '',
'mr-2 h-6 w-6 text-neutral md:h-5 md:w-5',
doesVaultContainItems(vault) ? 'text-info' : '',
)}
>
<Icon
type={vault.iconString}
size="large"
className={classNames('mr-2 text-neutral', doesVaultContainItems(vault) ? 'text-info' : '')}
/>
<div className="flex w-full items-center">
{vault.name}
{application.vaultLocks.isVaultLocked(vault) && <Icon className="ml-1" type="lock" size={'small'} />}
</div>
</span>
/>
<div className="flex w-full items-center">
{vault.name}
{application.vaultLocks.isVaultLocked(vault) && <Icon className="ml-1" type="lock" size={'small'} />}
</div>
</MenuItem>
)
})}