footer, table, about view, left menu

src/app/appmarket/admin/languagemanagement/languagelist/languagelist.component.css

@@ -16,26 +16,3 @@ tr.clickable {
 /*.dropdown:hover .dropdown-menu {*/
 /*    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;
-}

src/app/appmarket/appinstance/appinstancelist/appinstancelist.component.css

@@ -39,52 +39,7 @@ label{
     margin-bottom: 0;
     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{
     background: var(--primary-button-color) !important;
     border-color: var(--primary-button-color);

src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.css

@@ -16,26 +16,4 @@
 /*.dropdown:hover .dropdown-menu {*/
 /*    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;
-}
+

src/app/appmarket/appmanagement/app-management-list/appmanagementlist.component.html

@@ -19,10 +19,21 @@
       <ng-template pTemplate="header">
         <tr>
           <th></th>
-          <th>{{'APPS_MANAGEMENT.NAME' | translate}}</th>
-          <th>{{'APPS_MANAGEMENT.OWNER' | translate}}</th>
-          <th *ngIf="isAnySubtableVisible()">{{'APPS_MANAGEMENT.VERSION' | translate}}</th>
-          <th *ngIf="isAnySubtableVisible()">{{'APPS_MANAGEMENT.STATE' | translate}}</th>
+          <th pSortableColumn="name">
+            {{'APPS_MANAGEMENT.NAME' | translate}}
+            <p-sortIcon field="name"></p-sortIcon>
+          </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>

src/app/appmarket/bulkDeployment/bulk-list/bulk-list.component.css

@@ -8,55 +8,4 @@
     margin-left: 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);
-}

src/app/appmarket/bulkDeployment/bulk-list/bulk-list.component.html

@@ -21,7 +21,7 @@
                     label="Deployments Queue"
                     severity="secondary"
             ></p-button>
-            <p-sidebar [(visible)]="sidebarVisible4" position="left" styleClass="w-30rem">
+            <p-sidebar [(visible)]="sidebarVisible4" position="right" styleClass="w-30rem">
                 <h3>Deployments Queue</h3>
                 <div class="flex flex-column">
                     <div class="flex grid">
@@ -69,10 +69,18 @@
         <p-table *ngIf="mode === 'DOMAIN'" [value]="bulks" class="p-datatable-hover p-datatable-sm" [responsive]="true" (onSort)="onSort($event)">
             <ng-template pTemplate="header">
                 <tr>
-                    <th pSortableColumn="id">{{'BULK.LIST.ID' | translate}}</th>
-                    <th pSortableColumn="creator">{{'BULK.LIST.CREATOR' | translate}}</th>
-                    <th pSortableColumn="date">{{'BULK.LIST.CREATION_DATE' | translate}}</th>
-                    <th pSortableColumn="state">{{'BULK.LIST.STATE' | translate}}</th>
+                    <th pSortableColumn="id">{{'BULK.LIST.ID' | translate}}
+                        <p-sortIcon field="id"></p-sortIcon>
+                    </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>
                 </tr>
             </ng-template>
@@ -148,12 +156,24 @@
                  (onSort)="onSort($event)">
             <ng-template pTemplate="header">
                 <tr>
-                    <th pSortableColumn="id">{{'BULK.LIST.ID' | translate}}</th>
-                    <th pSortableColumn="creator">{{'BULK.LIST.CREATOR' | translate}}</th>
-                    <th pSortableColumn="app_name">{{'BULK.LIST.APP_NAME' | translate}}</th>
-                    <th pSortableColumn="instance_no">{{'BULK.LIST.INSTANCE_NO' | translate}}</th>
-                    <th pSortableColumn="date" pSortOrder="-1">{{'BULK.LIST.CREATION_DATE' | translate}}</th>
-                    <th pSortableColumn="state">{{'BULK.LIST.STATE' | translate}}</th>
+                    <th pSortableColumn="id">{{'BULK.LIST.ID' | translate}}
+                        <p-sortIcon field="id"></p-sortIcon>
+                    </th>
+                    <th pSortableColumn="creator">{{'BULK.LIST.CREATOR' | translate}}
+                        <p-sortIcon field="creator"></p-sortIcon>
+                    </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>
                 </tr>
             </ng-template>

src/app/appmarket/domains/list/domainslist.component.css

@@ -21,64 +21,10 @@ tr.clickable {
     display: flex;
     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{
     padding-left:5px;
     display: unset;
     margin-bottom: 0;
     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;
-}
+

src/app/shared/about/about.component.html

-<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="" style="padding-bottom: 15px;">
             <h2>{{ 'ABOUT.CHANGELOG_TITLE' | translate }}</h2>

src/app/shared/admin/clusters/manager/manager.component.css

-: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{
     padding-left:5px;
     display: unset;
     margin-bottom: 0;
     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;
-}

src/app/shared/admin/clusters/manager/manager.component.html

@@ -12,18 +12,29 @@
     <h4 class="header">{{ 'CLUSTERS.CONFIGURATION' | translate }}</h4>
     
 <div class="background-section">
-    <p-table [value]="clusters"                  [paginator]="true"
+    <p-table
+    [value]="clusters"
     [paginator]="true"
     [rows]="maxItemsOnPage"
     [rowsPerPageOptions]="[15, 20, 25, 30, 50]"
-    [responsiveLayout]="'scroll'">>
+    [responsiveLayout]="'scroll'">
         <ng-template pTemplate="header">
             <tr>
-                <th  pSortableColumn="id" id="id"> {{ 'CLUSTERS.ID' | translate }}</th>
-                <th pSortableColumn="name" id="name"> {{ 'CLUSTERS.NAME' | translate }}</th>
-                <th pSortableColumn="codename" id="codename"> {{ 'CLUSTERS.CODENAME' | translate }}</th>
-                <th pSortableColumn="creationDate" id="creationDate"> {{ 'CLUSTERS.CREATION_DATE' | translate }}</th>
-                <th pSortableColumn="modificationDate" id="modificationDate"> {{ 'CLUSTERS.MODIFICATION_DATE' | translate }}</th>
+                <th  pSortableColumn="id" id="id"> {{ 'CLUSTERS.ID' | translate }}
+                    <p-sortIcon field="id"></p-sortIcon>
+                </th>
+                <th pSortableColumn="name" id="name"> {{ 'CLUSTERS.NAME' | translate }}
+                    <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>
             </tr>
         </ng-template>

src/app/shared/footer/footer.component.html

@@ -9,7 +9,7 @@
                     </a>
                 </div>
                 <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 class="" style="display: flex; width: 50%; justify-content: end; margin-right: 50px">

src/app/shared/left-menu/left-menu.component.css

@@ -81,6 +81,7 @@
 }
 :host ::ng-deep a:focus{
     outline: none;
+    text-decoration: none;
 }
 :host ::ng-deep .p-accordion .p-accordion-content{
     background: transparent;

src/app/shared/left-menu/left-menu.component.html

@@ -15,7 +15,7 @@
         <ul *ngIf="!toggleAdmin" style="margin-top: 30px" >
             <li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                 <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">
                       Applications
                   </span>
@@ -23,7 +23,7 @@
             </li>
             <li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                 <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">
                       Instances
                   </span>
@@ -33,7 +33,7 @@
         <ul *ngIf="toggleAdmin" style="margin-top: 30px">
             <li [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                 <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">
                         Dashboard
                     </span>
@@ -43,7 +43,7 @@
                 <p-accordionTab *roles="['ROLE_DOMAIN_ADMIN', 'ROLE_SYSTEM_ADMIN', 'ROLE_OPERATOR', 'ROLE_GROUP_MANAGER', 'ROLE_GROUP_DOMAIN_ADMIN']">
                     <ng-template pTemplate="header">
                         <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">
                                  {{ 'NAVBAR.DOMAINS' | translate }}
                             </span>
@@ -52,7 +52,7 @@
                     <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}" >
                         <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">
                                 List
                             </span>
@@ -61,7 +61,7 @@
                     <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/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">
                                 Group
                             </span>
@@ -70,7 +70,7 @@
                     <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/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">
                                  Bulk deployments
                             </span>
@@ -80,7 +80,7 @@
             </p-accordion>
             <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']">
-                    <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">
                        {{ 'BULK.APP.HEADER' | translate }}
                     </span>
@@ -88,7 +88,7 @@
             </li>
             <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                 <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">
                         {{ 'NAVBAR.USERS' | translate }}
                     </span>
@@ -96,7 +96,7 @@
             </li>
             <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']">
-                    <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">
                         {{ 'NAVBAR.DOMAIN_USERS' | translate  }}
                     </span>
@@ -104,7 +104,7 @@
             </li>
             <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']">
-                    <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">
                         Catalog
                     </span>
@@ -112,7 +112,7 @@
             </li>
             <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                 <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">
                        Settings
                     </span>
@@ -120,7 +120,7 @@
             </li>
             <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                 <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">
                         {{ 'CLUSTERS.CONFIGURATION' | translate }}
                     </span>
@@ -128,7 +128,7 @@
             </li>
             <li *roles="['ROLE_SYSTEM_ADMIN']" [routerLinkActiveOptions]="{exact:true}" [routerLinkActive]="['active']" [ngClass]="{'collapsed': isCollapsed}">
                 <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">
                         {{'NAVBAR.LANGUAGES' | translate }}
                     </span>
@@ -136,14 +136,14 @@
             </li>
             <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']">
-                    <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">
                         {{ 'NAVBAR.MONITOR' | translate }}
                     </span>
                 </a>
             </li>
             <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>
             </li>
 
@@ -151,22 +151,22 @@
     </div>
     <div class="menu flex">
         <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">
-                 User
+                User
             </span>
         </p-button>
         <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">
-                      Go to admin panel
+                      Admin panel
                 </span>
             </p-button>
         </div>
         <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">
-                        Go to user panel
+                        User panel
                 </span>
             </p-button>
         </div>

src/app/shared/users/list/userslist.component.css

@@ -32,56 +32,4 @@ li::marker {
     content: '';
     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;
-}

src/app/shared/users/list/userslist.component.html

@@ -71,22 +71,42 @@
                  [rowsPerPageOptions]="[15, 20, 25, 30, 50]" >
             <ng-template pTemplate="header">
                 <tr>
-                    <th scope="col" class="column-sortable" sortable-column="username"
-                        sort-direction="asc">{{ 'USERS.USER_NAME' | translate }}</th>
-                    <th scope="col" class="column-sortable" sortable-column="lastname">{{'USERS.NAME' | translate}}</th>
-                    <th *ngIf="!domainMode" scope="col" class="column-sortable"
-                        sortable-column="email">{{'USERS.EMAIL' | translate}}</th>
-                    <th scope="col" class="column-sortable" sortable-column="domains"
-                        *ngIf="domainId === domainService.getGlobalDomainId()">{{ 'USERS.DOMAINS' | translate }}</th>
-                    <th scope="col" class="column-sortable" sortable-column="globalRole"
-                        *ngIf="domainId === domainService.getGlobalDomainId()">{{ 'USERS.GLOBAL_ROLE' | translate }}</th>
-                    <th scope="col" class="column-sortable" sortable-column="roles"
-                        *ngIf="domainId !== domainService.getGlobalDomainId() && !isModeAllowed(ComponentMode.EDIT)">{{ 'USERS.ROLES' | translate }}</th>
-                    <th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode"
-                        sortable-column="firstLoginDate">{{ 'USERS.FIRST_LOGIN' | translate }}</th>
-                    <th scope="col" class="column-sortable" *ngIf="!isModeAllowed(ComponentMode.EDIT) && !domainMode"
-                        sortable-column="lastSuccessfulLoginDate">{{ 'USERS.LAST_SUCCESSFUL_LOGIN' | translate }}</th>
-                    <th scope="col" class="column-sortable" sortable-column="enabled">{{ 'USERS.ENABLED' | translate }}</th>
+                    <th scope="col" class="column-sortable" pSortableColumn="username">
+                        {{ 'USERS.USER_NAME' | translate }}
+                        <p-sortIcon field="username"></p-sortIcon>
+                    </th>
+                    <th scope="col" class="column-sortable" pSortableColumn="lastname">
+                        {{'USERS.NAME' | translate}}
+                        <p-sortIcon field="lastname"></p-sortIcon>
+                    </th>
+                    <th *ngIf="!domainMode" scope="col" class="column-sortable" pSortableColumn="email">
+                        {{'USERS.EMAIL' | translate}}
+                        <p-sortIcon field="email"></p-sortIcon>
+                    </th>
+                    <th scope="col" class="column-sortable" pSortableColumn="domains" *ngIf="domainId === domainService.getGlobalDomainId()">
+                        {{ 'USERS.DOMAINS' | translate }}
+                        <p-sortIcon field="domains"></p-sortIcon>
+                    </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>
                 </tr>

src/styles.css

@@ -178,3 +178,65 @@
 .text-bold {
     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);
+}