You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/08/16 21:19:25 UTC
[incubator-streampipes] 03/05: [STREAMPIPES-193] Add minor layout
improvements
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-193
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 0471e4a684b5645e007bd36bb91fe866c7a6b6fe
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Aug 16 20:35:27 2020 +0200
[STREAMPIPES-193] Add minor layout improvements
---
ui/deployment/app-routing.module.mst | 3 ++-
ui/src/app/animation.ts | 29 ++++++++++++++++++++++
ui/src/app/app-routing.module.ts | 6 +++--
ui/src/app/app.component.html | 4 ++-
ui/src/app/app.component.ts | 9 ++++++-
.../login/components/login/login.component.html | 19 ++++----------
.../login/components/setup/setup.component.html | 2 +-
7 files changed, 52 insertions(+), 20 deletions(-)
diff --git a/ui/deployment/app-routing.module.mst b/ui/deployment/app-routing.module.mst
index 48837a7..b76a04d 100644
--- a/ui/deployment/app-routing.module.mst
+++ b/ui/deployment/app-routing.module.mst
@@ -39,7 +39,8 @@ import { {{{ng5_component}}} } from '{{{ng5_componentPath}}}';
{{/modulesActive}}
const routes: Routes = [
- { path: 'login', component: LoginComponent, canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard]},
+ { path: 'login', component: LoginComponent, canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard],
+ data: {animation: 'LoginPage'}},
{ path: 'setup', component: SetupComponent, canActivate: [AlreadyConfiguredCanActivateGuard] },
{ path: 'startup', component: StartupComponent },
{ path: 'standalone/:dashboardId', component: StandaloneDashboardComponent },
diff --git a/ui/src/app/animation.ts b/ui/src/app/animation.ts
new file mode 100644
index 0000000..ef2bb7d
--- /dev/null
+++ b/ui/src/app/animation.ts
@@ -0,0 +1,29 @@
+import {animate, animateChild, group, query, style, transition, trigger} from "@angular/animations";
+
+export const slideInAnimation =
+ trigger('routeAnimations', [
+ transition('* <=> LoginPage', [
+ style({ position: 'relative' }),
+ query(':enter, :leave', [
+ style({
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%'
+ })
+ ], { optional: true }),
+ query(':enter', [
+ style({ opacity: 0 })
+ ], { optional: true }),
+ query(':leave', animateChild(), { optional: true }),
+ group([
+ query(':leave', [
+ animate('200ms', style({ opacity: 0 }))
+ ], { optional: true }),
+ query(':enter', [
+ animate('300ms', style({ opacity: 1 }))
+ ],{ optional: true })
+ ]),
+ query(':enter', animateChild(), { optional: true }),
+ ])
+ ]);
\ No newline at end of file
diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts
index d14fea0..b9f0865 100644
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/src/app/app-routing.module.ts
@@ -42,7 +42,9 @@ import { AddComponent } from './add/add.component';
import { ConfigurationComponent } from './configuration/configuration.component';
const routes: Routes = [
- { path: 'login', component: LoginComponent, canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard]},
+ { path: 'login', component: LoginComponent,
+ canActivate: [ConfiguredCanActivateGuard, LoggedInCanActivateGuard],
+ data: {animation: 'LoginPage'}},
{ path: 'setup', component: SetupComponent, canActivate: [AlreadyConfiguredCanActivateGuard] },
{ path: 'startup', component: StartupComponent },
{ path: 'standalone/:dashboardId', component: StandaloneDashboardComponent },
@@ -59,7 +61,7 @@ const routes: Routes = [
{ path: 'notifications', component: NotificationsComponent },
{ path: 'info', component: InfoComponent },
{ path: 'pipeline-details', component: PipelineDetailsComponent }
- ], canActivateChild: [AuthCanActivateChildrenGuard] }
+ ], canActivateChild: [AuthCanActivateChildrenGuard]}
];
@NgModule({
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 04cce49..83e668e 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -16,4 +16,6 @@
~
-->
<ngx-loading-bar [color]="'rgb(27, 20, 100)'"></ngx-loading-bar>
-<router-outlet></router-outlet>
\ No newline at end of file
+<div [@routeAnimations]="prepareRoute(outlet)">
+ <router-outlet #outlet="outlet"></router-outlet>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index e605376..2b62bc1 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -17,14 +17,21 @@
*/
import {Component, OnInit} from "@angular/core";
+import {RouterOutlet} from "@angular/router";
+import {slideInAnimation} from "./animation";
@Component({
selector: 'app-root',
- templateUrl: './app.component.html'
+ templateUrl: './app.component.html',
+ animations: [ slideInAnimation ]
})
export class AppComponent implements OnInit {
ngOnInit(): void {
}
+ prepareRoute(outlet: RouterOutlet) {
+ return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
+ }
+
}
\ No newline at end of file
diff --git a/ui/src/app/login/components/login/login.component.html b/ui/src/app/login/components/login/login.component.html
index 806b2bd..f7c52ff 100644
--- a/ui/src/app/login/components/login/login.component.html
+++ b/ui/src/app/login/components/login/login.component.html
@@ -43,24 +43,15 @@
<input [(ngModel)]="credentials.password" matInput name="password" type="password" class="sp" required/>
</mat-form-field>
<mat-checkbox [(ngModel)]="credentials.rememberMe" name="rememberMe" class="sp" color="primary">Remember Me</mat-checkbox>
- <!-- <md-input-container class="sp"><label class="sp">Email</label> <input-->
- <!-- type="email" class="sp" ng-model="ctrl.credentials.username" required>-->
- <!-- </md-input-container>-->
- <!-- <md-input-container class="sp" flex><label>Password</label>-->
- <!-- <input type="password" ng-model="ctrl.credentials.password" required>-->
- <!-- </md-input-container>-->
- <!-- <md-input-container flex>-->
- <!-- <md-checkbox-->
- <!-- ng-model="ctrl.credentials.rememberMe"> Remember me-->
- <!-- </md-checkbox>-->
- <!-- </md-input-container>-->
</div>
<div class="form-actions" style="margin-top:20px;">
<button mat-button mat-raised-button color="primary" (click)="logIn()"
- [disabled]="!loginForm.form.valid || loading">Login
+ [disabled]="!loginForm.form.valid || loading">
+ <span *ngIf="loading">Logging in...</span>
+ <span *ngIf="!loading">Login</span>
</button>
- <mat-spinner [mode]="'indeterminate'" color="primary"
- *ngIf="loading"></mat-spinner>
+ <mat-spinner [mode]="'indeterminate'" color="primary" [diameter]="20"
+ *ngIf="loading" style="margin-top:10px;"></mat-spinner>
<div class="md-warn" *ngIf="authenticationFailed">
<h4>The password you entered is incorrect. Please try again.</h4>
</div>
diff --git a/ui/src/app/login/components/setup/setup.component.html b/ui/src/app/login/components/setup/setup.component.html
index 55497c7..3fe6d70 100644
--- a/ui/src/app/login/components/setup/setup.component.html
+++ b/ui/src/app/login/components/setup/setup.component.html
@@ -115,7 +115,7 @@
<div fxFlex fxLayout style="width:80%" class="center center" *ngIf="nextTaskTitle != ''">
<div fxFlex="80" style="width:50%"><h4>{{nextTaskTitle}}</h4></div>
<div fxFlex="20" style="width:50%">
- <mat-spinner class="md-accent" [mode]="'indeterminate'"
+ <mat-spinner class="md-accent" [mode]="'indeterminate'" [diameter]="20" style="margin-top:10px;"
*ngIf="loading"></mat-spinner>
</div>
</div>