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

RED-7641: Fixed weird scrollbars in license screen

Browse Source
This commit is contained in:
Adina Țeudan 2023-09-28 15:56:00 +03:00
parent 1d6915c850
commit 0be4819e78
8 changed files with 67 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.html
View File

@ -1,3 +1 @@
<div class="canvas-container">
<canvas [data]="chartData" [options]="chartOptions" [type]="'line'" baseChart></canvas>
</div>
<canvas [data]="chartData" [options]="chartOptions" [type]="'line'" baseChart height="400px" width="1000px"></canvas>

4
apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.scss
View File

@ -1,4 +0,0 @@
.canvas-container {
position: relative;
width: 1000px;
}

1
apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts
View File

@ -32,6 +32,7 @@ export class ChartComponent implements OnChanges {
#setChartOptions(): void {
this.chartOptions = {
responsive: false,
scales: {
y: {
stacked: true,

1
apps/red-ui/src/app/modules/admin/screens/license/components/license-analysis-capacity-usage/license-analysis-capacity-usage.component.scss
View File

@ -3,7 +3,6 @@
}
.grid-container {
width: calc(100% - 40px);
display: grid;
grid-template-columns: 250px 300px 1fr;
margin: 20px;

1
apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.scss
View File

@ -3,7 +3,6 @@
}
.grid-container {
width: calc(100% - 40px);
display: grid;
grid-template-columns: 250px 300px 1fr;
margin: 20px;

1
apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.scss
View File

@ -3,7 +3,6 @@
}
.grid-container {
width: calc(100% - 40px);
display: grid;
grid-template-columns: 250px 300px 1fr;
margin: 20px;

134
apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.html
View File

@ -1,81 +1,77 @@
<section class="settings">
<div>
<iqser-page-header
(closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
[buttonConfigs]="buttonConfigs"
[pageLabel]="'license-information' | translate"
[showCloseButton]="currentUser.isUser && permissionsService.has$(roles.dossiers.read) | async"
></iqser-page-header>
<iqser-page-header
(closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
[buttonConfigs]="buttonConfigs"
[pageLabel]="'license-information' | translate"
[showCloseButton]="currentUser.isUser && permissionsService.has$(roles.dossiers.read) | async"
></iqser-page-header>
<div class="content-inner">
<div class="content-container">
<div *ngIf="licenseService.licenseData$ | async" class="grid-container">
<div class="row">
<div translate="license-info-screen.backend-version"></div>
<div>{{ configService.values.BACKEND_APP_VERSION || '-' }}</div>
</div>
<div class="content-inner">
<div class="content-container">
<div *ngIf="licenseService.licenseData$ | async" class="grid-container">
<div class="row">
<div translate="license-info-screen.backend-version"></div>
<div>{{ configService.values.BACKEND_APP_VERSION || '-' }}</div>
</div>
<div class="row">
<div translate="license-info-screen.custom-app-title"></div>
<div>{{ configService.values.APP_NAME || '-' }}</div>
</div>
<div class="row">
<div translate="license-info-screen.custom-app-title"></div>
<div>{{ configService.values.APP_NAME || '-' }}</div>
</div>
<div class="row">
<div translate="license-info-screen.copyright-claim-title"></div>
<div>
{{ 'license-info-screen.copyright-claim-text' | translate: { currentYear: currentYear } }}
</div>
</div>
<div class="row">
<div translate="license-info-screen.copyright-claim-title"></div>
<div>
{{ 'license-info-screen.copyright-claim-text' | translate: { currentYear: currentYear } }}
</div>
</div>
<div class="row">
<div translate="license-info-screen.end-user-license-title"></div>
<div translate="license-info-screen.end-user-license-text"></div>
</div>
<div class="row">
<div translate="license-info-screen.end-user-license-title"></div>
<div translate="license-info-screen.end-user-license-text"></div>
</div>
<div class="section-title all-caps-label" translate="license-info-screen.licensing-details.section-title"></div>
<div class="section-title all-caps-label" translate="license-info-screen.licensing-details.section-title"></div>
<div class="row">
<div class="flex-align-items-center" translate="license-info-screen.licensing-details.license-title"></div>
<div>
<redaction-license-select></redaction-license-select>
</div>
</div>
<div class="row">
<div class="flex-align-items-center" translate="license-info-screen.licensing-details.license-title"></div>
<div>
<redaction-license-select></redaction-license-select>
</div>
</div>
<ng-container *ngIf="licenseService.selectedLicense$ | async as selectedLicense">
<div class="row">
<div translate="license-info-screen.licensing-details.licensed-to"></div>
<div>{{ selectedLicense.licensedTo || '-' }}</div>
</div>
<div class="row">
<div translate="license-info-screen.licensing-details.licensing-period"></div>
<div>
{{ (selectedLicense.validFrom | date: 'dd-MM-yyyy') || '-' }} /
{{ (selectedLicense.validUntil | date: 'dd-MM-yyyy') || '-' }}
</div>
</div>
</ng-container>
<div *ngIf="licenseService.isPageBased" class="row">
<div>{{ 'license-info-screen.licensing-details.licensed-page-count' | translate }}</div>
<div>{{ licenseService.totalLicensedNumberOfPages }}</div>
</div>
<div *ngIf="licenseService.isCapacityBased" class="row">
<div>{{ 'license-info-screen.licensing-details.licensed-analysis-capacity' | translate }}</div>
<div>{{ licenseService.analysisCapacityBytes | size }}</div>
</div>
<div *ngIf="licenseService.isCapacityBased" class="row">
<div>{{ 'license-info-screen.licensing-details.licensed-retention-capacity' | translate }}</div>
<div>{{ licenseService.retentionCapacityBytes | size }}</div>
</div>
<ng-container *ngIf="licenseService.selectedLicense$ | async as selectedLicense">
<div class="row">
<div translate="license-info-screen.licensing-details.licensed-to"></div>
<div>{{ selectedLicense.licensedTo || '-' }}</div>
</div>
<red-license-page-usage *ngIf="licenseService.isPageBased"></red-license-page-usage>
<red-license-analysis-capacity-usage *ngIf="licenseService.isCapacityBased"></red-license-analysis-capacity-usage>
<red-license-retention-capacity *ngIf="licenseService.isCapacityBased"></red-license-retention-capacity>
<div class="row">
<div translate="license-info-screen.licensing-details.licensing-period"></div>
<div>
{{ (selectedLicense.validFrom | date: 'dd-MM-yyyy') || '-' }} /
{{ (selectedLicense.validUntil | date: 'dd-MM-yyyy') || '-' }}
</div>
</div>
</ng-container>
<div *ngIf="licenseService.isPageBased" class="row">
<div>{{ 'license-info-screen.licensing-details.licensed-page-count' | translate }}</div>
<div>{{ licenseService.totalLicensedNumberOfPages }}</div>
</div>
<div *ngIf="licenseService.isCapacityBased" class="row">
<div>{{ 'license-info-screen.licensing-details.licensed-analysis-capacity' | translate }}</div>
<div>{{ licenseService.analysisCapacityBytes | size }}</div>
</div>
<div *ngIf="licenseService.isCapacityBased" class="row">
<div>{{ 'license-info-screen.licensing-details.licensed-retention-capacity' | translate }}</div>
<div>{{ licenseService.retentionCapacityBytes | size }}</div>
</div>
</div>
<red-license-page-usage *ngIf="licenseService.isPageBased"></red-license-page-usage>
<red-license-analysis-capacity-usage *ngIf="licenseService.isCapacityBased"></red-license-analysis-capacity-usage>
<red-license-retention-capacity *ngIf="licenseService.isCapacityBased"></red-license-retention-capacity>
</div>
</section>
</div>

5
apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.scss
View File

@ -4,12 +4,7 @@
overflow: auto;
@include common-mixins.scroll-bar;
display: flex;
flex-direction: column;
align-items: center;
.grid-container {
width: calc(100% - 40px);
display: grid;
grid-template-columns: 250px 300px 1fr;
margin: 20px;