From 7cf5ddfebedf8eecca3828230a04040adacffa03 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Fri, 26 Jun 2020 12:08:51 +0300 Subject: [PATCH] Redesign of landing page, sign in interface, sidebar, navbar, dashboard (still in progress) --- dmp-frontend/src/app/app-routing.module.ts | 7 + dmp-frontend/src/app/app.component.html | 55 +- dmp-frontend/src/app/app.component.scss | 21 +- dmp-frontend/src/app/app.component.ts | 24 +- dmp-frontend/src/app/app.module.ts | 2 + .../app/ui/auth/login/login.component.html | 8 +- .../app/ui/dashboard/dashboard.component.html | 106 ++- .../app/ui/dashboard/dashboard.component.scss | 515 ++++++++++--- .../app/ui/dashboard/dashboard.component.ts | 6 + .../src/app/ui/dashboard/dashboard.module.ts | 2 + .../recent-edited-activity.component.css | 180 ++++- .../recent-edited-activity.component.html | 89 ++- .../recent-edited-activity.component.ts | 1 + .../src/app/ui/guest/guest.component.html | 344 +++++++++ .../src/app/ui/guest/guest.component.scss | 724 ++++++++++++++++++ .../src/app/ui/guest/guest.component.ts | 62 ++ dmp-frontend/src/app/ui/guest/guest.module.ts | 17 + .../src/app/ui/guest/guest.routing.ts | 16 + .../app/ui/misc/search/search.component.css | 3 +- .../src/app/ui/navbar/navbar.component.html | 133 ++-- .../src/app/ui/navbar/navbar.component.scss | 64 +- .../src/app/ui/navbar/navbar.component.ts | 54 +- .../sidebar-footer.component.css | 10 +- .../sidebar-footer.component.html | 58 +- .../sidebar-footer.component.ts | 4 + .../src/app/ui/sidebar/sidebar.component.css | 43 +- .../src/app/ui/sidebar/sidebar.component.html | 90 +-- .../src/app/ui/sidebar/sidebar.component.scss | 13 + .../src/app/ui/sidebar/sidebar.component.ts | 38 +- dmp-frontend/src/assets/css/demo.css | 325 +++++++- dmp-frontend/src/assets/i18n/en.json | 15 +- dmp-frontend/src/assets/i18n/es.json | 9 +- dmp-frontend/src/assets/i18n/gr.json | 9 +- .../images/argos-login/NoPath - Copy (2).png | Bin 0 -> 1989 bytes .../argos-login/NoPath - Copy (2)@2x.png | Bin 0 -> 4081 bytes .../images/argos-login/NoPath - Copy (4).png | Bin 0 -> 1617 bytes .../argos-login/NoPath - Copy (4)@2x.png | Bin 0 -> 3185 bytes .../images/argos-login/NoPath - Copy (5).png | Bin 0 -> 1590 bytes .../argos-login/NoPath - Copy (5)@2x.png | Bin 0 -> 3420 bytes .../images/argos-login/NoPath - Copy (6).png | Bin 0 -> 2175 bytes .../argos-login/NoPath - Copy (6)@2x.png | Bin 0 -> 4266 bytes .../images/argos-login/NoPath - Copy (7).png | Bin 0 -> 5795 bytes .../argos-login/NoPath - Copy (7)@2x.png | Bin 0 -> 14963 bytes .../images/argos-login/NoPath - Copy.png | Bin 0 -> 2075 bytes .../images/argos-login/NoPath - Copy@2x.png | Bin 0 -> 4366 bytes .../src/assets/scss/core/_responsive.scss | 9 +- .../scss/core/_sidebar-and-main-panel.scss | 10 +- .../sign-in-dialog.component.html | 63 ++ .../sign-in-dialog.component.scss | 331 ++++++++ .../sign-in-dialog.component.ts | 224 ++++++ .../sign-in-dialog/sign-in-dialog.module.ts | 14 + dmp-frontend/src/styles.scss | 225 +++--- 52 files changed, 3408 insertions(+), 515 deletions(-) create mode 100644 dmp-frontend/src/app/ui/guest/guest.component.html create mode 100644 dmp-frontend/src/app/ui/guest/guest.component.scss create mode 100644 dmp-frontend/src/app/ui/guest/guest.component.ts create mode 100644 dmp-frontend/src/app/ui/guest/guest.module.ts create mode 100644 dmp-frontend/src/app/ui/guest/guest.routing.ts create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (2).png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (2)@2x.png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (4).png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (4)@2x.png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (5).png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (5)@2x.png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (6).png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (6)@2x.png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (7).png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy (7)@2x.png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy.png create mode 100644 dmp-frontend/src/assets/images/argos-login/NoPath - Copy@2x.png create mode 100644 dmp-frontend/src/common/modules/sign-in-dialog/sign-in-dialog.component.html create mode 100644 dmp-frontend/src/common/modules/sign-in-dialog/sign-in-dialog.component.scss create mode 100644 dmp-frontend/src/common/modules/sign-in-dialog/sign-in-dialog.component.ts create mode 100644 dmp-frontend/src/common/modules/sign-in-dialog/sign-in-dialog.module.ts diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts index 8ceeea0a5..76fff95f3 100644 --- a/dmp-frontend/src/app/app-routing.module.ts +++ b/dmp-frontend/src/app/app-routing.module.ts @@ -154,6 +154,13 @@ const appRoutes: Routes = [ breadcrumb: true } }, + { + path: 'guest', + loadChildren: () => import('./ui/guest/guest.module').then(m => m.GuestModule), + data: { + breadcrumb: true + } + }, { path: 'splash', loadChildren: () => import('./ui/splash/splash.module').then(m => m.SplashModule), diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html index 632595d63..4da74d4e8 100644 --- a/dmp-frontend/src/app/app.component.html +++ b/dmp-frontend/src/app/app.component.html @@ -1,42 +1,17 @@ -
-
- -
-
-
-
- -
- - -
-
+
+ + + + + + +
+ +
+ +
- - - - - + diff --git a/dmp-frontend/src/app/app.component.scss b/dmp-frontend/src/app/app.component.scss index 51ca45e9b..68549ddb0 100644 --- a/dmp-frontend/src/app/app.component.scss +++ b/dmp-frontend/src/app/app.component.scss @@ -6,9 +6,26 @@ width: 100%; } +// .main-container { +// margin-top: 64px; +// padding-top: 10px; +// } + .main-container { - margin-top: 64px; - padding-top: 10px; + top: 80px; + left: 0; + right: 0; +} + +.sidenav { + display: flex; + align-items: center; + justify-content: center; + width: 260px; + background: #ffffff 0% 0% no-repeat padding-box; + box-shadow: 0px 0px 16px 2px #00000029; + border-right-width: 0px; + opacity: 1; } .sidebar-shadow { diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts index 5b777bc75..39a950841 100644 --- a/dmp-frontend/src/app/app.component.ts +++ b/dmp-frontend/src/app/app.component.ts @@ -32,7 +32,6 @@ export class AppComponent implements OnInit { sideNavOpen = false; helpContentEnabled: boolean; private statusChangeSubscription: Subscription; - onlySplash = false; constructor( private router: Router, @@ -61,18 +60,17 @@ export class AppComponent implements OnInit { } ngOnInit() { - if (this.location.path() === '') { - if (!this.configurationService.useSplash) { - this.onlySplash = false; + if (this.location.path() === '' || this.location.path() === '/home') { + if (this.isAuthenticated()) { this.router.navigate(['/reload']).then(() => this.router.navigate(['/home'])); - } else { - this.onlySplash = true; - this.router.navigate(['/reload']).then(() => this.router.navigate(['/splash'])); + } else if (!this.isAuthenticated()) { + this.router.navigate(['/reload']).then(() => this.router.navigate(['/guest'])); } - } else if (this.location.path() === '/splash') { - this.onlySplash = true; - } else { - this.onlySplash = false; + // if (!this.configurationService.useSplash) { + // this.router.navigate(['/reload']).then(() => this.router.navigate(['/home'])); + // } else { + // this.router.navigate(['/reload']).then(() => this.router.navigate(['/splash'])); + // } } if (!this.cookieService.check("cookiesConsent")) { this.cookieService.set("cookiesConsent", "false", 356); @@ -171,5 +169,9 @@ export class AppComponent implements OnInit { this.authentication.current() && this.authentication.current().culture ? this.cultureService.cultureSelected(this.authentication.current().culture) : this.cultureService.cultureSelected(this.configurationService.defaultCulture); this.authentication.current() && this.authentication.current().language ? this.language.changeLanguage(this.authentication.current().language) : this.language.changeLanguage('en'); } + + toggleNavbar(event) { + document.getElementById('hamburger').classList.toggle("change"); + } } diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts index 556d685a1..e8ca4ec64 100644 --- a/dmp-frontend/src/app/app.module.ts +++ b/dmp-frontend/src/app/app.module.ts @@ -31,6 +31,7 @@ import { TranslateServerLoader } from './core/services/language/server.loader'; import { BaseHttpService } from './core/services/http/base-http.service'; import { ConfigurationService } from './core/services/configuration/configuration.service'; import { Oauth2DialogModule } from './ui/misc/oauth2-dialog/oauth2-dialog.module'; +import { GuestModule } from './ui/guest/guest.module'; // AoT requires an exported function for factories export function HttpLoaderFactory(http: HttpClient, appConfig: ConfigurationService) { @@ -98,6 +99,7 @@ const cookieConfig: NgcCookieConsentConfig = { DatasetCreateWizardModule, NavbarModule, SidebarModule, + GuestModule, NgcCookieConsentModule.forRoot(cookieConfig), Oauth2DialogModule ], diff --git a/dmp-frontend/src/app/ui/auth/login/login.component.html b/dmp-frontend/src/app/ui/auth/login/login.component.html index dd1c8fc9e..c3000c009 100644 --- a/dmp-frontend/src/app/ui/auth/login/login.component.html +++ b/dmp-frontend/src/app/ui/auth/login/login.component.html @@ -3,22 +3,22 @@