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"
></iqser-input-with-action>
</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
(click)="toggleFieldActive(field)"
(mouseenter)="setHoveredColumn(field.csvColumn)"
@ -143,7 +143,7 @@
</div>
</div>
</div>
<div class="content-container">
<div class="flex-1">
<redaction-active-fields-listing
(setHoveredColumn)="setHoveredColumn($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';
.sub-header {
@ -13,7 +12,7 @@
padding-left: 32px;
min-width: 376px;
box-sizing: border-box;
border-right: 1px solid variables.$separator;
border-right: 1px solid var(--iqser-separator);
.info {
margin-bottom: 8px;
@ -44,20 +43,20 @@
}
.dialog-content {
overflow: hidden;
padding: 24px 0 0;
}
.csv-part {
display: flex;
min-height: calc(90vh - 241px);
max-height: calc(90vh - 241px);
overflow: hidden;
.csv-part-header {
height: 50px;
min-height: 50px;
box-sizing: border-box;
background: variables.$white;
border-top: 1px solid variables.$separator;
border-bottom: 1px solid variables.$separator;
background: var(--iqser-white);
border-top: 1px solid var(--iqser-separator);
border-bottom: 1px solid var(--iqser-separator);
display: flex;
align-items: center;
justify-content: space-between;
@ -83,16 +82,16 @@
}
.search-input-container {
background-color: variables.$white;
border-bottom: 1px solid variables.$separator;
background-color: var(--iqser-white);
border-bottom: 1px solid var(--iqser-separator);
padding: 8px 16px;
}
.csv-part-content {
overflow: auto;
@include common-mixins.no-scroll-bar;
height: calc(100% - 49px);
font-size: 12px;
flex: 1;
.no-column-data {
height: 100%;
@ -101,13 +100,13 @@
align-items: center;
justify-content: center;
text-align: center;
color: variables.$grey-7;
color: var(--iqser-grey-7);
line-height: 15px;
font-weight: 500;
}
> *:not(.no-column-data) {
border-bottom: 1px solid variables.$separator;
border-bottom: 1px solid var(--iqser-separator);
display: flex;
padding: 7px 16px;
align-items: center;
@ -117,19 +116,16 @@
> .left {
width: 375px;
min-width: 375px;
background: variables.$grey-2;
background: var(--iqser-grey-2);
display: flex;
flex-direction: column;
.csv-header-pill-content {
overflow: auto;
padding: 7px 0;
background: variables.$grey-2;
height: calc(100% - 64px);
background: var(--iqser-grey-2);
@include common-mixins.no-scroll-bar;
&.search-open {
height: calc(100% - 58px - 51px);
}
.csv-header-pill-wrapper {
padding: 3px 10px;
@ -137,7 +133,7 @@
min-height: 32px;
border-radius: 8px;
padding: 10px;
background: variables.$white;
background: var(--iqser-white);
cursor: pointer;
display: flex;
flex-direction: column;
@ -158,21 +154,23 @@
}
&.selected {
background-color: variables.$primary;
color: variables.$white;
background-color: var(--iqser-primary);
color: var(--iqser-white);
}
}
}
}
border-right: 1px solid variables.$separator;
border-right: 1px solid var(--iqser-separator);
}
> .center {
width: 150px;
min-width: 150px;
background: variables.$grey-2;
border-right: 1px solid variables.$separator;
display: flex;
flex-direction: column;
background: var(--iqser-grey-2);
border-right: 1px solid var(--iqser-separator);
&:not(.collapsed) iqser-circle-button {
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 {
display: flex;
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)"
*ngFor="let item of navItems"
[class.active]="item.key === activeNav"
[iqserHelpMode]="item.helpModeKey"
[dialogElement]="true"
[iqserHelpMode]="item.helpModeKey"
class="item"
>
{{ item.sideNavTitle || item.title | translate }}
@ -66,12 +66,12 @@
<iqser-icon-button
(action)="save({ closeAfterSave: true })"
[disabled]="disabled || !valid || !changed"
[id]="'saveAndClose'"
[label]="'edit-dossier-dialog.actions.save-and-close' | translate"
[type]="iconButtonTypes.dark"
[id]="'saveAndClose'"
>
</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>
</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;
margin-top: 24px;
border-top: 1px solid variables.$separator;
display: flex;
height: calc(90vh - 81px);
overflow: hidden;
flex-direction: row;
> div {
width: 100%;
display: flex;
flex-direction: column;
flex: 1;
.content {
padding: 24px 32px;
overflow: auto;
@include common-mixins.scroll-bar;
height: calc(100% - 81px);
flex: 1;
box-sizing: border-box;
&.no-padding {
@ -33,11 +35,6 @@
}
}
redaction-edit-dossier-dictionary {
display: block;
height: calc(100% - 74px);
}
.stats-subtitle {
margin-top: 6px;
}

2
libs/common-ui

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