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

feat: sort files by name (#1001)

Browse Source
This commit is contained in:
Aman Harwara
2022-04-28 00:49:27 +05:30
committed by GitHub
parent 96be0d578d
commit 99d83af3ba
11 changed files with 52 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
View File

@@ -8,7 +8,7 @@ import { FunctionComponent } from 'preact'
import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
import { Icon } from '@/Components/Icon'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { ChallengeReason, ContentType, SNFile } from '@standardnotes/snjs'
import { ChallengeReason, CollectionSort, ContentType, SNFile } from '@standardnotes/snjs'
import { confirmDialog } from '@/Services/AlertService'
import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
import { StreamingFileReader } from '@standardnotes/filepicker'
@@ -39,8 +39,7 @@ const removeDragOverlay = () => {
}
const isHandlingFileDrag = (event: DragEvent) =>
event.dataTransfer?.items &&
Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
event.dataTransfer?.items && Array.from(event.dataTransfer.items).some((item) => item.kind === 'file')
export const AttachedFilesButton: FunctionComponent<Props> = observer(
({ application, appState, onClickPreprocessing }) => {
@@ -66,17 +65,11 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
const attachedFilesCount = attachedFiles.length
useEffect(() => {
application.items.setDisplayOptions(ContentType.File, CollectionSort.Title, 'dsc')
const unregisterFileStream = application.streamItems(ContentType.File, () => {
setAllFiles(
application.items
.getItems<SNFile>(ContentType.File)
.sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
)
setAttachedFiles(
application.items
.getFilesForNote(note)
.sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
)
setAllFiles(application.items.getDisplayableItems<SNFile>(ContentType.File))
setAttachedFiles(application.items.getFilesForNote(note))
})
return () => {
@@ -162,14 +155,8 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
return isProtected
}
const authorizeProtectedActionForFile = async (
file: SNFile,
challengeReason: ChallengeReason,
) => {
const authorizedFiles = await application.protections.authorizeProtectedActionForFiles(
[file],
challengeReason,
)
const authorizeProtectedActionForFile = async (file: SNFile, challengeReason: ChallengeReason) => {
const authorizedFiles = await application.protections.authorizeProtectedActionForFiles([file], challengeReason)
const isAuthorized = authorizedFiles.length > 0 && authorizedFiles.includes(file)
return isAuthorized
}
@@ -179,16 +166,12 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
}
const handleFileAction = async (action: PopoverFileItemAction) => {
const file =
action.type !== PopoverFileItemActionType.RenameFile ? action.payload : action.payload.file
const file = action.type !== PopoverFileItemActionType.RenameFile ? action.payload : action.payload.file
let isAuthorizedForAction = true
if (file.protected && action.type !== PopoverFileItemActionType.ToggleFileProtection) {
keepMenuOpen(true)
isAuthorizedForAction = await authorizeProtectedActionForFile(
file,
ChallengeReason.AccessProtectedFile,
)
isAuthorizedForAction = await authorizeProtectedActionForFile(file, ChallengeReason.AccessProtectedFile)
keepMenuOpen(false)
buttonRef.current?.focus()
}
@@ -219,10 +202,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
await renameFile(file, action.payload.name)
break
case PopoverFileItemActionType.PreviewFile:
filePreviewModal.activate(
file,
currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles,
)
filePreviewModal.activate(file, currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles)
break
}
@@ -353,9 +333,7 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
}
}}
ref={buttonRef}
className={`sn-icon-button border-contrast ${
attachedFilesCount > 0 ? 'py-1 px-3' : ''
}`}
className={`sn-icon-button border-contrast ${attachedFilesCount > 0 ? 'py-1 px-3' : ''}`}
onBlur={closeOnBlur}
>
<VisuallyHidden>Attached files</VisuallyHidden>

12
app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
View File

@@ -47,9 +47,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
const filteredList =
searchQuery.length > 0
? filesList.filter(
(file) => file.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1,
)
? filesList.filter((file) => file.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1)
: filesList
const handleAttachFilesClick = async () => {
@@ -78,9 +76,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
<div className="flex border-0 border-b-1 border-solid border-main">
<button
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
currentTab === PopoverTabs.AttachedFiles
? 'color-info font-medium shadow-bottom'
: 'color-text'
currentTab === PopoverTabs.AttachedFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
}`}
onClick={() => {
setCurrentTab(PopoverTabs.AttachedFiles)
@@ -91,9 +87,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
</button>
<button
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
currentTab === PopoverTabs.AllFiles
? 'color-info font-medium shadow-bottom'
: 'color-text'
currentTab === PopoverTabs.AllFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
}`}
onClick={() => {
setCurrentTab(PopoverTabs.AllFiles)

14
app/assets/javascripts/Components/Files/FilePreviewModal.tsx
View File

@@ -22,12 +22,7 @@ type Props = {
onDismiss: () => void
}
export const FilePreviewModal: FunctionComponent<Props> = ({
application,
files,
file,
onDismiss,
}) => {
export const FilePreviewModal: FunctionComponent<Props> = ({ application, files, file, onDismiss }) => {
const context = useFilePreviewModal()
const [objectUrl, setObjectUrl] = useState<string>()
@@ -94,8 +89,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
switch (event.key) {
case KeyboardKey.Left: {
const previousFileIndex =
currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : files.length - 1
const previousFileIndex = currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : files.length - 1
const previousFile = files[previousFileIndex]
if (previousFile) {
context.setCurrentFile(previousFile)
@@ -184,8 +178,8 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
{isFilePreviewable ? (
<>
<div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
There was an error loading the file. Try again, or download the file and open
it using another application.
There was an error loading the file. Try again, or download the file and open it using another
application.
</div>
<div className="flex items-center">
<Button

7
app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
View File

@@ -44,12 +44,7 @@ export const FilePreviewModalProvider: FunctionComponent<{
<>
<FilePreviewModalContext.Provider value={{ activate, setCurrentFile }}>
{isOpen && currentFile && (
<FilePreviewModal
application={application}
files={files}
file={currentFile}
onDismiss={close}
/>
<FilePreviewModal application={application} files={files} file={currentFile} onDismiss={close} />
)}
{children}
</FilePreviewModalContext.Provider>

4
app/assets/javascripts/Components/Preferences/Panes/Account/index.tsx
View File

@@ -25,9 +25,7 @@ export const AccountPreferences = observer(({ application, appState }: Props) =>
</>
)}
<Subscription application={application} appState={appState} />
{application.hasAccount() && appState.features.isEntitledToFiles && (
<FilesSection application={application} />
)}
{application.hasAccount() && appState.features.isEntitledToFiles && <FilesSection application={application} />}
<SignOutWrapper application={application} appState={appState} />
</PreferencesPane>
))

4
app/assets/javascripts/Device/DesktopDeviceInterface.ts
View File

@@ -6,8 +6,6 @@ export function isDesktopDevice(x: DeviceInterface): x is DesktopDeviceInterface
return x.environment === Environment.Desktop
}
export interface DesktopDeviceInterface
extends WebOrDesktopDeviceInterface,
WebClientRequiresDesktopMethods {
export interface DesktopDeviceInterface extends WebOrDesktopDeviceInterface, WebClientRequiresDesktopMethods {
environment: Environment.Desktop
}

5
app/assets/javascripts/Device/DesktopWebCommunication.ts
View File

@@ -32,10 +32,7 @@ export interface DesktopClientRequiresWebMethods {
windowLostFocus(): void
onComponentInstallationComplete(
componentData: DecryptedTransferPayload,
error: unknown,
): Promise<void>
onComponentInstallationComplete(componentData: DecryptedTransferPayload, error: unknown): Promise<void>
requestBackupFile(): Promise<string | undefined>

5
app/assets/javascripts/Services/DesktopManager.ts
View File

@@ -113,10 +113,7 @@ export class DesktopManager
this.webApplication.notifyWebEvent(WebAppEvent.DesktopWindowLostFocus)
}
async onComponentInstallationComplete(
componentData: DecryptedTransferPayload<ComponentContent>,
error: unknown,
) {
async onComponentInstallationComplete(componentData: DecryptedTransferPayload<ComponentContent>, error: unknown) {
const component = this.application.items.findItem(componentData.uuid)
if (!component) {
return

17
app/assets/javascripts/Services/IOService.ts
View File

@@ -129,14 +129,10 @@ export class IOService {
// For a modifier like ctrlKey, must check both event.ctrlKey and event.key.
// That's because on keyup, event.ctrlKey would be false, but event.key == Control would be true.
const matches =
((event.ctrlKey || event.key === KeyboardModifier.Ctrl) &&
modifier === KeyboardModifier.Ctrl) ||
((event.metaKey || event.key === KeyboardModifier.Meta) &&
modifier === KeyboardModifier.Meta) ||
((event.altKey || event.key === KeyboardModifier.Alt) &&
modifier === KeyboardModifier.Alt) ||
((event.shiftKey || event.key === KeyboardModifier.Shift) &&
modifier === KeyboardModifier.Shift)
((event.ctrlKey || event.key === KeyboardModifier.Ctrl) && modifier === KeyboardModifier.Ctrl) ||
((event.metaKey || event.key === KeyboardModifier.Meta) && modifier === KeyboardModifier.Meta) ||
((event.altKey || event.key === KeyboardModifier.Alt) && modifier === KeyboardModifier.Alt) ||
((event.shiftKey || event.key === KeyboardModifier.Shift) && modifier === KeyboardModifier.Shift)
return matches
})
@@ -190,10 +186,7 @@ export class IOService {
continue
}
if (
observer.key &&
this.eventMatchesKeyAndModifiers(event, observer.key, observer.modifiers)
) {
if (observer.key && this.eventMatchesKeyAndModifiers(event, observer.key, observer.modifiers)) {
const callback = keyEvent === KeyboardKeyEvent.Down ? observer.onKeyDown : observer.onKeyUp
if (callback) {
callback(event)