Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Merge branch 'RED-8904' into 'master'

Browse Source 
RED-8904: use table format for add dialog as well.

See merge request redactmanager/red-ui!405
This commit is contained in:
Dan Percic 2024-04-24 13:12:20 +02:00
commit 9b99e47b4b
3 changed files with 81 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.html
View File

@ -3,48 +3,56 @@
<div [translate]="'redact-text.dialog.title'" class="dialog-header heading-l"></div>
<div class="dialog-content redaction">
<div class="iqser-input-group w-450 selected-text-group">
<div class="iqser-input-group w-full selected-text-group">
<div
[class.fixed-height-36]="dictionaryRequest"
[ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'"
>
<ul>
<li>
<span *ngIf="!isEditingSelectedText" [innerHTML]="form.controls.selectedText.value"></span>
</li>
</ul>
<div class="table">
<label>Value</label>
<div class="row">
<span
*ngIf="!isEditingSelectedText"
[innerHTML]="form.controls.selectedText.value"
[ngStyle]="{
'min-width': textWidth > maximumSelectedTextWidth ? '95%' : 'unset',
'max-width': textWidth > maximumSelectedTextWidth ? 0 : 'unset'
}"
></span>
<textarea
*ngIf="isEditingSelectedText"
[rows]="selectedTextRows"
[ngStyle]="{ width: maximumTextAreaWidth + 'px' }"
formControlName="selectedText"
iqserHasScrollbar
name="comment"
type="text"
></textarea>
<textarea
*ngIf="isEditingSelectedText"
[rows]="selectedTextRows"
class="w-full"
formControlName="selectedText"
iqserHasScrollbar
name="comment"
type="text"
></textarea>
<iqser-circle-button
(action)="toggleEditingSelectedText()"
*ngIf="dictionaryRequest"
[showDot]="initialText !== form.get('selectedText').value && !isEditingSelectedText"
[tooltip]="'redact-text.dialog.content.edit-text' | translate"
[type]="isEditingSelectedText ? 'dark' : 'default'"
[size]="18"
[iconSize]="13"
icon="iqser:edit"
tooltipPosition="below"
></iqser-circle-button>
<iqser-circle-button
(action)="toggleEditingSelectedText()"
*ngIf="dictionaryRequest"
[class.absolute]="isEditingSelectedText"
[showDot]="initialText !== form.get('selectedText').value && !isEditingSelectedText"
[tooltip]="'redact-text.dialog.content.edit-text' | translate"
[type]="isEditingSelectedText ? 'dark' : 'default'"
class="edit-button"
icon="iqser:edit"
tooltipPosition="below"
></iqser-circle-button>
<iqser-circle-button
(action)="undoTextChange()"
*ngIf="isEditingSelectedText"
[showDot]="initialText !== form.get('selectedText').value"
[tooltip]="'redact-text.dialog.content.revert-text' | translate"
class="absolute undo-button"
icon="red:undo"
tooltipPosition="below"
></iqser-circle-button>
<iqser-circle-button
(action)="undoTextChange()"
*ngIf="isEditingSelectedText"
[showDot]="initialText !== form.get('selectedText').value"
[tooltip]="'redact-text.dialog.content.revert-text' | translate"
[size]="18"
[iconSize]="13"
icon="red:undo"
tooltipPosition="below"
></iqser-circle-button>
</div>
</div>
</div>
</div>

45
apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.scss
View File

@ -13,29 +13,14 @@
}
}
.edit-button {
top: 0;
right: calc((0.5rem + 34px) * -1);
position: sticky;
}
.undo-button {
top: 0;
right: calc((0.5rem + 34px) * -2);
iqser-circle-button {
padding-left: 8px;
}
.w-full {
width: 100%;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.fixed-height-36 {
min-height: 36px;
}
@ -43,3 +28,29 @@
textarea {
margin-top: 0;
}
.table {
display: flex;
flex-direction: column;
min-width: 100%;
label {
opacity: 0.7;
font-weight: normal;
}
.row {
display: inline-flex;
flex-direction: row;
align-items: center;
background-color: var(--iqser-alt-background);
min-width: 100%;
span {
white-space: nowrap;
text-overflow: ellipsis;
list-style-position: inside;
overflow: hidden;
}
}
}

12
apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
View File

@ -14,7 +14,7 @@ import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from
import { RedactTextData, RedactTextResult } from '../../utils/dialog-types';
import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
const MAXIMUM_SELECTED_TEXT_WIDTH = 421;
const MAXIMUM_TEXT_AREA_WIDTH = 421;
@Component({
templateUrl: './redact-text-dialog.component.html',
@ -39,6 +39,10 @@ export class RedactTextDialogComponent
readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId);
#applyToAllDossiers = this.data.applyToAllDossiers ?? true;
readonly maximumTextAreaWidth = MAXIMUM_TEXT_AREA_WIDTH;
readonly maximumSelectedTextWidth = 567;
textWidth: number;
get defaultOption() {
const inDossierOption = this.options.find(option => option.value === RedactOrHintOptions.IN_DOSSIER);
@ -60,7 +64,7 @@ export class RedactTextDialogComponent
this.options = getRedactOrHintOptions(this.#dossier, this.#applyToAllDossiers, this.data.isApprover, this.data.isPageExcluded);
this.form = this.#getForm();
this.#setupValidators(this.dictionaryRequest ? RedactOrHintOptions.IN_DOSSIER : RedactOrHintOptions.ONLY_HERE);
this.textWidth = calcTextWidthInPixels(this.form.controls.selectedText.value);
this.form.controls.option.valueChanges
.pipe(
tap((option: DetailsRadioOption<RedactOrHintOption>) => {
@ -136,7 +140,7 @@ export class RedactTextDialogComponent
this.isEditingSelectedText = !this.isEditingSelectedText;
if (this.isEditingSelectedText) {
const width = calcTextWidthInPixels(this.form.controls.selectedText.value);
this.selectedTextRows = Math.ceil(width / MAXIMUM_SELECTED_TEXT_WIDTH);
this.selectedTextRows = Math.ceil(width / MAXIMUM_TEXT_AREA_WIDTH);
}
}
@ -213,4 +217,6 @@ export class RedactTextDialogComponent
}
this.form.controls.dictionary.setValue(this.#manualRedactionTypeExists ? SuperTypes.ManualRedaction : null);
}
protected readonly window = window;
}