Skip to content

feature: tiled note list display option #2976

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
s-h-a-d-o-w wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feature: tiled note list display option #2976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/models/src/Domain/Syncable/UserPrefs/PrefDefaults.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const PrefDefaults = {
[PrefKey.NotesHideDate]: false,
[PrefKey.NotesHideTags]: false,
[PrefKey.NotesHideEditorIcon]: false,
[PrefKey.NotesListLayout]: 'rows',
[PrefKey.DEPRECATED_UseSystemColorScheme]: false,
[PrefKey.DEPRECATED_UseTranslucentUI]: true,
[PrefKey.DEPRECATED_AutoLightThemeIdentifier]: 'Default',
Expand Down
2 changes: 2 additions & 0 deletions packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export enum PrefKey {
NotesHideDate = 'hideDate',
NotesHideTags = 'hideTags',
NotesHideEditorIcon = 'hideEditorIcon',
NotesListLayout = 'notesListLayout',
NoteAddToParentFolders = 'noteAddToParentFolders',
NewNoteTitleFormat = 'newNoteTitleFormat',
CustomNoteTitleFormat = 'customNoteTitleFormat',
Expand Down Expand Up @@ -73,6 +74,7 @@ export type PrefValue = {
[PrefKey.NotesHideDate]: boolean
[PrefKey.NotesHideTags]: boolean
[PrefKey.NotesHideEditorIcon]: boolean
[PrefKey.NotesListLayout]: 'rows' | 'tiles'
[PrefKey.DEPRECATED_ActiveThemes]: string[]
[PrefKey.DEPRECATED_UseSystemColorScheme]: boolean
[PrefKey.DEPRECATED_UseTranslucentUI]: boolean
Expand Down
6 changes: 4 additions & 2 deletions packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,12 @@ const ContentList: FunctionComponent<Props> = ({ application, items, selectedUui
const { filesController, itemListController, navigationController, notesController } = application

const { selectPreviousItem, selectNextItem } = itemListController
const { hideTags, hideDate, hideNotePreview, hideEditorIcon } = itemListController.webDisplayOptions
const { hideTags, hideDate, hideNotePreview, hideEditorIcon, notesListLayout } = itemListController.webDisplayOptions
const { sortBy } = itemListController.displayOptions
const selectedTag = navigationController.selected

const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
const isTiledLayout = notesListLayout === 'tiles'

const onScroll: UIEventHandler = useCallback(
(e) => {
Expand Down Expand Up @@ -86,8 +87,8 @@ const ContentList: FunctionComponent<Props> = ({ application, items, selectedUui
className={classNames(
'infinite-scroll overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
'md:max-h-full pointer-coarse:md:overflow-y-auto',
'flex-grow',
isMobileScreen ? !itemListController.isMultipleSelectionMode && 'pb-safe-bottom' : 'pb-2',
isTiledLayout ? 'grid grid-cols-2 gap-3 px-3 py-3' : '',
)}
id={ElementIds.ContentList}
onScroll={onScroll}
Expand All @@ -110,6 +111,7 @@ const ContentList: FunctionComponent<Props> = ({ application, items, selectedUui
onSelect={selectItem}
tags={getTagsForItem(item)}
notesController={notesController}
isTiled={isTiledLayout}
/>
)
})}
Expand Down
8 changes: 5 additions & 3 deletions packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
selected,
sortBy,
tags,
isTiled,
}) => {
const { setPaneLayout } = useResponsiveAppPane()
const application = useApplication()
Expand Down Expand Up @@ -85,7 +86,8 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
role="button"
className={classNames(
'content-list-item flex w-full cursor-pointer items-stretch text-text',
selected && 'selected border-l-2px border-solid border-info',
isTiled ? 'rounded-lg border border-border' : 'border-l-2px border-solid',
selected ? 'selected border-info' : isTiled ? 'border-border' : 'border-transparent',
)}
id={file.uuid}
onClick={onClick}
Expand All @@ -97,7 +99,7 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
) : (
<div className="pr-4" />
)}
<div className="min-w-0 flex-grow border-b border-solid border-border px-0 py-4">
<div className={classNames('min-w-0 flex-grow px-0 py-4', !isTiled && 'border-b border-solid border-border')}>
<div className="flex items-start justify-between overflow-hidden text-base font-semibold leading-[1.3]">
<div className="break-word mr-2">{file.title}</div>
</div>
Expand All @@ -106,7 +108,7 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
<ListItemConflictIndicator item={file} />
<ListItemVaultInfo item={file} className="mt-1.5" />
</div>
<ListItemFlagIcons className="p-4" item={file} isFileBackedUp={!!backupInfo} />
<ListItemFlagIcons className="p-4" item={file} isFileBackedUp={!!backupInfo} hasBorder={!isTiled} />
</div>
)
}
Expand Down
15 changes: 15 additions & 0 deletions packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { Pill } from '@/Components/Preferences/PreferencesComponents/Content'
import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
import { PaneLayout } from '@/Controllers/PaneController/PaneLayout'
import MenuSection from '@/Components/Menu/MenuSection'
import usePreference from '@/Hooks/usePreference'

const DailyEntryModeEnabled = true

Expand Down Expand Up @@ -99,6 +100,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
const [preferences, setPreferences] = useState<TagPreferences>({})
const controlsDisabled = currentMode === 'tag' && !hasSubscription
const isDailyEntry = selectedTagPreferences?.entryMode === 'daily'
const notesListLayout = usePreference(PrefKey.NotesListLayout)

const reloadPreferences = useCallback(() => {
const globalValues: TagPreferences = {
Expand Down Expand Up @@ -281,6 +283,11 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
}
}, [preferences.useTableView, changePreferences, paneController])

const toggleNotesListLayout = useCallback(() => {
const nextLayout = notesListLayout === 'tiles' ? 'rows' : 'tiles'
application.setPreference(PrefKey.NotesListLayout, nextLayout).catch(console.error)
}, [application, notesListLayout])

const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
const isTableViewEnabled = Boolean(isFilesSmartView || preferences.useTableView)
const shouldHideNonApplicableOptions = isTableViewEnabled && !isMobileScreen
Expand Down Expand Up @@ -390,6 +397,14 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
>
Show icon
</MenuSwitchButtonItem>
<MenuSwitchButtonItem
disabled={controlsDisabled}
className="py-1 hover:bg-contrast focus:bg-info-backdrop"
checked={notesListLayout === 'tiles'}
onChange={toggleNotesListLayout}
>
Tiled list layout
</MenuSwitchButtonItem>
</MenuSection>

{!shouldHideNonApplicableOptions && (
Expand Down
21 changes: 15 additions & 6 deletions packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
selected,
sortBy,
tags,
isTiled,
isPreviousItemTiled,
isNextItemTiled,
}) => {
Expand Down Expand Up @@ -95,7 +96,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({

log(LoggingDomain.ItemsList, 'Rendering note list item', item.title)

const hasOffsetBorder = !isNextItemTiled
const hasOffsetBorder = !isTiled && !isNextItemTiled

const dragPreview = useRef<HTMLDivElement>()

Expand Down Expand Up @@ -129,14 +130,17 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
ref={listItemRef}
role="button"
className={classNames(
'content-list-item flex w-full cursor-pointer items-stretch border-l-2 text-text',
'content-list-item flex w-full cursor-pointer items-stretch text-text',
selected
? `selected ${
application.itemListController.isMultipleSelectionMode ? 'border-info' : `border-accessory-tint-${tint}`
}`
: isTiled
? ''
: 'border-transparent',
isPreviousItemTiled && 'mt-3 border-t border-t-border',
isNextItemTiled && 'mb-3 border-b border-b-border',
isTiled ? 'rounded-lg border border-border' : 'border-l-2',
!isTiled && isPreviousItemTiled && 'mt-3 border-t border-t-border',
!isTiled && isNextItemTiled && 'mb-3 border-b border-b-border',
)}
id={item.uuid}
onClick={onClick}
Expand Down Expand Up @@ -169,15 +173,20 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
) : (
<div className="pr-4" />
)}
<div className={`min-w-0 flex-grow ${hasOffsetBorder && 'border-b border-solid border-border'} px-0 py-4`}>
<div
className={classNames(
'min-w-0 flex-grow px-0 py-4',
!isTiled && hasOffsetBorder && 'border-b border-solid border-border',
)}
>
<ListItemTitle item={item} />
<ListItemNotePreviewText item={item} hidePreview={hidePreview} />
<ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />
<ListItemTags hideTags={hideTags} tags={tags} />
<ListItemConflictIndicator item={item} />
<ListItemVaultInfo item={item} className="mt-1.5" />
</div>
<ListItemFlagIcons className="p-4" item={item} hasFiles={hasFiles} hasBorder={hasOffsetBorder} />
<ListItemFlagIcons className="p-4" item={item} hasFiles={hasFiles} hasBorder={!isTiled && hasOffsetBorder} />
</div>
)
}
Expand Down
2 changes: 2 additions & 0 deletions packages/web/src/javascripts/Components/ContentListView/Types/AbstractListItemProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export type AbstractListItemProps<I extends ListableContentItem> = {
selected: boolean
sortBy: keyof SortableItem | undefined
tags: SNTag[]
isTiled?: boolean
isPreviousItemTiled?: boolean
isNextItemTiled?: boolean
}
Expand All @@ -35,6 +36,7 @@ export function doListItemPropsMeritRerender(
'hidePreview',
'selected',
'sortBy',
'isTiled',
'isPreviousItemTiled',
'isNextItemTiled',
]
Expand Down
6 changes: 6 additions & 0 deletions packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ export class ItemListController
hideDate: false,
hideNotePreview: false,
hideEditorIcon: false,
notesListLayout: 'rows',
}
isTableViewEnabled = false
private reloadItemsPromise?: Promise<unknown>
Expand Down Expand Up @@ -711,6 +712,11 @@ export class ItemListController
this.preferences.getValue(PrefKey.NotesHideEditorIcon, PrefDefaults[PrefKey.NotesHideEditorIcon]),
)

newWebDisplayOptions.notesListLayout = this.preferences.getValue(
PrefKey.NotesListLayout,
PrefDefaults[PrefKey.NotesListLayout],
)

const displayOptionsChanged =
newDisplayOptions.sortBy !== this.displayOptions.sortBy ||
newDisplayOptions.sortDirection !== this.displayOptions.sortDirection ||
Expand Down
1 change: 1 addition & 0 deletions packages/web/src/javascripts/Controllers/ItemList/WebDisplayOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ export type WebDisplayOptions = {
hideDate: boolean
hideNotePreview: boolean
hideEditorIcon: boolean
notesListLayout: 'rows' | 'tiles'
}