[Library | Trunk]: 1. Icons remove line-height. 2. Role-users: Fix UI

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60534 d315682c-612b-4755-9ff5-7f18f6832af3

dashboard/users/role-users/role-users.component.html

@@ -43,19 +43,21 @@
       <div *ngIf="(showActive && active.length > 0) || (!showActive && pending.length > 0)">
         <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom"
              *ngFor="let item of (showActive)?active:pending">
-          <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
-            <div class="uk-width-3-4@l uk-width-1-2@m">
+          <div class="uk-grid uk-grid-divider uk-flex-middle" uk-grid>
+            <div class="uk-width-expand@m uk-width-1-1">
               <div class="uk-padding-small uk-padding-remove-horizontal">
                 <span class="uk-text-muted">Email: </span>
                 <span class="uk-text-bold">{{(showActive) ? item.email : item}}</span>
               </div>
             </div>
-            <div *ngIf="isCurator || !showActive" class="uk-width-expand">
-              <div class="uk-padding-small uk-padding-remove-horizontal uk-flex uk-flex-center">
-                <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
-                  <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
-                  <span class="uk-margin-small-left">{{showActive ? ('Remove ' + role) : 'Cancel invitation'}}</span>
-                </a>
+            <div *ngIf="isCurator || !showActive" class="uk-width-auto@m uk-width-1-1">
+              <div class="uk-width-1-1 uk-flex uk-flex-center">
+                <div class="uk-padding-small uk-padding-remove-horizontal">
+                  <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
+                    <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
+                    <span class="uk-margin-small-left">{{showActive ? ('Remove ' + role) : 'Cancel invitation'}}</span>
+                  </a>
+                </div>
               </div>
             </div>
           </div>

dashboard/users/subscribers/subscribers.component.html

@@ -1,17 +1,20 @@
 <div page-content>
   <div header>
     <ng-content></ng-content>
-    <div [class.uk-invisible]="loading" class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
+    <div [class.uk-invisible]="loading"
+         class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
       <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search"
            [bordered]="true" colorClass="uk-text-secondary" toggleTitle="locate subscribers"></div>
       <div>
-        <a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle" [class.uk-disabled]="!subscriberInvite || subscriberInvite.loading" (click)="openInviteModal()">
+        <a *ngIf="exists" class="uk-text-uppercase uk-flex uk-flex-middle"
+           [class.uk-disabled]="!subscriberInvite || subscriberInvite.loading" (click)="openInviteModal()">
           <button class="uk-icon-button large uk-button-secondary">
             <icon name="person_add"></icon>
           </button>
           <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Invite Subscribers</button>
         </a>
-        <a *ngIf="!exists && isPortalAdmin" class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openCreateRoleModal()">
+        <a *ngIf="!exists && isPortalAdmin" class="uk-text-uppercase uk-flex uk-flex-middle"
+           (click)="openCreateRoleModal()">
           <button class="uk-icon-button large uk-button-secondary">
             <icon name="person_add"></icon>
           </button>
@@ -39,18 +42,20 @@
           <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom"
                *ngFor="let item of showSubscribers.slice((page - 1)*pageSize, page*pageSize)">
             <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
-              <div class="uk-width-3-4@l uk-width-1-2@m">
+              <div class="uk-width-expand@m uk-width-1-1">
                 <div class="uk-padding-small uk-padding-remove-horizontal">
                   <span class="uk-text-muted">Email: </span>
                   <span class="uk-text-bold">{{item.email}}</span>
                 </div>
               </div>
-              <div class="uk-width-expand">
-                <div class="uk-padding-small uk-padding-remove-horizontal uk-flex uk-flex-center">
-                  <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
-                    <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
-                    <span class="uk-margin-small-left">Remove subscriber</span>
-                  </a>
+              <div class="uk-width-auto@m uk-width-1-1">
+                <div class="uk-width-1-1 uk-flex uk-flex-center">
+                  <div class="uk-padding-small uk-padding-remove-horizontal">
+                    <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle" [class.uk-disabled]="!!item.isManager">
+                      <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
+                      <span class="uk-margin-small-left">Remove subscriber</span>
+                    </a>
+                  </div>
                 </div>
               </div>
             </div>
@@ -65,7 +70,8 @@
     </div>
   </div>
 </div>
-<modal-alert *ngIf="user" #inviteModal (alertOutput)="subscriberInvite.invite()" [okDisabled]="!subscriberInvite.valid" [large]="true">
+<modal-alert *ngIf="user" #inviteModal (alertOutput)="subscriberInvite.invite()" [okDisabled]="!subscriberInvite.valid"
+             [large]="true">
   <div class="uk-padding uk-padding-remove-horizontal">
     <subscriber-invite #subscriberInvite [user]="user"></subscriber-invite>
   </div>

dashboard/users/subscribers/subscribers.component.ts

@@ -18,6 +18,7 @@ import {Role, Session, User} from "../../../login/utils/helper.class";
 import {UserManagementService} from "../../../services/user-management.service";
 import {Router} from "@angular/router";
 import {SubscriberInviteComponent} from "../../../sharedComponents/subscriber-invite/subscriber-invite.component";
+import {zip} from "rxjs";
 
 declare var UIkit;
 
@@ -38,6 +39,7 @@ export class SubscribersComponent implements OnInit, OnDestroy, OnChanges {
   @Input()
   public message: string = null;
   public user: User = null;
+  public managers: any[];
   public subscribers: any[];
   public showSubscribers: any[];
   public subs: any[] = [];
@@ -93,8 +95,14 @@ export class SubscribersComponent implements OnInit, OnDestroy, OnChanges {
   
   updateList() {
     this.loading = true;
-    this.subs.push(this.userRegistryService.getActiveEmail(this.type, this.id, 'member').subscribe(users => {
-      this.subscribers = users;
+    let data = zip(this.userRegistryService.getActiveEmail(this.type, this.id, 'manager'),
+                  this.userRegistryService.getActiveEmail(this.type, this.id, 'member'));
+    this.subs.push(data.subscribe(users => {
+      this.managers = users[0];
+      this.subscribers = users[1];
+      this.subscribers.forEach(subscriber => {
+        subscriber['isManager'] = this.managers.find(manager => manager.email === subscriber.email);
+      });
       this.filterBySearch(this.filterForm.value.keyword);
       this.loading = false;
       this.exists = true;

utils/icons/icons.component.ts

@@ -63,6 +63,6 @@ export class IconsComponent implements OnInit{
       fill: this.fill,
       stroke: this.stroke
     };
-    this.elementRef.nativeElement.style = 'line-height: ' + this.ratio*20 + 'px;';
+    //this.elementRef.nativeElement.style = 'line-height: ' + this.ratio*20 + 'px; height: 20px';
   }
 }

utils/modal/alert.ts

@@ -15,9 +15,7 @@ declare var UIkit: any;
           <h6 *ngIf="isDashboard" class="uk-text-bold">{{alertTitle}}</h6>
         </div>
         <div class="uk-margin">
-          <div [hidden]=!alertMessage>
-            {{message}}
-          </div>
+          <div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
           <ng-content></ng-content>
         </div>
         <div class="uk-grid uk-flex uk-flex-middle">

utils/modal/alertModal.module.ts

@@ -4,9 +4,10 @@ import { FormsModule }         from '@angular/forms';
 
 import {AlertModal} from './alert';
 import {ModalModule} from './modal.module';
+import {SafeHtmlPipeModule} from "../pipes/safeHTMLPipe.module";
 
 @NgModule({
-  imports: [ CommonModule, FormsModule, ModalModule ],
+  imports: [CommonModule, FormsModule, ModalModule, SafeHtmlPipeModule],
   declarations: [
     AlertModal
   ],