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 class="body" class="mat-typography" class="body" >
<div *ngIf="(userService.subscribeUser() | async) as user" style="max-width: 800px; margin: auto;"> <div *ngIf="(userService.subscribeUser() | async) as user" style="max-width: 800px; margin: auto;">
<mat-tab-group *ngIf="(userService.subscribeSSHKeys() | async)?.length > 0; else noCredentials"> <div *ngIf="(userService.subscribeSSHKeys() | async)?.length > 0; else noCredentials">
<mat-tab label="Your VOs"> <h3>Your Virtual Organisations</h3>
<div class="mat-typography" class="body"> <div>
<h3>Your Virtual Organisations</h3> <mat-accordion *ngIf="(userService.subscribeVOs() | async) as vos">
<div> <app-vo-data *ngFor="let vo of vos" [vo]="vo"></app-vo-data>
<mat-accordion *ngIf="(userService.subscribeVOs() | async) as vos"> </mat-accordion>
<app-vo-data *ngFor="let vo of vos" [vo]="vo"></app-vo-data> <ng-template #noVOs>
</mat-accordion> <p>
<ng-template #noVOs> You are not member in any Virtual Organisations.
<p> </p>
You are not member in any Virtual Organisations. </ng-template>
</p> </div>
</ng-template> </div>
</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>
<ng-template #noCredentials> <ng-template #noCredentials>
<div class="mat-typography"> <div class="mat-typography">
<div style="margin-bottom: 50px;"> <div style="margin-bottom: 50px;">
......
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from '../user.service'; import { UserService } from '../user.service';
import * as t from '../types/types.module';
@Component({ @Component({
......
...@@ -21,20 +21,20 @@ ...@@ -21,20 +21,20 @@
<div> <div>
<h2>Key Information</h2> <h2>Key Information</h2>
<p> <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> </p>
<table style="margin: 30px auto 0px auto;"> <table>
<thead> <thead>
<tr> <tr>
<td style="min-width: 150px;">State</td> <td>State</td>
<td style="min-width: 200px;">Key</td> <td>Key</td>
<td></td> <td></td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let state of stateItem.credential_states"> <tr *ngFor="let state of stateItem.credential_states">
<td class="childs-inline"> <td>
<span [ngSwitch]="state.state" style="margin-right: 10px;"> <span [ngSwitch]="state.state" class="spaced">
<mat-icon *ngSwitchCase="'deployed'">call_made</mat-icon> <mat-icon *ngSwitchCase="'deployed'">call_made</mat-icon>
<mat-icon *ngSwitchCase="'questionnaire'">warning</mat-icon> <mat-icon *ngSwitchCase="'questionnaire'">warning</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner> <mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
...@@ -49,11 +49,16 @@ ...@@ -49,11 +49,16 @@
<td style="font-size: 110%;"> <td style="font-size: 110%;">
{{ state.credential.name }} {{ state.credential.name }}
</td> </td>
<td *ngIf="state.state_target !== state.state" class="childs-inline"> <td *ngIf="state.is_pending">
<span style="margin-right: 10px;"> <span class="spaced">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner> <mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span> </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> </td>
</tr> </tr>
</tbody> </tbody>
......
...@@ -20,7 +20,6 @@ export class DialogService { ...@@ -20,7 +20,6 @@ export class DialogService {
messageDialog: MatDialogRef<any>; messageDialog: MatDialogRef<any>;
defaultWidth = '70%';
constructor( constructor(
private dialog: MatDialog, private dialog: MatDialog,
...@@ -28,15 +27,9 @@ export class DialogService { ...@@ -28,15 +27,9 @@ export class DialogService {
settingsData(data?: any) { settingsData(data?: any) {
if (data != undefined && data != null) { return {
return { panelClass: 'scrolling-dialog',
width: this.defaultWidth, data: data,
data: data,
}
} else {
return {
width: this.defaultWidth,
}
} }
} }
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<p> <p>
These services are provided for members of this VO. These services are provided for members of this VO.
</p> </p>
<table style="margin: 30px 0px 30px 30px;"> <table>
<thead> <thead>
<tr> <tr>
<td>Site</td> <td>Site</td>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</thead> </thead>
<tbody> <tbody>
<ng-container *ngFor="let site of sites$$ | async"> <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> <td>
<span matTooltip="Site {{ site.name }} provides the service {{ service.name }} for members of {{ vo.name }}"> <span matTooltip="Site {{ site.name }} provides the service {{ service.name }} for members of {{ vo.name }}">
<mat-icon>account_balance</mat-icon> <mat-icon>account_balance</mat-icon>
...@@ -34,8 +34,8 @@ ...@@ -34,8 +34,8 @@
</span> </span>
</td> </td>
<ng-container *ngIf="(subscribeStateItem(site, service) | async) as stateItem; else noStateItem"> <ng-container *ngIf="(subscribeStateItem(site, service) | async) as stateItem; else noStateItem">
<td style="height: 42px;" class="childs-inline"> <td>
<span [ngSwitch]="stateItem.state" style="margin-right: 5px;"> <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="'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-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> <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 @@ ...@@ -59,8 +59,8 @@
<td *ngIf="stateItem.state === 'rejected'"> <td *ngIf="stateItem.state === 'rejected'">
<button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Rejected </button> <button (click)="dialog.openMessage(stateItem)" mat-raised-button class="mat-elevation-z6"> Rejected </button>
</td> </td>
<td *ngIf="stateItem.is_credential_pending" class="childs-inline"> <td *ngIf="stateItem.is_credential_pending">
<span style="margin-right: 5px;"> <span class="spaced">
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner> <mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
</span> </span>
SSH Keys pending SSH Keys pending
......
...@@ -4,8 +4,33 @@ body { ...@@ -4,8 +4,33 @@ body {
margin: 0px; margin: 0px;
} }
.padded > * { .body {
margin: 50px;
}
table {
margin: 30px 0px 30px 30px;
}
tr > * {
padding-right: 15px; 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 { .toolbar-spacer {
...@@ -59,11 +84,6 @@ mat-checkbox { ...@@ -59,11 +84,6 @@ mat-checkbox {
width: 100%; width: 100%;
} }
.childs-inline > * {
display: inline-block;
vertical-align: middle;
}
.form-vertical > button { .form-vertical > button {
width: 25%; width: 25%;
} }
...@@ -71,3 +91,8 @@ mat-checkbox { ...@@ -71,3 +91,8 @@ mat-checkbox {
.mat-form-field { .mat-form-field {
margin-right: 15px; 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