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

chore: make note pinned status more prominent

Browse Source
This commit is contained in:
Aman Harwara
2023-05-18 15:20:32 +05:30
parent 9d22b8bfa1
commit dac719dc5a
2 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
View File

@@ -40,11 +40,6 @@ const ListItemFlagIcons: FunctionComponent<Props> = ({
<Icon ariaLabel="Archived" type="archive" className="text-accessory-tint-3" size="medium" /> <Icon ariaLabel="Archived" type="archive" className="text-accessory-tint-3" size="medium" />
</span> </span>
)} )}
{item.pinned && (
<span className="ml-1.5 flex items-center" title="Pinned">
<Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="medium" />
</span>
)}
{hasFiles && ( {hasFiles && (
<span className="ml-1.5 flex items-center" title="Files"> <span className="ml-1.5 flex items-center" title="Files">
<Icon ariaLabel="Files" type="attachment-file" className="text-info" size="medium" /> <Icon ariaLabel="Files" type="attachment-file" className="text-info" size="medium" />

23
packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx
View File

@@ -1,14 +1,23 @@
import { FunctionComponent } from 'react' import { FunctionComponent } from 'react'
import { ListableContentItem } from './Types/ListableContentItem' import { ListableContentItem } from './Types/ListableContentItem'
import Icon from '../Icon/Icon'
export const ListItemTitle: FunctionComponent<{ item: ListableContentItem }> = ({ item }) => { export const ListItemTitle: FunctionComponent<{ item: ListableContentItem }> = ({ item }) => {
return ( return (
<div <>
className={`break-word mr-2 flex items-start justify-between overflow-hidden text-lg font-semibold leading-[1.3] lg:text-base lg:leading-[1.3] ${ {item.pinned && (
item.archived ? 'opacity-60' : '' <div className="mb-2 inline-flex items-center gap-0.5 rounded bg-info py-1 px-1.5 text-[0.65rem] leading-3 text-info-contrast">
}`} <Icon type="pin-filled" className="h-3 w-3" size="custom" />
> Pinned
{item.title} </div>
</div> )}
<div
className={`break-word mr-2 flex items-start justify-between overflow-hidden text-lg font-semibold leading-[1.3] lg:text-base lg:leading-[1.3] ${
item.archived ? 'opacity-60' : ''
}`}
>
{item.title}
</div>
</>
) )
} }