[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:
parent
76f2dadc8e
commit
c5b9345f02
|
@ -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: '**',
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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, [], [], {}));
|
||||
|
|
|
@ -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]" >
|
||||
|
|
|
@ -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 |
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue