diff --git a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts index 1ab7c05be..eb5c2d8cc 100644 --- a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts @@ -25,7 +25,7 @@ import { import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { PermissionsService } from '@services/permissions.service'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; import { ConfigService } from '../config.service'; import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service'; @@ -49,7 +49,7 @@ import { NGXLogger } from 'ngx-logger'; dossiersServiceProvider, ], }) -export class DossierOverviewScreenComponent extends ListingComponent implements OnInit, OnDestroy, OnAttach { +export class DossierOverviewScreenComponent extends ListingComponent implements OnInit, OnAttach { readonly listingModes = ListingModes; readonly circleButtonTypes = CircleButtonTypes; readonly tableHeaderLabel = _('dossier-overview.table-header.title'); @@ -103,6 +103,9 @@ export class DossierOverviewScreenComponent extends ListingComponent imple this.dossierTemplateId = this.#currentDossier.dossierTemplateId; this.files$ = merge(this.#files$, this.#dossierFilesChange$).pipe(shareLast()); this._updateFileAttributes(); + _router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => { + this._fileDropOverlayService.cleanupFileDropHandling(); + }); } get checkedRequiredFilters(): NestedFilter[] { @@ -159,11 +162,6 @@ export class DossierOverviewScreenComponent extends ListingComponent imple this._loadingService.stop(); } - ngOnDestroy(): void { - this._fileDropOverlayService.cleanupFileDropHandling(); - super.ngOnDestroy(); - } - ngOnAttach() { this._fileDropOverlayService.initFileDropHandling(this.dossierId); this._setRemovableSubscriptions(); diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts index e9f1f4d66..41ce299fc 100644 --- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts +++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts @@ -4,8 +4,9 @@ import { AddDossierDialogComponent } from '../dialogs/add-dossier-dialog/add-dos import { EditDossierDialogComponent } from '../dialogs/edit-dossier-dialog/edit-dossier-dialog.component'; import { AssignReviewerApproverDialogComponent } from '../dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component'; import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogConfig } from '@iqser/common-ui'; +import { ImportRedactionsDialogComponent } from '../../file-preview/dialogs/import-redactions-dialog/import-redactions-dialog'; -type DialogType = 'confirm' | 'editDossier' | 'addDossier' | 'assignFile'; +type DialogType = 'confirm' | 'editDossier' | 'addDossier' | 'assignFile' | 'importRedactions'; @Injectable() export class DossiersDialogService extends DialogService { @@ -26,6 +27,10 @@ export class DossiersDialogService extends DialogService { component: AssignReviewerApproverDialogComponent, dialogConfig: { disableClose: false }, }, + importRedactions: { + component: ImportRedactionsDialogComponent, + dialogConfig: { disableClose: false }, + }, }; constructor(protected readonly _dialog: MatDialog) { diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html index 125b5b28c..170a0555a 100644 --- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html @@ -4,14 +4,6 @@ - - diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts index 43a4a559f..51b7578b3 100644 --- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts +++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts @@ -1,14 +1,4 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - HostBinding, - Input, - OnChanges, - Optional, - ViewChild, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnChanges, Optional, ViewChild } from '@angular/core'; import { PermissionsService } from '@services/permissions.service'; import { Action, ActionTypes, Dossier, File } from '@red/domain'; import { DossiersDialogService } from '../../../services/dossiers-dialog.service'; @@ -53,8 +43,6 @@ export class FileActionsComponent implements OnChanges { @Input() maxWidth: number; @Input() fileActionsHelpModeKey: 'document_features' | 'editor_document_features' = 'document_features'; - @ViewChild('importRedactionsInput', { static: true }) importRedactionsInput: ElementRef; - toggleTooltip?: string; assignTooltip?: string; buttonType?: CircleButtonType; @@ -105,7 +93,6 @@ export class FileActionsComponent implements OnChanges { private readonly _reanalysisService: ReanalysisService, private readonly _router: Router, private readonly _changeRef: ChangeDetectorRef, - private readonly _redactionImportService: RedactionImportService, ) {} @HostBinding('class.keep-visible') @@ -146,7 +133,7 @@ export class FileActionsComponent implements OnChanges { }, { type: ActionTypes.circleBtn, - action: ($event: MouseEvent) => this._triggerImportRedactions($event), + action: ($event: MouseEvent) => this._openImportRedactionsDialog($event), tooltip: _('dossier-overview.import-redactions'), icon: 'red:import_redactions', show: this.showImportRedactions, @@ -290,18 +277,6 @@ export class FileActionsComponent implements OnChanges { ); } - async importRedactions(files: FileList) { - const fileToImport = files[0]; - - if (!fileToImport) { - console.error('No file to import!'); - return; - } - - const import$ = this._redactionImportService.importRedactions(this.file.dossierId, this.file.fileId, fileToImport); - await firstValueFrom(import$).catch(error => this._toaster.error(_('error.http.generic'), { params: error })); - } - forceReanalysisAction($event: LongPressEvent) { this.analysisForced = !$event.touchEnd && this._userPreferenceService.areDevFeaturesEnabled; this._setup(); @@ -318,9 +293,9 @@ export class FileActionsComponent implements OnChanges { return ref.afterClosed(); } - private _triggerImportRedactions($event: MouseEvent) { + private _openImportRedactionsDialog($event: MouseEvent) { $event.stopPropagation(); - this.importRedactionsInput.nativeElement.click(); + this._dialogService.openDialog('importRedactions', null, { dossierId: this.file.dossierId, fileId: this.file.fileId }); } private _openDeleteFileDialog($event: MouseEvent) { diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html new file mode 100644 index 000000000..5c032b36c --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.html @@ -0,0 +1,49 @@ +
+
+ +
+
+
+ +
+
+ +
+ +

{{ fileToImport.name }}

+ +
+
+ + {{ 'import-redactions-dialog.only-for-specific-pages' | translate }} + + +
+ +
+
+ +
+ +
+ +
+
+ + +
+ + diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss new file mode 100644 index 000000000..7fca79465 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.scss @@ -0,0 +1,72 @@ +@use 'variables'; + +.upload-area, +.file-area { + display: flex; + align-items: center; + border-radius: 8px; + width: 586px; + background: variables.$grey-2; +} + +.upload-area { + gap: 16px; + height: 88px; + cursor: pointer; + + mat-icon, + div { + opacity: 0.5; + transition: 0.1s; + } + + mat-icon { + margin-left: 32px; + } + + div { + font-size: 16px; + font-weight: 500; + } +} + +.file-area { + gap: 10px; + height: 48px; + + mat-icon:first-child { + opacity: 0.5; + margin-left: 16px; + } + + mat-icon:last-child { + margin-left: auto; + margin-right: 16px; + cursor: pointer; + } + + mat-icon { + transform: scale(0.7); + } + + p { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: 490px; + } +} + +.only-for-pages { + margin-top: 16px; + margin-left: 21px; + min-height: 34px; + display: flex; + flex-direction: row; + align-items: center; + + mat-checkbox { + width: fit-content; + margin-right: 16px; + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts new file mode 100644 index 000000000..ea0f79579 --- /dev/null +++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts @@ -0,0 +1,69 @@ +import { Component, ElementRef, Inject, Injector, ViewChild } from '@angular/core'; +import { BaseDialogComponent, LoadingService, Toaster } from '@iqser/common-ui'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { firstValueFrom } from 'rxjs'; +import { RedactionImportService } from '../../../dossier/shared/services/redaction-import.service'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { HttpStatusCode } from '@angular/common/http'; + +interface ImportData { + dossierId: string; + fileId: string; +} + +@Component({ + templateUrl: './import-redactions-dialog.html', + styleUrls: ['./import-redactions-dialog.scss'], +}) +export class ImportRedactionsDialogComponent extends BaseDialogComponent { + @ViewChild('attachFileInput', { static: true }) attachFileInput: ElementRef; + + fileToImport: File | null; + onlyForSpecificPages = false; + + constructor( + protected readonly _injector: Injector, + protected readonly _dialogRef: MatDialogRef, + private readonly _loadingService: LoadingService, + private readonly _redactionImportService: RedactionImportService, + private readonly _toaster: Toaster, + @Inject(MAT_DIALOG_DATA) + readonly data: ImportData, + ) { + super(_injector, _dialogRef); + } + + triggerAttachFile() { + this.attachFileInput.nativeElement.click(); + } + + attachFile(event) { + const files = event.target['files']; + this.fileToImport = files[0]; + + // input field needs to be set as empty in case the same file will be selected second time + event.target.value = ''; + + if (!this.fileToImport) { + console.error('No file to import!'); + return; + } + } + + removeFile() { + this.fileToImport = null; + this.onlyForSpecificPages = false; + } + + async save(): Promise { + this._loadingService.start(); + const import$ = this._redactionImportService.importRedactions(this.data.dossierId, this.data.fileId, this.fileToImport); + const result: any = await firstValueFrom(import$).catch(error => this._toaster.error(_('error.http.generic'), { params: error })); + this._loadingService.stop(); + + if (result.status === HttpStatusCode.Ok) { + this._toaster.success(_('import-redactions-dialog.http.success')); + this.close(); + } + } +} diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts index a91dcf8d5..2b62af345 100644 --- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts +++ b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts @@ -38,6 +38,7 @@ import { DocumentInfoDialogComponent } from './dialogs/document-info-dialog/docu import { ManualRedactionService } from './services/manual-redaction.service'; import { AnnotationWrapperComponent } from './components/annotation-wrapper/annotation-wrapper.component'; import { AnnotationReferenceComponent } from './components/annotation-reference/annotation-reference.component'; +import { ImportRedactionsDialogComponent } from './dialogs/import-redactions-dialog/import-redactions-dialog'; const routes: Routes = [ { @@ -59,6 +60,7 @@ const dialogs = [ HighlightActionDialogComponent, AcceptRecommendationDialogComponent, DocumentInfoDialogComponent, + ImportRedactionsDialogComponent, ]; const components = [ diff --git a/apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts b/apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts new file mode 100644 index 000000000..77daf3780 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/directives/drag-drop-file-upload.directive.ts @@ -0,0 +1,41 @@ +import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core'; + +const DRAG_OVER_BACKGROUND_COLOR = '#e2eefd'; +const DEFAULT_BACKGROUND_COLOR = '#f4f5f7'; + +@Directive({ + selector: '[redactionDragDropFileUpload]', +}) +export class DragDropFileUploadDirective { + @Output() readonly fileDropped = new EventEmitter(); + @HostBinding('style.background-color') private background = DEFAULT_BACKGROUND_COLOR; + + @HostListener('dragover', ['$event']) + onDragOver(event) { + event.preventDefault(); + event.stopPropagation(); + if (event.dataTransfer.types.includes('Files')) { + this.background = DRAG_OVER_BACKGROUND_COLOR; + } + } + + @HostListener('dragleave', ['$event']) + onDragLeave(event) { + event.preventDefault(); + event.stopPropagation(); + this.background = DEFAULT_BACKGROUND_COLOR; + } + + @HostListener('drop', ['$event']) + onDrop(event) { + event.preventDefault(); + event.stopPropagation(); + if (event.dataTransfer.types.includes('Files')) { + this.background = DEFAULT_BACKGROUND_COLOR; + const files = event.dataTransfer.files; + if (files.length > 0) { + this.fileDropped.emit({ target: { files } }); + } + } + } +} diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index 4e59742ed..40152677f 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -30,6 +30,7 @@ import { FileStatsComponent } from './components/file-stats/file-stats.component import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component'; import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component'; import { MAT_DATE_FORMATS } from '@angular/material/core'; +import { DragDropFileUploadDirective } from '@shared/directives/drag-drop-file-upload.directive'; const buttons = [FileDownloadBtnComponent, UserButtonComponent]; @@ -54,7 +55,7 @@ const components = [ ...buttons, ]; -const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective]; +const utils = [DatePipe, NamePipe, NavigateLastDossiersScreenDirective, LongPressDirective, DragDropFileUploadDirective]; const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule]; diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index 3a691f506..cbd91d665 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -1453,6 +1453,19 @@ "logo": "Logo", "signature": "Signatur" }, + "import-redactions-dialog": { + "actions": { + "cancel": "", + "import": "" + }, + "details": "", + "http": { + "success": "" + }, + "only-for-specific-pages": "", + "title": "", + "upload-area-text": "" + }, "initials-avatar": { "unassigned": "Unbekannt", "you": "Sie" diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 0ceb4c396..19df0487b 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -822,7 +822,7 @@ "edit": "Edit Dossier", "upload-document": "Upload Document" }, - "import-redactions": "Import redactions from other file", + "import-redactions": "Import redactions", "new-rule": { "toast": { "actions": { @@ -1453,6 +1453,19 @@ "logo": "Logo", "signature": "Signature" }, + "import-redactions-dialog": { + "actions": { + "cancel": "Cancel", + "import": "Import" + }, + "details": "To apply redactions from another document, you first need to upload it.", + "http": { + "success": "Redactions has been imported!" + }, + "only-for-specific-pages": "Import only for page(s)", + "title": "Import document with redactions", + "upload-area-text": "Click or drag & drop anywhere on this area..." + }, "initials-avatar": { "unassigned": "Unassigned", "you": "You" diff --git a/libs/common-ui b/libs/common-ui index 6a0e22e68..d8c2a342b 160000 --- a/libs/common-ui +++ b/libs/common-ui @@ -1 +1 @@ -Subproject commit 6a0e22e68441a1dbbaaa38cfebed1aa8e8bb91be +Subproject commit d8c2a342baa6acb330132c44000562bdd823f620 diff --git a/paligo-theme/paligo-styles/redacto-theme.css b/paligo-theme/paligo-styles/redacto-theme.css index 76ac4602e..8624ec047 100644 --- a/paligo-theme/paligo-styles/redacto-theme.css +++ b/paligo-theme/paligo-styles/redacto-theme.css @@ -1,492 +1,492 @@ @charset "UTF-8"; -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap'); .portal-header { - z-index: 1; - height: 450px; + z-index: 1; + height: 450px; } .portal-header::before { - background-color: #283241; + background-color: #283241; } .portal-header h1 { - font-size: 64px; - font-weight: 300; - line-height: 87px; - margin-top: 68px; - margin-bottom: 40px; + font-size: 64px; + font-weight: 300; + line-height: 87px; + margin-top: 68px; + margin-bottom: 40px; } .portal-header .portal-search { - max-width: 600px; - margin: auto; - position: relative; + max-width: 600px; + margin: auto; + position: relative; } .portal-header .portal-search .search-field { - width: 100%; - border: 1px solid #d3d5da; - border-radius: 8px; - background-color: #fff; + width: 100%; + border: 1px solid #d3d5da; + border-radius: 8px; + background-color: #fff; } .portal-header .portal-search .search-field::placeholder { - opacity: 0.7; + opacity: 0.7; } .portal-header .portal-search .search-field, .portal-header .portal-search .search-field::placeholder { - color: #283241; - font-size: 14px; - line-height: 18px; + color: #283241; + font-size: 14px; + line-height: 18px; } .portal-header .portal-search .search-field { - padding: 12px 17px; + padding: 12px 17px; } .portal-header .portal-search .btn { - position: absolute; - right: 0; - padding: 11px 18px; - background-color: transparent; - color: #283241; - cursor: pointer; - border-radius: 0 8px 8px 0; + position: absolute; + right: 0; + padding: 11px 18px; + background-color: transparent; + color: #283241; + cursor: pointer; + border-radius: 0 8px 8px 0; } .portal-header .portal-search .btn:hover { - background-color: #dd4d50; + background-color: #dd4d50; } @media only screen and (max-width: 768px) { - .portal-header h1 { - font-size: 42px; - font-weight: 300; - line-height: 57px; - } + .portal-header h1 { + font-size: 42px; + font-weight: 300; + line-height: 57px; + } } .featured-content-label { - display: none; + display: none; } .featured-content { - display: none; + display: none; } .portal-single-publication { - background-color: transparent; + background-color: transparent; } .portal-single-publication > a { - border-radius: 4px; + border-radius: 4px; } .portal-single-publication .publication-icon { - background-color: #dd4d50; + background-color: #dd4d50; } .portal-contents { - margin-top: 100px; - margin-bottom: 0; + margin-top: 100px; + margin-bottom: 0; } .portal-contents .inner { - margin: 0; - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 24px; + margin: 0; + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 24px; } .portal-contents .inner::before { - content: none; + content: none; } .publication-contents { - padding: 24px 40px; - border: 1px solid #e2e4e9; - width: 100%; - margin: 0; - background-color: #fff; - border-radius: 4px; + padding: 24px 40px; + border: 1px solid #e2e4e9; + width: 100%; + margin: 0; + background-color: #fff; + border-radius: 4px; } .publication-contents:first-child { - grid-column: 1/span 2; + grid-column: 1 / span 2; } .publication-contents h4.featured-title, .publication-contents .section-toc-title { - font-size: 28px; - font-weight: 300; - line-height: 36px; - margin: 0; + font-size: 28px; + font-weight: 300; + line-height: 36px; + margin: 0; } .publication-contents h4.featured-title a, .publication-contents .section-toc-title a { - color: #283241; + color: #283241; } .publication-contents h4.featured-title a:hover, .publication-contents .section-toc-title a:hover { - color: #283241; - text-decoration: underline; + color: #283241; + text-decoration: underline; } .publication-contents ul { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } .publication-contents li { - margin: 4px 0; + margin: 4px 0; } .publication-contents li:first-child { - margin-top: 20px; + margin-top: 20px; } .publication-contents li:last-child { - margin-bottom: 40px; + margin-bottom: 40px; } .publication-contents li a { - color: #dd4d50; - font-size: 16px; - line-height: 24px; + color: #dd4d50; + font-size: 16px; + line-height: 24px; } .publication-contents li a:hover { - color: #dd4d50; - text-decoration: underline; + color: #dd4d50; + text-decoration: underline; } .publication-contents h4 span, .publication-contents li::before { - display: none; + display: none; } @media only screen and (max-width: 768px) { - .portal-contents .inner { - grid-template-columns: 1fr; - } + .portal-contents .inner { + grid-template-columns: 1fr; + } - .publication-contents:first-child { - grid-column: auto; - } + .publication-contents:first-child { + grid-column: auto; + } } /* Einleitung */ .cat-panel-1:before { - content: "\f277"; + content: '\f277'; } /* Workflow */ .cat-panel-2:before { - content: "\f0c1"; + content: '\f0c1'; } /* Voraussetzungen */ .cat-panel-3:before { - content: "\f109"; + content: '\f109'; } /* Benutzermenü und -profil */ .cat-panel-4:before { - content: "\f007"; + content: '\f007'; } /* Benachrichtigungen */ .cat-panel-5:before { - content: "\f0f3"; + content: '\f0f3'; } /* Suchfunktion */ .cat-panel-6:before { - content: "\f002"; + content: '\f002'; } /* Ebenen in der Benutzeroberfläche des RedactManagers */ .cat-panel-7:before { - content: "\f248"; + content: '\f248'; } /* Rollen und Berechtigungen */ .cat-panel-8:before { - content: "\f084"; + content: '\f084'; } /* Dossier erstellen und verwalten */ .cat-panel-9:before { - content: "\f07c"; + content: '\f07c'; } /* Dokumente bearbeiten im Editor */ .cat-panel-10:before { - content: "\f15c"; + content: '\f15c'; } /* Dossier abschließen und herunterladen */ .cat-panel-11:before { - content: "\f019"; + content: '\f019'; } /* Funktionsübersicht */ .cat-panel-12:before { - content: "\f03a"; + content: '\f03a'; } /* Glossar */ .cat-panel-13:before { - content: "\f02d"; + content: '\f02d'; } /* FAQ’s (häufige Fragen) */ .cat-panel-14:before { - content: "\f059"; + content: '\f059'; } .portal-search-result { - background-color: #f5f5f7; + background-color: #f5f5f7; } .search-container { - padding-bottom: 100px; + padding-bottom: 100px; } .portal-search-result { - padding: 80px 0 0 0; + padding: 80px 0 0 0; } ul.searchresults { - border: 1px solid #e2e4e9; - background-color: #fff; - border-radius: 4px; - margin-top: 32px; + border: 1px solid #e2e4e9; + background-color: #fff; + border-radius: 4px; + margin-top: 32px; } ul.searchresults .search-highlight { - font-style: normal; + font-style: normal; } li.searchresultitem { - margin: 0 32px; - border-bottom: 1px solid #e2e4e9; - padding: 32px 8px; + margin: 0 32px; + border-bottom: 1px solid #e2e4e9; + padding: 32px 8px; } .searchresultitem.selected-searchresultitem { - background-color: transparent; - border-radius: 0; + background-color: transparent; + border-radius: 0; } .searchresulttitle { - font-size: 28px; - font-weight: 300; - line-height: 36px; - color: #283241; + font-size: 28px; + font-weight: 300; + line-height: 36px; + color: #283241; } .searchresultsnippet { - margin: 16px 0; - color: #283241; + margin: 16px 0; + color: #283241; } .search-result-breadcrumbs { - color: #dd4d50; + color: #dd4d50; } .portal-footer, .site-footer { - border-top: 1px solid #e2e4e9; - padding: 0; + border-top: 1px solid #e2e4e9; + padding: 0; } .portal-footer.portal-footer, .site-footer.portal-footer { - margin-top: 100px; + margin-top: 100px; } .portal-footer .inner, .site-footer .inner { - margin: 0; - padding: 8px 0 64px 0; - font-size: 16px; - line-height: 24px; + margin: 0; + padding: 8px 0 64px 0; + font-size: 16px; + line-height: 24px; } .portal-footer .inner > *, .site-footer .inner > * { - padding: 0; + padding: 0; } .portal-footer .inner .copyright, .site-footer .inner .copyright { - width: 50%; + width: 50%; } :root { - --iqser-primary: lightblue; - --iqser-primary-rgb: 220, 230, 234; - --iqser-primary-2: orange; - --iqser-accent: blue; - --iqser-accent-rgb: 123, 234, 111; - --iqser-disabled: #9398a0; - --iqser-not-disabled-table-item: #f9fafb; - --iqser-btn-bg-hover: #e2e4e9; - --iqser-btn-bg: #f0f1f4; - --iqser-warn: #fdbd00; - --iqser-white: white; - --iqser-black: black; - --iqser-light: white; - --iqser-separator: rgba(226, 228, 233, 0.9); - --iqser-quick-filter-border: #d3d5da; - --iqser-grey-1: #283241; - --iqser-grey-2: #f4f5f7; - --iqser-grey-3: #aaacb3; - --iqser-grey-4: #e2e4e9; - --iqser-grey-5: #d3d5da; - --iqser-grey-6: #f0f1f4; - --iqser-grey-7: #9398a0; - --iqser-grey-8: #f9fafb; - --iqser-grey-9: #f5f5f7; - --iqser-grey-10: #313d4e; - --iqser-grey-11: #ecedf0; - --iqser-green-1: #00ff00; - --iqser-green-2: #5ce594; - --iqser-orange-1: #ff801a; - --iqser-yellow-1: #ffb83b; - --iqser-yellow-2: #fdbd00; - --iqser-yellow-rgb: 253, 189, 0; - --iqser-red-1: #dd4d50; - --iqser-red-2: #f16164; - --iqser-blue-1: #4875f7; - --iqser-blue-2: #48c9f7; - --iqser-blue-3: #5b97db; - --iqser-blue-4: #374c81; - --iqser-blue-5: #c5d3eb; - --iqser-pink-1: #f125de; - --iqser-helpmode-primary: green; + --iqser-primary: lightblue; + --iqser-primary-rgb: 220, 230, 234; + --iqser-primary-2: orange; + --iqser-accent: blue; + --iqser-accent-rgb: 123, 234, 111; + --iqser-disabled: #9398a0; + --iqser-not-disabled-table-item: #f9fafb; + --iqser-btn-bg-hover: #e2e4e9; + --iqser-btn-bg: #f0f1f4; + --iqser-warn: #fdbd00; + --iqser-white: white; + --iqser-black: black; + --iqser-light: white; + --iqser-separator: rgba(226, 228, 233, 0.9); + --iqser-quick-filter-border: #d3d5da; + --iqser-grey-1: #283241; + --iqser-grey-2: #f4f5f7; + --iqser-grey-3: #aaacb3; + --iqser-grey-4: #e2e4e9; + --iqser-grey-5: #d3d5da; + --iqser-grey-6: #f0f1f4; + --iqser-grey-7: #9398a0; + --iqser-grey-8: #f9fafb; + --iqser-grey-9: #f5f5f7; + --iqser-grey-10: #313d4e; + --iqser-grey-11: #ecedf0; + --iqser-green-1: #00ff00; + --iqser-green-2: #5ce594; + --iqser-orange-1: #ff801a; + --iqser-yellow-1: #ffb83b; + --iqser-yellow-2: #fdbd00; + --iqser-yellow-rgb: 253, 189, 0; + --iqser-red-1: #dd4d50; + --iqser-red-2: #f16164; + --iqser-blue-1: #4875f7; + --iqser-blue-2: #48c9f7; + --iqser-blue-3: #5b97db; + --iqser-blue-4: #374c81; + --iqser-blue-5: #c5d3eb; + --iqser-pink-1: #f125de; + --iqser-helpmode-primary: green; } .site-sidebar { - background-color: #283241; - scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2); - scrollbar-width: thin; - /* Track */ - /* Handle */ + background-color: #283241; + scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2); + scrollbar-width: thin; + /* Track */ + /* Handle */ } .site-sidebar .logo { - padding: 24px 0 30px 0 !important; + padding: 24px 0 30px 0 !important; } .site-sidebar::-webkit-scrollbar { - width: 11px; + width: 11px; } .site-sidebar::-webkit-scrollbar-track { - background: var(--iqser-grey-2); + background: var(--iqser-grey-2); } .site-sidebar::-webkit-scrollbar-thumb { - background: var(--iqser-quick-filter-border); + background: var(--iqser-quick-filter-border); } .site-sidebar-search { - padding: 0 24px; + padding: 0 24px; } .site-sidebar-search .search-field { - width: 100%; - border: 1px solid #d3d5da; - border-radius: 8px; - background-color: #fff; + width: 100%; + border: 1px solid #d3d5da; + border-radius: 8px; + background-color: #fff; } .site-sidebar-search .search-field::placeholder { - opacity: 0.7; + opacity: 0.7; } .site-sidebar-search .search-field, .site-sidebar-search .search-field::placeholder { - color: #283241; - font-size: 14px; - line-height: 18px; + color: #283241; + font-size: 14px; + line-height: 18px; } .site-sidebar-search .search-field { - padding: 7px 13px; + padding: 7px 13px; } .nav-site-sidebar { - margin-top: 16px; + margin-top: 16px; } .nav-site-sidebar .topic-link { - padding-top: 11px; - padding-bottom: 11px; - font-size: 14px; - line-height: 18px; - color: #d3d5da; + padding-top: 11px; + padding-bottom: 11px; + font-size: 14px; + line-height: 18px; + color: #d3d5da; } .nav-site-sidebar .topic-link:hover { - background-color: #313d4e; + background-color: #313d4e; } .nav-site-sidebar .active > .topic-link { - background-color: #313d4e; + background-color: #313d4e; } .nav-site-sidebar .active > a { - color: #fff; - font-weight: 600; + color: #fff; + font-weight: 600; } .nav-site-sidebar > li > a { - padding-left: 24px; + padding-left: 24px; } .nav-site-sidebar > li > ul > li > a { - padding-left: 32px; + padding-left: 32px; } .nav-site-sidebar > li > ul > li > ul > li > a { - padding-left: 40px; + padding-left: 40px; } .toc .glyphicon { - top: 5px; + top: 5px; } .toc > li > .topic-link > .glyphicon { - margin-top: 4px; + margin-top: 4px; } .toolbar { - box-shadow: none; - padding: 21px 24px; - margin-bottom: 50px; + box-shadow: none; + padding: 21px 24px; + margin-bottom: 50px; } .topic-content .breadcrumb-container { - margin-top: 40px; + margin-top: 40px; } .topic-content .breadcrumb { - font-size: 14px; - line-height: 18px; - font-weight: 600; + font-size: 14px; + line-height: 18px; + font-weight: 600; } .topic-content .breadcrumb a { - color: #283241; + color: #283241; } .topic-content .breadcrumb a:hover { - color: #dd4d50; - text-decoration: underline; + color: #dd4d50; + text-decoration: underline; } .topic-content .breadcrumb .breadcrumb-node { - color: #dd4d50; + color: #dd4d50; } main article { - margin-bottom: 0; - padding: 0; + margin-bottom: 0; + padding: 0; } section > .titlepage .title { - margin: 24px 0 16px 0; + margin: 24px 0 16px 0; } #topic-content > section > .titlepage h2.title { - margin: 0 0 24px; + margin: 0 0 24px; } .image-viewport { - margin: auto; + margin: auto; } .image-viewport img { - margin: 16px auto; + margin: 16px auto; } .pager { - margin-top: 30px; - margin-bottom: 30px; - padding: 0; + margin-top: 30px; + margin-bottom: 30px; + padding: 0; } .pager li > a, .pager li > span { - color: #dd4d50; - font-size: 14px; - font-weight: 600; - line-height: 19px; - text-transform: uppercase; - padding: 0; - background-color: transparent; - border: none; - border-radius: 0; + color: #dd4d50; + font-size: 14px; + font-weight: 600; + line-height: 19px; + text-transform: uppercase; + padding: 0; + background-color: transparent; + border: none; + border-radius: 0; } .pager li > a:hover, .pager li > span:hover { - text-decoration: underline; - background-color: transparent; - color: #dd4d50; + text-decoration: underline; + background-color: transparent; + color: #dd4d50; } .warning, @@ -494,230 +494,241 @@ section > .titlepage .title { .important, .caution, .tip { - margin-top: 32px; - margin-bottom: 32px; - padding: 16px 24px 16px 68px; - background-color: #fff; - border-left: 4px solid #dd4d50; - border-radius: 4px; + margin-top: 32px; + margin-bottom: 32px; + padding: 16px 24px 16px 68px; + background-color: #fff; + border-left: 4px solid #dd4d50; + border-radius: 4px; } .warning:before, .note:before, .important:before, .caution:before, .tip:before { - color: #dd4d50; - width: 20px; - height: 20px; - text-align: center; - left: 24px; - top: calc(50% - 15px); + color: #dd4d50; + width: 20px; + height: 20px; + text-align: center; + left: 24px; + top: calc(50% - 15px); } .warning h3, .note h3, .important h3, .caution h3, .tip h3 { - padding: 0; - font-size: 18px; - font-weight: 600; - line-height: 24px; - margin-bottom: 8px; + padding: 0; + font-size: 18px; + font-weight: 600; + line-height: 24px; + margin-bottom: 8px; } .warning p, .note p, .important p, .caution p, .tip p { - line-height: 20px; + line-height: 20px; } .topic-content > section > p { - margin: 12px 0; + margin: 12px 0; } .panel { - padding: 12px 0; - border-radius: 4px; - border: none; + padding: 12px 0; + border-radius: 4px; + border: none; } .panel .panel-body > p { - margin-bottom: 12px; + margin-bottom: 12px; } .panel .panel-body > p:not(:first-of-type) { - margin-top: 18px; + margin-top: 18px; } .mediaobject { - margin-top: 20px; + margin-top: 20px; } .mediaobject img { - border-radius: 4px; - margin: 0; - box-shadow: 0 3px 12px 5px rgba(40, 50, 65, 0.14); + border-radius: 4px; + margin: 0; + box-shadow: 0 3px 12px 5px rgba(40, 50, 65, 0.14); } .mediaobject .caption > p { - font-size: 14px; - text-align: center; - font-style: italic; - margin: 0; + font-size: 14px; + text-align: center; + font-style: italic; + margin: 0; } .inlinemediaobject { - vertical-align: unset; + vertical-align: unset; } main ol, main ul { - margin: 0 0 24px; + margin: 0 0 24px; } .section-toc { - padding: 24px 40px; - border: 1px solid #e2e4e9; - width: 100%; - margin: 0; - background-color: #fff; - border-radius: 4px; + padding: 24px 40px; + border: 1px solid #e2e4e9; + width: 100%; + margin: 0; + background-color: #fff; + border-radius: 4px; } .section-toc:first-child { - grid-column: 1/span 2; + grid-column: 1 / span 2; } .section-toc h4.featured-title, .section-toc .section-toc-title { - font-size: 28px; - font-weight: 300; - line-height: 36px; - margin: 0; + font-size: 28px; + font-weight: 300; + line-height: 36px; + margin: 0; } .section-toc h4.featured-title a, .section-toc .section-toc-title a { - color: #283241; + color: #283241; } .section-toc h4.featured-title a:hover, .section-toc .section-toc-title a:hover { - color: #283241; - text-decoration: underline; + color: #283241; + text-decoration: underline; } .section-toc ul { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } .section-toc li { - margin: 4px 0; + margin: 4px 0; } .section-toc li:first-child { - margin-top: 20px; + margin-top: 20px; } .section-toc li:last-child { - margin-bottom: 40px; + margin-bottom: 40px; } .section-toc li a { - color: #dd4d50; - font-size: 16px; - line-height: 24px; + color: #dd4d50; + font-size: 16px; + line-height: 24px; } .section-toc li a:hover { - color: #dd4d50; - text-decoration: underline; + color: #dd4d50; + text-decoration: underline; } .section-toc h4 span, .section-toc li::before { - display: none; + display: none; } .section-toc li:first-child { - margin-top: 16px; + margin-top: 16px; } .section-toc li:last-child { - margin-bottom: 8px; + margin-bottom: 8px; } .procedure > li.step::before { - background-color: transparent; - border: 1px solid #dd4d50; - color: #dd4d50; - line-height: 23px; + background-color: transparent; + border: 1px solid #dd4d50; + color: #dd4d50; + line-height: 23px; } .question { - font-weight: 600; + font-weight: 600; } .question > td > p { - margin: 32px 0 18px 0; + margin: 32px 0 18px 0; } .question > td:first-child { - padding-right: 4px; + padding-right: 4px; } .fixed-toolbar article.topic :target.question:before { - content: none; + content: none; } body { - color: #283241; - background-color: #f5f5f7; - font-family: "Open Sans", sans-serif; - scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2); - scrollbar-width: thin; - /* Track */ - /* Handle */ + color: #283241; + background-color: #f5f5f7; + font-family: 'Open Sans', sans-serif; + scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2); + scrollbar-width: thin; + /* Track */ + /* Handle */ } -body h1, body .h1, -body h2, body .h2, -body h3, body .h3, -body h4, body .h4, -body h5, body .h5, -body h6, body .h6, +body h1, +body .h1, +body h2, +body .h2, +body h3, +body .h3, +body h4, +body .h4, +body h5, +body .h5, +body h6, +body .h6, body p, body pre { - margin: 0; - font-family: "Open Sans", sans-serif; + margin: 0; + font-family: 'Open Sans', sans-serif; } body::-webkit-scrollbar { - width: 11px; + width: 11px; } body::-webkit-scrollbar-track { - background: var(--iqser-grey-2); + background: var(--iqser-grey-2); } body::-webkit-scrollbar-thumb { - background: var(--iqser-quick-filter-border); + background: var(--iqser-quick-filter-border); } -body h1, body .h1 { - font-size: 64px; - font-weight: 300; - line-height: 87px; +body h1, +body .h1 { + font-size: 64px; + font-weight: 300; + line-height: 87px; } -body h2, body .h2 { - font-size: 42px; - font-weight: 300; - line-height: 57px; +body h2, +body .h2 { + font-size: 42px; + font-weight: 300; + line-height: 57px; } -body h3, body .h3 { - font-size: 32px; - font-weight: 300; - line-height: 43px; +body h3, +body .h3 { + font-size: 32px; + font-weight: 300; + line-height: 43px; } -body h4, body .h4 { - font-size: 28px; - font-weight: 300; - line-height: 36px; +body h4, +body .h4 { + font-size: 28px; + font-weight: 300; + line-height: 36px; } -body h5, body .h5 { - font-size: 18px; - font-weight: 600; - line-height: 24px; +body h5, +body .h5 { + font-size: 18px; + font-weight: 600; + line-height: 24px; } body p { - font-size: 16px; - line-height: 24px; + font-size: 16px; + line-height: 24px; } body a { - color: #dd4d50; + color: #dd4d50; } body a:hover { - text-decoration: underline; - color: #dd4d50; + text-decoration: underline; + color: #dd4d50; } body a:focus { - color: #dd4d50; + color: #dd4d50; }