diff --git a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html index aa384c76a..e53dcedce 100644 --- a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html +++ b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.html @@ -2,7 +2,7 @@
- +
{{this.getPrincipalName()}}
diff --git a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.scss b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.scss new file mode 100644 index 000000000..448c2eec5 --- /dev/null +++ b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.scss @@ -0,0 +1,7 @@ +$mat-card-header-size: 40px !default; +.my-mat-card-avatar { + height: $mat-card-header-size; + width: $mat-card-header-size; + border-radius: 50%; + flex-shrink: 0; +} diff --git a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts index 41240e64b..cef11698d 100644 --- a/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts +++ b/dmp-frontend/src/app/ui/misc/navigation/user-dialog/user-dialog.component.ts @@ -8,6 +8,7 @@ import { AuthService } from '../../../../core/services/auth/auth.service'; @Component({ selector: 'app-user-dialog-component', templateUrl: 'user-dialog.component.html', + styleUrls: ['user-dialog.component.scss'] }) export class UserDialogComponent implements OnInit { diff --git a/dmp-frontend/src/app/ui/misc/search/search.component.css b/dmp-frontend/src/app/ui/misc/search/search.component.css index 48fc1c4f7..a49af0f09 100644 --- a/dmp-frontend/src/app/ui/misc/search/search.component.css +++ b/dmp-frontend/src/app/ui/misc/search/search.component.css @@ -3,6 +3,7 @@ border: 1px solid rgb(218, 218, 218); border-radius: 6px; padding-left: 10px; + margin-right: 20px; } .input-search input { diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.html b/dmp-frontend/src/app/ui/navbar/navbar.component.html index bff2a69d1..76dc0563e 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.html +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.html @@ -6,7 +6,7 @@ {{ 'NAV-BAR.BREADCRUMB-ROOT' | translate }}
- + + + - diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.scss b/dmp-frontend/src/app/ui/sidebar/sidebar.component.scss new file mode 100644 index 000000000..271064730 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.scss @@ -0,0 +1,8 @@ +$mat-card-header-size: 40px !default; +.my-mat-card-avatar { + height: $mat-card-header-size; + width: $mat-card-header-size; + border-radius: 50%; + flex-shrink: 0; + margin-right: 7px; +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts index c6fa2b1e4..dc8bd3fd0 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.ts @@ -1,6 +1,8 @@ import { Component, Input, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core'; -import { MatGridTileHeaderCssMatStyler } from '@angular/material'; +import { MatDialog } from '@angular/material'; +import { AuthService } from '../../core/services/auth/auth.service'; +import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component'; declare interface RouteInfo { path: string; @@ -33,7 +35,7 @@ export const PUBLIC_ROUTES: RouteInfo[] = [ @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', - styleUrls: ['./sidebar.component.css'] + styleUrls: ['./sidebar.component.css', './sidebar.component.scss'] }) export class SidebarComponent implements OnInit { generalItems: GroupMenuItem; @@ -42,7 +44,7 @@ export class SidebarComponent implements OnInit { publicItems: GroupMenuItem; groupMenuItems: GroupMenuItem[] = []; - constructor(public translate: TranslateService) { } + constructor(public translate: TranslateService, private authentication: AuthService, private dialog: MatDialog) { } ngOnInit() { this.translate.get('SIDE-BAR.DASHBOARD').subscribe((res: string) => {GENERAL_ROUTES[0].title = res}); @@ -81,11 +83,26 @@ export class SidebarComponent implements OnInit { this.translate.get('SIDE-BAR.PUBLIC').subscribe((res: string) => {this.publicItems.title = res}); this.groupMenuItems.push(this.publicItems); } -// isMobileMenu() { -// if ($(window).width() > 991) { -// return false; -// } -// return true; -// }; + public principalHasAvatar(): boolean { + return this.authentication.current().avatarUrl != null; + } + + public getPrincipalAvatar(): string { + return this.authentication.current().avatarUrl; + } + + public isAuthenticated(): boolean { + return !(!this.authentication.current()); + } + + openProfile() { + const dialogRef = this.dialog.open(UserDialogComponent, { + hasBackdrop: true, + autoFocus: false, + closeOnNavigation: true, + disableClose: false, + position: { top: '64px', right: '1em' } + }); + } } diff --git a/dmp-frontend/src/assets/css/demo.css b/dmp-frontend/src/assets/css/demo.css index a150df6a7..dc91a6610 100644 --- a/dmp-frontend/src/assets/css/demo.css +++ b/dmp-frontend/src/assets/css/demo.css @@ -1,136 +1,133 @@ *:focus { - outline: none !important; + outline: none !important; } - a { - color: rgb(106, 164, 217); + color: rgb(106, 164, 217); } a:hover { - color: rgb(46, 117, 182); + color: rgb(46, 117, 182); } h4 { - font-size: 1rem; - line-height: 1em; - font-weight: 500; + font-size: 1rem; + line-height: 1em; + font-weight: 500; } .max-width-136 { - max-width: 136px; + max-width: 136px; } .max-width-80 { - max-width: 80px; + max-width: 80px; } .more-icon { - color: rgb(209, 209, 209); - font-size: 28px; - cursor: pointer; - /* float: right; */ + color: rgb(209, 209, 209); + font-size: 28px; + cursor: pointer; + /* float: right; */ } .sidebar .sidebar-background { - position: absolute; - z-index: 1; - height: 100%; - width: 100%; - display: block; - top: 0; - left: 0; - background-size: cover; - background-position: center center; - background-color: rgb(157, 157, 158); + position: absolute; + z-index: 1; + height: 100%; + width: 100%; + display: block; + top: 0; + left: 0; + background-size: cover; + background-position: center center; + background-color: rgb(157, 157, 158); } .sidebar .nav p { - margin: 0; - line-height: 20px; - font-size: 12px; - font-weight: 500; - position: relative; - display: block; - height: auto; - white-space: nowrap; - color: rgb(89, 89, 89); + margin: 0; + line-height: 20px; + font-size: 12px; + font-weight: 500; + position: relative; + display: block; + height: auto; + white-space: nowrap; + color: rgb(89, 89, 89); } .sidebar .nav i { - font-size: 24px; - float: left; - margin-right: 7px; - line-height: 20px; - width: 30px; - text-align: center; - color: #a1a1a1; + font-size: 24px; + float: left; + margin-right: 7px; + line-height: 20px; + width: 30px; + text-align: center; + color: #a1a1a1; } .sidebar[data-color="danger"] li.active > a { - background-color: #ffffff; - -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), - 0 7px 10px -5px rgba(255, 255, 255, 0.4); - box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), - 0 7px 10px -5px rgba(255, 255, 255, 0.4); + background-color: #ffffff; + -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); } .sidebar .nav li.active > a i { - color: rgb(89, 89, 89); + color: rgb(89, 89, 89); } .sidebar .nav li a, .sidebar .nav li .dropdown-menu a { - margin: 5px 15px 5px; - border-radius: 3px; - color: #3c4858; - padding-left: 10px; - padding-right: 10px; - text-transform: capitalize; - font-size: 13px; - padding: 10px 5px; + margin: 5px 15px 5px; + border-radius: 3px; + color: #3c4858; + padding-left: 10px; + padding-right: 10px; + text-transform: capitalize; + font-size: 13px; + padding: 10px 5px; } .sidebar .logo:after { - content: none; - position: absolute; - bottom: 0; - right: 15px; - height: 1px; - width: calc(100% - 30px); - background-color: rgba(180, 180, 180, 0.3); + content: none; + position: absolute; + bottom: 0; + right: 15px; + height: 1px; + width: calc(100% - 30px); + background-color: rgba(180, 180, 180, 0.3); } .form-control, .is-focused .form-control { - background-image: none; + background-image: none; } .navbar form .btn { - margin-bottom: 0; - padding-left: 5px; + margin-bottom: 0; + padding-left: 5px; } .navbar .notification { - position: absolute; - top: 5px; - border: 1px solid #fff; - right: 5px; - font-size: 9px; - background: rgb(192, 0, 0); - color: #ffffff; - min-width: 20px; - padding: 0px 5px; - height: 20px; - border-radius: 10px; - text-align: center; - line-height: 19px; - vertical-align: middle; - display: block; + position: absolute; + top: 5px; + border: 1px solid #fff; + right: 5px; + font-size: 9px; + background: rgb(192, 0, 0); + color: #ffffff; + min-width: 20px; + padding: 0px 5px; + height: 20px; + border-radius: 10px; + text-align: center; + line-height: 19px; + vertical-align: middle; + display: block; } .card-icon { - cursor: pointer; + cursor: pointer; } .card .card-header-default .card-icon, @@ -139,16 +136,14 @@ h4 { .card.bg-warning, .card.card-rotate.bg-warning .front, .card.card-rotate.bg-warning .back { - background: linear-gradient(60deg, #fff, #fff); + background: linear-gradient(60deg, #fff, #fff); } .card .card-header-default .card-icon, .card .card-header-default:not(.card-header-icon):not(.card-header-text), .card .card-header-default .card-text { - -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), - 0 7px 10px -5px rgba(0, 0, 0, 0.14); - box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), - 0 7px 10px -5px rgba(0, 0, 0, 0.14); + -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14); + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14); } .card .card-header-plain .card-icon, @@ -157,14 +152,14 @@ h4 { .card.bg-warning, .card.card-rotate.bg-warning .front, .card.card-rotate.bg-warning .back { - background: linear-gradient(60deg, #fff, #fff); + background: linear-gradient(60deg, #fff, #fff); } .card .card-header-plain .card-icon, .card .card-header-plain:not(.card-header-icon):not(.card-header-text), .card .card-header-plain .card-text { - -webkit-box-shadow: none; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .card .card-header-blue .card-icon, @@ -173,123 +168,119 @@ h4 { .card.bg-warning, .card.card-rotate.bg-warning .front, .card.card-rotate.bg-warning .back { - background: linear-gradient(60deg, rgb(46, 117, 182), rgb(46, 117, 182)); + background: linear-gradient(60deg, rgb(46, 117, 182), rgb(46, 117, 182)); } .card .card-header-blue .card-icon, .card .card-header-blue:not(.card-header-icon):not(.card-header-text), .card .card-header-blue .card-text { - -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), - 0 7px 10px -5px rgba(0, 0, 0, 0.14); - box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), - 0 7px 10px -5px rgba(0, 0, 0, 0.14); + -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14); + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 0, 0, 0.14); } .card-stats .card-header.card-header-icon i { - font-size: 36px; - line-height: 56px; - width: 56px; - height: 56px; - text-align: center; - color: rgb(138, 170, 195); + font-size: 36px; + line-height: 56px; + width: 56px; + height: 56px; + text-align: center; + color: rgb(138, 170, 195); } .card [class*="card-header-"] .card-icon, .card [class*="card-header-"] .card-text { - border-radius: 5px; - /* background-color: #999999; */ - padding: 15px; - margin-top: -20px; - margin-right: 15px; - float: left; + border-radius: 5px; + /* background-color: #999999; */ + padding: 15px; + margin-top: -20px; + margin-right: 15px; + float: left; } .card [class*="card-header-"] .card-title + .card-category { - color: #fff; - font-size: 12px; + color: #fff; + font-size: 12px; } .card .card-header .card-title { - margin-bottom: 0px; - margin-top: 5px; + margin-bottom: 0px; + margin-top: 5px; } .card-desc h4 { - text-transform: uppercase; + text-transform: uppercase; } .card-footer .stats { - font-size: 12px; - line-height: 22px; - font-weight: 500; - margin-left: 10px; + font-size: 12px; + line-height: 22px; + font-weight: 500; + margin-left: 10px; } .card-stats .card-header .card-category:not([class*="text-"]) { - display: block; - color: #999999; - font-size: 13px; - /* font-size: 9px; */ - /* font-weight: 500; */ + display: block; + color: #999999; + font-size: 13px; + /* font-size: 9px; */ + /* font-weight: 500; */ } -.card -[class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) { - border-radius: 5px; - margin-top: -20px; - padding: 15px; - /* border: 1px solid rgb(231, 230, 230); */ +.card [class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) { + border-radius: 5px; + margin-top: -20px; + padding: 15px; + /* border: 1px solid rgb(231, 230, 230); */ } -.card -[class*="card-header-plain"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) { - border-radius: 5px; - margin-top: -20px; - padding: 15px; - border: 1px solid rgb(231, 230, 230); +.card [class*="card-header-plain"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) { + border-radius: 5px; + margin-top: -20px; + padding: 15px; + border: 1px solid rgb(231, 230, 230); } .card-desc { - display: inline-block; + display: inline-block; } .view-all { - display: inline-block; - float: right; - margin-top: 10px; - margin-right: 10px; - font-weight: 400; - cursor: pointer; - text-transform: uppercase; - color: rgb(106, 164, 217); + display: inline-block; + float: right; + margin-top: 10px; + margin-right: 10px; + font-weight: 400; + cursor: pointer; + text-transform: uppercase; + color: rgb(106, 164, 217); } .view-all:hover { - color: rgb(46, 117, 182); + color: rgb(46, 117, 182); } .card-header-plain h4 { - color: black !important; + color: black !important; } .card-header-plain p { - color: #999999 !important; + color: #999999 !important; } .text-default { - color: rgb(120, 173, 220) !important; + color: rgb(120, 173, 220) !important; } .table thead th { - font-size: 0.95rem; - font-weight: 400; - border-top-width: 0; - border-bottom-width: 1px; + font-size: 0.95rem; + font-weight: 400; + border-top-width: 0; + border-bottom-width: 1px; } .card .card-body { - padding: 0.8rem 20px; - position: relative; + padding: 0.8rem 20px; + position: relative; } table > thead > tr > th, @@ -298,34 +289,34 @@ table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { - padding: 8px 8px; - vertical-align: middle; + padding: 8px 8px; + vertical-align: middle; } .nav-link { - display: block; - padding: 0; - font-weight: 400; + display: block; + padding: 0; + font-weight: 400; } .nav-item { - cursor: pointer; + cursor: pointer; } .navbar.navbar-absolute { - position: absolute; - width: 100%; - z-index: 0; + position: absolute; + width: 100%; + z-index: 0; } .fixed-top { - z-index: 0; + z-index: 0; } .form-control:focus { - color: #495057; - background-color: rgba(0, 0, 0, 0); - border-color: none; - outline: none; - box-shadow: none; + color: #495057; + background-color: rgba(0, 0, 0, 0); + border-color: none; + outline: none; + box-shadow: none; } diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 288d1d64e..027d12825 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -68,7 +68,8 @@ "HISTORY-EDITED": "LAST EDITED", "PUBLIC": "PUBLIC", "PUBLIC-DMPS": "PUBLIC DMPs", - "PUBLIC-DESC": "PUBLIC DATASET DESCRIPTIONS" + "PUBLIC-DESC": "PUBLIC DATASET DESCRIPTIONS", + "ACCOUNT": "ACCOUNT" }, "DATASET-PROFILE-EDITOR": { "TITLE": {