[Monitor Dashboard | Trunk]

Update stakeholder page according to the new mocks
clean up monitor-custom.css 

add theme page route

App component: pass parameter for minimenu and front page



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@58837 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Argiro Kokogiannaki 2020-06-04 11:30:26 +00:00
parent 76f2dadc8e
commit c5b9345f02
9 changed files with 156 additions and 157 deletions

View File

@ -128,10 +128,12 @@ const routes: Routes = [
// resolve: { envSpecific: EnvironmentSpecificResolver },
// data: {hasAdminMenu: true}
// },
{ path: 'theme', loadChildren: './openaireLibrary/utils/theme/theme.module#ThemeModule'},
{
path: '',
loadChildren: './monitor/monitor.module#MonitorModule',
resolve: {envSpecific: EnvironmentSpecificResolver},
data: {hasMiniMenu: true, isFrontPage: true}
},
{
path: '**',

View File

@ -1,6 +1,7 @@
<!--disable_transitions -->
<div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar">
<div *ngIf="hasHeader" id="header_main" [class.header_full]="!hasSidebar">
<div class="sidebar_main_swipe " [class.sidebar_main_active]="open && hasSidebar" [class.sidebar_mini]="!open &&
hasMiniMenu && hasSidebar" [class.stakeholderPage]="isFrontPage">
<div *ngIf="hasHeader" id="header_main" [class.header_full]="!hasSidebar">
<img *ngIf="!open || !hasSidebar" class="badge small-badge"
src="assets/theme-assets/prototype_flag.svg"
alt="BETA">
@ -29,7 +30,7 @@
</nav>
</div>
<dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Monitor Dashboard"
<dashboard-sidebar *ngIf="hasAdminMenu" [items]="adminMenuItems" headerName="Monitor"
headerDashboard="Administration Panel"
></dashboard-sidebar>
<div *ngIf="hasSidebar" id="hide_controls">

View File

@ -22,6 +22,8 @@ export class AppComponent implements OnInit, OnDestroy {
hasSidebar: boolean = false;
hasHeader: boolean = false;
hasAdminMenu: boolean = false;
hasMiniMenu:boolean = false;
isFrontPage:boolean = false;
userMenuItems: MenuItem[] = [];
adminMenuItems: MenuItem[] = [];
stakeHolder:Stakeholder = null;
@ -62,6 +64,14 @@ export class AppComponent implements OnInit, OnDestroy {
this.hasAdminMenu = hasAdminMenu;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.hasMiniMenu.subscribe(hasMiniMenu => {
this.hasMiniMenu = hasMiniMenu;
this.cdr.detectChanges();
}));
this.subscriptions.push(this.layoutService.isFrontPage.subscribe(isFrontPage => {
this.isFrontPage = isFrontPage;
this.cdr.detectChanges();
}));
this.layoutService.setOpen(false);
this.propertiesService.loadEnvironment()
.then(properties => {
@ -119,7 +129,7 @@ export class AppComponent implements OnInit, OnDestroy {
}*/
if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isCommunityCurator(this.user)) {
this.userMenuItems.push(new MenuItem("", "Manage Stakeholders",
"", "/admin", true, [], [], {communityId:'openaire'}))
"", "/admin", true, [], [], {}))
}
if (this.user) {
@ -127,7 +137,7 @@ export class AppComponent implements OnInit, OnDestroy {
}
if (this.adminMenuItems.length == 0) {
//nstructor(id: string, name: string, route: string, items: Item[], icon, open: boolean) {
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage Stakeholders", "", "/admin", false, [], [], {}));
this.adminMenuItems.push(new MenuItem("stakeholders", "Manage Stakeholders", "", "/admin", false, [], [], {}, "settings"));
/*let adminOptions = new MenuItem("adminOptions", "Admin Options", "", "", false, [], [], {})
adminOptions.items.push(new MenuItem("pages", "Pages", "", "/pages", false, [], [], {}));
adminOptions.items.push(new MenuItem("portals", "Portals", "", "/portals", false, [], [], {}));

View File

@ -1,73 +1,70 @@
<!--disable_transitions -->
<div class="double-header stakeholderPage">
<div class="">
<div id="header_menu" class="uk-width-1-1">
<nav class="uk-navbar">
<div class=" stakeholderPage">
<div id="header_main" class=" light_header">
<nav class="uk-navbar">
<div *ngIf="stakeholder" class="uk-navbar-left">
<a class="uk-logo uk-navbar-item ng-star-inserted uk-link uk-margin-small-top"
routerlink="/"
routerlinkactive="uk-link">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class=" logo uk-responsive-height">
<div class="uk-navbar-left">
<img class="badge"
src="assets/theme-assets/prototype_flag.svg"
alt="BETA">
<a *ngIf="stakeholder"
class="uk-logo uk-navbar-item ng-star-inserted uk-link uk-margin-small-top uk-margin-medium-left"
routerlink="/"
routerlinkactive="uk-link">
<img *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl" class="uk-responsive-height">
<div *ngIf="!stakeholder.logoUrl">
{{stakeholder.index_name}}
</div>
</a>
<div class="uk-margin-large-left uk-width-medium ng-star-inserted">
<div class="">
<!-- <div dashboard-input label="Search for..." [formInput]="keyword"></div>-->
</div>
</div>
</a>
<div class="uk-text-capitalize uk-h4" >
{{'OpenAIRE Monitor '
+(stakeholder.type == 'ri'?'Research Initiative':stakeholder.type)+ ' - ' +
stakeholder.index_name}}
</div>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-navbar-right uk-margin-right">
<ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical">
<li>
<user-mini *ngIf="properties"
[user]="user" [dashboard]="true"
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain
[userMenuItems]=userMenuItems>
</user-mini>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-navbar-right uk-margin-right">
<ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical">
<li>
<user-mini *ngIf="properties"
[user]="user" [dashboard]="true"
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain
[userMenuItems]=userMenuItems >
</user-mini>
</li>
</ul>
</div>
</nav>
</div>
<div class="sidebar_main_swipe header_full" [class.sidebar_main_active]="open">
<div id="header_main">
<nav class="uk-light uk-navbar">
<!--<div class="main_logo_top">
<div *ngIf="stakeholder && stakeholder.index_name" class=" uk-margin-small-top">
<div class="uk-text-bold uk-h4 uk-margin-remove-bottom">{{stakeholder.index_name}}</div>
<div class="uk-h5 uk-margin-remove">Monitor Dashboard</div>
</div>
</div>-->
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="uk-navbar-center">
<ul class="uk-navbar-nav">
<ng-template ngFor [ngForOf]="stakeholder.topics" let-topic let-i="index">
<li *ngIf="isPublicOrIsMember(topic.isPublic) && topic.isActive"
[ngClass]="(topic.alias === activeTopic.alias)?'uk-active':''">
<a (click)="navigateTo(stakeholder.alias, topic.alias)" class="uk-margin-remove-bottom uk-h4"
><span>{{topic.name}}</span></a>
</li>
</ng-template>
</ul>
</div>
</nav>
</div>
<dashboard-sidebar *ngIf="sideBarItems.length > 0 && stakeholder" [items]="sideBarItems"
[activeItem]="activeCategory?activeCategory.alias:null"
[activeSubItem]="activeSubCategory?activeSubCategory.alias:null" [showHeader]=false
[activeItem]="activeTopic?activeTopic.alias:null"
[activeSubItem]="activeSubCategory?activeSubCategory.alias:null" [showHeader]=true
headerName="Monitor" [showSearch]="true"
></dashboard-sidebar>
<!-- *ngIf="activeSubCategory"-->
<div id="page_content">
<div id="page_content_inner">
<div class="uk-navbar-container uk-sticky uk-sticky-fixed" style="top: 70px; position:
fixed; width: 100%">
<nav class=" " >
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
<ul *ngIf="activeTopic && activeTopic.categories.length > 1"
class="uk-tab uk-padding uk-padding-remove-bottom uk-padding-remove-left uk-margin-remove">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">
<li *ngIf="isPublicOrIsMember(category.isPublic) && category.isActive"
[ngClass]="(category.alias === activeCategory.alias)?'uk-active':''">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
class="uk-margin-remove-bottom uk-h4"
><span>{{category.name}}</span></a>
</li>
</ng-template>
</ul>
</div>
</nav>
</div>
<div id="page_content_inner" class="uk-margin-large-top">
<div class="uk-margin-top">
<ul *ngIf="activeCategory && activeCategory.subCategories.length > 1" class="uk-tab">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<li *ngIf="isPublicOrIsMember(subCategory.isPublic) && subCategory.isActive"
[ngClass]="(subCategory.alias === activeSubCategory.alias)?'uk-active':''">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias,activeCategory.alias, subCategory.alias)"
class="uk-margin-remove-bottom uk-h3"
><span>{{subCategory.name}}</span></a>
</li>
</ng-template>
</ul>
<!-- <div>
Filters
<input class="uk-input uk-form-width-medium" placeholder="Funding Stream" type="text" name="fund_level_0"
@ -171,8 +168,8 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="stakeholder" id="style_switcher" title="This functionality is comming soon. Stay tuned!">
<div id="style_switcher_toggle">
<a *ngIf="isAdmin() " [routerLink]="['/admin', this.stakeholder.alias]" >

View File

@ -47,6 +47,7 @@ export class MonitorComponent implements OnInit, OnDestroy, IDeactivateComponent
public activeCategory: Category = null;
public activeSubCategory: SubCategory = null;
public sideBarItems: MenuItem[] = [];
public topBarItems: MenuItem[] = [];
public errorCodes: ErrorCodes;
public stakeholder: Stakeholder;
public numberResults: Map<string, number> = new Map<string, number>();
@ -273,16 +274,26 @@ export class MonitorComponent implements OnInit, OnDestroy, IDeactivateComponent
private setSideBar() {
let items: MenuItem[] = [];
this.stakeholder.topics.forEach((topic) => {
if (this.isPublicOrIsMember(topic.isPublic) && topic.isActive) {
let topicItem: MenuItem = new MenuItem(topic.alias, topic.name, "", (
'/' + this.stakeholder.alias + '/' + topic.alias ),
null, [], [], {});
topicItem.icon = "donut_large";
items.push(topicItem);
}
});
let categoryItems: MenuItem[] = [];
this.activeTopic.categories.forEach((category, index) => {
if (this.isPublicOrIsMember(category.isPublic) && category.isActive) {
let subItems: MenuItem[] = [];
category.subCategories.forEach(subCategory => {
/*category.subCategories.forEach(subCategory => {
if (this.isPublicOrIsMember(subCategory.isPublic) && subCategory.isActive) {
subItems.push(new MenuItem(subCategory.alias, subCategory.name, "", (
'/' + this.stakeholder.alias + '/' + this.activeTopic.alias + '/' + category.alias + '/' + subCategory.alias),
null, null, [], {}));
}
});
});*/
let open = this.activeCategory.alias === category.alias;
if (MonitorComponent.sidebarStatus && MonitorComponent.sidebarStatus.id === this.activeTopic.alias) {
open = MonitorComponent.sidebarStatus.status[index];
@ -293,9 +304,10 @@ export class MonitorComponent implements OnInit, OnDestroy, IDeactivateComponent
null, [], [], {});
categoryItem.items = subItems;
categoryItem.open = open;
items.push(categoryItem);
categoryItems.push(categoryItem);
}
});
this.topBarItems = categoryItems;
if (items.length === 0) {
items.push(new MenuItem('noCategories', 'No categories available yet', "", "", false, [], [], {}));
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

View File

@ -37,98 +37,51 @@
transform: rotate(90deg);
}
.double-header #header_menu a {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
.stakeholderPage #sidebar_main .sidebar_main_header .logo{
margin-top: 15px;
}
.stakeholderPage .uk-navbar-container{
background-color: white !important;
padding-left: 0px;
}
.stakeholderPage .uk-navbar-center .uk-logo{
max-height: 80px;
}
.dashboard .double-header #header_main .uk-navbar-nav > li > a {
font-size: 16px;
font-family: "Open Sans", serif;
}
.double-header #header_main .uk-navbar-nav > li.uk-active {
position: relative;
display: inline;
transition: position 0s linear 0.2s;
}
.double-header #header_main .uk-navbar-nav > li.uk-active a {
.stakeholderPage .uk-navbar ul li.uk-active a{
color:var(--monitor-portal-color);
font-weight: bold;
}
.double-header #header_main .uk-navbar-nav > li.uk-active a:before {
top: 45px;
left: 50%;
border-style: solid;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-bottom-color: #ECECEC;
border-width: 13px;
transform: translateX(-50%);
.stakeholderPage #header_main{
padding-left: 6px;
}
#header_main.light_header {
background: white !important;
color: #000000B3;
}
.dashboard #header_main.light_header .login, .dashboard #header_main.light_header .uk-navbar-nav > li > a{
color: #000000B3;
/*text-transform: uppercase;*/
}
.dashboard #header_main.light_header circle, .dashboard #header_main.light_header .login svg * {
stroke: #000000B3;
}
.stakeholderPage #hide_controls:hover #toggle:hover .material-icons, .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open) .material-icons {
color: var(--portal-main-color);
border: var(--portal-main-color) solid 1px;
}
.stakeholderPage #hide_controls #toggle:hover, .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open),.stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a .menu_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons {
color: var(--portal-main-color) !important;
}
.double-header #header_main .uk-navbar-nav > li a span {
padding-bottom: 4px;
text-transform: capitalize;
.dashboard #header_main .uk-logo img{
max-height: calc(var(--header-height) - 30px);
}
.double-header #header_main{
top: var(--monitor-header-menu-height);
.stakeholderPage .uk-tab > li.uk-active > a,.stakeholderPage .uk-tab > li > a:focus, .stakeholderPage .uk-tab > li > a:hover {
border-bottom-color: var(--portal-main-color) !important;
}
.double-header #header_menu {
position: fixed;
top: 0;
left: 0;
height:var(--monitor-header-menu-height);
background:white;
z-index: 1215;
}
.double-header #header_menu .uk-navbar-nav > li.uk-active a span {
-webkit-box-shadow: inset 0 -2px 0 #333;
box-shadow: inset 0 -2px 0 #333;
padding-bottom: 2px;
}
.dashboard .double-header .header_full #sidebar_main {
top: calc(var(--header-height) + var(--monitor-header-menu-height));
}
.dashboard .double-header .header_full #page_content_inner {
/*top: calc(var(--header-height) + var(--monitor-header-menu-height));*/
/*position: absolute;*/
margin-top: calc(var(--header-height) + 24px);
}
.double-header .uk-logo img{
max-height: calc(var(--header-height) - 20px);
}
.stakeholderPage #style_switcher {
top:200px;
}
/* Login Box*/
.dashboard .double-header .login {
color: rgba(0,0,0,.54);
font-weight: bold;
}
.dashboard .double-header circle, .dashboard .double-header .login svg,
.dashboard .double-header svg svg *, .dashboard .double-header .login svg * {
stroke: rgba(0,0,0,.54);
fill: none;
}
.dashboard .double-header text {
stroke: rgba(0,0,0,.54);
fill: rgba(0,0,0,.54);
}

View File

@ -49,11 +49,33 @@ html .dashboard {
height: calc(var(--header-height) - 20px);
}
.dashboard #sidebar_main .menu_section {
.dashboard .sidebar_main_active #sidebar_main .menu_section {
overflow: auto;
flex: 1;
margin-bottom: 45px;
}
.dashboard .sidebar_mini #sidebar_main .menu_section>ul>li>ul {
margin-top: var(--header-height);
}
.dashboard .sidebar_main_active .submenu_trigger ul {
display: block;
}
.dashboard #sidebar_main .sidebar_main_header .portalLogo{
background: url("/assets/logo-large-monitor.png") no-repeat;
background-size: contain ;
margin-left: 35px;
margin-top: 5px;
}
.dashboard .sidebar_mini #sidebar_main .sidebar_main_header .portalLogo{
background: url("/assets/logo-small-monitor.png") no-repeat !important;
background-size: contain !important;
margin-left: 5px;
}
.dashboard #hide_controls {
bottom: 0;
@ -67,7 +89,7 @@ html .dashboard {
.dashboard .sidebar_main_active #hide_controls {
background: rgba(255, 255, 255, 1);
border-top: 1px solid rgba(0,0,0,.30);
/*border-top: 1px solid rgba(0,0,0,.30);*/
width: 320px;
transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
@ -218,6 +240,8 @@ body.dashboard {
.dashboard #header_main .login {
color: white;
font-weight: bold;
text-transform: uppercase;
}
.dashboard #header_main circle, .dashboard #header_main .login svg {