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

RED-3800: Remove calc() from dialogs css

Browse Source
This commit is contained in:
Adina Țeudan 2022-04-11 10:52:27 +03:00
parent 6a9653f6f4
commit e53f0784ef
6 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
View File

@ -97,7 +97,7 @@
width="full" width="full"
></iqser-input-with-action> ></iqser-input-with-action>
</div> </div>
<div *ngIf="sortedDisplayedEntities$ | async as fields" [class.search-open]="isSearchOpen" class="csv-header-pill-content"> <div *ngIf="sortedDisplayedEntities$ | async as fields" class="csv-header-pill-content">
<div <div
(click)="toggleFieldActive(field)" (click)="toggleFieldActive(field)"
(mouseenter)="setHoveredColumn(field.csvColumn)" (mouseenter)="setHoveredColumn(field.csvColumn)"
@ -143,7 +143,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content-container"> <div class="flex-1">
<redaction-active-fields-listing <redaction-active-fields-listing
(setHoveredColumn)="setHoveredColumn($event)" (setHoveredColumn)="setHoveredColumn($event)"
(toggleFieldActive)="toggleFieldActive($event)" (toggleFieldActive)="toggleFieldActive($event)"

50
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
View File

@ -1,4 +1,3 @@
@use 'variables';
@use 'common-mixins'; @use 'common-mixins';
.sub-header { .sub-header {
@ -13,7 +12,7 @@
padding-left: 32px; padding-left: 32px;
min-width: 376px; min-width: 376px;
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid variables.$separator; border-right: 1px solid var(--iqser-separator);
.info { .info {
margin-bottom: 8px; margin-bottom: 8px;
@ -44,20 +43,20 @@
} }
.dialog-content { .dialog-content {
overflow: hidden;
padding: 24px 0 0; padding: 24px 0 0;
} }
.csv-part { .csv-part {
display: flex; display: flex;
min-height: calc(90vh - 241px); overflow: hidden;
max-height: calc(90vh - 241px);
.csv-part-header { .csv-part-header {
height: 50px; min-height: 50px;
box-sizing: border-box; box-sizing: border-box;
background: variables.$white; background: var(--iqser-white);
border-top: 1px solid variables.$separator; border-top: 1px solid var(--iqser-separator);
border-bottom: 1px solid variables.$separator; border-bottom: 1px solid var(--iqser-separator);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -83,16 +82,16 @@
} }
.search-input-container { .search-input-container {
background-color: variables.$white; background-color: var(--iqser-white);
border-bottom: 1px solid variables.$separator; border-bottom: 1px solid var(--iqser-separator);
padding: 8px 16px; padding: 8px 16px;
} }
.csv-part-content { .csv-part-content {
overflow: auto; overflow: auto;
@include common-mixins.no-scroll-bar; @include common-mixins.no-scroll-bar;
height: calc(100% - 49px);
font-size: 12px; font-size: 12px;
flex: 1;
.no-column-data { .no-column-data {
height: 100%; height: 100%;
@ -101,13 +100,13 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
color: variables.$grey-7; color: var(--iqser-grey-7);
line-height: 15px; line-height: 15px;
font-weight: 500; font-weight: 500;
} }
> *:not(.no-column-data) { > *:not(.no-column-data) {
border-bottom: 1px solid variables.$separator; border-bottom: 1px solid var(--iqser-separator);
display: flex; display: flex;
padding: 7px 16px; padding: 7px 16px;
align-items: center; align-items: center;
@ -117,19 +116,16 @@
> .left { > .left {
width: 375px; width: 375px;
min-width: 375px; min-width: 375px;
background: variables.$grey-2; background: var(--iqser-grey-2);
display: flex;
flex-direction: column;
.csv-header-pill-content { .csv-header-pill-content {
overflow: auto; overflow: auto;
padding: 7px 0; padding: 7px 0;
background: variables.$grey-2; background: var(--iqser-grey-2);
height: calc(100% - 64px);
@include common-mixins.no-scroll-bar; @include common-mixins.no-scroll-bar;
&.search-open {
height: calc(100% - 58px - 51px);
}
.csv-header-pill-wrapper { .csv-header-pill-wrapper {
padding: 3px 10px; padding: 3px 10px;
@ -137,7 +133,7 @@
min-height: 32px; min-height: 32px;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
background: variables.$white; background: var(--iqser-white);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -158,21 +154,23 @@
} }
&.selected { &.selected {
background-color: variables.$primary; background-color: var(--iqser-primary);
color: variables.$white; color: var(--iqser-white);
} }
} }
} }
} }
border-right: 1px solid variables.$separator; border-right: 1px solid var(--iqser-separator);
} }
> .center { > .center {
width: 150px; width: 150px;
min-width: 150px; min-width: 150px;
background: variables.$grey-2; display: flex;
border-right: 1px solid variables.$separator; flex-direction: column;
background: var(--iqser-grey-2);
border-right: 1px solid var(--iqser-separator);
&:not(.collapsed) iqser-circle-button { &:not(.collapsed) iqser-circle-button {
margin-right: -8px; margin-right: -8px;

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

@ -1,3 +1,10 @@
:host {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}
.header-wrapper { .header-wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

6
apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
View File

@ -9,8 +9,8 @@
(click)="changeTab(item.key)" (click)="changeTab(item.key)"
*ngFor="let item of navItems" *ngFor="let item of navItems"
[class.active]="item.key === activeNav" [class.active]="item.key === activeNav"
[iqserHelpMode]="item.helpModeKey"
[dialogElement]="true" [dialogElement]="true"
[iqserHelpMode]="item.helpModeKey"
class="item" class="item"
> >
{{ item.sideNavTitle || item.title | translate }} {{ item.sideNavTitle || item.title | translate }}
@ -66,12 +66,12 @@
<iqser-icon-button <iqser-icon-button
(action)="save({ closeAfterSave: true })" (action)="save({ closeAfterSave: true })"
[disabled]="disabled || !valid || !changed" [disabled]="disabled || !valid || !changed"
[id]="'saveAndClose'"
[label]="'edit-dossier-dialog.actions.save-and-close' | translate" [label]="'edit-dossier-dialog.actions.save-and-close' | translate"
[type]="iconButtonTypes.dark" [type]="iconButtonTypes.dark"
[id]="'saveAndClose'"
> >
</iqser-icon-button> </iqser-icon-button>
<div (click)="revert()" id="revert" class="all-caps-label cancel" translate="edit-dossier-dialog.actions.revert"></div> <div (click)="revert()" class="all-caps-label cancel" id="revert" translate="edit-dossier-dialog.actions.revert"></div>
<iqser-help-button></iqser-help-button> <iqser-help-button></iqser-help-button>
</div> </div>

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

@ -5,17 +5,19 @@
padding: 0; padding: 0;
margin-top: 24px; margin-top: 24px;
border-top: 1px solid variables.$separator; border-top: 1px solid variables.$separator;
display: flex; overflow: hidden;
height: calc(90vh - 81px); flex-direction: row;
> div { > div {
width: 100%; display: flex;
flex-direction: column;
flex: 1;
.content { .content {
padding: 24px 32px; padding: 24px 32px;
overflow: auto; overflow: auto;
@include common-mixins.scroll-bar; @include common-mixins.scroll-bar;
height: calc(100% - 81px); flex: 1;
box-sizing: border-box; box-sizing: border-box;
&.no-padding { &.no-padding {
@ -33,11 +35,6 @@
} }
} }
redaction-edit-dossier-dictionary {
display: block;
height: calc(100% - 74px);
}
.stats-subtitle { .stats-subtitle {
margin-top: 6px; margin-top: 6px;
} }

2
libs/common-ui

@ -1 +1 @@
Subproject commit 83cd05378d1d46c2b773be8e833fabe130510bcf Subproject commit 3c0d4368c70975255478d5ee038587c1ea97ecf8