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

style: tailwind classname sorting (#1169)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-28 13:37:38 +05:30
committed by GitHub
parent 15ca2d358b
commit ee5b6627da
159 changed files with 565 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -66,7 +66,7 @@ const ContentList: FunctionComponent<Props> = ({
return (
<div
className="infinite-scroll border-solid border-t border-border focus:shadow-none focus:outline-none"
className="infinite-scroll border-t border-solid border-border focus:shadow-none focus:outline-none"
id={ElementIds.ContentList}
onScroll={onScroll}
onKeyDown={onKeyDown}

8
packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
View File

@@ -53,7 +53,7 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
return (
<div
className={`content-list-item flex items-stretch w-full cursor-pointer text-text ${
className={`content-list-item flex w-full cursor-pointer items-stretch text-text ${
selected && 'selected border-l-2px border-solid border-info'
}`}
id={item.uuid}
@@ -64,14 +64,14 @@ const FileListItem: FunctionComponent<DisplayableListItemProps> = ({
}}
>
{!hideIcon ? (
<div className="flex flex-col items-center justify-between p-4.5 pr-3 mr-0">
<div className="mr-0 flex flex-col items-center justify-between p-4.5 pr-3">
<IconComponent />
</div>
) : (
<div className="pr-4" />
)}
<div className="flex-grow min-w-0 py-4 px-0 border-b border-solid border-border">
<div className="flex items-start justify-between font-semibold text-base leading-[1.3] overflow-hidden">
<div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
<div className="flex items-start justify-between overflow-hidden text-base font-semibold leading-[1.3]">
<div className="break-word mr-2">{item.title}</div>
</div>
<ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />

4
packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
View File

@@ -46,7 +46,7 @@ const ContentListHeader = ({
return (
<div className="section-title-bar-header gap-1">
<div className="flex flex-col flex-grow">
<div className="flex flex-grow flex-col">
<div className="text-lg font-semibold text-text">{panelTitle}</div>
{optionsSubtitle && <div className="text-xs text-passive-0">{optionsSubtitle}</div>}
</div>
@@ -72,7 +72,7 @@ const ContentListHeader = ({
</Disclosure>
</div>
<button
className="flex justify-center items-center min-w-8 h-8 ml-3 bg-info hover:brightness-125 text-info-contrast border border-solid border-transparent rounded-full cursor-pointer"
className="ml-3 flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent bg-info text-info-contrast hover:brightness-125"
title={addButtonLabel}
aria-label={addButtonLabel}
onClick={addNewItem}

18
packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
View File

@@ -99,22 +99,20 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
return (
<Menu
className={
'py-1 bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-70 overflow-y-auto \
border border-solid border-border text-sm z-index-dropdown-menu \
flex flex-col'
'slide-down-animation z-index-dropdown-menu flex min-w-70 flex-col overflow-y-auto rounded border border-solid border-border bg-default py-1 text-sm shadow-main transition-transform duration-150'
}
a11yLabel="Notes list options menu"
closeMenu={closeDisplayOptionsMenu}
isOpen={isOpen}
>
<div className="px-3 my-1 text-xs font-semibold text-text uppercase">Sort by</div>
<div className="my-1 px-3 text-xs font-semibold uppercase text-text">Sort by</div>
<MenuItem
className="py-2"
type={MenuItemType.RadioButton}
onClick={toggleSortByDateModified}
checked={sortBy === CollectionSort.UpdatedAt}
>
<div className="flex flex-grow items-center justify-between ml-2">
<div className="ml-2 flex flex-grow items-center justify-between">
<span>Date modified</span>
{sortBy === CollectionSort.UpdatedAt ? (
sortReverse ? (
@@ -131,7 +129,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
onClick={toggleSortByCreationDate}
checked={sortBy === CollectionSort.CreatedAt}
>
<div className="flex flex-grow items-center justify-between ml-2">
<div className="ml-2 flex flex-grow items-center justify-between">
<span>Creation date</span>
{sortBy === CollectionSort.CreatedAt ? (
sortReverse ? (
@@ -148,7 +146,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
onClick={toggleSortByTitle}
checked={sortBy === CollectionSort.Title}
>
<div className="flex flex-grow items-center justify-between ml-2">
<div className="ml-2 flex flex-grow items-center justify-between">
<span>Title</span>
{sortBy === CollectionSort.Title ? (
sortReverse ? (
@@ -160,7 +158,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
</div>
</MenuItem>
<MenuItemSeparator />
<div className="px-3 py-1 text-xs font-semibold text-text uppercase">View</div>
<div className="px-3 py-1 text-xs font-semibold uppercase text-text">View</div>
{!isFilesSmartView && (
<MenuItem
type={MenuItemType.SwitchButton}
@@ -168,7 +166,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
checked={!hidePreview}
onChange={toggleHidePreview}
>
<div className="flex flex-col max-w-3/4">Show note preview</div>
<div className="max-w-3/4 flex flex-col">Show note preview</div>
</MenuItem>
)}
<MenuItem
@@ -196,7 +194,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
Show icon
</MenuItem>
<MenuItemSeparator />
<div className="px-3 py-1 text-xs font-semibold text-text uppercase">Other</div>
<div className="px-3 py-1 text-xs font-semibold uppercase text-text">Other</div>
<MenuItem
type={MenuItemType.SwitchButton}
className="py-1 hover:bg-contrast focus:bg-info-backdrop"

6
packages/web/src/javascripts/Components/ContentListView/ListItemConflictIndicator.tsx
View File

@@ -9,9 +9,9 @@ type Props = {
const ListItemConflictIndicator: FunctionComponent<Props> = ({ item }) => {
return item.conflictOf ? (
<div className="flex flex-wrap items-center mt-0.5">
<div className={'py-1 px-1.5 rounded mr-1 mt-2 bg-danger text-danger-contrast'}>
<div className="text-xs font-bold text-center">Conflicted Copy</div>
<div className="mt-0.5 flex flex-wrap items-center">
<div className={'mr-1 mt-2 rounded bg-danger py-1 px-1.5 text-danger-contrast'}>
<div className="text-center text-xs font-bold">Conflicted Copy</div>
</div>
</div>
) : null

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

@@ -14,29 +14,29 @@ type Props = {
const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false }) => {
return (
<div className="flex items-start p-4 pl-0 border-b border-solid border-border">
<div className="flex items-start border-b border-solid border-border p-4 pl-0">
{item.locked && (
<span className="flex items-center" title="Editing Disabled">
<Icon ariaLabel="Editing Disabled" type="pencil-off" className="text-info" size="small" />
</span>
)}
{item.trashed && (
<span className="flex items-center ml-1.5" title="Trashed">
<span className="ml-1.5 flex items-center" title="Trashed">
<Icon ariaLabel="Trashed" type="trash-filled" className="text-danger" size="small" />
</span>
)}
{item.archived && (
<span className="flex items-center ml-1.5" title="Archived">
<span className="ml-1.5 flex items-center" title="Archived">
<Icon ariaLabel="Archived" type="archive" className="text-accessory-tint-3" size="medium" />
</span>
)}
{item.pinned && (
<span className="flex items-center ml-1.5" title="Pinned">
<span className="ml-1.5 flex items-center" title="Pinned">
<Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="small" />
</span>
)}
{hasFiles && (
<span className="flex items-center ml-1.5" title="Files">
<span className="ml-1.5 flex items-center" title="Files">
<Icon ariaLabel="Files" type="attachment-file" className="text-info" size="small" />
</span>
)}

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

@@ -20,7 +20,7 @@ const ListItemMetadata: FunctionComponent<Props> = ({ item, hideDate, sortBy })
}
return (
<div className="text-xs leading-1.4 mt-1 opacity-50">
<div className="leading-1.4 mt-1 text-xs opacity-50">
{item.protected && <span>Protected {hideDate ? '' : ' • '}</span>}
{!hideDate && showModifiedDate && <span>Modified {item.updatedAtString || 'Now'}</span>}
{!hideDate && !showModifiedDate && <span>{item.createdAtString || 'Now'}</span>}

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

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

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

@@ -45,7 +45,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
return (
<div
className={`content-list-item flex items-stretch w-full cursor-pointer text-text ${
className={`content-list-item flex w-full cursor-pointer items-stretch text-text ${
selected && 'selected border-l-2 border-solid border-info'
}`}
id={item.uuid}
@@ -58,14 +58,14 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
}}
>
{!hideIcon ? (
<div className="flex flex-col items-center justify-between p-4 pr-4 mr-0">
<div className="mr-0 flex flex-col items-center justify-between p-4 pr-4">
<Icon ariaLabel={`Icon for ${editorName}`} type={icon} className={`text-accessory-tint-${tint}`} />
</div>
) : (
<div className="pr-4" />
)}
<div className="flex-grow min-w-0 py-4 px-0 border-b border-solid border-border">
<div className="flex items-start justify-between font-semibold text-base leading-[1.3] overflow-hidden">
<div className="min-w-0 flex-grow border-b border-solid border-border py-4 px-0">
<div className="flex items-start justify-between overflow-hidden text-base font-semibold leading-[1.3]">
<div className="break-word mr-2">{item.title}</div>
</div>
{!hidePreview && !item.hidePreview && !item.protected && (
@@ -79,10 +79,10 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps> = ({
></div>
)}
{!item.preview_html && item.preview_plain && (
<div className="leading-1.3 overflow-hidden line-clamp-1 mt-1">{item.preview_plain}</div>
<div className="leading-1.3 line-clamp-1 mt-1 overflow-hidden">{item.preview_plain}</div>
)}
{!item.preview_html && !item.preview_plain && item.text && (
<div className="leading-1.3 overflow-hidden line-clamp-1 mt-1">{item.text}</div>
<div className="leading-1.3 line-clamp-1 mt-1 overflow-hidden">{item.text}</div>
)}
</div>
)}