You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/09/19 19:48:30 UTC
[incubator-dlab] 04/04: routing animation added
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch DLAB-1056
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit f3aced2142137225001855152fc1c8dad6040d90
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Thu Sep 19 22:47:49 2019 +0300
routing animation added
---
.../project/project-form/project-form.component.ts | 1 -
.../resources-grid/resources-grid.component.scss | 44 +++++++++++++-------
.../src/app/shared/navbar/navbar.component.html | 5 ++-
.../src/app/shared/navbar/navbar.component.scss | 47 ++++++++++++++++++++++
.../src/app/shared/navbar/navbar.component.ts | 42 +++++++++++++++++++
5 files changed, 122 insertions(+), 17 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
index 4c213de..5657c8d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
@@ -71,7 +71,6 @@ export class ProjectFormComponent implements OnInit {
}));
if (this.item) {
- debugger;
this.editSpecificProject(this.item);
this.stepper.selectedIndex = 1;
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
index 1562e67..6ca968e 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
@@ -36,20 +36,38 @@ table {
.exploratory {
padding: 0;
- tbody {
- width: 100%;
- display: inline-table;
-
- tr:not(:last-child) {
- border-bottom: 1px solid #d9d9d9;
+ .element-row {
+ display: flex;
+ min-height: 48px;
+ height: initial;
+
+ td {
+ padding: 5px;
+
+ &.name-col {
+ padding-right: 5px;
+ padding-left: 24px;
+ }
}
}
+
+ tr:not(:last-child) {
+ border-bottom: 1px solid #d9d9d9;
+ }
+ }
+
+ .element-row {
+ td {
+ border-bottom-width: 0;
+ }
}
.filter-row {
height: 0 !important;
th {
+ padding: 5px;
+
&:last-child {
padding-right: 6px;
}
@@ -58,23 +76,23 @@ table {
.name-col {
width: 18%;
- padding-left: 24px;
padding-right: 5px;
+ padding-left: 24px;
}
.status-col {
width: 14%;
- padding: 5px;
+ // padding: 5px;
}
.shape-col {
width: 14%;
- padding: 5px;
+ // padding: 5px;
}
.tag-col {
width: 10%;
- padding: 5px;
+ // padding: 5px;
mat-chip {
min-height: 20px;
@@ -91,7 +109,7 @@ table {
.resources-col {
width: 28%;
- padding: 5px;
+ // padding: 5px;
}
.cost-col {
@@ -111,10 +129,6 @@ tr.detail-row {
height: 0;
}
-.element-row td {
- border-bottom-width: 0;
-}
-
.element-diagram {
min-width: 80px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
index ceb18f0..fa054af 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html
@@ -102,6 +102,9 @@
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content id="scrolling" [style.margin-left]="isExpanded ? '220px' : '60px'">
- <router-outlet></router-outlet>
+ <div [@fadeAnimation]="getRouterOutletState(routerOutlet)" class="fade-animation">
+
+ <router-outlet #routerOutlet="outlet"></router-outlet>
+ </div>
</mat-sidenav-content>
</mat-sidenav-container>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
index 823bf8e..7643a26 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss
@@ -16,6 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
+// :host {
+// display: block;
+// }
.nav-bar {
min-height: 48px;
@@ -27,19 +30,23 @@
justify-content: space-between;
margin-bottom: 0;
border-radius: 0;
+
.menu-area {
display: flex;
align-items: center;
+
.navbar-logo {
width: 65px;
align-self: center;
margin-left: 10px;
+
img {
display: block;
width: 100%;
}
}
}
+
.control-area {
@extend .menu-area;
@@ -51,35 +58,45 @@
justify-content: center;
color: #f9fafb;
cursor: pointer;
+
span {
align-self: center;
font-size: 18px;
}
+
.ok {
color: #81b44a;
+
&:hover {
color: #618738;
}
}
+
.warning {
color: #f7b500;
+
&:hover {
color: #bd8d0a;
}
}
+
.error {
color: #ef5c4b;
+
&:hover {
color: #bd4146;
}
}
+
.meta {
color: #c7d4d6;
+
&:hover {
color: #fff;
}
}
}
+
.btn-logout {
height: 46px;
padding: 0 28px;
@@ -88,17 +105,21 @@
border: 0;
border-radius: 0;
font-size: 14px;
+
.user-name {
color: #36afd5;
}
+
&:hover .user-name {
color: #3392b0;
}
}
}
}
+
.app-info {
padding: 15px;
+
p {
strong {
color: #455c74;
@@ -107,22 +128,27 @@
width: 120px;
display: inline-block;
}
+
.helper_instruction {
font-size: 14px;
+
i {
vertical-align: bottom;
}
}
+
span {
width: 180px;
display: inline-block;
vertical-align: bottom;
}
}
+
.commit {
cursor: pointer;
}
}
+
a.nav-item {
display: block;
position: relative;
@@ -136,15 +162,18 @@ a.nav-item {
overflow: hidden;
color: #577289 !important;
outline: none;
+
i {
vertical-align: middle;
padding-left: 8px;
}
+
&:not(.has-children):hover i,
&:not(.has-children):hover span {
background: none !important;
color: #36afd5 !important;
}
+
&:not(:last-child)::after {
content: ' ';
position: absolute;
@@ -155,23 +184,29 @@ a.nav-item {
display: block;
background: #edf1f5;
}
+
&.active {
color: #36afd5 !important;
}
+
&.has-children {
height: auto;
}
+
.sub-nav-item {
display: block;
transition: all .45s ease-in-out;
+
i {
vertical-align: middle;
padding-left: 8px;
}
+
&:hover {
background: none !important;
color: #36afd5 !important;
}
+
&.active {
color: #36afd5 !important;
}
@@ -196,6 +231,7 @@ a.nav-item {
cursor: pointer;
border-radius: 0;
transition: all .45s ease-in-out;
+
.line {
width: 22px;
height: 2px;
@@ -206,19 +242,23 @@ a.nav-item {
-webkit-transition: all .35s ease-in-out;
-o-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
+
&:nth-child(2) {
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s;
}
}
+
&:hover {
background: #36afd5;
}
+
&:hover .line:nth-child(1),
&:hover .line:nth-child(3) {
width: 18px;
}
+
&:hover .line:nth-child(2) {
-webkit-transition: none;
-o-transition: none;
@@ -244,5 +284,12 @@ a.nav-item {
mat-sidenav-content {
&.mat-drawer-content {
transition: all 0.35s ease-out;
+
+ }
+
+ .fade-animation {
+ display: block;
+ height: 100%;
+ max-height: 100%;
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
index af6958d..5321d56 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts
@@ -21,17 +21,55 @@ import { Component, ViewEncapsulation, OnInit, OnDestroy, ViewChild } from '@ang
import { MatDialog, MatDialogRef } from '@angular/material';
import { Subscription, timer, interval } from 'rxjs';
import { ToastrService } from 'ngx-toastr';
+import { RouterOutlet } from '@angular/router';
import { ApplicationSecurityService, HealthStatusService, AppRoutingService, SchedulerService, StorageService } from '../../core/services';
import { GeneralEnvironmentStatus } from '../../administration/management/management.model';
import { DICTIONARY } from '../../../dictionary/global.dictionary';
import { FileUtils } from '../../core/util';
import { NotificationDialogComponent } from '../modal-dialog/notification-dialog';
+import {
+ trigger,
+ animate,
+ transition,
+ style,
+ query, group,
+ sequence,
+ animateChild,
+ state
+} from '@angular/animations';
@Component({
selector: 'dlab-navbar',
templateUrl: 'navbar.component.html',
styleUrls: ['./navbar.component.scss'],
+ animations: [trigger('fadeAnimation', [
+ transition('* <=> *', [
+ query(':enter,:leave', [
+ style({ overflow: 'hidden' })
+ ], { optional: true }),
+ group([
+ query(':leave', [
+ animate('.3s ease-in-out',
+ style({
+ opacity: 0,
+ })
+ )
+ ], { optional: true }),
+ query(':enter', [
+ style({
+ opacity: 0,
+ }),
+ animate('.3s .25s ease-in-out',
+ style({
+ opacity: 1
+ })
+ )
+ ], { optional: true }),
+ ])
+ ])
+
+ ])],
encapsulation: ViewEncapsulation.None
})
export class NavbarComponent implements OnInit, OnDestroy {
@@ -83,6 +121,10 @@ export class NavbarComponent implements OnInit, OnDestroy {
this.subscriptions.unsubscribe();
}
+ public getRouterOutletState(routerOutlet: RouterOutlet) {
+ return routerOutlet.isActivated ? routerOutlet.activatedRoute : '';
+ }
+
getUserName(): string {
return this.storage.getUserName() || '';
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org