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

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

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-04-24 14:05:46 +03:00
parent a5e41616cd
commit a19692dae6
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 [translate]="'redact-text.dialog.title'" class="dialog-header heading-l"></div>
<div class="dialog-content redaction"> <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 <div
[class.fixed-height-36]="dictionaryRequest" [class.fixed-height-36]="dictionaryRequest"
[ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'" [ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'"
> >
<ul> <div class="table">
<li> <label>Value</label>
<span *ngIf="!isEditingSelectedText" [innerHTML]="form.controls.selectedText.value"></span> <div class="row">
</li> <span
</ul> *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 <iqser-circle-button
*ngIf="isEditingSelectedText" (action)="toggleEditingSelectedText()"
[rows]="selectedTextRows" *ngIf="dictionaryRequest"
class="w-full" [showDot]="initialText !== form.get('selectedText').value && !isEditingSelectedText"
formControlName="selectedText" [tooltip]="'redact-text.dialog.content.edit-text' | translate"
iqserHasScrollbar [type]="isEditingSelectedText ? 'dark' : 'default'"
name="comment" [size]="18"
type="text" [iconSize]="13"
></textarea> icon="iqser:edit"
tooltipPosition="below"
></iqser-circle-button>
<iqser-circle-button <iqser-circle-button
(action)="toggleEditingSelectedText()" (action)="undoTextChange()"
*ngIf="dictionaryRequest" *ngIf="isEditingSelectedText"
[class.absolute]="isEditingSelectedText" [showDot]="initialText !== form.get('selectedText').value"
[showDot]="initialText !== form.get('selectedText').value && !isEditingSelectedText" [tooltip]="'redact-text.dialog.content.revert-text' | translate"
[tooltip]="'redact-text.dialog.content.edit-text' | translate" [size]="18"
[type]="isEditingSelectedText ? 'dark' : 'default'" [iconSize]="13"
class="edit-button" icon="red:undo"
icon="iqser:edit" tooltipPosition="below"
tooltipPosition="below" ></iqser-circle-button>
></iqser-circle-button> </div>
</div>
<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>
</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 { iqser-circle-button {
top: 0; padding-left: 8px;
right: calc((0.5rem + 34px) * -1);
position: sticky;
}
.undo-button {
top: 0;
right: calc((0.5rem + 34px) * -2);
} }
.w-full { .w-full {
width: 100%; width: 100%;
} }
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.fixed-height-36 { .fixed-height-36 {
min-height: 36px; min-height: 36px;
} }
@ -43,3 +28,29 @@
textarea { textarea {
margin-top: 0; 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 { RedactTextData, RedactTextResult } from '../../utils/dialog-types';
import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component'; import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
const MAXIMUM_SELECTED_TEXT_WIDTH = 421; const MAXIMUM_TEXT_AREA_WIDTH = 421;
@Component({ @Component({
templateUrl: './redact-text-dialog.component.html', templateUrl: './redact-text-dialog.component.html',
@ -39,6 +39,10 @@ export class RedactTextDialogComponent
readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId); readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId); readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId);
#applyToAllDossiers = this.data.applyToAllDossiers ?? true; #applyToAllDossiers = this.data.applyToAllDossiers ?? true;
readonly maximumTextAreaWidth = MAXIMUM_TEXT_AREA_WIDTH;
readonly maximumSelectedTextWidth = 567;
textWidth: number;
get defaultOption() { get defaultOption() {
const inDossierOption = this.options.find(option => option.value === RedactOrHintOptions.IN_DOSSIER); 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.options = getRedactOrHintOptions(this.#dossier, this.#applyToAllDossiers, this.data.isApprover, this.data.isPageExcluded);
this.form = this.#getForm(); this.form = this.#getForm();
this.#setupValidators(this.dictionaryRequest ? RedactOrHintOptions.IN_DOSSIER : RedactOrHintOptions.ONLY_HERE); this.#setupValidators(this.dictionaryRequest ? RedactOrHintOptions.IN_DOSSIER : RedactOrHintOptions.ONLY_HERE);
this.textWidth = calcTextWidthInPixels(this.form.controls.selectedText.value);
this.form.controls.option.valueChanges this.form.controls.option.valueChanges
.pipe( .pipe(
tap((option: DetailsRadioOption<RedactOrHintOption>) => { tap((option: DetailsRadioOption<RedactOrHintOption>) => {
@ -136,7 +140,7 @@ export class RedactTextDialogComponent
this.isEditingSelectedText = !this.isEditingSelectedText; this.isEditingSelectedText = !this.isEditingSelectedText;
if (this.isEditingSelectedText) { if (this.isEditingSelectedText) {
const width = calcTextWidthInPixels(this.form.controls.selectedText.value); 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); this.form.controls.dictionary.setValue(this.#manualRedactionTypeExists ? SuperTypes.ManualRedaction : null);
} }
protected readonly window = window;
} }