Commit cb881c55 authored by Lukas Burgey's avatar Lukas Burgey

Rework overall visuals and the dialogues

parent e3854327
.body {
margin-top: 30px;
margin-bottom: 30px;
margin-left: 50px;
margin-right: 50px;
}
<div class="body" class="mat-typography" class="body" >
<div *ngIf="(userService.subscribeUser() | async) as user" style="max-width: 800px; margin: auto;">
<mat-tab-group *ngIf="(userService.subscribeSSHKeys() | async)?.length > 0; else noCredentials">
<mat-tab label="Your VOs">
<div class="mat-typography" class="body">
<h3>Your Virtual Organisations</h3>
<div>
<mat-accordion *ngIf="(userService.subscribeVOs() | async) as vos">
<app-vo-data *ngFor="let vo of vos" [vo]="vo"></app-vo-data>
</mat-accordion>
<ng-template #noVOs>
<p>
You are not member in any Virtual Organisations.
</p>
</ng-template>
</div>
</div>
</mat-tab>
<!--
<mat-tab label="Services">
<div class="mat-typography" class="body">
<h2>Available Services</h2>
<mat-accordion *ngIf="userService.services$ | async as services; else noServices">
<app-service *ngFor="let service of services" [deployment]="userService.getDeployment(service)" [service]="service"></app-service>
</mat-accordion>
<ng-template #noServices>
<p>
You have no available services.<br/>
This is due services requiring users to be member of a certain vo.
</p>
</ng-template>
</div>
</mat-tab>
-->
</mat-tab-group>
<div *ngIf="(userService.subscribeSSHKeys() | async)?.length > 0; else noCredentials">
<h3>Your Virtual Organisations</h3>
<div>
<mat-accordion *ngIf="(userService.subscribeVOs() | async) as vos">
<app-vo-data *ngFor="let vo of vos" [vo]="vo"></app-vo-data>
</mat-accordion>
<ng-template #noVOs>
<p>
You are not member in any Virtual Organisations.
</p>
</ng-template>
</div>
</div>
<ng-template #noCredentials>
<div class="mat-typography">
<div style="margin-bottom: 50px;">
......
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from '../user.service';
import * as t from '../types/types.module';
@Component({
......
......@@ -21,20 +21,20 @@
<div>
<h2>Key Information</h2>
<p>
Here are the states of your keys at this service. The keys listed as "deployed" can be used to access the service via ssh.
These are the current states of your keys at this service. The keys listed as "deployed" can be used to access the service via ssh.
</p>
<table style="margin: 30px auto 0px auto;">
<table>
<thead>
<tr>
<td style="min-width: 150px;">State</td>
<td style="min-width: 200px;">Key</td>
<td>State</td>
<td>Key</td>
<td></td>
</tr>
</thead>
<tbody>
<tr *ngFor="let state of stateItem.credential_states">
<td class="childs-inline">
<span [ngSwitch]="state.state" style="margin-right: 10px;">
<td>
<span [ngSwitch]="state.state" class="spaced">
<mat-icon *ngSwitchCase="'deployed'">call_made</mat-icon>
<mat-icon *ngSwitchCase="'questionnaire'">warning</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
......@@ -49,11 +49,16 @@
<td style="font-size: 110%;">
{{ state.credential.name }}
</td>
<td *ngIf="state.state_target !== state.state" class="childs-inline">
<span style="margin-right: 10px;">
<td *ngIf="state.is_pending">
<span class="spaced">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span>
In transition to state {{ state.state_target }}
<span *ngIf="state.state_target === 'deployed'">
Key is being deployed
</span>
<span *ngIf="state.state_target === 'not_deployed'">
Key is being removed
</span>
</td>
</tr>
</tbody>
......
......@@ -20,7 +20,6 @@ export class DialogService {
messageDialog: MatDialogRef<any>;
defaultWidth = '70%';
constructor(
private dialog: MatDialog,
......@@ -28,15 +27,9 @@ export class DialogService {
settingsData(data?: any) {
if (data != undefined && data != null) {
return {
width: this.defaultWidth,
data: data,
}
} else {
return {
width: this.defaultWidth,
}
return {
panelClass: 'scrolling-dialog',
data: data,
}
}
......
......@@ -10,7 +10,7 @@
<p>
These services are provided for members of this VO.
</p>
<table style="margin: 30px 0px 30px 30px;">
<table>
<thead>
<tr>
<td>Site</td>
......@@ -20,7 +20,7 @@
</thead>
<tbody>
<ng-container *ngFor="let site of sites$$ | async">
<tr *ngFor="let service of servicesAtSite(site) | async" class="padded">
<tr *ngFor="let service of servicesAtSite(site) | async">
<td>
<span matTooltip="Site {{ site.name }} provides the service {{ service.name }} for members of {{ vo.name }}">
<mat-icon>account_balance</mat-icon>
......@@ -34,8 +34,8 @@
</span>
</td>
<ng-container *ngIf="(subscribeStateItem(site, service) | async) as stateItem; else noStateItem">
<td style="height: 42px;" class="childs-inline">
<span [ngSwitch]="stateItem.state" style="margin-right: 5px;">
<td>
<span [ngSwitch]="stateItem.state" class="spaced">
<mat-icon *ngSwitchCase="'deployed'" matTooltip="The credentials are deployed for the service {{ service.name }}. Click to see details.">call_made</mat-icon>
<mat-icon *ngSwitchCase="'questionnaire'" matTooltip="This site needs more data to deploy the keys. Please click to submit the data.">warning</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate" matTooltip="Waiting for the deployment of the credentials to the site {{ site.name }}"></mat-progress-spinner>
......@@ -59,8 +59,8 @@
<td *ngIf="stateItem.state === 'rejected'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Rejected </button>
</td>
<td *ngIf="stateItem.is_credential_pending" class="childs-inline">
<span style="margin-right: 5px;">
<td *ngIf="stateItem.is_credential_pending">
<span class="spaced">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span>
SSH Keys pending
......
......@@ -4,8 +4,33 @@ body {
margin: 0px;
}
.padded > * {
.body {
margin: 50px;
}
table {
margin: 30px 0px 30px 30px;
}
tr > * {
padding-right: 15px;
height: 42px;
}
/* same as childs inline */
td > * {
display: inline-block;
vertical-align: middle;
}
.childs-inline > * {
display: inline-block;
vertical-align: middle;
}
/* adds a small margin right to this object */
.spaced {
margin-right: 10px;
}
.toolbar-spacer {
......@@ -59,11 +84,6 @@ mat-checkbox {
width: 100%;
}
.childs-inline > * {
display: inline-block;
vertical-align: middle;
}
.form-vertical > button {
width: 25%;
}
......@@ -71,3 +91,8 @@ mat-checkbox {
.mat-form-field {
margin-right: 15px;
}
.scrolling-dialog .mat-dialog-container {
margin: 70px 0px 6px 0px;
height: unset;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment