- ![]()
+ ![]()
diff --git a/frontend/src/app/applications/files/components/sidebar/files-selection.component.html b/frontend/src/app/applications/files/components/sidebar/files-selection.component.html
index 1d0e89080..35d1b0801 100644
--- a/frontend/src/app/applications/files/components/sidebar/files-selection.component.html
+++ b/frontend/src/app/applications/files/components/sidebar/files-selection.component.html
@@ -1,26 +1,51 @@
@if (files().length) {
- @if (multiple()) {
- {{ f.name }}
-
-
-
+ @if (files().length > 1) {
+ @let stats = selectionStats();
+ @let totalSize = selectionSize | async;
+
- } -
+
-
+ {{ stats.directories }} {{ (stats.directories === 1 ? 'directory' : 'directories') | translate:locale.language }}
+ •
+ {{ stats.files }} {{ (stats.files === 1 ? 'file' : 'files') | translate:locale.language }}
+ @if (totalSize !== null) {
+ •
+
+ @if (totalSize.pendingDirectories || totalSize.hasError) {
+ ≥
+ }
+ {{ totalSize.size | toBytes:0:true }}
+
+ }
+
+
+
+
- } -
- @if (multiple()) {
-
- @for (f of files(); track f.id) {
-
- ![]()
- {{ f.name }}
+
+
+ } @else {
+ +
+ @for (f of files(); track f.id) {
+
+ }
+
+
- } @else {
+
+ ![]()
+
- }
- {{ f.name }}
+
@for (f of files(); track f.id) {
-
@@ -40,19 +65,18 @@
-
+
- = input.required()
+ files = input.required()
+ private readonly router = inject(Router)
+ private readonly layout = inject(LayoutService)
+ private readonly filesService = inject(FilesService)
protected readonly locale = inject(L10N_LOCALE)
- protected multiple: Signal = computed(() => this.files().length > 1)
- protected resizeOffset: Signal = computed(() => defaultResizeOffset + (this.multiple() ? 40 : 0))
protected readonly cardImageSize = defaultCardImageSize
+ protected selectedAction: SelectionAction = 'clipboard'
+ protected readonly selectionStats = computed(() => {
+ const files = this.files()
+ const directories = files.filter((file) => file.isDir).length
+ return { directories, files: files.length - directories }
+ })
+ protected readonly selectionSize = toObservable(this.files).pipe(
+ switchMap((files) => {
+ const directories = files.filter((file) => file.isDir)
+ const initial: SelectionSize = {
+ size: files.reduce((size, file) => size + (file.isDir ? 0 : file.size), 0),
+ pendingDirectories: directories.length,
+ hasError: false
+ }
+ return from(directories).pipe(
+ concatMap((directory) => this.getSizeLazy(directory)),
+ scan(
+ (total: SelectionSize, size: number | undefined): SelectionSize => ({
+ size: total.size + (size ?? 0),
+ pendingDirectories: total.pendingDirectories - 1,
+ hasError: total.hasError || size === undefined
+ }),
+ initial
+ ),
+ startWith(initial)
+ )
+ })
+ )
protected readonly icons = {
SPACES: SPACES_ICON.SPACES,
SHARES: SPACES_ICON.SHARES,
@@ -53,13 +90,9 @@ export class FilesSelectionComponent {
SYNC: SYNC_ICON.SYNC,
faLock,
faUnlock,
- faClipboardCheck,
- faArrowsAlt,
- faSpinner
+ faSpinner,
+ faTimes
}
- private readonly router = inject(Router)
- private readonly layout = inject(LayoutService)
- private readonly filesService = inject(FilesService)
goToShare(share: { type: number; name: string }) {
this.layout.toggleRSideBar(false)
@@ -80,6 +113,25 @@ export class FilesSelectionComponent {
this.layout.showRSideBarTab(TAB_MENU.CLIPBOARD, true)
}
+ removeFromSelection(file: FileModel) {
+ this.filesService.fileSelectionRemove.next(file)
+ }
+
+ doAction() {
+ if (this.selectedAction === 'clipboard') return this.addToClipboard()
+ if (this.selectedAction === 'copyMove') return this.filesService.openTreeCopyMove()
+ const archiveProps: CompressFileDto = {
+ name: this.files()[0].name,
+ compressInDirectory: this.selectedAction === 'compress',
+ compression: false,
+ files: this.files().map((file) => ({ name: file.name, rootAlias: file.root?.alias, path: file.path })),
+ extension: TAR_EXTENSION
+ }
+ this.layout.openDialog(FilesCompressionDialogComponent, null, {
+ initialState: { archiveProps } as FilesCompressionDialogComponent
+ })
+ }
+
goToSync(sync: { clientId: string; clientName: string; id: number }) {
this.layout.toggleRSideBar(false)
this.router
@@ -97,14 +149,10 @@ export class FilesSelectionComponent {
}
getSizeLazy(f: FileModel) {
- if (!f.isDir) return of(f.hSize)
- if (!f.hDirSize) {
- f.hDirSize = this.filesService.getSize(f).pipe(
- map((size) => convertBytesToText(size, 0, true)),
- catchError(() => (f.hDirSize = of(f.hSize))),
- shareReplay(1)
- )
- }
- return f.hDirSize
+ return (f.dirSize ??= this.filesService.getSize(f).pipe(
+ tap((size) => f.updateSize(size)),
+ catchError(() => of(undefined)),
+ shareReplay(1)
+ ))
}
}
diff --git a/frontend/src/app/applications/files/components/sidebar/files-tree.component.ts b/frontend/src/app/applications/files/components/sidebar/files-tree.component.ts
index c056e1762..e36693ebf 100644
--- a/frontend/src/app/applications/files/components/sidebar/files-tree.component.ts
+++ b/frontend/src/app/applications/files/components/sidebar/files-tree.component.ts
@@ -120,10 +120,15 @@ export class FilesTreeComponent implements OnInit, OnDestroy {
}
ngOnInit() {
+ this.initRoot()
if (this.enableCopyMove) {
- this.subscriptions.push(this.filesService.treeCopyMoveOn.subscribe(() => this.onCopyMove()))
+ this.subscriptions.push(
+ this.filesService.treeCopyMoveOn.subscribe(() => {
+ this.onCopyMove()
+ this.filesService.consumeTreeCopyMove()
+ })
+ )
}
- this.initRoot()
setTimeout(() => this.focusLastNode(), 100)
}
diff --git a/frontend/src/app/applications/files/interfaces/file-selection.interface.ts b/frontend/src/app/applications/files/interfaces/file-selection.interface.ts
new file mode 100644
index 000000000..05f6253d6
--- /dev/null
+++ b/frontend/src/app/applications/files/interfaces/file-selection.interface.ts
@@ -0,0 +1,7 @@
+export type SelectionAction = 'clipboard' | 'copyMove' | 'download' | 'compress'
+
+export interface SelectionSize {
+ size: number
+ pendingDirectories: number
+ hasError: boolean
+}
diff --git a/frontend/src/app/applications/files/models/file.model.ts b/frontend/src/app/applications/files/models/file.model.ts
index 87383e7f3..4e8713782 100644
--- a/frontend/src/app/applications/files/models/file.model.ts
+++ b/frontend/src/app/applications/files/models/file.model.ts
@@ -68,7 +68,7 @@ export class FileModel implements File {
mimeUrl: string
hSize: string
hTimeAgo: string
- hDirSize: Observable
+ dirSize: Observable
nbBadges = 0
galleryBadges: ('lock' | 'shares' | 'spaces' | 'links' | 'syncs' | 'comments')[] = []
@@ -280,7 +280,7 @@ export class FileModel implements File {
}
private setHSize() {
- this.hSize = this.isDir ? '●' : convertBytesToText(this.size, 0, true)
+ this.hSize = this.isDir && this.size === 0 ? '●' : convertBytesToText(this.size, 0, true)
}
private setShares(shares: { id: number; alias: string; name: string; type: number }[]) {
diff --git a/frontend/src/app/applications/files/services/files.service.ts b/frontend/src/app/applications/files/services/files.service.ts
index 66445e67a..c6fbc4cd6 100644
--- a/frontend/src/app/applications/files/services/files.service.ts
+++ b/frontend/src/app/applications/files/services/files.service.ts
@@ -39,7 +39,7 @@ import { API_SPACES_TREE } from '@sync-in-server/backend/src/applications/spaces
import { SPACE_OPERATION } from '@sync-in-server/backend/src/applications/spaces/constants/spaces'
import { forbiddenChars, isValidFileName } from '@sync-in-server/backend/src/common/shared'
import { BsModalRef } from 'ngx-bootstrap/modal'
-import { catchError, EMPTY, filter, firstValueFrom, map, Observable, Subject, switchMap, timer } from 'rxjs'
+import { BehaviorSubject, catchError, EMPTY, filter, firstValueFrom, map, Observable, Subject, switchMap, timer } from 'rxjs'
import { downloadWithAnchor } from '../../../common/utils/functions'
import { TAB_MENU } from '../../../layout/layout.interfaces'
import { LayoutService } from '../../../layout/layout.service'
@@ -62,7 +62,10 @@ type ViewerHookResult = { action: 'open'; shortMime: string } | { action: 'downl
export class FilesService {
// Tree section
public treeNodeSelected: TreeNode = null
- public treeCopyMoveOn = new Subject()
+ private readonly treeCopyMoveRequested = new BehaviorSubject(false)
+ public readonly treeCopyMoveOn = this.treeCopyMoveRequested.pipe(filter(Boolean))
+ // Selection section
+ public readonly fileSelectionRemove = new Subject()
// Clipboard section
public clipboardAction: 'copyPaste' | 'cutPaste' = 'copyPaste'
// Files
@@ -77,6 +80,15 @@ export class FilesService {
private readonly filesTasksService = inject(FilesTasksService)
private readonly userService = inject(UserService)
+ openTreeCopyMove() {
+ this.layout.showRSideBarTab(TAB_MENU.TREE, true)
+ this.treeCopyMoveRequested.next(true)
+ }
+
+ consumeTreeCopyMove() {
+ this.treeCopyMoveRequested.next(false)
+ }
+
getTreeNode(nodePath: string, showFiles = false): Promise {
return firstValueFrom(
this.http.get(`${API_SPACES_TREE}/${nodePath}`, { params: showFiles ? new HttpParams().set('showFiles', showFiles) : null })
diff --git a/frontend/src/app/applications/links/components/links.component.html b/frontend/src/app/applications/links/components/links.component.html
index 32bb43e93..12f945e5e 100644
--- a/frontend/src/app/applications/links/components/links.component.html
+++ b/frontend/src/app/applications/links/components/links.component.html
@@ -44,7 +44,10 @@
@if (galleryMode?.enabled) {
-
Name
{{ f.name }}
Size
- @let size = (getSizeLazy(f) | async);
- @if (size === null) {
- Created
@@ -137,7 +161,7 @@
}
@if (f.lock || f.spaces.length || f.shares.length || f.links.length || f.syncs.length) {
-
+
+ }
}
diff --git a/frontend/src/app/applications/files/components/sidebar/files-selection.component.ts b/frontend/src/app/applications/files/components/sidebar/files-selection.component.ts
index ff3dd8f6f..bb1921267 100755
--- a/frontend/src/app/applications/files/components/sidebar/files-selection.component.ts
+++ b/frontend/src/app/applications/files/components/sidebar/files-selection.component.ts
@@ -1,24 +1,30 @@
import { AsyncPipe } from '@angular/common'
-import { ChangeDetectionStrategy, Component, computed, inject, input, InputSignal, Signal } from '@angular/core'
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core'
+import { toObservable } from '@angular/core/rxjs-interop'
+import { FormsModule } from '@angular/forms'
import { Router } from '@angular/router'
import { FaIconComponent } from '@fortawesome/angular-fontawesome'
-import { faArrowsAlt, faClipboardCheck, faLock, faSpinner, faUnlock } from '@fortawesome/free-solid-svg-icons'
+import { faLock, faSpinner, faTimes, faUnlock } from '@fortawesome/free-solid-svg-icons'
+import { TAR_EXTENSION } from '@sync-in-server/backend/src/applications/files/constants/compress'
+import type { CompressFileDto } from '@sync-in-server/backend/src/applications/files/dto/file-operations.dto'
import { L10N_LOCALE, L10nLocale, L10nTranslateDirective, L10nTranslatePipe } from 'angular-l10n'
-import { catchError, of, shareReplay } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { from, of, shareReplay } from 'rxjs'
+import { catchError, concatMap, scan, startWith, switchMap, tap } from 'rxjs/operators'
import { BadgePermissionsComponent } from '../../../../common/components/badge-permissions.component'
import { AutoResizeDirective } from '../../../../common/directives/auto-resize.directive'
import { TimeDateFormatPipe } from '../../../../common/pipes/time-date-format.pipe'
-import { convertBytesToText } from '../../../../common/utils/functions'
-import { defaultCardImageSize, defaultResizeOffset } from '../../../../layout/layout.constants'
+import { ToBytesPipe } from '../../../../common/pipes/to-bytes.pipe'
+import { defaultCardImageSize } from '../../../../layout/layout.constants'
import { TAB_MENU } from '../../../../layout/layout.interfaces'
import { LayoutService } from '../../../../layout/layout.service'
import { SPACES_ICON, SPACES_PATH } from '../../../spaces/spaces.constants'
import { SYNC_ICON } from '../../../sync/sync.constants'
import { UserAvatarComponent } from '../../../users/components/utils/user-avatar.component'
import { USER_PATH } from '../../../users/user.constants'
+import type { SelectionAction, SelectionSize } from '../../interfaces/file-selection.interface'
import { FileModel } from '../../models/file.model'
import { FilesService } from '../../services/files.service'
+import { FilesCompressionDialogComponent } from '../dialogs/files-compression-dialog.component'
import { FileLockFormatPipe } from '../utils/file-lock.utils'
import { FilesViewerMediaComponent } from '../viewers/files-viewer-media.component'
@@ -36,16 +42,47 @@ import { FilesViewerMediaComponent } from '../viewers/files-viewer-media.compone
UserAvatarComponent,
BadgePermissionsComponent,
AsyncPipe,
- FileLockFormatPipe
+ FileLockFormatPipe,
+ FormsModule,
+ ToBytesPipe
],
styles: ['.card {width: 100%; background: transparent; border: none}']
})
export class FilesSelectionComponent {
- files: InputSignal
@if (f.lock) {
+
@@ -172,6 +196,6 @@
}
}
- }
-
+
}
diff --git a/frontend/src/app/applications/shares/components/shared.component.html b/frontend/src/app/applications/shares/components/shared.component.html
index fe7b73c7e..f972aee86 100644
--- a/frontend/src/app/applications/shares/components/shared.component.html
+++ b/frontend/src/app/applications/shares/components/shared.component.html
@@ -51,7 +51,10 @@
@if (galleryMode?.enabled) {
-
- ![]()
+ ![]()
@if (s.newly) {
-
+
{{ s.hTimeAccessAgo }}
}
@@ -92,7 +93,7 @@
+
![]()
@if (s.newly) {
- {{ s.hTimeAgo }}
+ {{ s.hTimeAgo }}
}
@if (s.hasComments) {
+
@@ -391,12 +393,25 @@
@switch (th.key) {
@case ('name') {
+
@if (f.isImage) {
} @else {
![]()
}
@@ -252,21 +263,18 @@
@@ -333,12 +337,10 @@
[textCenter]="true"
(renamingInProgress)="setRenamingInProgress($event)"
(updateObject)="renameFile($event)"
- [style.font-size.px]="galleryMode.textSize"
type="text"
required>
} @else {
- {{ f.name }}
+ {{ f.name }}
}
- ![]()
+
+ ![]()
+
+
@if (f.isRenamed) {
- = new Set(['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'])
+
@Component({
selector: 'app-spaces-browser',
imports: [
@@ -108,7 +113,8 @@ import { SpaceAnchorFileDialogComponent } from './dialogs/space-anchor-file-dial
TapDirective,
FileLockFormatPipe
],
- templateUrl: 'spaces-browser.component.html'
+ templateUrl: 'spaces-browser.component.html',
+ styleUrl: 'spaces-browser.component.scss'
})
export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(VirtualScrollComponent) scrollView: { element: ElementRef; viewPortItems: FileModel[]; scrollInto: (arg: FileModel | number) => void }
@@ -147,6 +153,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
faArrowsAlt,
faCircleInfo,
faBan,
+ faCheck,
faArrowUp,
faArrowDown,
faLock,
@@ -170,6 +177,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
// Actions
protected multipleSelection = false
protected hasSelection = false
+ protected showSelectionChecks = false
protected hasDisabledItemsInSelection = false
protected canCompress = true
protected renamingInProgress = false
@@ -246,6 +254,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
private focusOnSelect: string
private selectionAnchor: FileModel | null = null
private selectionFocus: FileModel | null = null
+ private selectionControlMode = false
// Sort
private readonly sortSettings: SortSettings = {
default: [
@@ -278,6 +287,9 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
this.activatedRoute.queryParams.subscribe((params) => this.focusOn(params.select))
this.activatedRoute.data.subscribe((route: Data) => this.setSpace(route as { repository: SPACE_REPOSITORY; routes: UrlSegment[] }))
this.subscriptions.push(this.store.filesOnEvent.subscribe((update: FileEvent) => this.onFileEvent(update)))
+ this.subscriptions.push(
+ this.filesService.fileSelectionRemove.subscribe((file) => this.setSelection(this.selection.filter((selected) => selected !== file)))
+ )
}
ngAfterViewInit() {
@@ -290,41 +302,9 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
this.subscriptions.forEach((s) => s.unsubscribe())
}
- @HostListener('window:keydown', ['$event'])
- onKeyPress(ev: any) {
- if (!((ev.target.id === 'table-files' || ev.target.id === 'thumb-files') && (ev.ctrlKey || ev.metaKey))) {
- return
- }
- switch (ev.which || ev.keyCode) {
- case 65:
- // ctrl/cmd + a
- // select all
- ev.preventDefault()
- ev.stopPropagation()
- this.selectAllFiles()
- return
- case 67:
- case 88:
- // ctrl/cmd + c || ctrl/cmd + x
- ev.preventDefault()
- ev.stopPropagation()
- if (this.selection.length) {
- this.filesService.clipboardAction = ev.keyCode == 67 ? 'copyPaste' : 'cutPaste'
- this.filesService.addToClipboard(this.selection)
- }
- return
- case 86:
- // ctrl/cmd + v
- ev.preventDefault()
- ev.stopPropagation()
- this.filesService.onPasteClipboard()
- return
- default:
- return
- }
- }
-
- loadFiles() {
+ loadFiles(focusView = false) {
+ // Preserve the initial focus to avoid stealing it if the user interacts while files are loading.
+ const focusOrigin = focusView ? document.activeElement : null
this.loading = true
this.forbiddenResource = false
this.locationNotFound = false
@@ -354,6 +334,9 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
} else {
this.scrollView.scrollInto(-1)
}
+ if (focusView) {
+ setTimeout(() => this.focusFilesView(focusOrigin), 0)
+ }
},
error: (e: HttpErrorResponse) => {
this.files = []
@@ -395,6 +378,23 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
}
}
+ toggleFileSelection(ev: MouseEvent, file: FileModel) {
+ ev.stopPropagation()
+ if (this.loading) return
+ if (ev.shiftKey && (this.selection.length > 0 || this.selectionAnchor)) {
+ this.selectionControlMode = true
+ this.selectRangeFiles(file)
+ return
+ }
+ if (!this.selectionControlMode && this.selection.length === 1) {
+ this.selectionControlMode = true
+ this.setSelection([file], file, file, true)
+ return
+ }
+ if (!this.selection.length) this.selectionControlMode = true
+ this.modifySelection(file)
+ }
+
onContextMenu(ev: MouseEvent | Event) {
ev.preventDefault()
ev.stopPropagation()
@@ -433,8 +433,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
}
copyMoveFiles() {
- this.layout.showRSideBarTab(TAB_MENU.TREE, true)
- setTimeout(() => this.filesService.treeCopyMoveOn.next(), 100)
+ this.filesService.openTreeCopyMove()
}
downloadFiles() {
@@ -661,7 +660,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
this.inSharesList = this.isSharesRepo && this.inRootSpace
this.spacesBrowser.setEnvironment(route.repository, route.routes)
this.isPersonalSpace = this.spacesBrowser.inPersonalSpace
- this.loadFiles()
+ this.loadFiles(true)
}
private onFileEvent(ev: FileEvent) {
@@ -788,24 +787,33 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
private modifySelection(file: FileModel) {
if (!file) return
- if (file.isSelected) {
- this.setSelection(
- this.selection.filter((f) => f !== file),
- file,
- file
- )
- } else {
- this.setSelection([file, ...this.selection], file, file)
- }
+ this.setSelection(file.isSelected ? this.selection.filter((selected) => selected !== file) : [file, ...this.selection], file, file, true)
}
- private setSelection(selection: FileModel[], selectionAnchor: FileModel | null = null, selectionFocus: FileModel | null = selectionAnchor) {
- const selected = new Set(selection)
+ private setSelection(
+ selection: FileModel[],
+ selectionAnchor: FileModel | null = null,
+ selectionFocus: FileModel | null = selectionAnchor,
+ keepSelectionControlMode = false
+ ) {
+ const enabledSelection = selection.filter((file: FileModel) => !file.isDisabled)
+ const focusedDisabledFile = selectionFocus?.isDisabled && selection.includes(selectionFocus) ? selectionFocus : null
+ const normalizedSelection = enabledSelection.length ? enabledSelection : focusedDisabledFile ? [focusedDisabledFile] : selection.slice(0, 1)
+ const selected = new Set(normalizedSelection)
this.selection = this.files.filter((file: FileModel) => {
file.isSelected = selected.has(file)
return file.isSelected
})
- this.setSelectionCursor(selectionAnchor, selectionFocus)
+ if (!keepSelectionControlMode || !this.selection.length) {
+ this.selectionControlMode = false
+ }
+ this.showSelectionChecks = this.selection.length > 1 || this.selectionControlMode
+ const normalizedAnchor = selectionAnchor && selected.has(selectionAnchor) ? selectionAnchor : this.selection[0] || null
+ const normalizedFocus =
+ selectionFocus && (selected.has(selectionFocus) || (keepSelectionControlMode && this.files.includes(selectionFocus)))
+ ? selectionFocus
+ : normalizedAnchor
+ this.setSelectionCursor(normalizedAnchor, normalizedFocus)
// update states
this.hasSelection = !!this.selection.length
this.hasDisabledItemsInSelection = !!this.selection.find((f: FileModel) => f.isDisabled)
@@ -834,7 +842,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
const files = this.getFilteredFiles()
const fileIndex = files.indexOf(file)
if (fileIndex === -1) {
- this.setSelection([file], file, file)
+ this.setSelection([file], file, file, true)
return
}
let anchor = this.selectionAnchor
@@ -847,18 +855,22 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
const maxIndex = Math.max(anchorIndex, fileIndex)
const filteredFiles = new Set(files)
const hiddenSelection = this.selection.filter((f: FileModel) => !filteredFiles.has(f))
- this.setSelection([...hiddenSelection, ...files.slice(minIndex, maxIndex + 1)], anchor, file)
+ this.setSelection([...hiddenSelection, ...files.slice(minIndex, maxIndex + 1)], anchor, file, true)
}
- private getKeyboardNavigationTarget(files: FileModel[], keyCode: number, extendSelection: boolean): { file: FileModel; keyCode: number } {
- let direction = keyCode
+ private getKeyboardNavigationTarget(
+ files: FileModel[],
+ key: KeyboardNavigationKey,
+ extendSelection: boolean
+ ): { file: FileModel; key: KeyboardNavigationKey } {
+ let direction = key
let useGalleryColumns = this.galleryMode.enabled
- if (direction === 37) {
+ if (direction === 'ArrowLeft') {
useGalleryColumns = false
- direction = 38
- } else if (direction === 39) {
+ direction = 'ArrowUp'
+ } else if (direction === 'ArrowRight') {
useGalleryColumns = false
- direction = 40
+ direction = 'ArrowDown'
}
const referenceIndexes = this.getSelectionReferenceIndexes(files, extendSelection)
const step = useGalleryColumns
@@ -866,15 +878,15 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
: 1
let index: number
if (!referenceIndexes.length) {
- index = direction === 38 ? files.length - 1 : 0
- } else if (direction === 38) {
+ index = direction === 'ArrowUp' ? files.length - 1 : 0
+ } else if (direction === 'ArrowUp') {
index = Math.min(...referenceIndexes) - step
if (index <= -1) index = files.length - 1
} else {
index = Math.max(...referenceIndexes) + step
if (index >= files.length) index = 0
}
- return { file: files[index], keyCode: direction }
+ return { file: files[index], key: direction }
}
private getSelectionReferenceIndexes(files: FileModel[], extendSelection: boolean): number[] {
@@ -900,7 +912,56 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
}
}
- private scrollKeyboardSelectionIntoView(file: FileModel, keyCode: number) {
+ private handleKeyboardShortcut(ev: KeyboardEvent): boolean {
+ if (!ev.ctrlKey && !ev.metaKey) {
+ return false
+ }
+ const key = ev.key.toLowerCase()
+ if (key !== 'a' && key !== 'c' && key !== 'x' && key !== 'v') {
+ return false
+ }
+ ev.preventDefault()
+ ev.stopPropagation()
+ this.zone.run(() => {
+ switch (key) {
+ case 'a':
+ this.selectAllFiles()
+ break
+ case 'c':
+ case 'x':
+ if (this.selection.length) {
+ this.filesService.clipboardAction = key === 'c' ? 'copyPaste' : 'cutPaste'
+ this.filesService.addToClipboard(this.selection)
+ }
+ break
+ case 'v':
+ this.filesService.onPasteClipboard()
+ break
+ }
+ })
+ return true
+ }
+
+ private isEditableKeyboardTarget(target: EventTarget | null): boolean {
+ return target instanceof Element && !!target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])')
+ }
+
+ private focusFilesView(focusOrigin: Element | null) {
+ const activeElement = document.activeElement
+ // Focus the files view only if focus stayed unchanged or fell back to the body after the previous view disappeared.
+ if (
+ (activeElement !== focusOrigin && activeElement !== document.body) ||
+ this.isEditableKeyboardTarget(activeElement) ||
+ (activeElement instanceof Element && !!activeElement.closest('.modal.show, [role="dialog"][aria-modal="true"]'))
+ ) {
+ return
+ }
+ const selector = this.galleryMode.enabled ? '#thumb-files' : '#table-files'
+ const filesView = this.scrollView.element.nativeElement.querySelector(selector) as HTMLElement | null
+ filesView?.focus({ preventScroll: true })
+ }
+
+ private scrollKeyboardSelectionIntoView(file: FileModel, key: KeyboardNavigationKey) {
if (this.scrollView.viewPortItems.indexOf(file) === -1) {
setTimeout(() => this.scrollView.scrollInto(file), 0)
return
@@ -910,9 +971,9 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
setTimeout(() => this.scrollView.scrollInto(file), 0)
return
}
- const element: HTMLElement = keyCode === 38 ? selectedRows[0] : selectedRows[selectedRows.length - 1]
+ const element: HTMLElement = key === 'ArrowUp' ? selectedRows[0] : selectedRows[selectedRows.length - 1]
if (!elementIsVisible(element)) {
- element.scrollIntoView(keyCode === 38)
+ element.scrollIntoView(key === 'ArrowUp')
}
}
@@ -1006,14 +1067,18 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
return false
}
})
- this.eventKeysHandler = this.renderer.listen(this.scrollView.element.nativeElement, 'keydown', (ev) => {
- if (this.renamingInProgress) {
+ this.eventKeysHandler = this.renderer.listen(this.scrollView.element.nativeElement, 'keydown', (ev: KeyboardEvent) => {
+ if (this.renamingInProgress || this.isEditableKeyboardTarget(ev.target)) {
return
}
- const code = ev.keyCode || ev.which
- if ([37, 38, 39, 40].indexOf(code) === -1) {
+ if (this.handleKeyboardShortcut(ev)) {
return
- } else if ((code === 37 || code === 39) && !this.galleryMode.enabled) {
+ }
+ if (!keyboardNavigationKeys.has(ev.key)) {
+ return
+ }
+ const key = ev.key as KeyboardNavigationKey
+ if ((key === 'ArrowLeft' || key === 'ArrowRight') && !this.galleryMode.enabled) {
return
}
ev.preventDefault()
@@ -1022,9 +1087,9 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy
if (!files.length) {
return
}
- const target = this.getKeyboardNavigationTarget(files, code, ev.shiftKey)
+ const target = this.getKeyboardNavigationTarget(files, key, ev.shiftKey)
this.zone.run(() => this.applyKeyboardSelection(ev, target.file))
- this.scrollKeyboardSelectionIntoView(target.file, target.keyCode)
+ this.scrollKeyboardSelectionIntoView(target.file, target.key)
})
})
}
diff --git a/frontend/src/app/applications/spaces/components/spaces.component.html b/frontend/src/app/applications/spaces/components/spaces.component.html
index e6593f545..40be569ab 100644
--- a/frontend/src/app/applications/spaces/components/spaces.component.html
+++ b/frontend/src/app/applications/spaces/components/spaces.component.html
@@ -53,7 +53,11 @@
@if (galleryMode?.enabled) {
-
+
diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.scss b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss
new file mode 100644
index 000000000..0d470f5cb
--- /dev/null
+++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss
@@ -0,0 +1,122 @@
+.file-selection-control {
+ position: relative;
+ display: inline-flex;
+ flex: 0 0 30px;
+ width: 30px;
+ height: 30px;
+ margin-right: .3rem;
+ overflow: visible;
+
+ > img {
+ margin-right: 0 !important;
+ }
+}
+
+.file-selection-overlay {
+ position: absolute;
+ padding: 0;
+ color: rgba(255, 255, 255, .88);
+ background: transparent;
+ border: 0;
+ opacity: 0;
+ cursor: default;
+
+ &:focus-visible {
+ outline: 2px solid currentColor;
+ outline-offset: 2px;
+ opacity: 1;
+ }
+
+ &.is-selected {
+ color: #fff;
+ opacity: 1;
+
+ .file-selection-indicator {
+ background-color: rgba(24, 27, 34, .95);
+ opacity: 1;
+ }
+ }
+}
+
+.file-selection-control > .file-selection-overlay {
+ top: 50%;
+ left: calc(0px - var(--app-table-cell-inline-padding));
+ width: calc(30px + var(--app-table-cell-inline-padding));
+ height: var(--app-table-row-height);
+ transform: translateY(-50%);
+}
+
+.file-selection-indicator {
+ position: absolute;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(32, 36, 45, .78);
+ border-radius: .25rem;
+ opacity: 0.85;
+
+ fa-icon {
+ margin-right: 0 !important;
+ }
+}
+
+.file-selection-control .file-selection-indicator {
+ top: calc((var(--app-table-row-height) - 30px) / 2);
+ left: var(--app-table-cell-inline-padding);
+ width: 16px;
+ height: 16px;
+ font-size: .55rem;
+}
+
+.gallery-file-selection-overlay {
+ z-index: 2;
+ top: 0;
+ left: 0;
+ width: var(--gallery-selection-size);
+ height: var(--gallery-selection-size);
+ font-size: var(--gallery-text-size);
+
+ .file-selection-indicator {
+ top: .25em;
+ left: .25em;
+ width: 1.85em;
+ height: 1.85em;
+ font-size: inherit;
+
+ fa-icon {
+ font-size: .9em;
+ }
+ }
+}
+
+:host-context(body.theme-dark) {
+ .file-selection-overlay:not(.is-selected) {
+ color: rgba(255, 255, 255, .68);
+
+ .file-selection-indicator {
+ background-color: rgba(24, 27, 34, .68);
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
+ opacity: 1;
+ }
+ }
+
+ .file-selection-overlay.is-selected .file-selection-indicator {
+ background-color: rgba(10, 15, 22, .96);
+ box-shadow:
+ 0 0 0 1px rgba(132, 157, 185, .22),
+ 0 1px 3px rgba(0, 0, 0, .4);
+ }
+}
+
+@media (hover: hover) {
+ .file-selection-control:hover .file-selection-overlay,
+ .gallery-file-selection-overlay:hover {
+ opacity: 1;
+ }
+}
+
+@media (hover: none) {
+ .gallery-file-selection-overlay {
+ opacity: 1;
+ }
+}
diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts
index d66cdce22..c55ed3648 100644
--- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts
+++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts
@@ -1,6 +1,6 @@
import { KeyValuePipe, NgTemplateOutlet } from '@angular/common'
import { HttpErrorResponse } from '@angular/common/http'
-import { AfterViewInit, Component, ElementRef, HostListener, inject, NgZone, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, inject, NgZone, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'
import { ActivatedRoute, Data, Router, UrlSegment } from '@angular/router'
import { FaIconComponent } from '@fortawesome/angular-fontawesome'
import {
@@ -10,6 +10,7 @@ import {
faArrowsAlt,
faArrowUp,
faBan,
+ faCheck,
faCircleInfo,
faCirclePlus,
faClipboardList,
@@ -85,6 +86,10 @@ import { SpacesBrowserService } from '../services/spaces-browser.service'
import { SPACES_ICON, SPACES_PATH } from '../spaces.constants'
import { SpaceAnchorFileDialogComponent } from './dialogs/space-anchor-file-dialog.component'
+type KeyboardNavigationKey = 'ArrowLeft' | 'ArrowUp' | 'ArrowRight' | 'ArrowDown'
+
+const keyboardNavigationKeys: ReadonlySet
@if (stats.dirs) {
- {{ stats.dirs }} {{ (stats.dirs > 1 ? 'directories' : 'directory') | translate:locale.language }}
+ {{ stats.dirs }} {{ (stats.dirs > 1 ? 'directories' : 'directory') | translate:locale.language }}
+ }
+ @if (stats.dirs && stats.files) {
+ •
}
@if (stats.files) {
{{ stats.files }} {{ (stats.files > 1 ? 'files' : 'file') | translate:locale.language }}
}
- Total {{ stats.size | toBytes }}
+ {{ stats.size | toBytes }}
+
+ class="circle-primary-icon gallery-icon">
@if (s.newly) {
- {{ s.hTimeAgo }}
+ {{ s.hTimeAgo }}
}
@if (s.managers.length) {
@@ -109,7 +108,7 @@
}
diff --git a/frontend/src/app/applications/spaces/components/trash.component.html b/frontend/src/app/applications/spaces/components/trash.component.html
index 4cd554539..7f0a43782 100644
--- a/frontend/src/app/applications/spaces/components/trash.component.html
+++ b/frontend/src/app/applications/spaces/components/trash.component.html
@@ -24,7 +24,11 @@
@if (galleryMode?.enabled) {
-
+
+ class="circle-primary-icon gallery-icon">
@if (t.newly) {
- {{ t.hTimeAgo }}
+ {{ t.hTimeAgo }}
}
- {{ t.nb }}
+ {{ t.nb }}
@for (modal of windows; track modal.id) {
-
+
![]()
-
diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json
index 0f7fbd451..0db960dbb 100644
--- a/frontend/src/i18n/de.json
+++ b/frontend/src/i18n/de.json
@@ -296,7 +296,6 @@
"Share outside": "Extern teilen",
"Remove": "Entfernen",
"Clipboard": "Zwischenablage",
- "Send to Clipboard": "In die Zwischenablage senden",
"will be removed": "wird entfernt",
"Refresh": "Aktualisieren",
"Empty": "Leeren",
@@ -373,10 +372,6 @@
"files": "dateien",
"directory": "verzeichnis",
"directories": "verzeichnisse",
- "Total": "Gesamt",
- "no_selection": "kein Element ausgewählt",
- "one_selection": "{{ nb }} Element ausgewählt",
- "nb_selections": "{{ nb }} Elemente ausgewählt",
"Archive name": "Archivname",
"Drag and drop your files here": "Dateien hierher ziehen",
"The destination already exists": "Das Ziel existiert bereits",
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 4dd2dc744..b39bd1cc6 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -18,9 +18,6 @@
"scheduler_unit_hour": "hours",
"scheduler_unit_minute": "minutes",
"scheduler_unit_day": "days",
- "no_selection": "no item selected",
- "one_selection": "{{ nb }} item selected",
- "nb_selections": "{{ nb }} items selected",
"Client deleted": "Client deleted",
"Unable to delete client": "Unable to delete client",
"Cancelled": "Cancelled"
diff --git a/frontend/src/i18n/es.json b/frontend/src/i18n/es.json
index 3c7be9afa..660a44946 100644
--- a/frontend/src/i18n/es.json
+++ b/frontend/src/i18n/es.json
@@ -296,7 +296,6 @@
"Share outside": "Compartir externamente",
"Remove": "Eliminar",
"Clipboard": "Portapapeles",
- "Send to Clipboard": "Enviar al portapapeles",
"will be removed": "será eliminado",
"Refresh": "Actualizar",
"Empty": "Vaciar",
@@ -373,10 +372,6 @@
"files": "archivos",
"directory": "directorio",
"directories": "directorios",
- "Total": "Total",
- "no_selection": "ningún elemento seleccionado",
- "one_selection": "{{ nb }} elemento seleccionado",
- "nb_selections": "{{ nb }} elementos seleccionados",
"Archive name": "Nombre del archivo comprimido",
"Drag and drop your files here": "Arrastre y suelte sus archivos aquí",
"The destination already exists": "El destino ya existe",
diff --git a/frontend/src/i18n/fr.json b/frontend/src/i18n/fr.json
index 5422691ad..58f0e108e 100644
--- a/frontend/src/i18n/fr.json
+++ b/frontend/src/i18n/fr.json
@@ -296,7 +296,6 @@
"Share outside": "Partager à l'extérieur",
"Remove": "Supprimer",
"Clipboard": "Presse-papiers",
- "Send to Clipboard": "Envoyer au Presse-papiers",
"will be removed": "sera supprimé",
"Refresh": "Rafraîchir",
"Empty": "Vider",
@@ -373,10 +372,6 @@
"files": "fichiers",
"directory": "répertoire",
"directories": "répertoires",
- "Total": "Total",
- "no_selection": "aucun élément sélectionné",
- "one_selection": "{{ nb }} élément sélectionné",
- "nb_selections": "{{ nb }} éléments sélectionnés",
"Archive name": "Nom de l'archive",
"Drag and drop your files here": "Glisser déposer vos fichiers ici",
"The destination already exists": "La destination existe déjà",
diff --git a/frontend/src/i18n/hi.json b/frontend/src/i18n/hi.json
index 655898624..936e1c9b3 100644
--- a/frontend/src/i18n/hi.json
+++ b/frontend/src/i18n/hi.json
@@ -296,7 +296,6 @@
"Share outside": "बाह्य रूप से साझा करें",
"Remove": "हटाएँ",
"Clipboard": "क्लिपबोर्ड",
- "Send to Clipboard": "क्लिपबोर्ड पर भेजें",
"will be removed": "हटा दिया जाएगा",
"Refresh": "रिफ्रेश करें",
"Empty": "खाली करें",
@@ -373,10 +372,6 @@
"files": "फ़ाइलें",
"directory": "निर्देशिका",
"directories": "निर्देशिकाएँ",
- "Total": "कुल",
- "no_selection": "कोई तत्व चयनित नहीं",
- "one_selection": "{{ nb }} तत्व चयनित",
- "nb_selections": "{{ nb }} तत्व चयनित",
"Archive name": "आर्काइव का नाम",
"Drag and drop your files here": "अपनी फ़ाइलें यहाँ खींचें और छोड़ें",
"The destination already exists": "गंतव्य पहले से मौजूद है",
diff --git a/frontend/src/i18n/it.json b/frontend/src/i18n/it.json
index 77076ba24..50a5b2e7e 100644
--- a/frontend/src/i18n/it.json
+++ b/frontend/src/i18n/it.json
@@ -296,7 +296,6 @@
"Share outside": "Condividi esternamente",
"Remove": "Rimuovi",
"Clipboard": "Appunti",
- "Send to Clipboard": "Invia agli appunti",
"will be removed": "verrà rimosso",
"Refresh": "Aggiorna",
"Empty": "Svuota",
@@ -373,10 +372,6 @@
"files": "file",
"directory": "directory",
"directories": "directory",
- "Total": "Totale",
- "no_selection": "nessun elemento selezionato",
- "one_selection": "{{ nb }} elemento selezionato",
- "nb_selections": "{{ nb }} elementi selezionati",
"Archive name": "Nome dell’archivio",
"Drag and drop your files here": "Trascina e rilascia qui i tuoi file",
"The destination already exists": "La destinazione esiste già",
diff --git a/frontend/src/i18n/ja.json b/frontend/src/i18n/ja.json
index 438e47a10..e10ec7044 100644
--- a/frontend/src/i18n/ja.json
+++ b/frontend/src/i18n/ja.json
@@ -296,7 +296,6 @@
"Share outside": "外部で共有",
"Remove": "削除",
"Clipboard": "クリップボード",
- "Send to Clipboard": "クリップボードへ送る",
"will be removed": "削除されます",
"Refresh": "更新",
"Empty": "空にする",
@@ -373,10 +372,6 @@
"files": "ファイル",
"directory": "ディレクトリ",
"directories": "ディレクトリ",
- "Total": "合計",
- "no_selection": "選択なし",
- "one_selection": "{{ nb }} 個選択",
- "nb_selections": "{{ nb }} 個選択",
"Archive name": "アーカイブ名",
"Drag and drop your files here": "ここにファイルをドラッグ＆ドロップ",
"The destination already exists": "宛先は既に存在します",
diff --git a/frontend/src/i18n/ko.json b/frontend/src/i18n/ko.json
index c0e9d6c00..c565ad499 100644
--- a/frontend/src/i18n/ko.json
+++ b/frontend/src/i18n/ko.json
@@ -296,7 +296,6 @@
"Share outside": "외부 공유",
"Remove": "제거",
"Clipboard": "클립보드",
- "Send to Clipboard": "클립보드로 보내기",
"will be removed": "삭제됩니다",
"Refresh": "새로 고침",
"Empty": "비우기",
@@ -373,10 +372,6 @@
"files": "파일",
"directory": "디렉터리",
"directories": "디렉터리",
- "Total": "총계",
- "no_selection": "선택 없음",
- "one_selection": "{{ nb }}개 선택됨",
- "nb_selections": "{{ nb }}개 선택됨",
"Archive name": "압축 파일 이름",
"Drag and drop your files here": "여기에 파일을 드래그 앤 드롭하세요",
"The destination already exists": "대상이 이미 존재합니다",
diff --git a/frontend/src/i18n/nl.json b/frontend/src/i18n/nl.json
index 280e22886..347f6c4c7 100644
--- a/frontend/src/i18n/nl.json
+++ b/frontend/src/i18n/nl.json
@@ -296,7 +296,6 @@
"Share outside": "Extern delen",
"Remove": "Verwijderen",
"Clipboard": "Klembord",
- "Send to Clipboard": "Versturen naar klembord",
"will be removed": "wordt verwijderd",
"Refresh": "Verversen",
"Empty": "Leegmaken",
@@ -373,10 +372,6 @@
"files": "bestanden",
"directory": "map",
"directories": "mappen",
- "Total": "Totaal",
- "no_selection": "geen item geselecteerd",
- "one_selection": "{{ nb }} item geselecteerd",
- "nb_selections": "{{ nb }} items geselecteerd",
"Archive name": "Archiefnaam",
"Drag and drop your files here": "Sleep uw bestanden hierheen",
"The destination already exists": "De bestemming bestaat al",
diff --git a/frontend/src/i18n/pl.json b/frontend/src/i18n/pl.json
index 742048409..e741c4146 100644
--- a/frontend/src/i18n/pl.json
+++ b/frontend/src/i18n/pl.json
@@ -296,7 +296,6 @@
"Share outside": "Udostępnij na zewnątrz",
"Remove": "Usuń",
"Clipboard": "Schowek",
- "Send to Clipboard": "Wyślij do schowka",
"will be removed": "zostanie usunięty",
"Refresh": "Odśwież",
"Empty": "Opróżnij",
@@ -373,10 +372,6 @@
"files": "pliki",
"directory": "katalog",
"directories": "katalogi",
- "Total": "Razem",
- "no_selection": "brak zaznaczenia",
- "one_selection": "Zaznaczono {{ nb }} element",
- "nb_selections": "Zaznaczono {{ nb }} elementów",
"Archive name": "Nazwa archiwum",
"Drag and drop your files here": "Przeciągnij i upuść pliki tutaj",
"The destination already exists": "Miejsce docelowe już istnieje",
diff --git a/frontend/src/i18n/pt-BR.json b/frontend/src/i18n/pt-BR.json
index f5c2ae0de..05d4f2ec5 100644
--- a/frontend/src/i18n/pt-BR.json
+++ b/frontend/src/i18n/pt-BR.json
@@ -296,7 +296,6 @@
"Share outside": "Compartilhar externamente",
"Remove": "Remover",
"Clipboard": "Área de transferência",
- "Send to Clipboard": "Enviar para a área de transferência",
"will be removed": "será removido",
"Refresh": "Atualizar",
"Empty": "Esvaziar",
@@ -373,10 +372,6 @@
"files": "arquivos",
"directory": "diretório",
"directories": "diretórios",
- "Total": "Total",
- "no_selection": "nenhum item selecionado",
- "one_selection": "{{ nb }} item selecionado",
- "nb_selections": "{{ nb }} itens selecionados",
"Archive name": "Nome do arquivo compactado",
"Drag and drop your files here": "Arraste e solte seus arquivos aqui",
"The destination already exists": "O destino já existe",
diff --git a/frontend/src/i18n/pt.json b/frontend/src/i18n/pt.json
index 7271a3e84..a08fceca3 100644
--- a/frontend/src/i18n/pt.json
+++ b/frontend/src/i18n/pt.json
@@ -296,7 +296,6 @@
"Share outside": "Compartilhar externamente",
"Remove": "Remover",
"Clipboard": "Área de transferência",
- "Send to Clipboard": "Enviar para a área de transferência",
"will be removed": "será removido",
"Refresh": "Atualizar",
"Empty": "Esvaziar",
@@ -373,10 +372,6 @@
"files": "arquivos",
"directory": "diretório",
"directories": "diretórios",
- "Total": "Total",
- "no_selection": "nenhum item selecionado",
- "one_selection": "{{ nb }} item selecionado",
- "nb_selections": "{{ nb }} itens selecionados",
"Archive name": "Nome do arquivo compactado",
"Drag and drop your files here": "Arraste e solte seus arquivos aqui",
"The destination already exists": "O destino já existe",
diff --git a/frontend/src/i18n/ru.json b/frontend/src/i18n/ru.json
index 5c5b633ff..41fe34616 100644
--- a/frontend/src/i18n/ru.json
+++ b/frontend/src/i18n/ru.json
@@ -296,7 +296,6 @@
"Share outside": "Поделиться снаружи",
"Remove": "Удалить",
"Clipboard": "Буфер обмена",
- "Send to Clipboard": "Отправить в буфер обмена",
"will be removed": "будет удалено",
"Refresh": "Обновить",
"Empty": "Очистить",
@@ -373,10 +372,6 @@
"files": "файлы",
"directory": "каталог",
"directories": "каталоги",
- "Total": "Всего",
- "no_selection": "ничего не выбрано",
- "one_selection": "выбран {{ nb }} элемент",
- "nb_selections": "выбрано {{ nb }} элементов",
"Archive name": "Имя архива",
"Drag and drop your files here": "Перетащите сюда ваши файлы",
"The destination already exists": "Пункт назначения уже существует",
diff --git a/frontend/src/i18n/tr.json b/frontend/src/i18n/tr.json
index 671c410b7..41ce442e7 100644
--- a/frontend/src/i18n/tr.json
+++ b/frontend/src/i18n/tr.json
@@ -296,7 +296,6 @@
"Share outside": "Dışarıda paylaş",
"Remove": "Kaldır",
"Clipboard": "Pano",
- "Send to Clipboard": "Panoya gönder",
"will be removed": "kaldırılacak",
"Refresh": "Yenile",
"Empty": "Boşalt",
@@ -373,10 +372,6 @@
"files": "dosyalar",
"directory": "dizin",
"directories": "dizinler",
- "Total": "Toplam",
- "no_selection": "seçim yok",
- "one_selection": "{{ nb }} öğe seçildi",
- "nb_selections": "{{ nb }} öğe seçildi",
"Archive name": "Arşiv adı",
"Drag and drop your files here": "Dosyalarınızı buraya sürükleyip bırakın",
"The destination already exists": "Hedef zaten mevcut",
diff --git a/frontend/src/i18n/zh.json b/frontend/src/i18n/zh.json
index d2503533e..7b3e629d6 100644
--- a/frontend/src/i18n/zh.json
+++ b/frontend/src/i18n/zh.json
@@ -296,7 +296,6 @@
"Share outside": "外部共享",
"Remove": "移除",
"Clipboard": "剪贴板",
- "Send to Clipboard": "发送到剪贴板",
"will be removed": "将被删除",
"Refresh": "刷新",
"Empty": "清空",
@@ -373,10 +372,6 @@
"files": "文件",
"directory": "目录",
"directories": "目录",
- "Total": "总计",
- "no_selection": "未选择任何项目",
- "one_selection": "已选择 {{ nb }} 个项目",
- "nb_selections": "已选择 {{ nb }} 个项目",
"Archive name": "归档名称",
"Drag and drop your files here": "将文件拖放到此处",
"The destination already exists": "目标已存在",
diff --git a/frontend/src/styles/components/_app.scss b/frontend/src/styles/components/_app.scss
index e7bd82f07..c30954d41 100755
--- a/frontend/src/styles/components/_app.scss
+++ b/frontend/src/styles/components/_app.scss
@@ -135,96 +135,10 @@
}
}
-.app-thumbs {
- @extend .container-fluid;
- padding-top: .4rem;
- margin-top: 0;
- padding-left: 0;
- padding-right: 0;
-
- .row {
- margin-right: 0.4rem;
- margin-left: 0.4rem;
- font-size: $font-size-xs;
-
- .card {
- margin-right: 0.2rem;
- margin-bottom: 0.2rem;
- border-width: .5px;
- border-color: transparent;
-
- &.selected {
- background-color: transparent;
-
- .card-footer {
- background-color: transparent;
- }
- }
-
- &.deleted {
- opacity: 0.3;
- }
-
- &.disabled {
- opacity: 0.5;
- }
-
- .card-body {
- display: flex;
- align-items: center;
- align-self: center;
- border-top-left-radius: $border-radius-base;
- border-top-right-radius: $border-radius-base;
- padding: 0.3rem;
-
- .label-bottom-right {
- display: flex;
- flex-direction: column;
- font-style: normal;
- font-weight: 500;
- position: absolute;
- bottom: 28px;
- right: .2rem;
-
- > span {
- margin-top: 0.15rem;
- }
- }
-
- .label-bottom-left {
- font-style: normal;
- font-weight: 500;
- position: absolute;
- bottom: 28px;
- left: .2rem;
- }
-
- .label-top-right {
- font-style: normal;
- font-weight: 500;
- position: absolute;
- top: .2rem;
- right: .2rem;
- }
-
- .label-top-left {
- font-style: normal;
- font-weight: 500;
- position: absolute;
- top: .2rem;
- left: .2rem;
- }
- }
-
- .card-footer {
- background-color: transparent;
- border-top: .5px solid;
- }
- }
- }
-}
-
.app-table {
+ --app-table-cell-inline-padding: .5rem;
+ --app-table-row-height: 36px;
+
@extend .table;
@include no-select-utility;
table-layout: fixed;
@@ -243,13 +157,13 @@
white-space: nowrap;
font-weight: 500;
border: none;
- padding: .25rem 0.5rem;
+ padding: .25rem var(--app-table-cell-inline-padding);
}
}
}
tbody tr {
- height: 36px !important;
+ height: var(--app-table-row-height) !important;
border-bottom: .5px solid;
&:hover {
@@ -275,6 +189,7 @@
vertical-align: middle;
max-width: 0;
padding-bottom: 1px;
+ padding-inline: var(--app-table-cell-inline-padding);
padding-top: 1px;
span {
diff --git a/frontend/src/styles/components/_gallery.scss b/frontend/src/styles/components/_gallery.scss
new file mode 100644
index 000000000..c1965eb7c
--- /dev/null
+++ b/frontend/src/styles/components/_gallery.scss
@@ -0,0 +1,104 @@
+.app-gallery {
+ @extend .container-fluid;
+ padding-top: .4rem;
+ margin-top: 0;
+ padding-left: 0;
+ padding-right: 0;
+
+ .row {
+ margin-right: .4rem;
+ margin-left: .4rem;
+ font-size: $font-size-xs;
+
+ .card {
+ width: var(--gallery-card-size);
+ height: var(--gallery-card-size);
+ margin-right: .2rem;
+ margin-bottom: .2rem;
+ border-width: .5px;
+ border-color: transparent;
+
+ &.selected {
+ background-color: transparent;
+
+ .card-footer {
+ background-color: transparent;
+ }
+ }
+
+ &.deleted {
+ opacity: .3;
+ }
+
+ &.disabled {
+ opacity: .5;
+ }
+
+ .card-body {
+ display: flex;
+ align-items: center;
+ align-self: center;
+ border-top-left-radius: $border-radius-base;
+ border-top-right-radius: $border-radius-base;
+ padding: .3rem;
+
+ .label-bottom-right {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ right: .2rem;
+ bottom: 28px;
+ font-style: normal;
+ font-weight: 500;
+
+ > span {
+ margin-top: .15rem;
+ }
+ }
+
+ .label-bottom-left {
+ position: absolute;
+ bottom: 28px;
+ left: .2rem;
+ font-style: normal;
+ font-weight: 500;
+ }
+
+ .label-top-right {
+ position: absolute;
+ top: .2rem;
+ right: .2rem;
+ font-style: normal;
+ font-weight: 500;
+ }
+
+ }
+
+ .card-footer {
+ background-color: transparent;
+ border-top: .5px solid;
+ }
+ }
+ }
+
+ .badge,
+ .card-footer,
+ .card-footer input {
+ font-size: var(--gallery-text-size);
+ }
+}
+
+.gallery-image {
+ width: var(--gallery-image-size);
+ height: var(--gallery-image-size);
+}
+
+.gallery-thumbnail {
+ max-height: var(--gallery-image-size);
+}
+
+.gallery-icon {
+ min-width: var(--gallery-image-size);
+ min-height: var(--gallery-image-size);
+ font-size: var(--gallery-icon-size);
+}
diff --git a/frontend/src/styles/components/_sidebar_right.scss b/frontend/src/styles/components/_sidebar_right.scss
index 0e87be496..2c45c88ea 100755
--- a/frontend/src/styles/components/_sidebar_right.scss
+++ b/frontend/src/styles/components/_sidebar_right.scss
@@ -40,7 +40,6 @@
.sidebar-item {
.sidebar-item-container {
display: flex;
- cursor: pointer;
.sidebar-item-content {
display: flex;
@@ -49,6 +48,11 @@
height: 40px;
padding: .2rem .4rem .2rem .4rem;
border-bottom: .5px solid transparent;
+ user-select: none;
+
+ > img {
+ margin-right: .3rem;
+ }
}
}
}
diff --git a/frontend/src/styles/components/_theme_dark.scss b/frontend/src/styles/components/_theme_dark.scss
index 12e7de3ab..fe868e965 100755
--- a/frontend/src/styles/components/_theme_dark.scss
+++ b/frontend/src/styles/components/_theme_dark.scss
@@ -394,7 +394,7 @@
background: $success;
}
}
- .app-thumbs {
+ .app-gallery {
background-color: inherit !important;
.row {
diff --git a/frontend/src/styles/components/_theme_light.scss b/frontend/src/styles/components/_theme_light.scss
index 8ac223c0c..7a316077c 100755
--- a/frontend/src/styles/components/_theme_light.scss
+++ b/frontend/src/styles/components/_theme_light.scss
@@ -354,7 +354,7 @@
background: $theme-light-panel-alt-bg;
color: $custom-color;
}
- .app-thumbs {
+ .app-gallery {
background-color: $gray-lighter;
.row {
diff --git a/frontend/src/styles/components/index.scss b/frontend/src/styles/components/index.scss
index dcec4ef8e..153e9bf01 100644
--- a/frontend/src/styles/components/index.scss
+++ b/frontend/src/styles/components/index.scss
@@ -25,6 +25,7 @@
@import 'texts';
@import 'backgrounds';
@import 'app';
+@import 'gallery';
@import 'chats';
@import 'wizard';
@import 'tree';
{{ modal.element.name }}
-