Open PDF files in pdf.js by default

frontend/src/app/applications/admin/components/dialogs/admin-group-add-users-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faUserPlus"></fa-icon>
     <span>{{ parentGroup.name }}</span>

frontend/src/app/applications/admin/components/dialogs/admin-group-delete-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="member.isUser ? icons.faUserMinus : icons.faMinus"></fa-icon>
     <span>{{ member.name }}</span>

frontend/src/app/applications/admin/components/dialogs/admin-group-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     @if (group) {
       <fa-icon [icon]="icons.faPen"></fa-icon>

frontend/src/app/applications/admin/components/dialogs/admin-group-edit-user-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faUserPen"></fa-icon>
     <span>{{ user.name }}</span>

frontend/src/app/applications/admin/components/dialogs/admin-user-delete-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faUserMinus"></fa-icon>
     <span>{{ user.fullName }}</span>

frontend/src/app/applications/admin/components/dialogs/admin-user-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     @if (user) {
       <fa-icon [icon]="icons.faUserPen"></fa-icon>

frontend/src/app/applications/files/components/dialogs/files-compression-dialog.component.html

@@ -8,7 +8,7 @@ <h4 class="modal-title">
     }
   </h4>
   <h4 class="modal-title ms-auto">
-    <span class="fs-sm">{{ archiveProps.files.length }} {{ (archiveProps.files.length > 1 ? 'items' : 'item') | translate:locale.language }}</span>
+    <span>{{ archiveProps.files.length }} {{ (archiveProps.files.length > 1 ? 'items' : 'item') | translate:locale.language }}</span>
   </h4>
   <button (click)="layout.closeDialog()" aria-label="Close" class="btn-close btn-close-white ms-2" type="button"></button>
 </div>

frontend/src/app/applications/files/components/dialogs/files-viewer-dialog.component.html

@@ -1,14 +1,20 @@
 <div class="modal-header">
-  <h4 class="modal-title">
+  <h4 class="modal-title me-auto">
     <fa-icon [icon]="isReadonly() ? icons.faEye : icons.faPen"></fa-icon>
     <span>{{ currentFile.name }}</span>
   </h4>
-  <button (click)="onMinimize()" aria-label="Minimize" class="btn-minimize btn-minimize-white" type="button"></button>
+  @if (canToggleViewer) {
+    <button (click)="toggleViewer()" class="btn btn-sm btn-primary me-2" type="button">
+      <fa-icon [icon]="isReadonly() ? icons.faPen : icons.faEye"></fa-icon>
+      <span class="ms-2" l10nTranslate>{{ isReadonly() ? 'Edit in OnlyOffice' : 'View in PDF.js' }}</span>
+    </button>
+  }
+  <button (click)="onMinimize()" aria-label="Minimize" class="btn-minimize btn-minimize-white" [class.ms-1]="canToggleViewer" type="button"></button>
   <button (click)="onClose()" aria-label="Close" class="btn-close btn-close-white ms-3" type="button"></button>
 </div>
 @if (currentFile) {
   <div class="modal-body">
-    @switch (hookedShortMime) {
+    @switch (activeViewer()) {
       @case (SHORT_MIME.IMAGE) {
         <app-files-viewer-image [currentHeight]="currentHeight" [(file)]="currentFile" [directoryImages]="directoryImages()"></app-files-viewer-image>
       }
@@ -19,7 +25,10 @@ <h4 class="modal-title">
         <app-files-viewer-media [currentHeight]="currentHeight" [file]="currentFile"></app-files-viewer-media>
       }
       @case (SHORT_MIME.DOCUMENT) {
-        @if (editorProvider.collabora) {
+        <!-- PDF toggled to OnlyOffice: editorProvider flags are not set for PDFs, so we route directly when the original file was a PDF (hookedShortMime === SHORT_MIME.PDF) -->
+        @if (hookedShortMime === SHORT_MIME.PDF) {
+          <app-files-viewer-only-office [currentHeight]="currentHeight" [file]="currentFile" [(isReadonly)]="isReadonly"></app-files-viewer-only-office>
+        } @else if (editorProvider.collabora) {
           <app-files-viewer-collabora-online [currentHeight]="currentHeight" [file]="currentFile" [(isReadonly)]="isReadonly"></app-files-viewer-collabora-online>
         } @else if (editorProvider.onlyoffice) {
           <app-files-viewer-only-office [currentHeight]="currentHeight" [file]="currentFile" [(isReadonly)]="isReadonly"></app-files-viewer-only-office>

frontend/src/app/applications/files/components/dialogs/files-viewer-dialog.component.ts

@@ -38,19 +38,23 @@ export class FilesViewerDialogComponent implements OnInit, OnDestroy {
   @Input({ required: true }) hookedShortMime: string
   @Input({ required: true }) editorProvider: FileEditorProviders
   modalClosing = signal<boolean>(false)
+  protected activeViewer = signal<string>('')
   protected isReadonly = model<boolean>(true)
   protected currentHeight: number
   protected readonly SHORT_MIME = SHORT_MIME
   protected readonly icons = { faEye, faPen }
   protected directoryImages = computed(() => this.directoryFiles.filter((file) => file.isImage))
-  private openedFile: { id: string | number; name: string; mimeUrl: string }
+  protected canToggleViewer = false
   protected readonly store = inject(StoreService)
+  private openedFile: { id: string | number; name: string; mimeUrl: string }
   private readonly layout = inject(LayoutService)
   private readonly subscription: Subscription = this.layout.resizeEvent.subscribe(() => this.onResize())
   private readonly offsetTop = 42
 
   ngOnInit() {
-    this.isReadonly.set(this.mode === FILE_MODE.VIEW)
+    this.canToggleViewer = this.isWriteable && !!this.currentFile?.isEditable && this.hookedShortMime === SHORT_MIME.PDF
+    this.activeViewer.set(this.hookedShortMime)
+    this.isReadonly.set(this.hookedShortMime === SHORT_MIME.PDF || this.mode === FILE_MODE.VIEW)
     this.openedFile = { id: this.currentFile.id, name: this.currentFile.name, mimeUrl: this.currentFile.mimeUrl }
     this.onResize()
   }
@@ -74,6 +78,16 @@ export class FilesViewerDialogComponent implements OnInit, OnDestroy {
     this.layout.minimizeDialog(this.openedFile.id, { name: this.openedFile.name, mimeUrl: this.openedFile.mimeUrl })
   }
 
+  protected toggleViewer(): void {
+    if (this.activeViewer() === SHORT_MIME.PDF) {
+      this.activeViewer.set(SHORT_MIME.DOCUMENT)
+      this.isReadonly.set(false)
+    } else {
+      this.activeViewer.set(SHORT_MIME.PDF)
+      this.isReadonly.set(true)
+    }
+  }
+
   private onResize() {
     this.currentHeight = window.innerHeight - this.offsetTop
   }

frontend/src/app/applications/files/services/files.service.ts

@@ -295,7 +295,7 @@ export class FilesService {
 
         let hookedShortMime: string
         try {
-          hookedShortMime = await this.viewerHook(file, isWriteable)
+          hookedShortMime = await this.viewerHook(file)
           if (file?.lock?.isExclusive) {
             this.layout.sendNotification('info', 'The file is locked', fileLockPropsToString(file.lock))
           }
@@ -351,10 +351,7 @@ export class FilesService {
     })
   }
 
-  private async viewerHook(file: FileModel, isWriteable = false): Promise<string> {
-    if (isWriteable && file.shortMime === SHORT_MIME.PDF && file.isEditable) {
-      return SHORT_MIME.DOCUMENT
-    }
+  private async viewerHook(file: FileModel): Promise<string> {
     if (file.shortMime === SHORT_MIME.TEXT) {
       if (file.size < MAX_TEXT_FILE_SIZE) {
         return SHORT_MIME.TEXT

frontend/src/app/applications/links/components/dialogs/link-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.links"></fa-icon>
     <span>{{ linkForm.value.name || linkForm.value.shareName }}</span>

frontend/src/app/applications/shares/components/dialogs/share-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.SHARED"></fa-icon>
     @if (share.id) {

frontend/src/app/applications/shares/components/dialogs/shared-children-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.SHARED"></fa-icon>
     <span>{{ share?.name || space?.name }}</span>

frontend/src/app/applications/spaces/components/dialogs/space-anchor-file-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faAnchor"></fa-icon>
     <span l10nTranslate>Anchor files to a space</span>

frontend/src/app/applications/spaces/components/dialogs/space-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.SPACES"></fa-icon>
     @if (space.id) {

frontend/src/app/applications/spaces/components/dialogs/space-root-path-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faFolderClosed"></fa-icon>
     <span l10nTranslate>Add an external location</span>

frontend/src/app/applications/spaces/components/dialogs/space-user-anchors-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.SPACES"></fa-icon>
     <span>{{ space.name }}</span>

frontend/src/app/applications/users/components/dialogs/user-auth-2fa-enable-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center justify-content-center">
+<div class="modal-header justify-content-center">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faLock"></fa-icon>
     <span l10nTranslate>Two-Factor Authentication</span>

frontend/src/app/applications/users/components/dialogs/user-auth-2fa-verify-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center justify-content-center">
+<div class="modal-header justify-content-center">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faLock"></fa-icon>
     @if (withTwoFaEnabled) {

frontend/src/app/applications/users/components/dialogs/user-auth-manage-app-passwords-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faKey"></fa-icon>
     <span l10nTranslate>Manage app passwords</span>

frontend/src/app/applications/users/components/dialogs/user-group-add-users-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faUserPlus"></fa-icon>
     <span>{{ parentGroup.name }}</span>

frontend/src/app/applications/users/components/dialogs/user-group-delete-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="member.isUser ? icons.faUserMinus : icons.faMinus"></fa-icon>
     <span>{{ member.name }}</span>

frontend/src/app/applications/users/components/dialogs/user-group-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.GROUPS"></fa-icon>
     @if (group.id) {

frontend/src/app/applications/users/components/dialogs/user-guest-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     @if (guest) {
       <fa-icon [icon]="icons.faPen"></fa-icon>

frontend/src/app/applications/users/components/dialogs/user-personal-group-edit-user-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faUserPen"></fa-icon>
     <span>{{ user.name }}</span>

frontend/src/app/applications/users/components/dialogs/user-personal-group-leave-dialog.component.html

@@ -1,4 +1,4 @@
-<div class="modal-header align-items-center">
+<div class="modal-header">
   <h4 class="modal-title">
     <fa-icon [icon]="icons.faRightFromBracket"></fa-icon>
     <span l10nTranslate>Leave group</span>

frontend/src/i18n/de.json

@@ -653,5 +653,7 @@
   "No filter configured": "Kein Filter konfiguriert",
   "checksums are not identical": "Prüfsummen sind nicht identisch",
   "size has changed since parsing": "Die Größe hat sich seit dem Parsen geändert",
-  "No synchronized folder": "Kein synchronisierter Ordner"
+  "No synchronized folder": "Kein synchronisierter Ordner",
+  "Edit in OnlyOffice": "In OnlyOffice bearbeiten",
+  "View in PDF.js": "In PDF.js ansehen"
 }

frontend/src/i18n/en.json

@@ -20,6 +20,5 @@
   "scheduler_unit_day": "days",
   "no_selection": "no item selected",
   "one_selection": "{{ nb }} item selected",
-  "nb_selections": "{{ nb }} items selected",
-  "RenameFileToExisting": "Do you want to rename <b>{{ old }}</b> to <b>{{ new }}</b>?"
-}
+  "nb_selections": "{{ nb }} items selected"
+}

frontend/src/i18n/es.json

@@ -653,5 +653,7 @@
   "No filter configured": "Ningún filtro configurado",
   "checksums are not identical": "Las sumas de comprobación no son idénticas",
   "size has changed since parsing": "El tamaño ha cambiado desde el análisis",
-  "No synchronized folder": "Ninguna carpeta sincronizada"
+  "No synchronized folder": "Ninguna carpeta sincronizada",
+  "Edit in OnlyOffice": "Editar en OnlyOffice",
+  "View in PDF.js": "Ver en PDF.js"
 }

frontend/src/i18n/fr.json

@@ -653,5 +653,7 @@
   "No filter configured": "Aucun filtre configuré",
   "checksums are not identical": "Les sommes de contrôle ne sont pas identiques",
   "size has changed since parsing": "La taille a changé depuis l'analyse",
-  "No synchronized folder": "Aucun dossier synchronisé"
+  "No synchronized folder": "Aucun dossier synchronisé",
+  "Edit in OnlyOffice": "Modifier dans OnlyOffice",
+  "View in PDF.js": "Voir dans PDF.js"
 }

frontend/src/i18n/hi.json

@@ -653,5 +653,7 @@
   "No filter configured": "कोई फ़िल्टर कॉन्फ़िगर नहीं है",
   "checksums are not identical": "चेकसम एक जैसे नहीं हैं",
   "size has changed since parsing": "पार्सिंग के बाद से आकार बदल गया है",
-  "No synchronized folder": "कोई सिंक्रोनाइज़्ड फ़ोल्डर नहीं"
+  "No synchronized folder": "कोई सिंक्रोनाइज़्ड फ़ोल्डर नहीं",
+  "Edit in OnlyOffice": "OnlyOffice में संपादित करें",
+  "View in PDF.js": "PDF.js में देखें"
 }

frontend/src/i18n/it.json

@@ -653,5 +653,7 @@
   "No filter configured": "Nessun filtro configurato",
   "checksums are not identical": "I checksum non sono identici",
   "size has changed since parsing": "La dimensione è cambiata dall'analisi",
-  "No synchronized folder": "Nessuna cartella sincronizzata"
+  "No synchronized folder": "Nessuna cartella sincronizzata",
+  "Edit in OnlyOffice": "Modifica in OnlyOffice",
+  "View in PDF.js": "Visualizza in PDF.js"
 }

frontend/src/i18n/ja.json

@@ -653,5 +653,7 @@
   "No filter configured": "フィルターが設定されていません",
   "checksums are not identical": "チェックサムが一致しません",
   "size has changed since parsing": "解析後にサイズが変更されました",
-  "No synchronized folder": "同期されたフォルダーはありません"
+  "No synchronized folder": "同期されたフォルダーはありません",
+  "Edit in OnlyOffice": "OnlyOfficeで編集",
+  "View in PDF.js": "PDF.jsで表示"
 }

frontend/src/i18n/ko.json

@@ -653,5 +653,7 @@
   "No filter configured": "구성된 필터가 없습니다",
   "checksums are not identical": "체크섬이 동일하지 않습니다",
   "size has changed since parsing": "파싱 이후 크기가 변경되었습니다",
-  "No synchronized folder": "동기화된 폴더 없음"
+  "No synchronized folder": "동기화된 폴더 없음",
+  "Edit in OnlyOffice": "OnlyOffice에서 편집",
+  "View in PDF.js": "PDF.js에서 보기"
 }

frontend/src/i18n/nl.json

@@ -653,5 +653,7 @@
   "No filter configured": "Geen filter ingesteld",
   "checksums are not identical": "controlesommen komen niet overeen",
   "size has changed since parsing": "grootte is gewijzigd sinds verwerking",
-  "No synchronized folder": "Geen gesynchroniseerde map"
+  "No synchronized folder": "Geen gesynchroniseerde map",
+  "Edit in OnlyOffice": "Bewerken in OnlyOffice",
+  "View in PDF.js": "Bekijken in PDF.js"
 }

frontend/src/i18n/pl.json

@@ -653,5 +653,7 @@
   "No filter configured": "Brak skonfigurowanych filtrów",
   "checksums are not identical": "Sumy kontrolne nie są identyczne",
   "size has changed since parsing": "Rozmiar zmienił się od czasu parsowania",
-  "No synchronized folder": "Brak zsynchronizowanego folderu"
+  "No synchronized folder": "Brak zsynchronizowanego folderu",
+  "Edit in OnlyOffice": "Edytuj w OnlyOffice",
+  "View in PDF.js": "Wyświetl w PDF.js"
 }

frontend/src/i18n/pt-BR.json

@@ -653,5 +653,7 @@
   "No filter configured": "Nenhum filtro configurado",
   "checksums are not identical": "As somas de verificação não são idênticas",
   "size has changed since parsing": "O tamanho mudou desde a análise",
-  "No synchronized folder": "Nenhuma pasta sincronizada"
+  "No synchronized folder": "Nenhuma pasta sincronizada",
+  "Edit in OnlyOffice": "Editar no OnlyOffice",
+  "View in PDF.js": "Visualizar no PDF.js"
 }

frontend/src/i18n/pt.json

@@ -653,5 +653,7 @@
   "No filter configured": "Nenhum filtro configurado",
   "checksums are not identical": "As somas de verificação não são idênticas",
   "size has changed since parsing": "O tamanho mudou desde a análise",
-  "No synchronized folder": "Nenhuma pasta sincronizada"
+  "No synchronized folder": "Nenhuma pasta sincronizada",
+  "Edit in OnlyOffice": "Editar no OnlyOffice",
+  "View in PDF.js": "Visualizar no PDF.js"
 }

frontend/src/i18n/ru.json

@@ -653,5 +653,7 @@
   "No filter configured": "Фильтры не настроены",
   "checksums are not identical": "Контрольные суммы не совпадают",
   "size has changed since parsing": "Размер изменился с момента разбора",
-  "No synchronized folder": "Нет синхронизированной папки"
+  "No synchronized folder": "Нет синхронизированной папки",
+  "Edit in OnlyOffice": "Редактировать в OnlyOffice",
+  "View in PDF.js": "Просмотр в PDF.js"
 }

frontend/src/i18n/tr.json

@@ -653,5 +653,7 @@
   "No filter configured": "Yapılandırılmış filtre yok",
   "checksums are not identical": "Sağlama toplamları aynı değil",
   "size has changed since parsing": "Boyut ayrıştırmadan beri değişti",
-  "No synchronized folder": "Senkronize edilmiş klasör yok"
+  "No synchronized folder": "Senkronize edilmiş klasör yok",
+  "Edit in OnlyOffice": "OnlyOffice'te Düzenle",
+  "View in PDF.js": "PDF.js'de Görüntüle"
 }

frontend/src/i18n/zh.json

@@ -653,5 +653,7 @@
   "No filter configured": "未配置过滤器",
   "checksums are not identical": "校验和不一致",
   "size has changed since parsing": "自解析后大小已更改",
-  "No synchronized folder": "没有同步文件夹"
+  "No synchronized folder": "没有同步文件夹",
+  "Edit in OnlyOffice": "在OnlyOffice中编辑",
+  "View in PDF.js": "在PDF.js中查看"
 }

frontend/src/styles/components/_modal.scss

@@ -13,11 +13,17 @@
     @include no-select-utility;
 
     .modal-title {
+      display: flex;
       font-size: $font-size-base;
-      @include text-truncate-utility;
+      overflow: hidden;
+
+      span {
+        @include text-truncate-utility;
+      }
 
       > fa-icon {
-        margin-right: 0.3rem;
+        font-size: $font-size-md;
+        margin-right: 0.4rem;
       }
 
       &.ms-auto {