[Library | Trunk]: Grow loading stoke

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59719 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2020-10-29 16:35:32 +00:00
parent a1bccfe527
commit 7d0851fae7
4 changed files with 21 additions and 23 deletions

View File

@ -1,5 +1,5 @@
<div> <div>
<ul class="uk-tab customTabs admin" uk-tab> <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
<li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('managers')"><span class="title">Managers</span></a></li> <li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('managers')"><span class="title">Managers</span></a></li>
<li [class.uk-active]="tab === 'members'"><a (click)="changeTab('members')"><span class="title">Members</span></a></li> <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('members')"><span class="title">Members</span></a></li>
</ul> </ul>

View File

@ -5,8 +5,8 @@
{{error}} {{error}}
</div> </div>
</div> </div>
<div class="uk-grid" uk-grid> <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-expand"> <div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
<ul class="uk-subnav uk-subnav-pill"> <ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="showManagers" (click)="showManagers = true"> <li [class.uk-active]="showManagers" (click)="showManagers = true">
<a>Managers</a> <a>Managers</a>
@ -16,7 +16,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="uk-width-1-5 uk-flex uk-flex-right"> <div class="uk-width-1-5@l uk-width-1-3@m uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
<a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()"> <a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()">
<button class="uk-icon-button large uk-button-secondary"> <button class="uk-icon-button large uk-button-secondary">
<icon name="person_add"></icon> <icon name="person_add"></icon>
@ -30,7 +30,7 @@
</div> </div>
<div *ngIf="!loadManagers && !loadPending" class="uk-margin-medium-top uk-padding-small"> <div *ngIf="!loadManagers && !loadPending" class="uk-margin-medium-top uk-padding-small">
<div *ngIf="(showManagers && managers.length == 0) || (!showManagers && pending.length == 0)" <div *ngIf="(showManagers && managers.length == 0) || (!showManagers && pending.length == 0)"
class="uk-card uk-card-default uk-padding-large uk-card-body uk-text-center uk-margin-bottom uk-text-bold"> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div *ngIf="showManagers">No managers for {{name}}</div> <div *ngIf="showManagers">No managers for {{name}}</div>
<div *ngIf="!showManagers">No pending manager invitations for {{name}}</div> <div *ngIf="!showManagers">No pending manager invitations for {{name}}</div>
</div> </div>
@ -38,14 +38,14 @@
class="uk-overflow-auto uk-height-max-large"> class="uk-overflow-auto uk-height-max-large">
<div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom" *ngFor="let item of (showManagers)?managers:pending"> <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom" *ngFor="let item of (showManagers)?managers:pending">
<div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid> <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-3-4"> <div class="uk-width-3-4@l uk-width-1-2@m">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<span class="uk-text-muted">Email: </span> <span class="uk-text-muted">Email: </span>
<span class="uk-text-bold">{{(showManagers) ? item.email : item}}</span> <span class="uk-text-bold">{{(showManagers) ? item.email : item}}</span>
</div> </div>
</div> </div>
<div *ngIf="properties.environment === 'development'" class="uk-width-expand uk-text-center"> <div *ngIf="properties.environment === 'development'" class="uk-width-expand">
<div class="uk-padding-small uk-padding-remove-horizontal"> <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"> <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
<icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon> <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
<span class="uk-margin-small-left">{{showManagers?'Remove manager':'Cancel invitation'}}</span> <span class="uk-margin-small-left">{{showManagers?'Remove manager':'Cancel invitation'}}</span>
@ -64,12 +64,12 @@
</div> </div>
</modal-alert> </modal-alert>
<modal-alert #deleteManagerModal (alertOutput)="deleteManager()"> <modal-alert #deleteManagerModal (alertOutput)="deleteManager()">
<div *ngIf="selectedUser" class="uk-padding uk-padding-remove-horizontal"> <div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from managers? Are you sure you want to remove <span class="uk-text-bold">{{selectedUser}}</span> from managers?
</div> </div>
</modal-alert> </modal-alert>
<modal-alert #deletePendingModal (alertOutput)="deletePendingManager()"> <modal-alert #deletePendingModal (alertOutput)="deletePendingManager()">
<div *ngIf="selectedUser" class="uk-padding uk-padding-remove-horizontal"> <div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
Are you sure you want to cancel manager invitation of <span class="uk-text-bold">{{selectedUser}}</span>? Are you sure you want to cancel manager invitation of <span class="uk-text-bold">{{selectedUser}}</span>?
</div> </div>
</modal-alert> </modal-alert>

View File

@ -6,7 +6,7 @@
</div> </div>
</div> </div>
<div class="uk-grid" uk-grid> <div class="uk-grid" uk-grid>
<div class="uk-width-expand"> <div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
<ul class="uk-subnav uk-subnav-pill"> <ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="showMembers" (click)="showMembers = true"> <li [class.uk-active]="showMembers" (click)="showMembers = true">
<a>Members</a> <a>Members</a>
@ -16,7 +16,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="uk-width-1-4 uk-flex uk-flex-right"> <div class="uk-width-1-5@l uk-width-1-3@m uk-flex uk-flex-right@m uk-flex-center">
<a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()"> <a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()">
<button class="uk-icon-button large uk-button-secondary"> <button class="uk-icon-button large uk-button-secondary">
<icon name="person_add"></icon> <icon name="person_add"></icon>
@ -30,7 +30,7 @@
</div> </div>
<div *ngIf="!loadMembers && !loadPending" class="uk-margin-medium-top"> <div *ngIf="!loadMembers && !loadPending" class="uk-margin-medium-top">
<div *ngIf="(showMembers && members.length == 0) || (!showMembers && pending.length == 0)" <div *ngIf="(showMembers && members.length == 0) || (!showMembers && pending.length == 0)"
class="uk-card uk-card-default uk-padding-large uk-card-body uk-text-center uk-margin-bottom uk-text-bold"> class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
<div *ngIf="showMembers">No members for {{name}}</div> <div *ngIf="showMembers">No members for {{name}}</div>
<div *ngIf="!showMembers">No pending member invitations for {{name}}</div> <div *ngIf="!showMembers">No pending member invitations for {{name}}</div>
</div> </div>
@ -38,14 +38,14 @@
class="uk-overflow-auto uk-height-max-large uk-padding-small"> class="uk-overflow-auto uk-height-max-large uk-padding-small">
<div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom" *ngFor="let item of (showMembers)?members:pending"> <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom" *ngFor="let item of (showMembers)?members:pending">
<div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid> <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-3-4"> <div class="uk-width-3-4@l uk-width-1-2@m">
<div class="uk-padding-small uk-padding-remove-horizontal"> <div class="uk-padding-small uk-padding-remove-horizontal">
<span class="uk-text-muted">Email: </span> <span class="uk-text-muted">Email: </span>
<span class="uk-text-bold">{{(showMembers) ? item.email : item}}</span> <span class="uk-text-bold">{{(showMembers) ? item.email : item}}</span>
</div> </div>
</div> </div>
<div *ngIf="properties.environment === 'development'" class="uk-width-expand uk-text-center"> <div *ngIf="properties.environment === 'development'" class="uk-width-expand">
<div class="uk-padding-small uk-padding-remove-horizontal"> <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"> <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
<icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon> <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
<span class="uk-margin-small-left">{{showMembers ? 'Remove member' : 'Cancel invitation'}}</span> <span class="uk-margin-small-left">{{showMembers ? 'Remove member' : 'Cancel invitation'}}</span>

View File

@ -4,12 +4,10 @@ import {Component, Input} from "@angular/core";
selector: 'loading', selector: 'loading',
template: ` template: `
<div class="uk-flex uk-flex-center uk-margin-small-top"> <div class="uk-flex uk-flex-center uk-margin-small-top">
<!--<div class="md-preloader" [ngClass]="(color)?('md-preloader-' + color):''"> <span class="portal-color uk-icon uk-spinner">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="48" width="48" viewBox="0 0 75 75"> <svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" data-svg="spinner"><circle
<circle cx="37.5" cy="37.5" r="33.5" stroke-width="4"></circle> fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg>
</svg> </span>
</div>-->
<span class="portal-color" uk-spinner="ratio: 2"></span>
</div>` </div>`
}) })
export class LoadingComponent { export class LoadingComponent {
@ -17,7 +15,7 @@ export class LoadingComponent {
* Possible values '': blue, 'success': green, 'warning': orange and 'danger': red * Possible values '': blue, 'success': green, 'warning': orange and 'danger': red
*/ */
@Input() color: 'success' | 'warning' | 'danger' = null; @Input() color: 'success' | 'warning' | 'danger' = null;
constructor() { constructor() {
} }
} }