From 7281a7128c3478e985af53ff7adb5dc656fc1ce9 Mon Sep 17 00:00:00 2001 From: johaven Date: Fri, 24 Jul 2026 00:55:56 +0200 Subject: [PATCH 01/15] feat(frontend:spaces): add file selection controls with accessible toggle behavior --- .../components/spaces-browser.component.html | 25 +++++-- .../components/spaces-browser.component.scss | 72 +++++++++++++++++++ .../components/spaces-browser.component.ts | 12 +++- 3 files changed, 102 insertions(+), 7 deletions(-) create mode 100644 frontend/src/app/applications/spaces/components/spaces-browser.component.scss diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.html b/frontend/src/app/applications/spaces/components/spaces-browser.component.html index 245db6fa7..2215a6768 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.html +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.html @@ -391,12 +391,25 @@ @switch (th.key) { @case ('name') {
- + + + + @if (f.isRenamed) { img { + margin-right: 0 !important; + } +} + +.file-selection-overlay { + position: absolute; + inset: 0; + width: 30px; + height: 30px; + padding: 0; + color: rgba(255, 255, 255, .88); + background: transparent; + border: 0; + opacity: 0; + cursor: pointer; + + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + + &.is-selected { + color: #fff; + opacity: 1; + + .file-selection-indicator { + background-color: rgba(24, 27, 34, .95); + } + } +} + +.file-selection-indicator { + position: absolute; + top: 0; + left: 0; + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + background-color: rgba(32, 36, 45, .78); + border-radius: .25rem; + font-size: .55rem; + + fa-icon { + margin-right: 0 !important; + } +} + +.file-selection-control:hover .file-selection-overlay, +.file-selection-overlay:focus-visible { + opacity: 1; +} + +@media (hover: none) { + .file-selection-overlay { + opacity: 1; + + .file-selection-indicator { + background-color: rgba(32, 36, 45, .68); + } + } +} 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..f940a1c1b 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts @@ -10,6 +10,7 @@ import { faArrowsAlt, faArrowUp, faBan, + faCheck, faCircleInfo, faCirclePlus, faClipboardList, @@ -108,7 +109,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 +149,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy faArrowsAlt, faCircleInfo, faBan, + faCheck, faArrowUp, faArrowDown, faLock, @@ -395,6 +398,13 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy } } + toggleFileSelection(ev: MouseEvent, file: FileModel) { + ev.stopPropagation() + if (!this.loading) { + this.modifySelection(file) + } + } + onContextMenu(ev: MouseEvent | Event) { ev.preventDefault() ev.stopPropagation() From 1547273a0a994527bfa4b848ed964b12e14c0652 Mon Sep 17 00:00:00 2001 From: johaven Date: Sat, 25 Jul 2026 00:09:50 +0200 Subject: [PATCH 02/15] fix(frontend:spaces): refine file selection check behavior --- .../components/spaces-browser.component.html | 2 +- .../components/spaces-browser.component.scss | 9 ++---- .../components/spaces-browser.component.ts | 30 +++++++++++++++---- 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.html b/frontend/src/app/applications/spaces/components/spaces-browser.component.html index 2215a6768..d8f42b8b0 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.html +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.html @@ -402,7 +402,7 @@ (click)="toggleFileSelection($event, f)" [attr.aria-label]="f.name" [attr.aria-pressed]="f.isSelected" - [class.is-selected]="f.isSelected" + [class.is-selected]="f.isSelected && showSelectionChecks" class="file-selection-overlay" type="button"> diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.scss b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss index a8e2f1bb2..54aba273b 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.scss +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss @@ -56,17 +56,12 @@ } } -.file-selection-control:hover .file-selection-overlay, .file-selection-overlay:focus-visible { opacity: 1; } -@media (hover: none) { - .file-selection-overlay { +@media (hover: hover) { + .file-selection-control:hover .file-selection-overlay { opacity: 1; - - .file-selection-indicator { - background-color: rgba(32, 36, 45, .68); - } } } 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 f940a1c1b..5de39cea2 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts @@ -173,6 +173,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 @@ -249,6 +250,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy private focusOnSelect: string private selectionAnchor: FileModel | null = null private selectionFocus: FileModel | null = null + private imageSelectionMode = false // Sort private readonly sortSettings: SortSettings = { default: [ @@ -401,6 +403,14 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy toggleFileSelection(ev: MouseEvent, file: FileModel) { ev.stopPropagation() if (!this.loading) { + if (!this.imageSelectionMode && this.selection.length === 1 && !file.isSelected) { + this.imageSelectionMode = true + this.setSelection([file], file, file, true) + return + } + if (!this.selection.length) { + this.imageSelectionMode = true + } this.modifySelection(file) } } @@ -802,19 +812,29 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy this.setSelection( this.selection.filter((f) => f !== file), file, - file + file, + true ) } else { - this.setSelection([file, ...this.selection], file, file) + this.setSelection([file, ...this.selection], file, file, true) } } - private setSelection(selection: FileModel[], selectionAnchor: FileModel | null = null, selectionFocus: FileModel | null = selectionAnchor) { + private setSelection( + selection: FileModel[], + selectionAnchor: FileModel | null = null, + selectionFocus: FileModel | null = selectionAnchor, + keepImageSelectionMode = false + ) { const selected = new Set(selection) this.selection = this.files.filter((file: FileModel) => { file.isSelected = selected.has(file) return file.isSelected }) + if (!keepImageSelectionMode || !this.selection.length) { + this.imageSelectionMode = false + } + this.showSelectionChecks = this.selection.length > 1 || this.imageSelectionMode this.setSelectionCursor(selectionAnchor, selectionFocus) // update states this.hasSelection = !!this.selection.length @@ -844,7 +864,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 @@ -857,7 +877,7 @@ 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 } { From da798452a1925bb6796af45d8909452e247a7cf8 Mon Sep 17 00:00:00 2001 From: johaven Date: Sat, 25 Jul 2026 00:25:54 +0200 Subject: [PATCH 03/15] fix(frontend:spaces): expand file selection hit area --- .../spaces/components/spaces-browser.component.scss | 13 ++++++++----- frontend/src/styles/components/_app.scss | 8 ++++++-- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.scss b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss index 54aba273b..66f90fa18 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.scss +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss @@ -5,6 +5,7 @@ width: 30px; height: 30px; margin-right: .3rem; + overflow: visible; > img { margin-right: 0 !important; @@ -13,15 +14,17 @@ .file-selection-overlay { position: absolute; - inset: 0; - width: 30px; - height: 30px; + 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); padding: 0; color: rgba(255, 255, 255, .88); background: transparent; border: 0; opacity: 0; cursor: pointer; + transform: translateY(-50%); &:focus-visible { outline: 2px solid currentColor; @@ -40,8 +43,8 @@ .file-selection-indicator { position: absolute; - top: 0; - left: 0; + top: calc((var(--app-table-row-height) - 30px) / 2); + left: var(--app-table-cell-inline-padding); display: inline-flex; align-items: center; justify-content: center; diff --git a/frontend/src/styles/components/_app.scss b/frontend/src/styles/components/_app.scss index e7bd82f07..5bad56ecc 100755 --- a/frontend/src/styles/components/_app.scss +++ b/frontend/src/styles/components/_app.scss @@ -225,6 +225,9 @@ } .app-table { + --app-table-cell-inline-padding: .5rem; + --app-table-row-height: 36px; + @extend .table; @include no-select-utility; table-layout: fixed; @@ -243,13 +246,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 +278,7 @@ vertical-align: middle; max-width: 0; padding-bottom: 1px; + padding-inline: var(--app-table-cell-inline-padding); padding-top: 1px; span { From c0ea86f112f679ccec723dda64ddd661bc5f01f6 Mon Sep 17 00:00:00 2001 From: johaven Date: Sat, 25 Jul 2026 01:29:45 +0200 Subject: [PATCH 04/15] fix(frontend:spaces): preserve selection when activating file check --- .../components/spaces-browser.component.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) 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 5de39cea2..81098cae6 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts @@ -250,7 +250,7 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy private focusOnSelect: string private selectionAnchor: FileModel | null = null private selectionFocus: FileModel | null = null - private imageSelectionMode = false + private selectionControlMode = false // Sort private readonly sortSettings: SortSettings = { default: [ @@ -403,13 +403,13 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy toggleFileSelection(ev: MouseEvent, file: FileModel) { ev.stopPropagation() if (!this.loading) { - if (!this.imageSelectionMode && this.selection.length === 1 && !file.isSelected) { - this.imageSelectionMode = true + if (!this.selectionControlMode && this.selection.length === 1) { + this.selectionControlMode = true this.setSelection([file], file, file, true) return } if (!this.selection.length) { - this.imageSelectionMode = true + this.selectionControlMode = true } this.modifySelection(file) } @@ -824,17 +824,17 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy selection: FileModel[], selectionAnchor: FileModel | null = null, selectionFocus: FileModel | null = selectionAnchor, - keepImageSelectionMode = false + keepSelectionControlMode = false ) { const selected = new Set(selection) this.selection = this.files.filter((file: FileModel) => { file.isSelected = selected.has(file) return file.isSelected }) - if (!keepImageSelectionMode || !this.selection.length) { - this.imageSelectionMode = false + if (!keepSelectionControlMode || !this.selection.length) { + this.selectionControlMode = false } - this.showSelectionChecks = this.selection.length > 1 || this.imageSelectionMode + this.showSelectionChecks = this.selection.length > 1 || this.selectionControlMode this.setSelectionCursor(selectionAnchor, selectionFocus) // update states this.hasSelection = !!this.selection.length From 9e3db4e9fb8ba4925c31537daaac75d6110fff04 Mon Sep 17 00:00:00 2001 From: johaven Date: Sat, 25 Jul 2026 01:48:59 +0200 Subject: [PATCH 05/15] feat(frontend:gallery): add selection controls and centralize view sizing --- .../links/components/links.component.html | 13 +- .../shares/components/shared.component.html | 16 ++- .../components/spaces-browser.component.html | 38 +++--- .../components/spaces-browser.component.scss | 71 +++++++++-- .../spaces/components/spaces.component.html | 17 ++- .../spaces/components/trash.component.html | 19 ++- frontend/src/styles/components/_app.scss | 89 -------------- frontend/src/styles/components/_gallery.scss | 111 ++++++++++++++++++ .../src/styles/components/_theme_dark.scss | 2 +- .../src/styles/components/_theme_light.scss | 2 +- frontend/src/styles/components/index.scss | 1 + 11 files changed, 225 insertions(+), 154 deletions(-) create mode 100644 frontend/src/styles/components/_gallery.scss 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) { -
+
- + @if (s.newly) { - + {{ s.hTimeAccessAgo }} } @@ -92,7 +93,7 @@
- {{ s.name }} + {{ s.name }}
} 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.hTimeAgo }} + {{ s.hTimeAgo }} } @if (s.hasComments) { } @if (s.counts.shares) {
{{ s.counts.shares }} @@ -103,7 +101,7 @@
- {{ s.name }} + {{ s.name }}
} diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.html b/frontend/src/app/applications/spaces/components/spaces-browser.component.html index d8f42b8b0..122b7117b 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.html +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.html @@ -207,7 +207,11 @@ @if (galleryMode?.enabled) { -
+
+ @if (f.isImage) { } @else { } @@ -252,21 +263,18 @@ } @case ('comments') { } @case ('shares') { {{ f.shares.length }} @@ -274,7 +282,6 @@ } @case ('spaces') { {{ f.spaces.length }} @@ -282,7 +289,6 @@ } @case ('links') { {{ f.links.length }} @@ -290,7 +296,6 @@ } @case ('syncs') { {{ f.syncs.length }} @@ -301,7 +306,6 @@ } @if (hiddenBadges > 0) { {{ hiddenBadges }} @@ -320,7 +324,7 @@ } @if (f.newly) { - {{ f.hTimeAgo }} + {{ f.hTimeAgo }} }
@@ -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 }} }
diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.scss b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss index 66f90fa18..040206bfc 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.scss +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss @@ -14,17 +14,12 @@ .file-selection-overlay { position: absolute; - 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); padding: 0; color: rgba(255, 255, 255, .88); background: transparent; border: 0; opacity: 0; cursor: pointer; - transform: translateY(-50%); &:focus-visible { outline: 2px solid currentColor; @@ -37,34 +32,88 @@ .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; - top: calc((var(--app-table-row-height) - 30px) / 2); - left: var(--app-table-cell-inline-padding); display: inline-flex; align-items: center; justify-content: center; - width: 16px; - height: 16px; background-color: rgba(32, 36, 45, .78); border-radius: .25rem; - font-size: .55rem; + 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); + } +} + .file-selection-overlay:focus-visible { opacity: 1; } @media (hover: hover) { - .file-selection-control:hover .file-selection-overlay { + .file-selection-control:hover .file-selection-overlay, + .app-gallery .card:hover .gallery-file-selection-overlay { opacity: 1; } } 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) { -
+
+ class="circle-primary-icon gallery-icon"> @if (s.newly) { - {{ s.hTimeAgo }} + {{ s.hTimeAgo }} } @if (s.managers.length) { @@ -109,7 +108,7 @@
- {{ s.name }} + {{ s.name }}
} 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 }}
- + @if (t.isPersonal) { {{ t.name | translate:locale.language }} } @else { diff --git a/frontend/src/styles/components/_app.scss b/frontend/src/styles/components/_app.scss index 5bad56ecc..c30954d41 100755 --- a/frontend/src/styles/components/_app.scss +++ b/frontend/src/styles/components/_app.scss @@ -135,95 +135,6 @@ } } -.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; diff --git a/frontend/src/styles/components/_gallery.scss b/frontend/src/styles/components/_gallery.scss new file mode 100644 index 000000000..1d764e19b --- /dev/null +++ b/frontend/src/styles/components/_gallery.scss @@ -0,0 +1,111 @@ +.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; + } + + .label-top-left { + position: absolute; + top: .2rem; + left: .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/_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'; From 9c99fdcd42e5e589c5f15e7290940d292d6b40b0 Mon Sep 17 00:00:00 2001 From: johaven Date: Sat, 25 Jul 2026 01:53:27 +0200 Subject: [PATCH 06/15] fix(frontend:spaces): support range selection from selection overlay --- .../spaces/components/spaces-browser.component.ts | 5 +++++ 1 file changed, 5 insertions(+) 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 81098cae6..dd3e0af86 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts @@ -403,6 +403,11 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy toggleFileSelection(ev: MouseEvent, file: FileModel) { ev.stopPropagation() if (!this.loading) { + 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) From 0c2923638fb2ff49df4da6174dcdcc42bd643dd2 Mon Sep 17 00:00:00 2001 From: johaven Date: Sat, 25 Jul 2026 02:02:27 +0200 Subject: [PATCH 07/15] fix(frontend:spaces): refine selection overlay hover behavior --- .../spaces/components/spaces-browser.component.html | 2 +- .../spaces/components/spaces-browser.component.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.html b/frontend/src/app/applications/spaces/components/spaces-browser.component.html index 122b7117b..6a4232def 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.html +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.html @@ -209,7 +209,7 @@
Date: Mon, 27 Jul 2026 00:29:25 +0200 Subject: [PATCH 08/15] fix(frontend:spaces): support file shortcuts from selection overlays --- .../components/spaces-browser.component.ts | 120 ++++++++++-------- 1 file changed, 66 insertions(+), 54 deletions(-) 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 dd3e0af86..a2ec90fbd 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 { @@ -86,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 = new Set(['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown']) + @Component({ selector: 'app-spaces-browser', imports: [ @@ -295,40 +299,6 @@ 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() { this.loading = true this.forbiddenResource = false @@ -885,15 +855,19 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy 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 @@ -901,15 +875,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[] { @@ -935,7 +909,41 @@ 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 scrollKeyboardSelectionIntoView(file: FileModel, key: KeyboardNavigationKey) { if (this.scrollView.viewPortItems.indexOf(file) === -1) { setTimeout(() => this.scrollView.scrollInto(file), 0) return @@ -945,9 +953,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') } } @@ -1041,14 +1049,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 + } + if (this.handleKeyboardShortcut(ev)) { return } - const code = ev.keyCode || ev.which - if ([37, 38, 39, 40].indexOf(code) === -1) { + if (!keyboardNavigationKeys.has(ev.key)) { return - } else if ((code === 37 || code === 39) && !this.galleryMode.enabled) { + } + const key = ev.key as KeyboardNavigationKey + if ((key === 'ArrowLeft' || key === 'ArrowRight') && !this.galleryMode.enabled) { return } ev.preventDefault() @@ -1057,9 +1069,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) }) }) } From f1ace08d59049d94cdbdfc596ff0a77b12121091 Mon Sep 17 00:00:00 2001 From: johaven Date: Mon, 27 Jul 2026 00:40:42 +0200 Subject: [PATCH 09/15] fix(frontend:spaces): focus file view after route navigation --- .../components/spaces-browser.component.ts | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) 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 a2ec90fbd..a004f38e4 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts @@ -299,7 +299,9 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy this.subscriptions.forEach((s) => s.unsubscribe()) } - 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 @@ -329,6 +331,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 = [] @@ -656,7 +661,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) { @@ -943,6 +948,21 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy 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) From 092d1e42805eef17f26772c87b316a287c5d850c Mon Sep 17 00:00:00 2001 From: johaven Date: Tue, 28 Jul 2026 23:43:58 +0200 Subject: [PATCH 10/15] feat(frontend:files): update folder size after lazy loading --- .../files/components/sidebar/files-selection.component.ts | 6 ++++-- frontend/src/app/applications/files/models/file.model.ts | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) 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..5cfa6c61f 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 @@ -9,7 +9,6 @@ import { map } 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 { TAB_MENU } from '../../../../layout/layout.interfaces' import { LayoutService } from '../../../../layout/layout.service' @@ -100,7 +99,10 @@ export class FilesSelectionComponent { if (!f.isDir) return of(f.hSize) if (!f.hDirSize) { f.hDirSize = this.filesService.getSize(f).pipe( - map((size) => convertBytesToText(size, 0, true)), + map((size) => { + f.updateSize(size) + return f.hSize + }), catchError(() => (f.hDirSize = of(f.hSize))), shareReplay(1) ) diff --git a/frontend/src/app/applications/files/models/file.model.ts b/frontend/src/app/applications/files/models/file.model.ts index 87383e7f3..82f9f0e07 100644 --- a/frontend/src/app/applications/files/models/file.model.ts +++ b/frontend/src/app/applications/files/models/file.model.ts @@ -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 }[]) { From d9efccc8374411d24df29fd43e5519f3db3cdebb Mon Sep 17 00:00:00 2001 From: johaven Date: Wed, 29 Jul 2026 10:43:38 +0200 Subject: [PATCH 11/15] fix(frontend:spaces): exclude disabled files from multi-selection --- .../spaces/components/spaces-browser.component.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) 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 a004f38e4..e805ea014 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts @@ -806,7 +806,10 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy selectionFocus: FileModel | null = selectionAnchor, keepSelectionControlMode = false ) { - const selected = new Set(selection) + 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 @@ -815,7 +818,12 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy this.selectionControlMode = false } this.showSelectionChecks = this.selection.length > 1 || this.selectionControlMode - this.setSelectionCursor(selectionAnchor, selectionFocus) + 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) From 63f050d48be4383295bcfcc50a918ffeb490e243 Mon Sep 17 00:00:00 2001 From: johaven Date: Wed, 29 Jul 2026 12:03:27 +0200 Subject: [PATCH 12/15] feat(frontend:files): enrich selection sidebar details and actions --- .../sidebar/files-selection.component.html | 91 ++++++++++++----- .../sidebar/files-selection.component.ts | 98 ++++++++++++++----- .../sidebar/files-tree.component.ts | 11 ++- .../interfaces/file-selection.interface.ts | 7 ++ .../applications/files/models/file.model.ts | 2 +- .../files/services/files.service.ts | 14 ++- .../components/spaces-browser.component.ts | 3 +- 7 files changed, 168 insertions(+), 58 deletions(-) create mode 100644 frontend/src/app/applications/files/interfaces/file-selection.interface.ts 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..aebc72747 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,25 +1,67 @@ @if (files().length) { - @if (multiple()) { -
-
- +
+
-
-
- } -
- @if (multiple()) { -
- @for (f of files(); track f.id) { -
- - {{ f.name }} -
- } -
+ @if (filesListExpanded) { +
+
+ @for (f of files(); track f.id) { +
+ + {{ f.name }} +
+ } +
+ } } @else { @for (f of files(); track f.id) {
@@ -47,12 +89,11 @@
Size
- @let size = (getSizeLazy(f) | async); - @if (size === null) { - - } @else { - {{ size }} - } + @if (f.isDir && (getSizeLazy(f) | async) === null) { + + } @else { + {{ f.hSize }} + }
Created
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 5cfa6c61f..1592d7fd6 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,14 +1,19 @@ 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 { faChevronDown, faChevronUp, faLock, faSpinner, 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 { ToBytesPipe } from '../../../../common/pipes/to-bytes.pipe' import { defaultCardImageSize, defaultResizeOffset } from '../../../../layout/layout.constants' import { TAB_MENU } from '../../../../layout/layout.interfaces' import { LayoutService } from '../../../../layout/layout.service' @@ -16,8 +21,10 @@ 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' @@ -35,16 +42,50 @@ 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 = 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 resizeOffset = defaultResizeOffset protected readonly cardImageSize = defaultCardImageSize + protected filesListExpanded = false + 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 | null): SelectionSize => ({ + size: total.size + (size ?? 0), + pendingDirectories: total.pendingDirectories - 1, + hasError: total.hasError || size === null + }), + initial + ), + startWith(initial) + ) + }), + shareReplay(1) + ) protected readonly icons = { SPACES: SPACES_ICON.SPACES, SHARES: SPACES_ICON.SHARES, @@ -52,13 +93,10 @@ export class FilesSelectionComponent { SYNC: SYNC_ICON.SYNC, faLock, faUnlock, - faClipboardCheck, - faArrowsAlt, - faSpinner + faSpinner, + faChevronDown, + faChevronUp } - 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) @@ -79,6 +117,21 @@ export class FilesSelectionComponent { this.layout.showRSideBarTab(TAB_MENU.CLIPBOARD, true) } + 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 @@ -96,17 +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) => { - f.updateSize(size) - return f.hSize - }), - 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(null)), + 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..4e442ce5e 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,17 @@ 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((copyMoveOn) => { + if (copyMoveOn) { + 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 82f9f0e07..b91eba8f2 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')[] = [] diff --git a/frontend/src/app/applications/files/services/files.service.ts b/frontend/src/app/applications/files/services/files.service.ts index 66445e67a..f43a64cc3 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, 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,8 @@ 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.asObservable() // Clipboard section public clipboardAction: 'copyPaste' | 'cutPaste' = 'copyPaste' // Files @@ -77,6 +78,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/spaces/components/spaces-browser.component.ts b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts index e805ea014..f0429c64d 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts @@ -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() { From d13286a2ccd181ca1e89901b8aa24d5beb964c6e Mon Sep 17 00:00:00 2001 From: johaven Date: Thu, 30 Jul 2026 00:15:43 +0200 Subject: [PATCH 13/15] feat(frontend:files): make sidebar selection list interactive --- .../sidebar/files-clipboard.component.html | 4 +- .../sidebar/files-selection.component.html | 126 +++++++++--------- .../sidebar/files-selection.component.ts | 16 +-- .../sidebar/files-tree.component.ts | 8 +- .../files/services/files.service.ts | 6 +- .../components/spaces-browser.component.ts | 3 + .../sidebar/components/windows.component.html | 6 +- .../src/styles/components/_sidebar_right.scss | 6 +- 8 files changed, 90 insertions(+), 85 deletions(-) diff --git a/frontend/src/app/applications/files/components/sidebar/files-clipboard.component.html b/frontend/src/app/applications/files/components/sidebar/files-clipboard.component.html index 52390d7f1..f635fbca0 100644 --- a/frontend/src/app/applications/files/components/sidebar/files-clipboard.component.html +++ b/frontend/src/app/applications/files/components/sidebar/files-clipboard.component.html @@ -26,9 +26,9 @@ @for (f of files; track f.id) {
- +
{{ f.name }}
-
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 aebc72747..fa7a25851 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,68 +1,66 @@ @if (files().length) { -
- @if (files().length > 1) { - @let stats = selectionStats(); - @let totalSize = (selectionSize | async); -
-
- {{ 'nb_selections' | translate:locale.language:{ nb: files().length } }} -
-
- @if (stats.directories) { - - {{ stats.directories }} - {{ (stats.directories > 1 ? 'directories' : 'directory') | translate:locale.language }} - - } - @if (stats.directories && stats.files) { - · - } - @if (stats.files) { - - {{ stats.files }} - {{ (stats.files > 1 ? 'files' : 'file') | translate:locale.language }} - - } -
-
- Total :  - @if (totalSize !== null) { - @if (totalSize.pendingDirectories || totalSize.hasError) { - ≥  - } - {{ totalSize.size | toBytes:0:true }} - } -
-
- - -
- + @if (files().length > 1) { + @let stats = selectionStats(); + @let totalSize = selectionSize | async; +
+
+ {{ 'nb_selections' | translate:locale.language:{ nb: files().length } }}
- @if (filesListExpanded) { -
-
- @for (f of files(); track f.id) { -
- - {{ f.name }} -
+
+ @if (stats.directories) { + + {{ stats.directories }} + {{ (stats.directories > 1 ? 'directories' : 'directory') | translate:locale.language }} + + } + @if (stats.directories && stats.files) { + · + } + @if (stats.files) { + + {{ stats.files }} + {{ (stats.files > 1 ? 'files' : 'file') | translate:locale.language }} + + } +
+
+ Total :  + @if (totalSize !== null) { + @if (totalSize.pendingDirectories || totalSize.hasError) { + ≥  } + {{ totalSize.size | toBytes:0:true }} + } +
+
+ + +
+
+
+
+ @for (f of files(); track f.id) { +
+
+ +
{{ f.name }}
+ +
} - } @else { +
+ } @else { +
@for (f of files(); track f.id) {
@@ -82,7 +80,7 @@
-
+
Name
{{ f.name }}
@@ -178,7 +176,7 @@ } @if (f.lock || f.spaces.length || f.shares.length || f.links.length || f.syncs.length) {
-
+
@if (f.lock) {
@@ -213,6 +211,6 @@
} } - } -
+
+ } } 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 1592d7fd6..4879ca81f 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 @@ -4,7 +4,7 @@ import { toObservable } from '@angular/core/rxjs-interop' import { FormsModule } from '@angular/forms' import { Router } from '@angular/router' import { FaIconComponent } from '@fortawesome/angular-fontawesome' -import { faChevronDown, faChevronUp, 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' @@ -14,7 +14,7 @@ import { BadgePermissionsComponent } from '../../../../common/components/badge-p import { AutoResizeDirective } from '../../../../common/directives/auto-resize.directive' import { TimeDateFormatPipe } from '../../../../common/pipes/time-date-format.pipe' import { ToBytesPipe } from '../../../../common/pipes/to-bytes.pipe' -import { defaultCardImageSize, defaultResizeOffset } from '../../../../layout/layout.constants' +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' @@ -54,9 +54,7 @@ export class FilesSelectionComponent { private readonly layout = inject(LayoutService) private readonly filesService = inject(FilesService) protected readonly locale = inject(L10N_LOCALE) - protected readonly resizeOffset = defaultResizeOffset protected readonly cardImageSize = defaultCardImageSize - protected filesListExpanded = false protected selectedAction: SelectionAction = 'clipboard' protected readonly selectionStats = computed(() => { const files = this.files() @@ -83,8 +81,7 @@ export class FilesSelectionComponent { ), startWith(initial) ) - }), - shareReplay(1) + }) ) protected readonly icons = { SPACES: SPACES_ICON.SPACES, @@ -94,8 +91,7 @@ export class FilesSelectionComponent { faLock, faUnlock, faSpinner, - faChevronDown, - faChevronUp + faTimes } goToShare(share: { type: number; name: string }) { @@ -117,6 +113,10 @@ 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() 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 4e442ce5e..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 @@ -123,11 +123,9 @@ export class FilesTreeComponent implements OnInit, OnDestroy { this.initRoot() if (this.enableCopyMove) { this.subscriptions.push( - this.filesService.treeCopyMoveOn.subscribe((copyMoveOn) => { - if (copyMoveOn) { - this.onCopyMove() - this.filesService.consumeTreeCopyMove() - } + this.filesService.treeCopyMoveOn.subscribe(() => { + this.onCopyMove() + this.filesService.consumeTreeCopyMove() }) ) } diff --git a/frontend/src/app/applications/files/services/files.service.ts b/frontend/src/app/applications/files/services/files.service.ts index f43a64cc3..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 { BehaviorSubject, catchError, EMPTY, filter, firstValueFrom, map, Observable, 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' @@ -63,7 +63,9 @@ export class FilesService { // Tree section public treeNodeSelected: TreeNode = null private readonly treeCopyMoveRequested = new BehaviorSubject(false) - public readonly treeCopyMoveOn = this.treeCopyMoveRequested.asObservable() + public readonly treeCopyMoveOn = this.treeCopyMoveRequested.pipe(filter(Boolean)) + // Selection section + public readonly fileSelectionRemove = new Subject() // Clipboard section public clipboardAction: 'copyPaste' | 'cutPaste' = 'copyPaste' // Files 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 f0429c64d..6f5913691 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts @@ -287,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() { diff --git a/frontend/src/app/layout/sidebar/components/windows.component.html b/frontend/src/app/layout/sidebar/components/windows.component.html index dc7711f90..fd49ae3c0 100755 --- a/frontend/src/app/layout/sidebar/components/windows.component.html +++ b/frontend/src/app/layout/sidebar/components/windows.component.html @@ -8,11 +8,11 @@
@for (modal of windows; track modal.id) { -
+
-
{{ modal.element.name }}
-
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; + } } } } From b76480dc3a3d827e6ded8a573fafa5b6972033c9 Mon Sep 17 00:00:00 2001 From: johaven Date: Thu, 30 Jul 2026 23:17:59 +0200 Subject: [PATCH 14/15] refactor(frontend:selection): simplify file size summaries --- .../components/admin-spaces.component.html | 2 +- .../components/admin-users.component.html | 2 +- .../sidebar/files-selection.component.html | 35 ++++++------------- .../components/spaces-browser.component.html | 9 +++-- frontend/src/i18n/de.json | 1 - frontend/src/i18n/es.json | 1 - frontend/src/i18n/fr.json | 1 - frontend/src/i18n/hi.json | 1 - frontend/src/i18n/it.json | 1 - frontend/src/i18n/ja.json | 1 - frontend/src/i18n/ko.json | 1 - frontend/src/i18n/nl.json | 1 - frontend/src/i18n/pl.json | 1 - frontend/src/i18n/pt-BR.json | 1 - frontend/src/i18n/pt.json | 1 - frontend/src/i18n/ru.json | 1 - frontend/src/i18n/tr.json | 1 - frontend/src/i18n/zh.json | 1 - 18 files changed, 18 insertions(+), 44 deletions(-) diff --git a/frontend/src/app/applications/admin/components/admin-spaces.component.html b/frontend/src/app/applications/admin/components/admin-spaces.component.html index f964b8f89..2ef44b365 100644 --- a/frontend/src/app/applications/admin/components/admin-spaces.component.html +++ b/frontend/src/app/applications/admin/components/admin-spaces.component.html @@ -119,7 +119,7 @@
{{ spaces.length }} {{ 'spaces' | translate:locale.language }} -
Total {{ storageUsage | toBytes }}
+
{{ storageUsage | toBytes }}
diff --git a/frontend/src/app/applications/admin/components/admin-users.component.html b/frontend/src/app/applications/admin/components/admin-users.component.html index 4eb500b09..058bd2999 100644 --- a/frontend/src/app/applications/admin/components/admin-users.component.html +++ b/frontend/src/app/applications/admin/components/admin-users.component.html @@ -161,7 +161,7 @@
{{ users.length }} {{ (guestsView ? 'guests' : 'users') | translate:locale.language }}
-
Total {{ storageUsage | toBytes }}
+
{{ storageUsage | toBytes }}
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 fa7a25851..232007044 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 @@ -3,35 +3,20 @@ @let stats = selectionStats(); @let totalSize = selectionSize | async;
-
- {{ 'nb_selections' | translate:locale.language:{ nb: files().length } }} -
-
- @if (stats.directories) { - - {{ stats.directories }} - {{ (stats.directories > 1 ? 'directories' : 'directory') | translate:locale.language }} - - } - @if (stats.directories && stats.files) { - · - } - @if (stats.files) { +
+ {{ stats.directories }} {{ (stats.directories === 1 ? 'directory' : 'directories') | translate:locale.language }} + • + {{ stats.files }} {{ (stats.files === 1 ? 'file' : 'files') | translate:locale.language }} + @if (totalSize !== null) { + • - {{ stats.files }} - {{ (stats.files > 1 ? 'files' : 'file') | translate:locale.language }} + @if (totalSize.pendingDirectories || totalSize.hasError) { + ≥  + } + {{ totalSize.size | toBytes:0:true }} }
-
- Total :  - @if (totalSize !== null) { - @if (totalSize.pendingDirectories || totalSize.hasError) { - ≥  - } - {{ totalSize.size | toBytes:0:true }} - } -
- + 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 4879ca81f..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 @@ -72,10 +72,10 @@ export class FilesSelectionComponent { return from(directories).pipe( concatMap((directory) => this.getSizeLazy(directory)), scan( - (total: SelectionSize, size: number | null): SelectionSize => ({ + (total: SelectionSize, size: number | undefined): SelectionSize => ({ size: total.size + (size ?? 0), pendingDirectories: total.pendingDirectories - 1, - hasError: total.hasError || size === null + hasError: total.hasError || size === undefined }), initial ), @@ -151,7 +151,7 @@ export class FilesSelectionComponent { getSizeLazy(f: FileModel) { return (f.dirSize ??= this.filesService.getSize(f).pipe( tap((size) => f.updateSize(size)), - catchError(() => of(null)), + catchError(() => of(undefined)), shareReplay(1) )) } diff --git a/frontend/src/app/applications/files/models/file.model.ts b/frontend/src/app/applications/files/models/file.model.ts index b91eba8f2..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 - dirSize: Observable + dirSize: Observable nbBadges = 0 galleryBadges: ('lock' | 'shares' | 'spaces' | 'links' | 'syncs' | 'comments')[] = [] diff --git a/frontend/src/app/applications/spaces/components/spaces-browser.component.scss b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss index 453f66095..0d470f5cb 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.scss +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.scss @@ -24,6 +24,7 @@ &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; + opacity: 1; } &.is-selected { @@ -107,13 +108,15 @@ } } -.file-selection-overlay:focus-visible { - opacity: 1; -} - @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 6f5913691..c55ed3648 100644 --- a/frontend/src/app/applications/spaces/components/spaces-browser.component.ts +++ b/frontend/src/app/applications/spaces/components/spaces-browser.component.ts @@ -380,22 +380,19 @@ export class SpacesBrowserComponent implements OnInit, AfterViewInit, OnDestroy toggleFileSelection(ev: MouseEvent, file: FileModel) { ev.stopPropagation() - if (!this.loading) { - 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) + 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) { @@ -790,16 +787,7 @@ 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, - true - ) - } else { - this.setSelection([file, ...this.selection], file, file, true) - } + this.setSelection(file.isSelected ? this.selection.filter((selected) => selected !== file) : [file, ...this.selection], file, file, true) } private setSelection( diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json index 033cb6e49..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,9 +372,6 @@ "files": "dateien", "directory": "verzeichnis", "directories": "verzeichnisse", - "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 27ce047db..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,9 +372,6 @@ "files": "archivos", "directory": "directorio", "directories": "directorios", - "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 1e48f802d..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,9 +372,6 @@ "files": "fichiers", "directory": "répertoire", "directories": "répertoires", - "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 68b5f6e8f..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,9 +372,6 @@ "files": "फ़ाइलें", "directory": "निर्देशिका", "directories": "निर्देशिकाएँ", - "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 dc398702b..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,9 +372,6 @@ "files": "file", "directory": "directory", "directories": "directory", - "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 5110255d9..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,9 +372,6 @@ "files": "ファイル", "directory": "ディレクトリ", "directories": "ディレクトリ", - "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 46bdcddf8..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,9 +372,6 @@ "files": "파일", "directory": "디렉터리", "directories": "디렉터리", - "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 ef2d0e5e2..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,9 +372,6 @@ "files": "bestanden", "directory": "map", "directories": "mappen", - "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 854a504b7..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,9 +372,6 @@ "files": "pliki", "directory": "katalog", "directories": "katalogi", - "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 1b7933398..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,9 +372,6 @@ "files": "arquivos", "directory": "diretório", "directories": "diretórios", - "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 51723d119..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,9 +372,6 @@ "files": "arquivos", "directory": "diretório", "directories": "diretórios", - "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 6f1fa0c1b..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,9 +372,6 @@ "files": "файлы", "directory": "каталог", "directories": "каталоги", - "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 de7c4740b..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,9 +372,6 @@ "files": "dosyalar", "directory": "dizin", "directories": "dizinler", - "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 2ac37d5f1..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,9 +372,6 @@ "files": "文件", "directory": "目录", "directories": "目录", - "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/_gallery.scss b/frontend/src/styles/components/_gallery.scss index 1d764e19b..c1965eb7c 100644 --- a/frontend/src/styles/components/_gallery.scss +++ b/frontend/src/styles/components/_gallery.scss @@ -72,13 +72,6 @@ font-weight: 500; } - .label-top-left { - position: absolute; - top: .2rem; - left: .2rem; - font-style: normal; - font-weight: 500; - } } .card-footer {