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

RED-7509: Scrollbar only for users list when editing dossier team

Browse Source
This commit is contained in:
Adina Țeudan 2023-11-23 14:21:21 +02:00
parent 46182edb34
commit df1ac952df
5 changed files with 94 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
View File

@ -1,66 +1,70 @@
@use 'common-mixins';
:host { :host {
display: flex; display: flex;
min-height: 100%; min-height: 100%;
}
form { form {
display: flex; display: flex;
flex: 1;
> div {
flex: 1; flex: 1;
padding: 24px 32px;
overflow: auto;
@include common-mixins.scroll-bar;
}
> div { .separator {
flex: 1; flex: none;
padding: 24px 32px; height: 100%;
} width: 1px;
padding: 0;
background-color: var(--iqser-separator);
}
.separator { .datepicker-wrapper {
flex: none; width: initial;
height: 100%; }
width: 1px;
padding: 0;
background-color: var(--iqser-separator);
}
.datepicker-wrapper { .datepicker-wrapper input {
width: initial; width: initial;
} margin-top: 3px;
}
.datepicker-wrapper input { .image-attribute {
width: initial; &.displayed-preview {
margin-top: 3px; flex-direction: row;
} justify-content: space-between;
.image-attribute { > div {
&.displayed-preview {
flex-direction: row; flex-direction: row;
justify-content: space-between; align-items: center;
display: flex;
> div {
flex-direction: row;
align-items: center;
display: flex;
}
} }
}
&:not(first-of-type) { &:not(first-of-type) {
margin-top: 24px; margin-top: 24px;
} }
.upload-button { .upload-button {
margin-top: 6px; margin-top: 6px;
width: fit-content; width: fit-content;
} }
img { img {
width: 50px; width: 50px;
height: 50px; height: 50px;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
border: 1px solid var(--iqser-grey-5); border: 1px solid var(--iqser-grey-5);
margin-right: 15px; margin-right: 15px;
} }
iqser-circle-button:not(:last-child) { iqser-circle-button:not(:last-child) {
margin-right: 2px; margin-right: 2px;
}
} }
} }
} }

36
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
View File

@ -1,10 +1,10 @@
<div class="dictionary-content" *ngIf="dictionaries && selectedDictionary"> <div *ngIf="dictionaries && selectedDictionary" class="dictionary-content">
<div class="dictionaries"> <div class="dictionaries">
<div <div
class="dictionary" (click)="selectDictionary(dictionary)"
*ngFor="let dictionary of dictionaries" *ngFor="let dictionary of dictionaries"
[class.active]="dictionary.label === selectedDictionary.label" [class.active]="dictionary.label === selectedDictionary.label"
(click)="selectDictionary(dictionary)" class="dictionary"
> >
<redaction-annotation-icon <redaction-annotation-icon
[color]="dictionary.hexColor" [color]="dictionary.hexColor"
@ -12,7 +12,9 @@
type="square" type="square"
></redaction-annotation-icon> ></redaction-annotation-icon>
<div class="details"> <div class="details">
<span> {{ dictionary.label }} </span> <div [matTooltip]="dictionary.label" class="dictionary-label clamp-1" matTooltipPosition="above">
{{ dictionary.label }}
</div>
<div class="small-label stats-subtitle"> <div class="small-label stats-subtitle">
<div> <div>
<mat-icon svgIcon="red:entries"></mat-icon> <mat-icon svgIcon="red:entries"></mat-icon>
@ -58,35 +60,35 @@
</div> </div>
</div> </div>
</div> </div>
<div class="header-right flex" [class.read-only]="!canEdit" *ngIf="!selectedDictionary.hint"> <div *ngIf="!selectedDictionary.hint" [class.read-only]="!canEdit" class="header-right flex">
<iqser-icon-button <iqser-icon-button
[label]="'edit-dossier-dialog.dictionary.to-redact' | translate"
[active]="activeEntryType === entryTypes.ENTRY"
(click)="selectEntryType(entryTypes.ENTRY)" (click)="selectEntryType(entryTypes.ENTRY)"
[active]="activeEntryType === entryTypes.ENTRY"
[label]="'edit-dossier-dialog.dictionary.to-redact' | translate"
></iqser-icon-button> ></iqser-icon-button>
<iqser-icon-button <iqser-icon-button
[label]="'edit-dossier-dialog.dictionary.false-positives' | translate"
[active]="activeEntryType === entryTypes.FALSE_POSITIVE"
(click)="selectEntryType(entryTypes.FALSE_POSITIVE)" (click)="selectEntryType(entryTypes.FALSE_POSITIVE)"
[active]="activeEntryType === entryTypes.FALSE_POSITIVE"
[label]="'edit-dossier-dialog.dictionary.false-positives' | translate"
></iqser-icon-button> ></iqser-icon-button>
<iqser-icon-button <iqser-icon-button
[label]="'edit-dossier-dialog.dictionary.false-recommendations' | translate"
[active]="activeEntryType === entryTypes.FALSE_RECOMMENDATION"
(click)="selectEntryType(entryTypes.FALSE_RECOMMENDATION)" (click)="selectEntryType(entryTypes.FALSE_RECOMMENDATION)"
[active]="activeEntryType === entryTypes.FALSE_RECOMMENDATION"
[label]="'edit-dossier-dialog.dictionary.false-recommendations' | translate"
></iqser-icon-button> ></iqser-icon-button>
</div> </div>
</div> </div>
<redaction-dictionary-manager <redaction-dictionary-manager
[canEdit]="canEdit"
[initialEntries]="entriesToDisplay || []"
[withFloatingActions]="false"
[selectedDictionaryType]="selectedDictionary.type"
[selectedDictionaryTypeLabel]="selectedDictionary.label"
[activeEntryType]="activeEntryType" [activeEntryType]="activeEntryType"
[hint]="selectedDictionary.hint" [canEdit]="canEdit"
[currentDossierId]="dossier.dossierId" [currentDossierId]="dossier.dossierId"
[currentDossierTemplateId]="dossier.dossierTemplateId" [currentDossierTemplateId]="dossier.dossierTemplateId"
[hint]="selectedDictionary.hint"
[initialEntries]="entriesToDisplay || []"
[selectedDictionaryTypeLabel]="selectedDictionary.label"
[selectedDictionaryType]="selectedDictionary.type"
[withFloatingActions]="false"
></redaction-dictionary-manager> ></redaction-dictionary-manager>
</div> </div>
</div> </div>

15
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.scss
View File

@ -1,5 +1,8 @@
:host ::ng-deep .content { @use 'common-mixins';
padding: 0;
:host {
flex: 1;
overflow: hidden;
} }
.dictionary-content { .dictionary-content {
@ -10,6 +13,7 @@
border-right: 1px solid var(--iqser-separator); border-right: 1px solid var(--iqser-separator);
width: 30%; width: 30%;
overflow-y: scroll; overflow-y: scroll;
@include common-mixins.scroll-bar;
.dictionary { .dictionary {
height: 40px; height: 40px;
@ -19,11 +23,8 @@
gap: 10px; gap: 10px;
cursor: pointer; cursor: pointer;
span { .dictionary-label {
font-weight: bold; font-weight: bold;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
} }
.details { .details {
@ -39,9 +40,11 @@
} }
} }
} }
.entries { .entries {
width: 100%; width: 100%;
padding: 24px 32px; padding: 24px 32px;
.header-wrapper { .header-wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

2
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.scss
View File

@ -16,6 +16,8 @@
overflow: auto; overflow: auto;
@include common-mixins.scroll-bar; @include common-mixins.scroll-bar;
flex: 1; flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
padding: 24px 32px; padding: 24px 32px;
margin-right: 16px; margin-right: 16px;

19
apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.scss
View File

@ -1,5 +1,16 @@
@use 'common-mixins'; @use 'common-mixins';
:host {
overflow: hidden;
display: flex;
min-height: 350px; // a random height that allows display of at least ~2 items in the team members list
}
form {
display: flex;
flex-direction: column;
}
.search-container { .search-container {
margin-top: 16px; margin-top: 16px;
} }
@ -11,13 +22,9 @@ redaction-team-members {
.members-list { .members-list {
margin-top: 16px; margin-top: 16px;
overflow-y: hidden; overflow: auto;
width: 587px; width: 587px;
@include common-mixins.scroll-bar;
&:hover {
overflow-y: auto;
@include common-mixins.scroll-bar;
}
> div { > div {
margin-bottom: 2px; margin-bottom: 2px;