From 7dcc5f9e583745a2ce83d86c3d8fb89e182ce0fe Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Wed, 22 Jul 2020 14:40:37 +0200 Subject: [PATCH] fix(console): create user route, common mixin for app grid, avatar (#505) * warn color, move themed conf to destination * fix user creation * cleanup create component --- .../app/modules/avatar/avatar.component.scss | 30 +++++--- .../application-grid.component.html | 2 +- .../application-grid.component.scss | 72 ++++++++++++------- .../owned-project-detail.component.html | 4 +- .../project-grant-detail.component.html | 4 +- .../user-create/user-create.component.html | 37 +--------- .../user-detail/user-detail-routing.module.ts | 8 +++ .../user-detail/user-detail.component.html | 4 +- .../user-list/user-list-routing.module.ts | 10 --- console/src/component-themes.scss | 6 +- console/src/styles/avatar.scss | 19 ----- console/src/styles/morph-card.scss | 29 -------- 12 files changed, 85 insertions(+), 140 deletions(-) delete mode 100644 console/src/styles/avatar.scss delete mode 100644 console/src/styles/morph-card.scss diff --git a/console/src/app/modules/avatar/avatar.component.scss b/console/src/app/modules/avatar/avatar.component.scss index 651e1a5544..97e512e6c8 100644 --- a/console/src/app/modules/avatar/avatar.component.scss +++ b/console/src/app/modules/avatar/avatar.component.scss @@ -1,15 +1,23 @@ -:host { - display: block; -} -.avatar-circle { - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - text-transform: uppercase; +@import '~@angular/material/theming'; - &.active:hover { - border: 2px solid #8795a1; +@mixin avatar-theme($theme) { + $primary: map-get($theme, primary); + $primary-color: mat-color($primary, 500); + + .avatar-circle { + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + text-transform: uppercase; + background-color: $primary-color; + box-sizing: border-box; + outline: none; + color: white; + + &.active:hover { + border: 2px solid #8795a1; + } } } \ No newline at end of file diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html index 8087dcb2bc..f5c9ff7994 100644 --- a/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html +++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html @@ -1,4 +1,4 @@ -
+

{{'APP.LIST' | translate}}

- diff --git a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html index 64b9e2b67e..c08dad2335 100644 --- a/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html +++ b/console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html @@ -27,10 +27,10 @@
- -
diff --git a/console/src/app/pages/users/user-create/user-create.component.html b/console/src/app/pages/users/user-create/user-create.component.html index 9d641f14b4..62e87bab43 100644 --- a/console/src/app/pages/users/user-create/user-create.component.html +++ b/console/src/app/pages/users/user-create/user-create.component.html @@ -90,44 +90,9 @@ {{ 'USER.VALIDATION.REQUIRED' | translate }} -
-
diff --git a/console/src/app/pages/users/user-detail/user-detail-routing.module.ts b/console/src/app/pages/users/user-detail/user-detail-routing.module.ts index 02469dc87e..7f0ab3c323 100644 --- a/console/src/app/pages/users/user-detail/user-detail-routing.module.ts +++ b/console/src/app/pages/users/user-detail/user-detail-routing.module.ts @@ -8,6 +8,14 @@ import { PasswordComponent } from './password/password.component'; import { UserDetailComponent } from './user-detail/user-detail.component'; const routes: Routes = [ + { + path: 'create', + loadChildren: () => import('../user-create/user-create.module').then(m => m.UserCreateModule), + canActivate: [AuthGuard, RoleGuard], + data: { + roles: ['user.write'], + }, + }, { path: 'me', component: AuthUserDetailComponent, diff --git a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html index 0732c932e5..2c7d23abde 100644 --- a/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html +++ b/console/src/app/pages/users/user-detail/user-detail/user-detail.component.html @@ -9,10 +9,10 @@ - - diff --git a/console/src/app/pages/users/user-list/user-list-routing.module.ts b/console/src/app/pages/users/user-list/user-list-routing.module.ts index 467f65f02b..552596a07e 100644 --- a/console/src/app/pages/users/user-list/user-list-routing.module.ts +++ b/console/src/app/pages/users/user-list/user-list-routing.module.ts @@ -1,7 +1,5 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { AuthGuard } from 'src/app/guards/auth.guard'; -import { RoleGuard } from 'src/app/guards/role.guard'; import { UserListComponent } from './user-list.component'; @@ -12,14 +10,6 @@ const routes: Routes = [ component: UserListComponent, data: { animation: 'HomePage' }, }, - { - path: 'create', - loadChildren: () => import('../user-create/user-create.module').then(m => m.UserCreateModule), - canActivate: [AuthGuard, RoleGuard], - data: { - roles: ['user.write'], - }, - }, ]; @NgModule({ diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss index 8d312fb415..0c8dbdef52 100644 --- a/console/src/component-themes.scss +++ b/console/src/component-themes.scss @@ -1,9 +1,9 @@ @import './styles/card'; @import './styles/table'; @import './styles/sidenav-list'; -@import './styles/morph-card'; +@import 'src/app/modules/avatar/avatar.component'; @import './styles/changes'; -@import './styles/avatar'; +@import 'src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component'; @import './styles/meta'; @import './styles/theme-card'; @@ -12,7 +12,7 @@ @include card-theme($theme); @include table-theme($theme); @include sidenav-list-theme($theme); - @include morph-card-theme($theme); + @include application-grid-theme($theme); @include changes-theme($theme); @include meta-theme($theme); @include theme-card($theme); diff --git a/console/src/styles/avatar.scss b/console/src/styles/avatar.scss deleted file mode 100644 index 530ce7c95f..0000000000 --- a/console/src/styles/avatar.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import '~@angular/material/theming'; - -@mixin avatar-theme($theme) { - $accent: map-get($theme, accent); - $background: map-get($theme, background); - $background-color: mat-color($background, card); - $primary: map-get($theme, primary); - $primary-color: mat-color($primary, 500); - $primary-dark: mat-color($primary, A800); - $border-color: mat-color($primary, A700); - $border-selected-color: mat-color($primary, A600); - - .avatar-circle { - background-color: $primary-color; - box-sizing: border-box; - outline: none; - color: white; - } -} diff --git a/console/src/styles/morph-card.scss b/console/src/styles/morph-card.scss deleted file mode 100644 index 402a7ec682..0000000000 --- a/console/src/styles/morph-card.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import '~@angular/material/theming'; - -@mixin morph-card-theme($theme) { - $accent: map-get($theme, accent); - $background: map-get($theme, background); - $background-color: mat-color($background, card); - $primary: map-get($theme, primary); - $primary-dark: mat-color($primary, A900); - $secondary-dark: mat-color($primary, A800); - $accent: map-get($theme, accent); - $accent-color: mat-color($accent, 500); - - .morph-card { - cursor: pointer; - animation: all .2s; - height: 80px; - width: 80px; - margin: 1rem; - border-radius: 16px; - border: 1px solid $accent-color; - background-color: $primary-dark; - transition: background-color .4s ease-in-out; - - - &.add { - background: $accent-color; - } - } -}