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

chore: improve note view vault info style (#2488)

Browse Source
This commit is contained in:
Aman Harwara
2023-09-08 17:49:30 +05:30
committed by GitHub
parent 25c0d655ab
commit 7c5f5c82a1
9 changed files with 77 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
View File

@@ -17,7 +17,7 @@ const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
<div className="mt-1.5 flex flex-wrap gap-2 overflow-hidden text-sm lg:text-xs">
{tags.map((tag) => (
<span
className="inline-flex items-center rounded-sm bg-passive-4-opacity-variant px-1.5 py-1 text-foreground"
className="inline-flex items-center rounded bg-passive-4-opacity-variant px-1.5 py-1 text-foreground"
key={tag.uuid}
>
<Icon type={tag.iconString} className="mr-1 text-passive-1" size="small" />

12
packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
View File

@@ -1,8 +1,8 @@
import { FunctionComponent } from 'react'
import { useApplication } from '../ApplicationProvider'
import Icon from '../Icon/Icon'
import { DecryptedItemInterface, classNames } from '@standardnotes/snjs'
import VaultNameBadge from '../Vaults/VaultNameBadge'
import SharedByContactBadge from '../Vaults/SharedByContactBadge'
type Props = {
item: DecryptedItemInterface
@@ -30,15 +30,7 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item, className }) => {
return (
<div className={classNames('flex flex-wrap items-center gap-2', className)}>
<VaultNameBadge vault={vault} />
{sharedByContact && (
<div title="Shared by contact" className="rounded bg-info px-1.5 py-1 text-neutral-contrast">
<span className="flex items-center" title="Shared by contact">
<Icon ariaLabel="Shared by contact" type="archive" className="mr-1 text-info-contrast" size="medium" />
<div className="text-center text-xs font-bold">{sharedByContact?.name}</div>
</span>
</div>
)}
{sharedByContact && <SharedByContactBadge contact={sharedByContact} />}
</div>
)
}

7
packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
View File

@@ -13,6 +13,9 @@ import { FOCUS_TAGS_INPUT_COMMAND, keyboardStringForShortcut } from '@standardno
import { useCommandService } from '../CommandProvider'
import { useItemLinks } from '@/Hooks/useItemLinks'
import RoundIconButton from '../Button/RoundIconButton'
import VaultNameBadge from '../Vaults/VaultNameBadge'
import LastEditedByBadge from '../Vaults/LastEditedByBadge'
import { useItemVaultInfo } from '@/Hooks/useItemVaultInfo'
type Props = {
linkingController: LinkingController
@@ -161,6 +164,8 @@ const LinkedItemBubblesContainer = ({
const shouldHideToggle = hideToggle || (!canShowContainerToggle && !isCollapsed)
const { vault, lastEditedByContact } = useItemVaultInfo(item)
if (readonly && itemsToDisplay.length === 0) {
return null
}
@@ -183,6 +188,8 @@ const LinkedItemBubblesContainer = ({
)}
ref={setLinkContainer}
>
{!!vault && <VaultNameBadge vault={vault} />}
{!!lastEditedByContact && <LastEditedByBadge contact={lastEditedByContact} />}
{visibleItems.map((link) => (
<LinkedItemBubble
link={link}

25
packages/web/src/javascripts/Components/NoteView/CollaborationInfoHUD.tsx
View File

@@ -1,41 +1,24 @@
import { FunctionComponent } from 'react'
import Icon from '../Icon/Icon'
import { useApplication } from '../ApplicationProvider'
import { DecryptedItemInterface } from '@standardnotes/snjs'
import VaultNameBadge from '../Vaults/VaultNameBadge'
import LastEditedByBadge from '../Vaults/LastEditedByBadge'
import { useItemVaultInfo } from '@/Hooks/useItemVaultInfo'
type Props = {
item: DecryptedItemInterface
}
const CollaborationInfoHUD: FunctionComponent<Props> = ({ item }) => {
const application = useApplication()
const { vault, lastEditedByContact } = useItemVaultInfo(item)
if (!application.featuresController.isEntitledToVaults()) {
return null
}
if (application.items.isTemplateItem(item)) {
return null
}
const vault = application.vaults.getItemVault(item)
if (!vault) {
return null
}
const lastEditedBy = application.sharedVaults.getItemLastEditedBy(item)
return (
<div className="flex flex-wrap items-start gap-2">
<VaultNameBadge vault={vault} />
{lastEditedBy && (
<div title="Last edited by" className="flex select-none rounded bg-info px-1.5 py-1 text-info-contrast">
<Icon ariaLabel="Shared by" type="pencil" className="mr-1 text-info-contrast" size="medium" />
<span className="mr-auto overflow-hidden text-ellipsis text-xs">{lastEditedBy?.name}</span>
</div>
)}
{lastEditedByContact && <LastEditedByBadge contact={lastEditedByContact} />}
</div>
)
}

4
packages/web/src/javascripts/Components/NoteView/NoteView.tsx
View File

@@ -911,7 +911,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
)}
{renderHeaderOptions && (
<div className="note-view-options-buttons flex items-center gap-3">
<CollaborationInfoHUD item={this.note} />
<LinkedItemsButton
linkingController={this.application.linkingController}
onClickPreprocessing={this.ensureNoteIsInsertedBeforeUIAction}
@@ -931,6 +930,9 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
</div>
)}
</div>
<div className="mb-1 mt-2.5 md:hidden">
<CollaborationInfoHUD item={this.note} />
</div>
<div className="hidden md:block">
<LinkedItemBubblesContainer item={this.note} linkingController={this.application.linkingController} />
</div>

16
packages/web/src/javascripts/Components/Vaults/LastEditedByBadge.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { TrustedContactInterface } from '@standardnotes/models'
import Icon from '../Icon/Icon'
const LastEditedByBadge = ({ contact }: { contact: TrustedContactInterface }) => {
return (
<div
title="Last edited by"
className="flex select-none items-center rounded bg-info px-1.5 py-1 text-info-contrast"
>
<Icon ariaLabel="Shared by" type="pencil" className="mr-1 text-info-contrast" size="medium" />
<span className="mr-auto overflow-hidden text-ellipsis text-sm font-semibold lg:text-xs">{contact.name}</span>
</div>
)
}
export default LastEditedByBadge

13
packages/web/src/javascripts/Components/Vaults/SharedByContactBadge.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { TrustedContactInterface } from '@standardnotes/models'
import Icon from '../Icon/Icon'
const SharedByContactBadge = ({ contact }: { contact: TrustedContactInterface }) => {
return (
<div title="Shared by contact" className="flex items-center rounded bg-info px-1.5 py-1 text-neutral-contrast">
<Icon ariaLabel="Shared by contact" type="archive" className="mr-1 text-info-contrast" size="medium" />
<div className="text-center text-sm font-semibold lg:text-xs">{contact.name}</div>
</div>
)
}
export default SharedByContactBadge

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

@@ -10,7 +10,7 @@ const VaultNameBadge: FunctionComponent<Props> = ({ vault }) => {
return (
<div
title="Vault name"
className="flex items-center rounded bg-success px-1.5 py-1 text-success-contrast select-none"
className="flex select-none items-center rounded bg-success px-1.5 py-1 text-success-contrast"
>
<Icon
ariaLabel="Shared in vault"
@@ -19,7 +19,7 @@ const VaultNameBadge: FunctionComponent<Props> = ({ vault }) => {
size="medium"
emojiSize="small"
/>
<span className="mr-auto overflow-hidden text-ellipsis text-xs">{vault.name}</span>
<span className="mr-auto overflow-hidden text-ellipsis text-sm font-semibold lg:text-xs">{vault.name}</span>
</div>
)
}

29
packages/web/src/javascripts/Hooks/useItemVaultInfo.ts Normal file
View File

@@ -0,0 +1,29 @@
import { useApplication } from '@/Components/ApplicationProvider'
import { DecryptedItemInterface, TrustedContactInterface, VaultListingInterface } from '@standardnotes/snjs'
type ItemVaultInfo = {
vault?: VaultListingInterface
lastEditedByContact?: TrustedContactInterface
}
export const useItemVaultInfo = (item: DecryptedItemInterface): ItemVaultInfo => {
const application = useApplication()
const info: ItemVaultInfo = {
vault: undefined,
lastEditedByContact: undefined,
}
if (!application.featuresController.isEntitledToVaults()) {
return info
}
if (application.items.isTemplateItem(item)) {
return info
}
info.vault = application.vaults.getItemVault(item)
info.lastEditedByContact = application.sharedVaults.getItemLastEditedBy(item)
return info
}