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 {
display: flex;
min-height: 100%;
}
form {
display: flex;
form {
display: flex;
flex: 1;
> div {
flex: 1;
padding: 24px 32px;
overflow: auto;
@include common-mixins.scroll-bar;
}
> div {
flex: 1;
padding: 24px 32px;
}
.separator {
flex: none;
height: 100%;
width: 1px;
padding: 0;
background-color: var(--iqser-separator);
}
.separator {
flex: none;
height: 100%;
width: 1px;
padding: 0;
background-color: var(--iqser-separator);
}
.datepicker-wrapper {
width: initial;
}
.datepicker-wrapper {
width: initial;
}
.datepicker-wrapper input {
width: initial;
margin-top: 3px;
}
.datepicker-wrapper input {
width: initial;
margin-top: 3px;
}
.image-attribute {
&.displayed-preview {
flex-direction: row;
justify-content: space-between;
.image-attribute {
&.displayed-preview {
> div {
flex-direction: row;
justify-content: space-between;
> div {
flex-direction: row;
align-items: center;
display: flex;
}
align-items: center;
display: flex;
}
}
&:not(first-of-type) {
margin-top: 24px;
}
&:not(first-of-type) {
margin-top: 24px;
}
.upload-button {
margin-top: 6px;
width: fit-content;
}
.upload-button {
margin-top: 6px;
width: fit-content;
}
img {
width: 50px;
height: 50px;
object-fit: cover;
object-position: center;
border: 1px solid var(--iqser-grey-5);
margin-right: 15px;
}
img {
width: 50px;
height: 50px;
object-fit: cover;
object-position: center;
border: 1px solid var(--iqser-grey-5);
margin-right: 15px;
}
iqser-circle-button:not(:last-child) {
margin-right: 2px;
}
iqser-circle-button:not(:last-child) {
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="dictionary"
(click)="selectDictionary(dictionary)"
*ngFor="let dictionary of dictionaries"
[class.active]="dictionary.label === selectedDictionary.label"
(click)="selectDictionary(dictionary)"
class="dictionary"
>
<redaction-annotation-icon
[color]="dictionary.hexColor"
@ -12,7 +12,9 @@
type="square"
></redaction-annotation-icon>
<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>
<mat-icon svgIcon="red:entries"></mat-icon>
@ -58,35 +60,35 @@
</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
[label]="'edit-dossier-dialog.dictionary.to-redact' | translate"
[active]="activeEntryType === entryTypes.ENTRY"
(click)="selectEntryType(entryTypes.ENTRY)"
[active]="activeEntryType === entryTypes.ENTRY"
[label]="'edit-dossier-dialog.dictionary.to-redact' | translate"
></iqser-icon-button>
<iqser-icon-button
[label]="'edit-dossier-dialog.dictionary.false-positives' | translate"
[active]="activeEntryType === 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
[label]="'edit-dossier-dialog.dictionary.false-recommendations' | translate"
[active]="activeEntryType === entryTypes.FALSE_RECOMMENDATION"
(click)="selectEntryType(entryTypes.FALSE_RECOMMENDATION)"
[active]="activeEntryType === entryTypes.FALSE_RECOMMENDATION"
[label]="'edit-dossier-dialog.dictionary.false-recommendations' | translate"
></iqser-icon-button>
</div>
</div>
<redaction-dictionary-manager
[canEdit]="canEdit"
[initialEntries]="entriesToDisplay || []"
[withFloatingActions]="false"
[selectedDictionaryType]="selectedDictionary.type"
[selectedDictionaryTypeLabel]="selectedDictionary.label"
[activeEntryType]="activeEntryType"
[hint]="selectedDictionary.hint"
[canEdit]="canEdit"
[currentDossierId]="dossier.dossierId"
[currentDossierTemplateId]="dossier.dossierTemplateId"
[hint]="selectedDictionary.hint"
[initialEntries]="entriesToDisplay || []"
[selectedDictionaryTypeLabel]="selectedDictionary.label"
[selectedDictionaryType]="selectedDictionary.type"
[withFloatingActions]="false"
></redaction-dictionary-manager>
</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 {
padding: 0;
@use 'common-mixins';
:host {
flex: 1;
overflow: hidden;
}
.dictionary-content {
@ -10,6 +13,7 @@
border-right: 1px solid var(--iqser-separator);
width: 30%;
overflow-y: scroll;
@include common-mixins.scroll-bar;
.dictionary {
height: 40px;
@ -19,11 +23,8 @@
gap: 10px;
cursor: pointer;
span {
.dictionary-label {
font-weight: bold;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.details {
@ -39,9 +40,11 @@
}
}
}
.entries {
width: 100%;
padding: 24px 32px;
.header-wrapper {
display: flex;
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;
@include common-mixins.scroll-bar;
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 24px 32px;
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';
: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 {
margin-top: 16px;
}
@ -11,13 +22,9 @@ redaction-team-members {
.members-list {
margin-top: 16px;
overflow-y: hidden;
overflow: auto;
width: 587px;
&:hover {
overflow-y: auto;
@include common-mixins.scroll-bar;
}
@include common-mixins.scroll-bar;
> div {
margin-bottom: 2px;