Skip to content
Snippets Groups Projects
Commit 8fa19177 authored by Lukasz Lopatowski's avatar Lukasz Lopatowski
Browse files

Merge branch '272-improve-new-layout' into 'develop'

Resolve "Improve new layout"

See merge request !156
parents da8f3242 fabe40ee
Branches
No related tags found
2 merge requests!184Develop,!156Resolve "Improve new layout"
Showing
with 260 additions and 462 deletions
...@@ -87,81 +87,85 @@ ...@@ -87,81 +87,85 @@
[(ngModel)]="this.configuration.registrationDomainSelectionEnabled"> [(ngModel)]="this.configuration.registrationDomainSelectionEnabled">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="bulkDomainsAllowForSsoAccounts" <label for="deploymentPrefix"
class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DOMAINS_ALLOW_FOR_SSO_ACCOUNTS' | translate}}</label> class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.DEPLOYMENT_PREFIX' | translate}}</label>
<div class="col-sm-9 pd-top-7"> <div class="col-sm-9 pd-top-7">
<input type="checkbox" id="bulkDomainsAllowForSsoAccounts" name="bulkDomainsAllowForSsoAccounts" <div class="input-width">
[(ngModel)]="this.configuration.bulkDomainsAllowForSsoAccounts" <input class="form-control" type="text" id="deploymentPrefix" name="deploymentPrefix"
[checked]="this.configuration.bulkDomainsAllowForSsoAccounts === true"> [(ngModel)]="this.configuration.deploymentPrefix">
</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="panel-default panel-heading">Bulk settings</div>
<label for="bulkDomainsSendEmailForNewAccounts" <div class="panel-body">
class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DOMAINS_SEND_EMAIL_FOR_NEW_ACCOUNTS' | translate}}</label>
<div class="col-sm-9 pd-top-7"> <div class="form-group">
<input type="checkbox" id="bulkDomainsSendEmailForNewAccounts" name="bulkDomainsSendEmailForNewAccounts" <label for="bulkDomainsAllowForSsoAccounts"
[(ngModel)]="this.configuration.bulkDomainsSendEmailForNewAccounts" class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DOMAINS_ALLOW_FOR_SSO_ACCOUNTS' | translate}}</label>
[checked]="this.configuration.bulkDomainsSendEmailForNewAccounts === true"> <div class="col-sm-9 pd-top-7">
<input type="checkbox" id="bulkDomainsAllowForSsoAccounts" name="bulkDomainsAllowForSsoAccounts"
[(ngModel)]="this.configuration.bulkDomainsAllowForSsoAccounts"
[checked]="this.configuration.bulkDomainsAllowForSsoAccounts === true">
</div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="bulkDeploymentJobCron" <label for="bulkDomainsSendEmailForNewAccounts"
class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DEPLOYMENT_CRON' | translate}}</label> class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DOMAINS_SEND_EMAIL_FOR_NEW_ACCOUNTS' | translate}}</label>
<div class="col-sm-9 pd-top-7 "> <div class="col-sm-9 pd-top-7">
<div class="input-width"> <input type="checkbox" id="bulkDomainsSendEmailForNewAccounts" name="bulkDomainsSendEmailForNewAccounts"
<input class="form-control" type="text" id="bulkDeploymentJobCron" name="bulkDeploymentJobCron" [(ngModel)]="this.configuration.bulkDomainsSendEmailForNewAccounts"
[(ngModel)]="this.configuration.bulkDeploymentJobCron"> [checked]="this.configuration.bulkDomainsSendEmailForNewAccounts === true">
</div> </div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="parallelDeploymentsLimit" <label for="bulkDeploymentJobCron"
class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DEPLOYMENT_LIMIT' | translate}}</label> class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DEPLOYMENT_CRON' | translate}}</label>
<div class="col-sm-9 pd-top-7"> <div class="col-sm-9 pd-top-7 ">
<div class="input-width"> <div class="input-width">
<input class="form-control" type="number" id="parallelDeploymentsLimit" name="parallelDeploymentsLimit" <input class="form-control" type="text" id="bulkDeploymentJobCron" name="bulkDeploymentJobCron"
[(ngModel)]="this.configuration.parallelDeploymentsLimit"> [(ngModel)]="this.configuration.bulkDeploymentJobCron">
</div>
</div> </div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<label for="bulkDeploymentQueueRefresh" <label for="parallelDeploymentsLimit"
class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DEPLOYMENT_QUEUE_REFRESH' | translate}}</label> class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DEPLOYMENT_LIMIT' | translate}}</label>
<div class="col-sm-9 pd-top-7"> <div class="col-sm-9 pd-top-7">
<div class="input-width"> <div class="input-width">
<input class="form-control" type="number" id="bulkDeploymentQueueRefresh" name="bulkDeploymentQueueRefresh" <input class="form-control" type="number" id="parallelDeploymentsLimit" name="parallelDeploymentsLimit"
[(ngModel)]="this.configuration.bulkDeploymentQueueRefresh"> [(ngModel)]="this.configuration.parallelDeploymentsLimit">
</div>
</div> </div>
</div> </div>
</div> <div class="form-group">
<div class="form-group"> <label for="bulkDeploymentQueueRefresh"
<label for="bulkDeploymentTimeThreshold" class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DEPLOYMENT_QUEUE_REFRESH' | translate}}</label>
class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DEPLOYMENT_THRESHOLD' | translate}}</label> <div class="col-sm-9 pd-top-7">
<div class="col-sm-9 pd-top-7"> <div class="input-width">
<div class="input-width"> <input class="form-control" type="number" id="bulkDeploymentQueueRefresh" name="bulkDeploymentQueueRefresh"
<input class="form-control" type="number" id="bulkDeploymentTimeThreshold" name="bulkDeploymentTimeThreshold" [(ngModel)]="this.configuration.bulkDeploymentQueueRefresh">
[(ngModel)]="this.configuration.bulkDeploymentTimeThreshold"> </div>
</div> </div>
</div> </div>
</div> <div class="form-group">
<div class="form-group"> <label for="bulkDeploymentTimeThreshold"
<label for="deploymentPrefix" class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.BULK_DEPLOYMENT_THRESHOLD' | translate}}</label>
class="col-sm-3 control-label">{{'PORTAL_CONFIGURATION.DEPLOYMENT_PREFIX' | translate}}</label> <div class="col-sm-9 pd-top-7">
<div class="col-sm-9 pd-top-7"> <div class="input-width">
<div class="input-width"> <input class="form-control" type="number" id="bulkDeploymentTimeThreshold" name="bulkDeploymentTimeThreshold"
<input class="form-control" type="text" id="deploymentPrefix" name="deploymentPrefix" [(ngModel)]="this.configuration.bulkDeploymentTimeThreshold">
[(ngModel)]="this.configuration.deploymentPrefix"> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-content-end"> <div class="flex justify-content-end">
......
...@@ -16,26 +16,3 @@ tr.clickable { ...@@ -16,26 +16,3 @@ tr.clickable {
/*.dropdown:hover .dropdown-menu {*/ /*.dropdown:hover .dropdown-menu {*/
/* display: block;*/ /* display: block;*/
/*}*/ /*}*/
:host ::ng-deep .p-datatable .p-datatable-thead > tr > th{
border: 1px solid #E0E2E5;
background:transparent;
border-width: 0 0 1px 0;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #E0E2E5;
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
:host ::ng-deep .p-datatable .p-paginator-bottom{
height: 40px;
background: transparent;
border: none;
margin-top:10px;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr{
background: transparent;
}
:host ::ng-deep .p-datatable>.p-datatable-wrapper {
overflow: visible;
}
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<h3 style="margin:0 20px;">{{app?.name}}</h3> <h3 style="margin:0 20px;">{{app?.name}}</h3>
</div> </div>
<div class="" *ngIf="app && domain" style="display:flex; align-items: center"> <div class="" *ngIf="app && domain" style="display:flex; align-items: center">
<div *ngIf="!subscribed && isSubscriptionAllowed()" class="btn-group pull-right" <div *ngIf="!subscribed && isSubscriptionAllowed()" class="pull-right"
pTooltip="{{'APPLICATIONS.TOOLTIP_MESSAGE_SUBSCRIBE' | translate}}" tooltipPosition="bottom" [showDelay]="50" [tooltipDisabled]="defaultTooltipDisabled"> pTooltip="{{'APPLICATIONS.TOOLTIP_MESSAGE_SUBSCRIBE' | translate}}" tooltipPosition="bottom" [showDelay]="50" [tooltipDisabled]="defaultTooltipDisabled">
<button class="btn btn-primary m-1" [disabled]="!active || !isApplicationEnabledInDomain()" (click)="subscribe()">{{'APPLICATIONS.SUBSCRIBE_BUTTON' | translate}}</button> <button class="btn btn-primary m-1" [disabled]="!active || !isApplicationEnabledInDomain()" (click)="subscribe()">{{'APPLICATIONS.SUBSCRIBE_BUTTON' | translate}}</button>
<button class="btn btn-primary m-1"[routerLink]="['/admin/apps/bulks']">Bulk deployments</button> <button class="btn btn-primary m-1"[routerLink]="['/admin/apps/bulks']">Bulk deployments</button>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<div class="btn no-padding" pTooltip="{{'APPLICATIONS.TOOLTIP_MESSAGE_DEPLOY' | translate}}" tooltipPosition="bottom" [showDelay]="50" [tooltipDisabled]="defaultTooltipDisabled"> <div class="btn no-padding" pTooltip="{{'APPLICATIONS.TOOLTIP_MESSAGE_DEPLOY' | translate}}" tooltipPosition="bottom" [showDelay]="50" [tooltipDisabled]="defaultTooltipDisabled">
<button *ngIf="isSubscriptionAllowed()" class="btn btn-danger m-1" (click)="unsubscribe()">{{'APPLICATIONS.UNSUBSCRIBE_BUTTON' | translate}}</button> <button *ngIf="isSubscriptionAllowed()" class="btn btn-danger m-1" (click)="unsubscribe()">{{'APPLICATIONS.UNSUBSCRIBE_BUTTON' | translate}}</button>
</div> </div>
<button class="btn btn-primary m-1"[routerLink]="['/admin/apps/bulks']">Bulk deployments</button> <button class="btn btn-primary m-1" [routerLink]="['/admin/apps/bulks']">Bulk deployments</button>
<button *ngIf="isSubscriptionAllowed()" class="btn btn-primary m-1" [disabled]="!isApplicationEnabledInDomain()" (click)="appInstallModal.show()">{{'APPLICATIONS.DEPLOY_BUTTON' | translate}}</button> <button *ngIf="isSubscriptionAllowed()" class="btn btn-primary m-1" [disabled]="!isApplicationEnabledInDomain()" (click)="appInstallModal.show()">{{'APPLICATIONS.DEPLOY_BUTTON' | translate}}</button>
</div> </div>
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
</div> </div>
<div style="padding-top:50px"> <div style="padding-top:50px">
<p style="font-weight: bold" *ngIf="numberOfScreenshots > 0">{{'SCREENSHOTS.HEADER' | translate}}</p> <p style="font-weight: bold" *ngIf="numberOfScreenshots > 0">{{'SCREENSHOTS.HEADER' | translate}}</p>
<screenshots (numberOfScreenshots)="screenshots($event)" [pathUrl]="'/apps/' + appId + '/screenshots'"></screenshots> <screenshots style="display: flex" (numberOfScreenshots)="screenshots($event)" [pathUrl]="'/apps/' + appId + '/screenshots'"></screenshots>
</div> </div>
</div> </div>
......
...@@ -85,3 +85,6 @@ ...@@ -85,3 +85,6 @@
:host ::ng-deep.p-dropdown-panel .p-dropdown-items { :host ::ng-deep.p-dropdown-panel .p-dropdown-items {
max-height: 150px; max-height: 150px;
} }
:host ::ng-deep .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
background: var(--user-button-background-hover)
}
...@@ -150,9 +150,8 @@ ...@@ -150,9 +150,8 @@
{{'APP_INSTANCE.VIEW_LOGS' | translate}} {{'APP_INSTANCE.VIEW_LOGS' | translate}}
</a> </a>
</li> </li>
<li *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN']" <li *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN']">
style="background-color: #ff0000;"> <a role="button" (click)="this.undeployModal.show()" style="color: var(--danger-button-color)">
<a role="button" (click)="this.undeployModal.show()" style="color: #ffffff;">
{{'APP_INSTANCE.UNDEPLOY_BUTTON' | translate}} {{'APP_INSTANCE.UNDEPLOY_BUTTON' | translate}}
</a> </a>
</li> </li>
...@@ -175,7 +174,7 @@ ...@@ -175,7 +174,7 @@
</a> </a>
</li> </li>
<li> <li>
<a role="button" style="color: red" <a role="button" style="color: var(--danger-button-color)"
*roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN']" *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN']"
(click)="removeConfirm.show()">{{'APP_INSTANCE.REMOVE_BUTTON' | translate}} (click)="removeConfirm.show()">{{'APP_INSTANCE.REMOVE_BUTTON' | translate}}
</a> </a>
......
...@@ -39,52 +39,7 @@ label{ ...@@ -39,52 +39,7 @@ label{
margin-bottom: 0; margin-bottom: 0;
font-weight: unset; font-weight: unset;
} }
:host ::ng-deep .p-datatable .p-datatable-thead > tr > th{
border: 1px solid #E0E2E5;
border-width: 0 0 1px 0;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #E0E2E5;
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
:host ::ng-deep .p-datatable .p-paginator-bottom{
height: 40px;
background: transparent;
border: none;
margin-top:10px;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr{
background: transparent;
}
:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{
transition: unset;
border-radius: 50%;
min-width:3.5rem;
height:3.5rem;
margin:0 5px;
font-size: 14px;
}
:host ::ng-deep .p-paginator-element{
border-radius:50%;
margin:0 5px;
min-width:3.5rem;
height:3.5rem;
font-size: 14px;
}
:host ::ng-deep .p-paginator .p-dropdown{
height:3rem;
}
:host ::ng-deep .p-paginator-icon{
height: 1.5rem;
width: 1.5rem;
}
:host ::ng-deep .p-paginator .p-dropdown .p-dropdown-label{
padding-right: 10px;
}
::ng-deep.p-selectbutton .p-button.p-highlight{ ::ng-deep.p-selectbutton .p-button.p-highlight{
background: var(--primary-button-color) !important; background: var(--primary-button-color) !important;
border-color: var(--primary-button-color); border-color: var(--primary-button-color);
......
...@@ -16,26 +16,4 @@ ...@@ -16,26 +16,4 @@
/*.dropdown:hover .dropdown-menu {*/ /*.dropdown:hover .dropdown-menu {*/
/* display: block;*/ /* display: block;*/
/*}*/ /*}*/
:host ::ng-deep .p-datatable .p-datatable-thead > tr > th{
border: 1px solid #E0E2E5;
background:transparent;
border-width: 0 0 1px 0;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #E0E2E5;
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
:host ::ng-deep .p-datatable .p-paginator-bottom{
height: 40px;
background: transparent;
border: none;
margin-top:10px;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr{
background: transparent;
}
:host ::ng-deep .p-datatable>.p-datatable-wrapper {
overflow: visible;
}
...@@ -19,10 +19,21 @@ ...@@ -19,10 +19,21 @@
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th></th> <th></th>
<th>{{'APPS_MANAGEMENT.NAME' | translate}}</th> <th pSortableColumn="name">
<th>{{'APPS_MANAGEMENT.OWNER' | translate}}</th> {{'APPS_MANAGEMENT.NAME' | translate}}
<th *ngIf="isAnySubtableVisible()">{{'APPS_MANAGEMENT.VERSION' | translate}}</th> <p-sortIcon field="name"></p-sortIcon>
<th *ngIf="isAnySubtableVisible()">{{'APPS_MANAGEMENT.STATE' | translate}}</th> </th>
<th pSortableColumn="owner">
{{'APPS_MANAGEMENT.OWNER' | translate}}
<p-sortIcon field="owner"></p-sortIcon>
</th>
<th *ngIf="isAnySubtableVisible()">
{{'APPS_MANAGEMENT.VERSION' | translate}}
</th>
<th *ngIf="isAnySubtableVisible()">
{{'APPS_MANAGEMENT.STATE' | translate}}
</th>
<th></th> <th></th>
<th></th> <th></th>
<th></th> <th></th>
......
...@@ -8,55 +8,4 @@ ...@@ -8,55 +8,4 @@
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
:host ::ng-deep .p-datatable .p-datatable-thead > tr > th{
border: 1px solid #E0E2E5;
background:transparent;
border-width: 0 0 1px 0;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #E0E2E5;
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
:host ::ng-deep .p-datatable .p-paginator-bottom{
height: 40px;
background: transparent;
border: none;
margin-top:10px;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr{
background: transparent;
}
:host ::ng-deep .p-datatable>.p-datatable-wrapper {
overflow: visible;
}
:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{
transition: unset;
border-radius: 50%;
min-width:3.5rem;
height:3.5rem;
margin:0 5px;
font-size: 14px;
}
:host ::ng-deep .p-paginator-element{
border-radius:50%;
margin:0 5px;
min-width:3.5rem;
height:3.5rem;
font-size: 14px;
}
:host ::ng-deep .p-paginator .p-dropdown{
height:3rem;
}
:host ::ng-deep .p-paginator-icon{
height: 1.5rem;
width: 1.5rem;
}
:host ::ng-deep .p-paginator .p-dropdown .p-dropdown-label{
padding-right: 10px;
}
:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{
background: var(--user-button-background-hover);
}
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
label="Deployments Queue" label="Deployments Queue"
severity="secondary" severity="secondary"
></p-button> ></p-button>
<p-sidebar [(visible)]="sidebarVisible4" position="left" styleClass="w-30rem"> <p-sidebar [(visible)]="sidebarVisible4" position="right" styleClass="w-30rem">
<h3>Deployments Queue</h3> <h3>Deployments Queue</h3>
<div class="flex flex-column"> <div class="flex flex-column">
<div class="flex grid"> <div class="flex grid">
...@@ -69,10 +69,18 @@ ...@@ -69,10 +69,18 @@
<p-table *ngIf="mode === 'DOMAIN'" [value]="bulks" class="p-datatable-hover p-datatable-sm" [responsive]="true" (onSort)="onSort($event)"> <p-table *ngIf="mode === 'DOMAIN'" [value]="bulks" class="p-datatable-hover p-datatable-sm" [responsive]="true" (onSort)="onSort($event)">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th pSortableColumn="id">{{'BULK.LIST.ID' | translate}}</th> <th pSortableColumn="id">{{'BULK.LIST.ID' | translate}}
<th pSortableColumn="creator">{{'BULK.LIST.CREATOR' | translate}}</th> <p-sortIcon field="id"></p-sortIcon>
<th pSortableColumn="date">{{'BULK.LIST.CREATION_DATE' | translate}}</th> </th>
<th pSortableColumn="state">{{'BULK.LIST.STATE' | translate}}</th> <th pSortableColumn="creator">{{'BULK.LIST.CREATOR' | translate}}
<p-sortIcon field="creator"></p-sortIcon>
</th>
<th pSortableColumn="date">{{'BULK.LIST.CREATION_DATE' | translate}}
<p-sortIcon field="date"></p-sortIcon>
</th>
<th pSortableColumn="state">{{'BULK.LIST.STATE' | translate}}
<p-sortIcon field="state"></p-sortIcon>
</th>
<th></th> <th></th>
</tr> </tr>
</ng-template> </ng-template>
...@@ -148,12 +156,24 @@ ...@@ -148,12 +156,24 @@
(onSort)="onSort($event)"> (onSort)="onSort($event)">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th pSortableColumn="id">{{'BULK.LIST.ID' | translate}}</th> <th pSortableColumn="id">{{'BULK.LIST.ID' | translate}}
<th pSortableColumn="creator">{{'BULK.LIST.CREATOR' | translate}}</th> <p-sortIcon field="id"></p-sortIcon>
<th pSortableColumn="app_name">{{'BULK.LIST.APP_NAME' | translate}}</th> </th>
<th pSortableColumn="instance_no">{{'BULK.LIST.INSTANCE_NO' | translate}}</th> <th pSortableColumn="creator">{{'BULK.LIST.CREATOR' | translate}}
<th pSortableColumn="date" pSortOrder="-1">{{'BULK.LIST.CREATION_DATE' | translate}}</th> <p-sortIcon field="creator"></p-sortIcon>
<th pSortableColumn="state">{{'BULK.LIST.STATE' | translate}}</th> </th>
<th pSortableColumn="app_name">{{'BULK.LIST.APP_NAME' | translate}}
<p-sortIcon field="app_name"></p-sortIcon>
</th>
<th pSortableColumn="instance_no">{{'BULK.LIST.INSTANCE_NO' | translate}}
<p-sortIcon field="instance_no"></p-sortIcon>
</th>
<th pSortableColumn="date" pSortOrder="-1">{{'BULK.LIST.CREATION_DATE' | translate}}
<p-sortIcon field="date"></p-sortIcon>
</th>
<th pSortableColumn="state">{{'BULK.LIST.STATE' | translate}}
<p-sortIcon field="state"></p-sortIcon>
</th>
<th></th> <th></th>
</tr> </tr>
</ng-template> </ng-template>
......
...@@ -21,64 +21,10 @@ tr.clickable { ...@@ -21,64 +21,10 @@ tr.clickable {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
:host ::ng-deep .p-datatable .p-datatable-thead > tr > th{
border: 1px solid #E0E2E5;
background:transparent;
border-width: 0 0 1px 0;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #E0E2E5;
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
:host ::ng-deep .p-datatable .p-paginator-bottom{
height: 40px;
background: transparent;
border: none;
margin-top:10px;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr{
background: transparent;
}
:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{
transition: unset;
border-radius: 50%;
min-width:3.5rem;
height:3.5rem;
margin:0 5px;
font-size: 14px;
}
:host ::ng-deep .p-paginator-element{
border-radius:50%;
margin:0 5px;
min-width:3.5rem;
height:3.5rem;
font-size: 14px;
}
:host ::ng-deep .p-paginator .p-dropdown{
height:3rem;
}
:host ::ng-deep .p-paginator-icon{
height: 1.5rem;
width: 1.5rem;
}
:host ::ng-deep .p-paginator .p-dropdown .p-dropdown-label{
padding-right: 10px;
}
label{ label{
padding-left:5px; padding-left:5px;
display: unset; display: unset;
margin-bottom: 0; margin-bottom: 0;
font-weight: unset; font-weight: unset;
} }
:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{
background: var(--user-button-background-hover);
}
:host ::ng-deep .p-datatable>.p-datatable-wrapper {
overflow: visible;
}
<div class="col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10 row position" style="padding-bottom: 80px; padding-top: 80px;"> <div class=" row position" style="margin:40px">
<div class="col-md-6"> <div class="col-md-6">
<div class="" style="padding-bottom: 15px;"> <div class="" style="padding-bottom: 15px;">
<h2>{{ 'ABOUT.CHANGELOG_TITLE' | translate }}</h2> <h2>{{ 'ABOUT.CHANGELOG_TITLE' | translate }}</h2>
......
:host ::ng-deep .p-datatable .p-datatable-thead > tr > th{
border: 1px solid #E0E2E5;
background:transparent;
border-width: 0 0 1px 0;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #E0E2E5;
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
:host ::ng-deep .p-datatable .p-paginator-bottom{
height: 40px;
background: transparent;
border: none;
margin-top:10px;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr{
background: transparent;
}
:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{
transition: unset;
border-radius: 50%;
min-width:3.5rem;
height:3.5rem;
margin:0 5px;
font-size: 14px;
}
:host ::ng-deep .p-paginator-element{
border-radius:50%;
margin:0 5px;
min-width:3.5rem;
height:3.5rem;
font-size: 14px;
}
:host ::ng-deep .p-paginator .p-dropdown{
height:3rem;
}
:host ::ng-deep .p-paginator-icon{
height: 1.5rem;
width: 1.5rem;
}
:host ::ng-deep .p-paginator .p-dropdown .p-dropdown-label{
padding-right: 10px;
}
label{ label{
padding-left:5px; padding-left:5px;
display: unset; display: unset;
margin-bottom: 0; margin-bottom: 0;
font-weight: unset; font-weight: unset;
} }
:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{
background: var(--user-button-background-hover);
}
:host ::ng-deep .p-datatable>.p-datatable-wrapper {
overflow: visible;
}
:host ::ng-deep input[type=file]{
display:none;
}
:host ::ng-deep .p-button{
width: unset;
margin-right: 5px;
background: var(--primary-button-color);
color: var(--button-text-color);
}
:host ::ng-deep .p-button:hover{
background: var(--primary-button-hover);
border:none;
}
:host ::ng-deep .p-button-label{
font-weight: normal;
}
:host ::ng-deep .p-fileupload .p-fileupload-buttonbar{
border: none;
background: transparent;
margin-bottom: 10px;
padding: 0;
}
:host ::ng-deep .p-fileupload .p-fileupload-content{
border: none;
padding: 0;
border-radius: 3px;
}
:host ::ng-deep .p-fileupload-content .p-progressbar{
display: none;
}
...@@ -12,18 +12,29 @@ ...@@ -12,18 +12,29 @@
<h4 class="header">{{ 'CLUSTERS.CONFIGURATION' | translate }}</h4> <h4 class="header">{{ 'CLUSTERS.CONFIGURATION' | translate }}</h4>
<div class="background-section"> <div class="background-section">
<p-table [value]="clusters" [paginator]="true" <p-table
[value]="clusters"
[paginator]="true" [paginator]="true"
[rows]="maxItemsOnPage" [rows]="maxItemsOnPage"
[rowsPerPageOptions]="[15, 20, 25, 30, 50]" [rowsPerPageOptions]="[15, 20, 25, 30, 50]"
[responsiveLayout]="'scroll'">> [responsiveLayout]="'scroll'">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th pSortableColumn="id" id="id"> {{ 'CLUSTERS.ID' | translate }}</th> <th pSortableColumn="id" id="id"> {{ 'CLUSTERS.ID' | translate }}
<th pSortableColumn="name" id="name"> {{ 'CLUSTERS.NAME' | translate }}</th> <p-sortIcon field="id"></p-sortIcon>
<th pSortableColumn="codename" id="codename"> {{ 'CLUSTERS.CODENAME' | translate }}</th> </th>
<th pSortableColumn="creationDate" id="creationDate"> {{ 'CLUSTERS.CREATION_DATE' | translate }}</th> <th pSortableColumn="name" id="name"> {{ 'CLUSTERS.NAME' | translate }}
<th pSortableColumn="modificationDate" id="modificationDate"> {{ 'CLUSTERS.MODIFICATION_DATE' | translate }}</th> <p-sortIcon field="name"></p-sortIcon>
</th>
<th pSortableColumn="codename" id="codename"> {{ 'CLUSTERS.CODENAME' | translate }}
<p-sortIcon field="codename"></p-sortIcon>
</th>
<th pSortableColumn="creationDate" id="creationDate"> {{ 'CLUSTERS.CREATION_DATE' | translate }}
<p-sortIcon field="creationDate"></p-sortIcon>
</th>
<th pSortableColumn="modificationDate" id="modificationDate"> {{ 'CLUSTERS.MODIFICATION_DATE' | translate }}
<p-sortIcon field="modificationDate"></p-sortIcon>
</th>
<th></th> <th></th>
</tr> </tr>
</ng-template> </ng-template>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</a> </a>
</div> </div>
<div class=""> <div class="">
<img alt="EU flag" src="/assets/images/cofunded.png" width="100" style="padding-top: 15px; "/> <img alt="EU flag" src="/assets/images/cofunded.png" width="180" style="padding-top: 5px; "/>
</div> </div>
</div> </div>
<div class="" style="display: flex; width: 50%; justify-content: end; margin-right: 50px"> <div class="" style="display: flex; width: 50%; justify-content: end; margin-right: 50px">
......
...@@ -81,6 +81,7 @@ ...@@ -81,6 +81,7 @@
} }
:host ::ng-deep a:focus{ :host ::ng-deep a:focus{
outline: none; outline: none;
text-decoration: none;
} }
:host ::ng-deep .p-accordion .p-accordion-content{ :host ::ng-deep .p-accordion .p-accordion-content{
background: transparent; background: transparent;
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<ul *ngIf="!toggleAdmin" style="margin-top: 30px" > <ul *ngIf="!toggleAdmin" style="margin-top: 30px" >
<li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/']"> <a style="display: flex; align-items: center;" [routerLink]="['/']">
<i class="pi pi-th-large" style="margin-right:10px; font-size: 15px" title="Application"></i> <i class="pi pi-th-large" style="margin-right:10px; font-size: 18px" title="Application"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
Applications Applications
</span> </span>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</li> </li>
<li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a href="#" style="display: flex; align-items: center;" [routerLink]="['/instances']"> <a href="#" style="display: flex; align-items: center;" [routerLink]="['/instances']">
<i class="pi pi-server" style="margin-right:10px; font-size: 15px" title=" Instances"></i> <i class="pi pi-server" style="margin-right:10px; font-size: 18px" title=" Instances"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
Instances Instances
</span> </span>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<ul *ngIf="toggleAdmin" style="margin-top: 30px"> <ul *ngIf="toggleAdmin" style="margin-top: 30px">
<li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['admin/dashboard']"> <a style="display: flex; align-items: center;" [routerLink]="['admin/dashboard']">
<i class="pi pi-chart-bar" style="margin-right:10px; font-size: 15px" title="Dashboard"></i> <i class="pi pi-chart-bar" style="margin-right:10px; font-size: 18px" title="Dashboard"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
Dashboard Dashboard
</span> </span>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<p-accordionTab *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR', 'ROLE_GROUP_MANAGER', 'ROLE_GROUP_DOMAIN_ADMIN']"> <p-accordionTab *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR', 'ROLE_GROUP_MANAGER', 'ROLE_GROUP_DOMAIN_ADMIN']">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<div> <div>
<i class="pi pi-server" style="margin-right:10px; font-size: 15px" title="{{ 'NAVBAR.DOMAINS' | translate }}"></i> <i class="pi pi-server" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.DOMAINS' | translate }}"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
{{ 'NAVBAR.DOMAINS' | translate }} {{ 'NAVBAR.DOMAINS' | translate }}
</span> </span>
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<li *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR', 'ROLE_GROUP_MANAGER', 'ROLE_GROUP_DOMAIN_ADMIN']" <li *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR', 'ROLE_GROUP_MANAGER', 'ROLE_GROUP_DOMAIN_ADMIN']"
[routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}" > [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}" >
<a style="display: flex; align-items: center;" [routerLink]="['/admin/domains']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/domains']">
<i class="pi pi-list" style="margin-right:10px; font-size: 15px" title="List"></i> <i class="pi pi-list" style="margin-right:10px; font-size: 18px" title="List"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
List List
</span> </span>
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
<li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_GROUP_MANAGER']" <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_GROUP_MANAGER']"
[routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/domains/groups']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/domains/groups']">
<i class="pi pi-table" style="margin-right:10px; font-size: 15px" title="Group"></i> <i class="pi pi-table" style="margin-right:10px; font-size: 18px" title="Group"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
Group Group
</span> </span>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_GROUP_MANAGER']" <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_GROUP_MANAGER']"
[routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/domains/bulks']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/domains/bulks']">
<i class="pi pi-sitemap" style="margin-right:10px; font-size: 15px" title="Bulk deployments"></i> <i class="pi pi-sitemap" style="margin-right:10px; font-size: 18px" title="Bulk deployments"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
Bulk deployments Bulk deployments
</span> </span>
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
</p-accordion> </p-accordion>
<li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_GROUP_MANAGER']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_GROUP_MANAGER']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/apps/bulks']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/apps/bulks']">
<i class="pi pi-box" style="margin-right:10px; font-size: 15px" title="{{ 'BULK.APP.HEADER' | translate }}"></i> <i class="pi pi-box" style="margin-right:10px; font-size: 18px" title="{{ 'BULK.APP.HEADER' | translate }}"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
{{ 'BULK.APP.HEADER' | translate }} {{ 'BULK.APP.HEADER' | translate }}
</span> </span>
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
</li> </li>
<li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/users']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/users']">
<i class="pi pi-users" style="margin-right:10px; font-size: 15px" title="{{ 'NAVBAR.USERS' | translate }}"></i> <i class="pi pi-users" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.USERS' | translate }}"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
{{ 'NAVBAR.USERS' | translate }} {{ 'NAVBAR.USERS' | translate }}
</span> </span>
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
</li> </li>
<li *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_GROUP_DOMAIN_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_GROUP_DOMAIN_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/domain/users']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/domain/users']">
<i class="pi pi-users" style="margin-right:10px; font-size: 15px" title="{{ 'NAVBAR.DOMAIN_USERS' | translate }}"></i> <i class="pi pi-users" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.DOMAIN_USERS' | translate }}"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
{{ 'NAVBAR.DOMAIN_USERS' | translate }} {{ 'NAVBAR.DOMAIN_USERS' | translate }}
</span> </span>
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
</li> </li>
<li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_TOOL_MANAGER']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_TOOL_MANAGER']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/apps']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/apps']">
<i class="pi pi-th-large" style="margin-right:10px; font-size: 15px" title="Catalog"></i> <i class="pi pi-th-large" style="margin-right:10px; font-size: 18px" title="Catalog"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
Catalog Catalog
</span> </span>
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
</li> </li>
<li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/configuration']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/configuration']">
<i class="pi pi-cog" style="margin-right:10px; font-size: 15px" title="Settings"></i> <i class="pi pi-cog" style="margin-right:10px; font-size: 18px" title="Settings"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
Settings Settings
</span> </span>
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
</li> </li>
<li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/manage/clusters']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/manage/clusters']">
<i class="pi pi-cog" style="margin-right:10px; font-size: 15px"></i> <i class="pi pi-cog" style="margin-right:10px; font-size: 18px"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
{{ 'CLUSTERS.CONFIGURATION' | translate }} {{ 'CLUSTERS.CONFIGURATION' | translate }}
</span> </span>
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
</li> </li>
<li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/languages']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/languages']">
<i class="pi pi-tags" style="margin-right:10px; font-size: 15px" title=" {{'NAVBAR.LANGUAGES' | translate }}"></i> <i class="pi pi-tags" style="margin-right:10px; font-size: 18px" title=" {{'NAVBAR.LANGUAGES' | translate }}"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
{{'NAVBAR.LANGUAGES' | translate }} {{'NAVBAR.LANGUAGES' | translate }}
</span> </span>
...@@ -136,14 +136,14 @@ ...@@ -136,14 +136,14 @@
</li> </li>
<li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}"> <li *roles="['ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
<a style="display: flex; align-items: center;" [routerLink]="['/admin/monitor']"> <a style="display: flex; align-items: center;" [routerLink]="['/admin/monitor']">
<i class="pi pi-chart-line" style="margin-right:10px; font-size: 15px" title="{{ 'NAVBAR.MONITOR' | translate }}"></i> <i class="pi pi-chart-line" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.MONITOR' | translate }}"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
{{ 'NAVBAR.MONITOR' | translate }} {{ 'NAVBAR.MONITOR' | translate }}
</span> </span>
</a> </a>
</li> </li>
<li *roles="['ROLE_SYSTEM_ADMIN']" (click)="showNotificationModal()" [ngClass]="{'collapsed': isCollapsed}"> <li *roles="['ROLE_SYSTEM_ADMIN']" (click)="showNotificationModal()" [ngClass]="{'collapsed': isCollapsed}">
<i class="pi pi-send" style="margin-right:10px; font-size: 15px" title="{{ 'NAVBAR.ALL_USERS' | translate }}"></i> <i class="pi pi-send" style="margin-right:10px; font-size: 18px" title="{{ 'NAVBAR.ALL_USERS' | translate }}"></i>
<span *ngIf="!isCollapsed">{{ 'NAVBAR.ALL_USERS' | translate }}</span> <span *ngIf="!isCollapsed">{{ 'NAVBAR.ALL_USERS' | translate }}</span>
</li> </li>
...@@ -151,22 +151,22 @@ ...@@ -151,22 +151,22 @@
</div> </div>
<div class="menu flex"> <div class="menu flex">
<p-menu #menu [model]="items" [popup]="true" class="test" [ngClass]="{'collapsed-user': isCollapsed}"/> <p-menu #menu [model]="items" [popup]="true" class="test" [ngClass]="{'collapsed-user': isCollapsed}"/>
<p-button (onClick)="menu.toggle($event)" class="user-button"><i class="pi pi-user" style="font-size: 13px; margin-right:10px"[ngClass]="{'collapsed': isCollapsed}" title="User"></i> <p-button (onClick)="menu.toggle($event)" class="user-button"><i class="pi pi-user" style="font-size: 18px; margin-right:10px"[ngClass]="{'collapsed': isCollapsed}" title="User"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
User User
</span> </span>
</p-button> </p-button>
<div style="margin-top:10px" [routerLink]="['admin/dashboard']"> <div style="margin-top:10px" [routerLink]="['admin/dashboard']">
<p-button *ngIf="!toggleAdmin" (onClick)="adminPanel()" ><i class="pi pi-sign-in" style="margin-right:10px; font-size: 15px"[ngClass]="{'collapsed': isCollapsed}" title=" Go to admin panel"></i> <p-button *ngIf="!toggleAdmin" (onClick)="adminPanel()" ><i class="pi pi-sign-in" style="margin-right:10px; font-size: 18px"[ngClass]="{'collapsed': isCollapsed}" title=" Go to admin panel"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
Go to admin panel Admin panel
</span> </span>
</p-button> </p-button>
</div> </div>
<div [routerLink]="['/']" > <div [routerLink]="['/']" >
<p-button *ngIf="toggleAdmin" (onClick)="adminPanel()" ><i class="pi pi-sign-in" style="margin-right:10px; font-size: 15px"[ngClass]="{'collapsed': isCollapsed}" title="Go to user panel"></i> <p-button *ngIf="toggleAdmin" (onClick)="adminPanel()" ><i class="pi pi-sign-in" style="margin-right:10px; font-size: 18px"[ngClass]="{'collapsed': isCollapsed}" title="Go to user panel"></i>
<span *ngIf="!isCollapsed"> <span *ngIf="!isCollapsed">
Go to user panel User panel
</span> </span>
</p-button> </p-button>
</div> </div>
......
...@@ -32,56 +32,4 @@ li::marker { ...@@ -32,56 +32,4 @@ li::marker {
content: ''; content: '';
font-size: 0em; font-size: 0em;
} }
:host ::ng-deep .p-datatable .p-datatable-thead > tr > th{
border: 1px solid #E0E2E5;
background:transparent;
border-width: 0 0 1px 0;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #E0E2E5;
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
:host ::ng-deep .p-datatable .p-paginator-bottom{
height: 40px;
background: transparent;
border: none;
margin-top:10px;
}
:host ::ng-deep .p-datatable .p-datatable-tbody > tr{
background: transparent;
}
:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{
transition: unset;
border-radius: 50%;
min-width:3.5rem;
height:3.5rem;
margin:0 5px;
font-size: 14px;
}
:host ::ng-deep .p-paginator-element{
border-radius:50%;
margin:0 5px;
min-width:3.5rem;
height:3.5rem;
font-size: 14px;
}
:host ::ng-deep .p-paginator .p-dropdown{
height:3rem;
}
:host ::ng-deep .p-paginator-icon{
height: 1.5rem;
width: 1.5rem;
}
:host ::ng-deep .p-paginator .p-dropdown .p-dropdown-label{
padding-right: 10px;
}
:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{
background: var(--user-button-background-hover);
}
:host ::ng-deep .p-datatable>.p-datatable-wrapper {
overflow: visible;
}
...@@ -71,22 +71,42 @@ ...@@ -71,22 +71,42 @@
[rowsPerPageOptions]="[15, 20, 25, 30, 50]" > [rowsPerPageOptions]="[15, 20, 25, 30, 50]" >
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th scope="col" class="column-sortable" sortable-column="username" <th scope="col" class="column-sortable" pSortableColumn="username">
sort-direction="asc">{{ 'USERS.USER_NAME' | translate }}</th> {{ 'USERS.USER_NAME' | translate }}
<th scope="col" class="column-sortable" sortable-column="lastname">{{'USERS.NAME' | translate}}</th> <p-sortIcon field="username"></p-sortIcon>
<th *ngIf="!domainMode" scope="col" class="column-sortable" </th>
sortable-column="email">{{'USERS.EMAIL' | translate}}</th> <th scope="col" class="column-sortable" pSortableColumn="lastname">
<th scope="col" class="column-sortable" sortable-column="domains" {{'USERS.NAME' | translate}}
*ngIf="domainId === domainService.getGlobalDomainId()">{{ 'USERS.DOMAINS' | translate }}</th> <p-sortIcon field="lastname"></p-sortIcon>
<th scope="col" class="column-sortable" sortable-column="globalRole" </th>
*ngIf="domainId === domainService.getGlobalDomainId()">{{ 'USERS.GLOBAL_ROLE' | translate }}</th> <th *ngIf="!domainMode" scope="col" class="column-sortable" pSortableColumn="email">
<th scope="col" class="column-sortable" sortable-column="roles" {{'USERS.EMAIL' | translate}}
*ngIf="domainId !== domainService.getGlobalDomainId() && !isModeAllowed(ComponentMode.EDIT)">{{ 'USERS.ROLES' | translate }}</th> <p-sortIcon field="email"></p-sortIcon>
<th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode" </th>
sortable-column="firstLoginDate">{{ 'USERS.FIRST_LOGIN' | translate }}</th> <th scope="col" class="column-sortable" pSortableColumn="domains" *ngIf="domainId === domainService.getGlobalDomainId()">
<th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode" {{ 'USERS.DOMAINS' | translate }}
sortable-column="lastSuccessfulLoginDate">{{ 'USERS.LAST_SUCCESSFUL_LOGIN' | translate }}</th> <p-sortIcon field="domains"></p-sortIcon>
<th scope="col" class="column-sortable" sortable-column="enabled">{{ 'USERS.ENABLED' | translate }}</th> </th>
<th scope="col" class="column-sortable" pSortableColumn="globalRole" *ngIf="domainId === domainService.getGlobalDomainId()">
{{ 'USERS.GLOBAL_ROLE' | translate }}
<p-sortIcon field="globalRole"></p-sortIcon>
</th>
<th scope="col" class="column-sortable" pSortableColumn="roles" *ngIf="domainId !== domainService.getGlobalDomainId() && !isModeAllowed(ComponentMode.EDIT)">
{{ 'USERS.ROLES' | translate }}
<p-sortIcon field="roles"></p-sortIcon>
</th>
<th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode" pSortableColumn="firstLoginDate">
{{ 'USERS.FIRST_LOGIN' | translate }}
<p-sortIcon field="firstLoginDate"></p-sortIcon>
</th>
<th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode" pSortableColumn="lastSuccessfulLoginDate">
{{ 'USERS.LAST_SUCCESSFUL_LOGIN' | translate }}
<p-sortIcon field="lastSuccessfulLoginDate"></p-sortIcon>
</th>
<th scope="col" class="column-sortable" pSortableColumn="enabled">
{{ 'USERS.ENABLED' | translate }}
<p-sortIcon field="enabled"></p-sortIcon>
</th>
<th *ngIf="!isModeAllowed(ComponentMode.EDIT)" scope="col">&nbsp;</th> <th *ngIf="!isModeAllowed(ComponentMode.EDIT)" scope="col">&nbsp;</th>
<th *ngIf="isModeAllowed(ComponentMode.EDIT)" scope="col">&nbsp;</th> <th *ngIf="isModeAllowed(ComponentMode.EDIT)" scope="col">&nbsp;</th>
</tr> </tr>
......
...@@ -178,3 +178,65 @@ ...@@ -178,3 +178,65 @@
.text-bold { .text-bold {
font-weight: 700;; font-weight: 700;;
} }
body .p-datatable .p-datatable-thead > tr > th{
border: 1px solid #E0E2E5;
background:transparent;
border-width: 0 0 1px 0;
}
body .p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #E0E2E5;
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
body .p-datatable .p-paginator-bottom{
height: 40px;
background: transparent;
border: none;
margin-top:10px;
}
body .p-datatable .p-datatable-tbody > tr{
background: transparent;
}
body .p-paginator .p-paginator-pages .p-paginator-page{
transition: unset;
border-radius: 50%;
min-width:3.5rem;
height:3.5rem;
margin:0 5px;
font-size: 14px;
}
body .p-paginator-element{
border-radius:50%;
margin:0 5px;
min-width:3.5rem;
height:3.5rem;
font-size: 14px;
}
body .p-paginator .p-dropdown{
height:3rem;
}
body .p-paginator-icon{
height: 1.5rem;
width: 1.5rem;
}
body .p-paginator .p-dropdown .p-dropdown-label{
padding-right: 10px;
}
body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{
background: var(--user-button-background-hover);
}
body .p-datatable>.p-datatable-wrapper {
overflow: visible;
}
body .p-datatable .p-sortable-column.p-highlight{
color: var(--primary-button-color);
}
body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{
color:var(--primary-button-color);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment