MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

[Monitor Dashboard]: 1. Finish manage stakeholders. 2. Remove logos. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59732 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2020-11-01 15:41:56 +00:00
parent 0d59ccee27
commit 3b094da655
22 changed files with 447 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/app.component.ts
View File

@ -20,7 +20,7 @@ import {properties} from "../environments/environment";
templateUrl: './app.component.html' templateUrl: './app.component.html'
}) })
export class AppComponent implements OnInit, OnDestroy { export class AppComponent implements OnInit, OnDestroy {
properties: EnvProperties = properties; properties: EnvProperties = properties;
user: User; user: User;
params: BehaviorSubject<Params> = new BehaviorSubject<Params>(null); params: BehaviorSubject<Params> = new BehaviorSubject<Params>(null);
hasSidebar: boolean = false; hasSidebar: boolean = false;
@ -40,9 +40,9 @@ export class AppComponent implements OnInit, OnDestroy {
logoSmallUrl: null, logoSmallUrl: null,
position: 'center', position: 'center',
badge: false, badge: false,
stickyAnimation : false stickyAnimation: false
}; };
userMenuItems: MenuItem[] = [new MenuItem("", "My profile", "", "", false, [], [], {})]; userMenuItems: MenuItem[] = [new MenuItem("", "My profile", "", "", false, [], [], {})];
adminMenuItems: MenuItem[] = []; adminMenuItems: MenuItem[] = [];
stakeholder: Stakeholder = null; stakeholder: Stakeholder = null;
@ -104,7 +104,7 @@ export class AppComponent implements OnInit, OnDestroy {
}); });
this.layoutService.setOpen(false); this.layoutService.setOpen(false);
this.subscriptions.push(this.params.subscribe(params => { this.subscriptions.push(this.params.subscribe(params => {
if(this.paramsResolved) { if (this.paramsResolved) {
this.loading = true; this.loading = true;
this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219)); this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219)); this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
@ -319,6 +319,18 @@ export class AppComponent implements OnInit, OnDestroy {
return this.user && (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isMonitorCurator(this.user) || (this.stakeholder && Session.isManager(this.stakeholder.type, this.stakeholder.alias, this.user))); return this.user && (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isMonitorCurator(this.user) || (this.stakeholder && Session.isManager(this.stakeholder.type, this.stakeholder.alias, this.user)));
} }
private resolvePageInner() {
if(document !== undefined) {
let header = document.getElementById('pager_header_content');
let inner = document.getElementById('page_content_inner');
if(header) {
inner.setAttribute('style', '{margin-top:' + header.offsetHeight+ '}');
} else {
inner.setAttribute('style', '{margin-top:' + 0 + '}');
}
}
}
public isPublicOrIsMember(visibility: Visibility): boolean { public isPublicOrIsMember(visibility: Visibility): boolean {
if (visibility == "PRIVATE") { if (visibility == "PRIVATE") {
return false; return false;

4
src/app/general/general.component.html
View File

@ -1,5 +1,5 @@
<div id="page_content"> <div page-content>
<div id="page_content_inner"> <div inner>
<div *ngIf="stakeholder"> <div *ngIf="stakeholder">
<div class="form-header"> <div class="form-header">
<div class="uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid> <div class="uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>

4
src/app/general/general.module.ts
View File

@ -10,6 +10,7 @@ import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module
import {ReactiveFormsModule} from "@angular/forms"; import {ReactiveFormsModule} from "@angular/forms";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard"; import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
import {EditStakeholderModule} from "./edit-stakeholder/edit-stakeholder.module"; import {EditStakeholderModule} from "./edit-stakeholder/edit-stakeholder.module";
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
@NgModule({ @NgModule({
declarations: [GeneralComponent], declarations: [GeneralComponent],
@ -21,7 +22,8 @@ import {EditStakeholderModule} from "./edit-stakeholder/edit-stakeholder.module"
LoadingModule, LoadingModule,
AlertModalModule, AlertModalModule,
ReactiveFormsModule, ReactiveFormsModule,
EditStakeholderModule EditStakeholderModule,
PageContentModule
], ],
providers: [ providers: [
AdminDashboardGuard, PreviousRouteRecorder, AdminDashboardGuard, PreviousRouteRecorder,

21
src/app/manageStakeholders/manageStakeholders.component.css Normal file
View File

@ -0,0 +1,21 @@
.uk-card {
min-height: 270px;
}
.uk-card-body {
padding-top: 75px;
}
.uk-card-default .name {
margin-left: auto;
margin-right: auto;
}
.uk-card-default .uk-card-title .logo {
display: inline-block;
max-width: 80%;
}
.uk-card-default .uk-card-title .logo > img {
max-height: 60px;
}

197
src/app/manageStakeholders/manageStakeholders.component.html
View File

@ -1,14 +1,13 @@
<div id="page_content"> <div page-content>
<div id="page_content_inner"> <div header>
<div *ngIf="isCurator()"> <ul *ngIf="isCurator()" class="uk-tab customTabs admin" uk-tab>
<ul class="uk-tab customTabs admin" uk-tab> <li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('all')"><span class="title">All</span></a></li>
<li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('all')"><span class="title">All</span></a></li> <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('templates')"><span class="title">Profile templates</span></a>
<li [class.uk-active]="tab === 'members'"><a (click)="changeTab('templates')"><span class="title">Profile templates</span></a></li> </li>
<li [class.uk-active]="tab === 'members'"><a (click)="changeTab('profiles')"><span class="title">Profiles</span></a></li> <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('profiles')"><span
</ul> class="title">Profiles</span></a></li>
</ul>
</div> <div class="uk-grid uk-margin-medium" uk-grid>
<div class="uk-padding-small md-bg-white" uk-grid>
<div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid> <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
<div> <div>
<div dashboard-input [formInput]="filters.get('status')" <div dashboard-input [formInput]="filters.get('status')"
@ -18,113 +17,117 @@
</div> </div>
<div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right"> <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
<div class="uk-inline uk-width-medium"> <div class="uk-inline uk-width-medium">
<span class="uk-position-center-right"><i class="material-icons">search</i></span> <div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile" icon="search"></div>
<div dashboard-input [formInput]="filters.get('keyword')" label="Locate profile"></div>
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="tab != 'profiles' && isCurator()" class="uk-margin-top"> </div>
<h6 class="main">Profile Templates</h6> <div inner>
<div class = "uk-child-width-1-4@m uk-child-width-1-3@s uk-grid-match uk-grid-small" <div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
uk-grid> <loading></loading>
<loading *ngIf="loading"></loading> </div>
<ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder let-i="index"> <div *ngIf="!loading">
<ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container> <div *ngIf="tab != 'profiles' && isCurator()" class="uk-margin-medium-top">
</ng-template> <h6 class="uk-text-bold">Profile Templates</h6>
<div *ngIf="!loading && isCurator()"> <div class="uk-grid uk-child-width-1-4@m uk-child-width-1-3@s uk-grid-match" uk-grid
<ng-container *ngTemplateOutlet="newBox; context: uk-height-match="target: .name;">
<ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder let-i="index">
<ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
</ng-template>
<div *ngIf="!loading && isCurator()">
<ng-container *ngTemplateOutlet="newBox; context:
{text:'Create a new default profile.', isDefault:true}"></ng-container> {text:'Create a new default profile.', isDefault:true}"></ng-container>
</div>
</div>
</div> </div>
</div> <div *ngIf="tab != 'templates' && isManager()" class="uk-margin-large-top">
</div> <h6 class="uk-text-bold">Profiles</h6>
<div *ngIf="tab != 'templates' && isManager()" class="uk-margin-top"> <div class="uk-grid uk-grid-match uk-child-width-1-4@m uk-child-width-1-3@s" uk-grid uk-grid
<h6 class="">Profiles</h6> uk-height-match="target: .name;">
<div class="uk-grid-match uk-grid-small uk-child-width-1-4@m uk-child-width-1-3@s" <ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
uk-grid> <ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container>
<loading *ngIf="loading"></loading> </ng-template>
<ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index"> <div *ngIf="!loading && isCurator()">
<ng-container *ngTemplateOutlet="stakeholderBox; context: {stakeholder:stakeholder}"></ng-container> <ng-container *ngTemplateOutlet="newBox; context:
</ng-template>
<div *ngIf="!loading && isCurator()">
<ng-container *ngTemplateOutlet="newBox; context:
{text:'Create a new profile by selecting the type (Funder, Organization, Research Initiative or Project) and '+ {text:'Create a new profile by selecting the type (Funder, Organization, Research Initiative or Project) and '+
' select indicators based on a default or a blank profile.', isDefault:false}"></ng-container> ' select indicators based on a default or a blank profile.', isDefault:false}"></ng-container>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
<ng-template #stakeholderBox let-stakeholder="stakeholder" > <ng-template #stakeholderBox let-stakeholder="stakeholder">
<div> <div *ngIf="stakeholder">
<div *ngIf="stakeholder" class="uk-card uk-card-default"> <div class="uk-card uk-card-default uk-card-body uk-position-relative">
<div class="uk-padding-small uk-padding-remove-bottom"> <div class="uk-position-top-right uk-margin-small-right uk-margin-small-top clickable">
<div class="md-card-toolbar-actions uk-float-right" > <i uk-icon="more-vertical"
<div class="md-card-dropdown uk-inline clickable"> (click)="$event.stopPropagation();$event.preventDefault()"></i>
<i uk-icon="more-vertical" <div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
(click)="$event.stopPropagation();$event.preventDefault()"></i> <ul class="uk-nav uk-dropdown-nav">
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false"> <li><a
<ul class="uk-nav uk-dropdown-nav"> (click)="$event.stopPropagation();editStakeholder(stakeholder, !stakeholder.defaultId);hide(element);$event.preventDefault()">Edit</a>
<li><a (click)="$event.stopPropagation();editStakeholder(stakeholder, !stakeholder.defaultId);hide(element);$event.preventDefault()">Edit</a> </li>
</li> <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v> <li *ngIf="stakeholder.visibility != v.value"><a (click)="changeStakeholderStatus(stakeholder, v.value);
<li *ngIf="stakeholder.visibility != v.value"><a (click)="changeStakeholderStatus(stakeholder, v.value);
hide(element)"> hide(element)">
{{'Make ' + v.label.toLowerCase()}}</a> {{'Make ' + v.label.toLowerCase()}}</a>
</li>
</ng-template>
<hr *ngIf="isProfileManager(stakeholder)" class="uk-nav-divider">
<li *ngIf="isProfileManager(stakeholder)"><a
(click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);hide(element);$event.preventDefault()">Delete</a>
</li>
</ul>
</div>
</div>
</div>
<div class="md-card-dropdown uk-inline clickable visibility">
<i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)"
(click)="$event.stopPropagation();$event.preventDefault()"></i>
<div #element uk-dropdown="mode: click; pos: bottom-right; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let v of stakeholderUtils.visibility" [class.selectedVisibility]="v.value ==
stakeholder.visibility">
<a
*ngIf="stakeholder.visibility != v.value"
(click)="$event.stopPropagation();changeStakeholderStatus(stakeholder,v.value);hide(element);$event.preventDefault()">
<i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get( v.value)"></i> {{v.label}}</a>
<a *ngIf="stakeholder.visibility == v.value">
<i [attr.uk-icon]="stakeholderUtils.visibilityIcon.get( v.value)"></i> {{v.label}} <icon
customClass="uk-text-secondary uk-float-right" [ratio]="0.5"
name="bullet"></icon></a>
</li> </li>
</ng-template>
</ul> <hr *ngIf="isProfileManager(stakeholder)" class="uk-nav-divider">
</div> <li *ngIf="isProfileManager(stakeholder)"><a
(click)="$event.stopPropagation();deleteStakeholderOpen(stakeholder);hide(element);$event.preventDefault()">Delete</a>
</li>
</ul>
</div> </div>
</div> </div>
<div class="uk-padding-small"> <div class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
<a class="" [routerLink]="stakeholder.alias"> <span class="clickable color">
<div class="uk-flex uk-flex-center"> <icon [name]="stakeholderUtils.visibilityIcon.get(stakeholder.visibility)"></icon>
{{stakeholder.name}} </span>
</div> <div #element uk-dropdown="mode: click; pos: bottom-left; delay-hide: 0; flip: false">
</a> <ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let v of stakeholderUtils.visibility">
<a *ngIf="stakeholder.visibility != v.value"
(click)="$event.stopPropagation();changeStakeholderStatus(stakeholder,v.value);hide(element);$event.preventDefault()">
<icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" ratio="0.8"></icon>
<span> {{v.label}}</span>
</a>
<a *ngIf="stakeholder.visibility == v.value">
<icon [name]="stakeholderUtils.visibilityIcon.get(v.value)" [ratio]="0.8"></icon>
<span> {{v.label}}</span>
<span class="uk-position-center-right">
<icon customClass="uk-text-secondary" [ratio]="0.5" name="bullet"></icon>
</span>
</a>
</li>
</ul>
</div>
</div> </div>
<a class="uk-display-block uk-text-center uk-card-title" [routerLink]="stakeholder.alias">
<div class="name uk-width-2-3@l">
{{stakeholder.name}}
</div>
<div *ngIf="stakeholder.logoUrl" class="logo uk-margin-medium-top">
<img *ngIf="stakeholder.isUpload" [src]="properties.utilsService + '/download/' + stakeholder.logoUrl">
<img *ngIf="!stakeholder.isUpload" [src]="stakeholder.logoUrl">
</div>
</a>
</div> </div>
</div> </div>
</ng-template> </ng-template>
<ng-template #newBox let-text="text" let-isDefault="isDefault" > <ng-template #newBox let-text="text" let-isDefault="isDefault">
<div *ngIf="!loading"> <div *ngIf="!loading">
<div class="uk-card uk-card-default clickable" (click)="editStakeholder(null, isDefault)"> <div class="uk-card uk-card-default uk-text-center uk-card-body clickable" (click)="editStakeholder(null, isDefault)">
<div class="uk-card-body"> <div class="uk-text-small uk-text-muted">
<div> {{text}}
<div class="uk-width-1-1"> </div>
{{text}} <div class="uk-margin-medium-top">
</div> <span class="uk-text-secondary">
<div class="uk-width-1-1 uk-flex uk-flex-center"> <icon name="add" [ratio]="3"></icon>
<i class="material-icons md-48" uk-icon="plus"></i> </span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -133,6 +136,6 @@
id="edit_modal" [large]="true" id="edit_modal" [large]="true"
(alertOutput)="editStakeholderComponent.save(callback)" (alertOutput)="editStakeholderComponent.save(callback)"
[okDisabled]="editStakeholderComponent.disabled"> [okDisabled]="editStakeholderComponent.disabled">
<edit-stakeholder #editStakeholderComponent [maxHeight]="'70vh'"></edit-stakeholder> <edit-stakeholder #editStakeholderComponent></edit-stakeholder>
</modal-alert> </modal-alert>
<modal-alert #deleteStakeholderModal (alertOutput)="deleteStakeholder()"></modal-alert> <modal-alert #deleteStakeholderModal (alertOutput)="deleteStakeholder()"></modal-alert>

33
src/app/manageStakeholders/manageStakeholders.component.ts
View File

@ -17,7 +17,8 @@ declare var UIkit;
@Component({ @Component({
selector: 'home', selector: 'home',
templateUrl: "./manageStakeholders.component.html" templateUrl: "./manageStakeholders.component.html",
styleUrls: ['manageStakeholders.component.css']
}) })
export class ManageStakeholdersComponent implements OnInit, OnDestroy { export class ManageStakeholdersComponent implements OnInit, OnDestroy {
@ -52,8 +53,9 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
@ViewChild('editStakeholderModal') editStakeholderModal: AlertModal; @ViewChild('editStakeholderModal') editStakeholderModal: AlertModal;
@ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal; @ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal;
@ViewChild('editStakeholderComponent') editStakeholderComponent: EditStakeholderComponent; @ViewChild('editStakeholderComponent') editStakeholderComponent: EditStakeholderComponent;
tab:"all" | "templates" | "profiles" = "all"; tab: "all" | "templates" | "profiles" = "all";
constructor(private stakeholderService: StakeholderService, constructor(private stakeholderService: StakeholderService,
private userManagementService: UserManagementService, private userManagementService: UserManagementService,
private propertiesService: EnvironmentSpecificService, private propertiesService: EnvironmentSpecificService,
@ -100,7 +102,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
hide(element: any) { hide(element: any) {
UIkit.dropdown(element).hide(); UIkit.dropdown(element).hide();
} }
private buildFilters() { private buildFilters() {
this.filters = this.fb.group({ this.filters = this.fb.group({
@ -115,7 +117,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
this.onKeywordChange(value); this.onKeywordChange(value);
})); }));
} }
onStatusChange(value) { onStatusChange(value) {
this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value); this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value);
this.displayStakeholders = this.filterStatus(this.stakeholders, value); this.displayStakeholders = this.filterStatus(this.stakeholders, value);
@ -125,7 +127,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, value); this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, value);
this.displayStakeholders = this.filterByKeyword(this.stakeholders, value); this.displayStakeholders = this.filterByKeyword(this.stakeholders, value);
} }
private filterStatus(stakeholders: Stakeholder[], value): Stakeholder[] { private filterStatus(stakeholders: Stakeholder[], value): Stakeholder[] {
if (value === 'all') { if (value === 'all') {
return stakeholders; return stakeholders;
@ -138,8 +140,10 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
if (value === null || value === '') { if (value === null || value === '') {
return stakeholders; return stakeholders;
} else { } else {
return stakeholders.filter(stakeholder => ( return stakeholders.filter(stakeholder =>
stakeholder.index_id && stakeholder.index_id.toLowerCase().includes(value.toLowerCase())) || stakeholder.name && stakeholder.name.toLowerCase().includes(value.toLowerCase()) ||
stakeholder.type && stakeholder.type.toLowerCase().includes(value.toLowerCase()) ||
stakeholder.index_id && stakeholder.index_id.toLowerCase().includes(value.toLowerCase()) ||
stakeholder.index_shortName && stakeholder.index_shortName.toLowerCase().includes(value.toLowerCase()) || stakeholder.index_shortName && stakeholder.index_shortName.toLowerCase().includes(value.toLowerCase()) ||
stakeholder.index_name && stakeholder.index_name.toLowerCase().includes(value.toLowerCase()) stakeholder.index_name && stakeholder.index_name.toLowerCase().includes(value.toLowerCase())
); );
@ -207,7 +211,8 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
} }
}); });
} }
changeStakeholderStatus(stakeholder: Stakeholder, visibility:Visibility) {
changeStakeholderStatus(stakeholder: Stakeholder, visibility: Visibility) {
let path = [ let path = [
stakeholder._id stakeholder._id
]; ];
@ -215,6 +220,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
stakeholder.isActive = isActive; stakeholder.isActive = isActive;
}); });
} }
toggleStakeholderStatus(stakeholder: Stakeholder) { toggleStakeholderStatus(stakeholder: Stakeholder) {
let path = [ let path = [
stakeholder._id stakeholder._id
@ -232,19 +238,24 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
stakeholder.isPublic = isPublic; stakeholder.isPublic = isPublic;
}); });
} }
public isManager(): boolean { public isManager(): boolean {
return this.isCurator() || (Session.isKindOfMonitorManager(this.user)); return this.isCurator() || (Session.isKindOfMonitorManager(this.user));
} }
public isProfileManager(stakeholder:Stakeholder): boolean {
public isProfileManager(stakeholder: Stakeholder): boolean {
return this.isCurator() || (Session.isManager(stakeholder.type, stakeholder.alias, this.user)); return this.isCurator() || (Session.isManager(stakeholder.type, stakeholder.alias, this.user));
} }
public isCurator(): boolean { public isCurator(): boolean {
return this.isAdmin() || Session.isCommunityCurator(this.user) || Session.isMonitorCurator(this.user); return this.isAdmin() || Session.isCommunityCurator(this.user) || Session.isMonitorCurator(this.user);
} }
public isAdmin(): boolean { public isAdmin(): boolean {
return Session.isPortalAdministrator(this.user); return Session.isPortalAdministrator(this.user);
} }
changeTab(tab:"all" | "templates" | "profiles"){
changeTab(tab: "all" | "templates" | "profiles") {
this.tab = tab; this.tab = tab;
} }
} }

8
src/app/manageStakeholders/manageStakeholders.module.ts
View File

@ -11,8 +11,9 @@ import {ReactiveFormsModule} from "@angular/forms";
import {EditStakeholderModule} from "../general/edit-stakeholder/edit-stakeholder.module"; import {EditStakeholderModule} from "../general/edit-stakeholder/edit-stakeholder.module";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../openaireLibrary/utils/icons/icons.service"; import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
import {bullet} from "../openaireLibrary/utils/icons/icons"; import {add, bullet, earth, group, lock, search} from "../openaireLibrary/utils/icons/icons";
import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard"; import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
@NgModule({ @NgModule({
declarations: [ManageStakeholdersComponent], declarations: [ManageStakeholdersComponent],
@ -25,7 +26,8 @@ import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
AlertModalModule, AlertModalModule,
ReactiveFormsModule, ReactiveFormsModule,
EditStakeholderModule, EditStakeholderModule,
IconsModule IconsModule,
PageContentModule
], ],
providers: [ providers: [
LoginGuard, PreviousRouteRecorder, LoginGuard, PreviousRouteRecorder,
@ -34,6 +36,6 @@ import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
}) })
export class ManageStakeholdersModule { export class ManageStakeholdersModule {
constructor(private iconsService: IconsService) { constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([bullet]); this.iconsService.registerIcons([bullet, search, earth, group, lock, add]);
} }
} }

64
src/app/monitor/monitor.component.html
View File

@ -40,43 +40,41 @@
</ng-container> </ng-container>
<!-- </div>--> <!-- </div>-->
</ng-template> </ng-template>
<div id="page_content" [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle"> <div page-content [class.greyOut]="filterToggle" (click)=" (filterToggle)?filterToggle = false:filterToggle">
<div *ngIf="activeTopic && activeTopic.categories.length > 1" id="page_content_header"> <div *ngIf="activeTopic && activeTopic.categories.length > 1" header>
<div class="uk-margin-large-left"> <nav class=" ">
<nav class=" "> <div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class="">
<div *ngIf="stakeholder && status === errorCodes.DONE && activeTopic" class=""> <ul
<ul class="customTabs uk-tab ">
class="customTabs uk-tab "> <ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index">
<ng-template ngFor [ngForOf]="activeTopic.categories" let-category let-i="index"> <li *ngIf="isPublicOrIsMember(category.visibility)"
<li *ngIf="isPublicOrIsMember(category.visibility)" [class.uk-active]="category.alias ===
[class.uk-active]="category.alias ===
activeCategory.alias"> activeCategory.alias">
<a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)" <a (click)="navigateTo(stakeholder.alias,activeTopic.alias, category.alias)"
class="uk-margin-remove-bottom uk-h4" class="uk-margin-remove-bottom uk-h4"
><span class="title">{{category.name}}</span></a> ><span class="title">{{category.name}}</span></a>
</li> </li>
</ng-template> </ng-template>
</ul> </ul>
</div>
</nav>
<ul *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1"
class="uk-subnav uk-subnav-pill subCategoriesTabs ">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<li *ngIf="isPublicOrIsMember(subCategory.visibility)"
[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 *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom">
<span class="uk-grid-margin">Filters: </span>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
</div> </div>
</nav>
<ul *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 1"
class="uk-subnav uk-subnav-pill subCategoriesTabs ">
<ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory let-i="index">
<li *ngIf="isPublicOrIsMember(subCategory.visibility)"
[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 *ngIf="countSelectedFilters() > 0" class="uk-grid uk-grid-small uk-margin-bottom">
<span class="uk-grid-margin">Filters: </span>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {margin:true}"></ng-container>
</div> </div>
</div> </div>
<div id="page_content_inner" class=""> <div id="page_content_inner" inner>
<div class=" indicators"> <div class=" indicators">
<div *ngIf="privateStakeholder"> <div *ngIf="privateStakeholder">
<div class="uk-text-center uk-height-medium"> <div class="uk-text-center uk-height-medium">

3
src/app/monitor/monitor.module.ts
View File

@ -21,12 +21,13 @@ import {ClickModule} from "../openaireLibrary/utils/click/click.module";
import {BottomModule} from "../openaireLibrary/sharedComponents/bottom.module"; import {BottomModule} from "../openaireLibrary/sharedComponents/bottom.module";
import {RangeFilterModule} from "../openaireLibrary/utils/rangeFilter/rangeFilter.module"; import {RangeFilterModule} from "../openaireLibrary/utils/rangeFilter/rangeFilter.module";
import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/searchFilter.module"; import {SearchFilterModule} from "../openaireLibrary/searchPages/searchUtils/searchFilter.module";
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, FormsModule, RouterModule, ErrorMessagesModule, CommonModule, FormsModule, RouterModule, ErrorMessagesModule,
HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule, InputModule, HelperModule, Schema2jsonldModule, SEOServiceModule, MonitorRoutingModule, SideBarModule, InputModule,
UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule UserMiniModule, ClickModule, BottomModule, RangeFilterModule, SearchFilterModule, PageContentModule
], ],
declarations: [ declarations: [
MonitorComponent MonitorComponent

74
src/app/topic/topic.component.html
View File

@ -69,24 +69,23 @@
<span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span> <span class="uk-position-center" *ngIf="open" uk-icon="icon: chevron-left; ratio:1.5"></span>
</div> </div>
</aside> </aside>
<div id="page_content"> <div *ngIf="stakeholder" page-content>
<div *ngIf="stakeholder" id="page_content_header"> <div header>
<div class="uk-margin-large-left"> <nav class=" ">
<nav class=" "> <div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class="">
<div *ngIf="stakeholder && stakeholder.topics[topicIndex]" class=""> <ul *ngIf="stakeholder.topics[topicIndex] && stakeholder.topics[topicIndex].categories.length > 0"
<ul *ngIf="stakeholder.topics[topicIndex] && stakeholder.topics[topicIndex].categories.length > 0" class="customTabs uk-tab ignore admin uk-flex uk-flex-middle">
class="customTabs uk-tab ignore admin uk-flex uk-flex-middle"> <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index"> <li class="uk-visible-toggle uk-flex uk-flex-middle"
<li class="uk-visible-toggle uk-flex uk-flex-middle" [class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias">
[class.uk-active]="category.alias === stakeholder.topics[topicIndex].categories[categoryIndex].alias"> <ng-container *ngTemplateOutlet="visibilityOptions; context:
<ng-container *ngTemplateOutlet="visibilityOptions; context:
{i:i, type: 'cat', {i:i, type: 'cat',
visibility: stakeholder.topics[topicIndex].categories[i].visibility}"> visibility: stakeholder.topics[topicIndex].categories[i].visibility}">
</ng-container> </ng-container>
<a (click)="toggleCategory(i)"> <a (click)="toggleCategory(i)">
<span class="title"> {{category.name}}</span> <span class="title"> {{category.name}}</span>
</a> </a>
<span class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()"> <span class="uk-invisible-hover" (click)="$event.stopPropagation();$event.preventDefault()">
<span class="uk-icon clickable" uk-icon="more-vertical"></span> <span class="uk-icon clickable" uk-icon="more-vertical"></span>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"> <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
@ -104,27 +103,27 @@
</ul> </ul>
</div> </div>
</span> </span>
</li> </li>
</ng-template> </ng-template>
<li class="uk-visible-toggle"> <li class="uk-visible-toggle">
<span (click)="editCategoryOpen(); $event.preventDefault()" class="clickable"> <span (click)="editCategoryOpen(); $event.preventDefault()" class="clickable">
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span class="uk-hidden-hover space">Create new category</span> <span class="uk-hidden-hover space">Create new category</span>
</span> </span>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav>
<ul *ngIf=" stakeholder.topics[topicIndex].categories[categoryIndex] && <ul *ngIf=" stakeholder.topics[topicIndex].categories[categoryIndex] &&
stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0" stakeholder.topics[topicIndex].categories[categoryIndex].subCategories.length > 0"
class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin uk-flex uk-flex-middle"> class="uk-subnav uk-subnav-pill subCategoriesTabs ignore admin uk-flex uk-flex-middle">
<ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories" <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[categoryIndex].subCategories"
let-subCategory let-i="index"> let-subCategory let-i="index">
<li [class.uk-active]="(subCategory.alias === <li [class.uk-active]="(subCategory.alias ===
stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subCategoryIndex].alias)" stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subCategoryIndex].alias)"
class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal"> class="uk-visible-toggle uk-position-relative uk-padding-remove-horizontal">
<span> <span>
<ng-container *ngTemplateOutlet="visibilityOptions; context: <ng-container *ngTemplateOutlet="visibilityOptions; context:
{i:i, type: 'sub', {i:i, type: 'sub',
@ -137,7 +136,7 @@
<span class="uk-invisible-hover uk-position-center-right color" <span class="uk-invisible-hover uk-position-center-right color"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<span class="clickable" uk-icon="more-vertical"></span> <span class="clickable" uk-icon="more-vertical"></span>
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"> <div #element uk-dropdown="mode: click; pos: bottom-right; offset: 10; delay-hide: 0; flip: false">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editSubCategoryOpen(i); hide(element)">Edit</a></li> <li><a (click)="editSubCategoryOpen(i); hide(element)">Edit</a></li>
<ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v> <ng-template ngFor [ngForOf]="stakeholderUtils.visibility" let-v>
@ -156,21 +155,20 @@
</div> </div>
</span> </span>
</span> </span>
</li> </li>
</ng-template> </ng-template>
<li class="uk-visible-toggle ignore"> <li class="uk-visible-toggle ignore">
<span (click)="editSubCategoryOpen(); $event.preventDefault()" class="clickable"> <span (click)="editSubCategoryOpen(); $event.preventDefault()" class="clickable">
<span class="uk-icon-button small portal-icon-button"> <span class="uk-icon-button small portal-icon-button">
<icon name="add"></icon> <icon name="add"></icon>
</span> </span>
<span class="uk-hidden-hover space">Create new subcategory</span> <span class="uk-hidden-hover space">Create new subcategory</span>
</span> </span>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<div id="page_content_inner"> <div inner>
<indicators *ngIf="stakeholder" [properties]="properties" <indicators [properties]="properties"
[topicIndex]="topicIndex" [topicIndex]="topicIndex"
[categoryIndex]="categoryIndex" [categoryIndex]="categoryIndex"
[subcategoryIndex]="subCategoryIndex"></indicators> [subcategoryIndex]="subCategoryIndex"></indicators>

3
src/app/topic/topic.module.ts
View File

@ -17,11 +17,12 @@ import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
import {IconsService} from "../openaireLibrary/utils/icons/icons.service"; import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
import {preview, bullet, add, earth, lock, group} from "../openaireLibrary/utils/icons/icons"; import {preview, bullet, add, earth, lock, group} from "../openaireLibrary/utils/icons/icons";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
@NgModule({ @NgModule({
imports: [ imports: [
CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule, CommonModule, TopicRoutingModule, ClickModule, RouterModule, FormsModule, AlertModalModule,
ReactiveFormsModule, InputModule, IconsModule ReactiveFormsModule, InputModule, IconsModule, PageContentModule
], ],
declarations: [ declarations: [
TopicComponent, IndicatorsComponent TopicComponent, IndicatorsComponent

8
src/app/users/users.component.html
View File

@ -1,9 +1,7 @@
<div id="page_content"> <div *ngIf="loading" page-content>
<div *ngIf="loading" class="uk-section"> <div inner>
<loading></loading> <loading></loading>
</div> </div>
<div *ngIf="!loading && alias" class="uk-padding">
<dashboard-users [id]="alias" [name]="name" [type]="type" [link]="link"></dashboard-users>
</div>
</div> </div>
<dashboard-users *ngIf="!loading && alias" [id]="alias" [name]="name" [type]="type" [link]="link"></dashboard-users>

3
src/app/users/users.module.ts
View File

@ -5,9 +5,10 @@ import {UsersRoutingModule} from "./users-routing.module";
import {AdminDashboardGuard} from "../utils/adminDashboard.guard"; import {AdminDashboardGuard} from "../utils/adminDashboard.guard";
import {DashboardUsersModule} from "../openaireLibrary/dashboard/users/dashboard-users.module"; import {DashboardUsersModule} from "../openaireLibrary/dashboard/users/dashboard-users.module";
import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module"; import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
@NgModule({ @NgModule({
imports: [CommonModule, UsersRoutingModule, DashboardUsersModule, LoadingModule], imports: [CommonModule, UsersRoutingModule, DashboardUsersModule, LoadingModule, PageContentModule],
declarations: [UsersComponent], declarations: [UsersComponent],
exports: [UsersComponent], exports: [UsersComponent],
providers: [AdminDashboardGuard] providers: [AdminDashboardGuard]

11
src/assets/dashboard-theme/card.css
View File

@ -8,6 +8,17 @@
padding: 19px 25px; padding: 19px 25px;
} }
.uk-card-body .uk-card-title {
font-size: var(--font-size);
font-family: "Roboto", sans-serif;
font-weight: 700;
color: var(--muted-color) !important;
}
.uk-card-body a.uk-card-title:hover, .uk-card-body a.uk-card-title:active, .uk-card-body a.uk-card-title:focus {
color: var(--secondary-color) !important;
}
.uk-card .uk-grid-divider>:not(.uk-first-column)::before { .uk-card .uk-grid-divider>:not(.uk-first-column)::before {
border-left: 1px solid currentColor; border-left: 1px solid currentColor;
opacity: 0.2; opacity: 0.2;

18
src/assets/dashboard-theme/dropdowns.css
View File

@ -5,7 +5,7 @@
text-align: left; text-align: left;
} }
.sidebar_main_swipe.sidebar_mini .uk-dropdown { .sidebar_main_swipe.sidebar_mini #sidebar_content .uk-dropdown {
min-width: auto; min-width: auto;
} }
@ -16,24 +16,14 @@
.uk-dropdown-nav > li > a, .uk-dropdown-nav > li:hover > a { .uk-dropdown-nav > li > a, .uk-dropdown-nav > li:hover > a {
padding: 3px 10px; padding: 3px 10px;
color: rgb(var(--text-color)); color: var(--text-color);
font-weight: 400 !important; font-weight: 400 !important;
font-size: var(--xs-font-size); font-size: var(--xs-font-size);
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
} }
.uk-dropdown-nav > li, .uk-dropdown-nav > li > a { .uk-dropdown-nav > li:hover {
position: relative; background-color: rgba(var(--secondary-color-rgb), 0.3);
}
.uk-dropdown-nav > li:hover::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
background-color: var(--secondary-color);
opacity: 0.3;
} }
.uk-dropdown .uk-nav-divider { .uk-dropdown .uk-nav-divider {

26
src/assets/dashboard-theme/structure.css
View File

@ -53,7 +53,7 @@
#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li > a { #sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li > a {
display: block; display: block;
font-size: var(--sidebar-font-size); font-size: var(--sidebar-font-size);
color: rgba(var(--text-color), 0.5); color: rgba(var(--text-color-rgb), 0.5);
} }
#sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li:hover > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li:hover > a { #sidebar_main .menu_section ul:not(.uk-dropdown-nav) > li:hover > a, #sidebar_main .special_section ul:not(.uk-dropdown-nav) > li:hover > a {
@ -70,7 +70,7 @@
transform: translateY(-50%); transform: translateY(-50%);
position: fixed; position: fixed;
background: #ffffff; background: #ffffff;
border: 1px solid rgb(var(--text-color)); border: 1px solid var(--text-color);
border-left: 0; border-left: 0;
cursor: pointer; cursor: pointer;
padding: 0 4px; padding: 0 4px;
@ -123,7 +123,7 @@
} }
#sidebar_main #sidebar_content { #sidebar_main #sidebar_content {
border-right: 1px solid rgb(var(--text-color)); border-right: 1px solid var(--text-color);
} }
#page_content { #page_content {
@ -131,21 +131,27 @@
background-color: var(--background-color); background-color: var(--background-color);
} }
#page_content_header + #page_content_inner {
margin-top: 100px;
}
#page_content_header { #page_content_header {
position: fixed; position: fixed;
background: var(--background-color); background: var(--background-color);
top: var(--header-height); top: var(--header-height);
z-index: 980; z-index: 980;
width: 100%; width: calc(100% - var(--sidebar-width) - 180px);
height: 100px; padding: 0 90px;
transition-property: width;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
}
.sidebar_mini #page_content_header{
width: calc(100vw - var(--sidebar-mini-width) - 200px);
} }
#page_content_inner { #page_content_inner {
padding: 90px; padding: 50px 90px 90px;
} }
navbar > * { navbar > * {

6
src/assets/dashboard-theme/tabs-pills.css
View File

@ -16,7 +16,7 @@
.uk-subnav-pill > * > *, .uk-subnav > * > *:first-child { .uk-subnav-pill > * > *, .uk-subnav > * > *:first-child {
text-transform: none; text-transform: none;
font-size: var(--font-size); font-size: var(--font-size);
color: rgb(var(--text-color)); color: var(--text-color);
} }
.uk-subnav-pill > li > a:hover, .uk-subnav-pill > li > span > a:hover { .uk-subnav-pill > li > a:hover, .uk-subnav-pill > li > span > a:hover {
@ -35,7 +35,7 @@
} }
.uk-tab > li > a { .uk-tab > li > a {
color: rgb(var(--text-color), 0.5) !important; color: rgb(var(--text-color-rgb), 0.5) !important;
font-size: var(--small-font-size); font-size: var(--small-font-size);
font-family: "Open Sans", sans-serif !important; font-family: "Open Sans", sans-serif !important;
text-transform: capitalize; text-transform: capitalize;
@ -62,8 +62,6 @@
border-bottom: none !important; border-bottom: none !important;
} }
/*dashboard tabs*/
.customTabs.uk-tab.admin > li.uk-active > a .title { .customTabs.uk-tab.admin > li.uk-active > a .title {
border-bottom: 3px solid var(--portal-main-color); border-bottom: 3px solid var(--portal-main-color);
margin-left: 3px; margin-left: 3px;

11
src/assets/dashboard-theme/text.css
View File

@ -1,6 +1,7 @@
:root { :root {
--font-size: 16px; --font-size: 16px;
--text-color: 26,26,26; --text-color: #1A1A1A;
--text-color-rgb: 26,26,26;
--muted-color: #4D4D4D; --muted-color: #4D4D4D;
--xs-font-size: 12px; --xs-font-size: 12px;
--small-font-size: 14px; --small-font-size: 14px;
@ -8,13 +9,13 @@
} }
body { body {
color: rgb(var(--text-color)); color: var(--text-color);
font-size: var(--font-size); font-size: var(--font-size);
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
} }
.color { .color {
color: rgb(var(--text-color)); color: var(--text-color) !important;
} }
.uk-text-small { .uk-text-small {
@ -26,11 +27,11 @@ body {
} }
.uk-text-muted { .uk-text-muted {
color: var(--muted-color); color: var(--muted-color) !important;
} }
.uk-logo { .uk-logo {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 24px; font-size: 24px;
color: rgb(var(--text-color)); color: var(--text-color);
} }

6
src/assets/dashboard-theme/variables.css
View File

@ -4,11 +4,15 @@
--portal-dark-color: #7c9144; --portal-dark-color: #7c9144;
--primary-color: var(--theme-primary-color); --primary-color: var(--theme-primary-color);
--secondary-color: var(--theme-secondary-color); --secondary-color: var(--theme-secondary-color);
--primary-color-rgb: var(--theme-primary-color-rgb);
--secondary-color-rgb: var(--theme-secondary-color-rgb);
--contrast-color: white; --contrast-color: white;
/* Portable Variables*/ /* Portable Variables*/
--theme-primary-color: #222080; --theme-primary-color: #222080;
--theme-secondary-color: #4686E5; --theme-secondary-color: #4686e5;
--theme-primary-color-rgb: 34,31,128;
--theme-secondary-color-rgb: 70,134,229;
--openaire-main-color: #313179; --openaire-main-color: #313179;
--explore-portal-color: #D95F2D; --explore-portal-color: #D95F2D;
--provide-portal-color: #37C7E9; --provide-portal-color: #37C7E9;

BIN
src/assets/logo-large-monitor.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 216 KiB

BIN
src/assets/logo-small-monitor.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.8 KiB

304
src/assets/new.css
View File

@ -1,66 +1,74 @@
:root { :root {
--portal-main-color: #8DCA26; --portal-main-color: #8DCA26;
--portal-main-contrast: white; --portal-main-contrast: white;
--portal-dark-color: #7c9144; --portal-dark-color: #7c9144;
} }
.stakeholderPage { .stakeholderPage {
--primary-color: var(--theme-secondary-color); --primary-color: var(--theme-secondary-color);
--secondary-color: var(--theme-secondary-color); --secondary-color: var(--theme-secondary-color);
--primary-color-rgb: var(--theme-secondary-color-rgb);
--secondary-color-rgb: var(--theme-secondary-color-rgb);
} }
/*Stakeholder Specific*/ /*Stakeholder Specific*/
.publicationsSearchForm{ .publicationsSearchForm {
background-image: none; background-image: none;
} }
.stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container{
background-color: #F9FBFC !important; .stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container {
box-shadow: none; background-color: #F9FBFC !important;
box-shadow: none;
} }
/*.stakeholderPage #header_main, .stakeholderPage .uk-sticky.uk-navbar-container {*/ /*.stakeholderPage #header_main, .stakeholderPage .uk-sticky.uk-navbar-container {*/
/* background: #F9FBFC !important;*/ /* background: #F9FBFC !important;*/
/*}*/ /*}*/
.stakeholderPage #page_content_inner { .stakeholderPage #page_content_inner {
background-image: url(/assets/monitor-shapes-bg.svg); background-image: url(/assets/monitor-shapes-bg.svg);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top; background-position: top;
background-attachment: fixed; background-attachment: fixed;
} }
/*General*/ /*General*/
.stakeholderPage { .stakeholderPage {
background: #F9FBFC !important; background: #F9FBFC !important;
} }
#style_switcher .uk-offcanvas-bar { #style_switcher .uk-offcanvas-bar {
box-sizing: border-box; box-sizing: border-box;
padding: 16px; padding: 16px;
} }
#style_switcher_toggle { #style_switcher_toggle {
top: 320px !important; top: 320px !important;
position: fixed; position: fixed;
height: 36px; height: 36px;
/*background: #fff;*/ /*background: #fff;*/
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
cursor: pointer; cursor: pointer;
padding: 0 8px; padding: 0 8px;
box-shadow: -2px 2px 5px rgba(0,0,0,.26); box-shadow: -2px 2px 5px rgba(0, 0, 0, .26);
box-sizing: border-box; box-sizing: border-box;
/*z-index: 981;*/ /*z-index: 981;*/
} }
#filters_switcher_toggle { #filters_switcher_toggle {
top: 320px !important; top: 320px !important;
position: fixed; position: fixed;
height: 36px; height: 36px;
background-color: var(--secondary-color); background-color: var(--secondary-color);
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
cursor: pointer; cursor: pointer;
padding: 0 2px; padding: 0 2px;
box-shadow: -2px 2px 5px rgba(0,0,0,.26); box-shadow: -2px 2px 5px rgba(0, 0, 0, .26);
box-sizing: border-box; box-sizing: border-box;
/*z-index: 981;*/ /*z-index: 981;*/
right: 0; right: 0;
} }
/*Sidebar*/ /*Sidebar*/
@ -70,166 +78,170 @@
/* color: rgba(0,0,0,.7);*/ /* color: rgba(0,0,0,.7);*/
/*}*/ /*}*/
/*Sidebar Header logo */ /*Sidebar Header logo */
#sidebar_main .sidebar_main_header .portalLogo{ #sidebar_main .sidebar_main_header .portalLogo {
background: url("/assets/logo-large-monitor.png") no-repeat; background: url("/assets/common-assets/logo-large-monitor.png") no-repeat;
background-size: contain ; background-size: contain;
margin-left: 35px; margin-left: 35px;
margin-top: 5px; margin-top: 5px;
height:50px; height: 50px;
} }
.sidebar_mini #sidebar_main .sidebar_main_header .portalLogo{ .sidebar_mini #sidebar_main .sidebar_main_header .portalLogo {
background: url("/assets/logo-small-monitor.png") no-repeat !important; background: url("/assets/common-assets/logo-small-monitor.png") no-repeat;
background-size: 50px 50px !important; background-size: contain;
margin-right: 15px;
margin-left: 15px;
} }
/*Sidebar Rotation*/ /*Sidebar Rotation*/
.stakeholderPage #sidebar_main .menu_section > ul > li.uk-active { .stakeholderPage #sidebar_main .menu_section > ul > li.uk-active {
width: 150px; width: 150px;
height: 100%; height: 100%;
transition: 0.70s; transition: 0.70s;
-webkit-transition: 0.70s; -webkit-transition: 0.70s;
-moz-transition: 0.70s; -moz-transition: 0.70s;
-ms-transition: 0.70s; -ms-transition: 0.70s;
-o-transition: 0.70s; -o-transition: 0.70s;
-webkit-transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg); -moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg); -o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg); -ms-transform: rotate(-90deg);
transform: rotate(-90deg); transform: rotate(-90deg);
margin: 63px auto 63px auto; margin: 63px auto 63px auto;
}
.stakeholderPage #sidebar_main .menu_section > ul > li {
transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
/*display: block;*/
/*text-align: center;*/
/*margin-right: auto;*/
/*margin-left: auto;*/
} }
.stakeholderPage.sidebar_mini #sidebar_main .menu_section > ul > li.uk-active{ .stakeholderPage #sidebar_main .menu_section > ul > li {
-webkit-transform: rotate(0deg); transition: 0.70s;
-moz-transform: rotate(0deg); -webkit-transition: 0.70s;
-o-transform: rotate(0deg); -moz-transition: 0.70s;
-ms-transform: rotate(0deg); -ms-transition: 0.70s;
transform: rotate(0deg); -o-transition: 0.70s;
width: inherit; /*display: block;*/
height: inherit; /*text-align: center;*/
margin: 0; /*margin-right: auto;*/
/*margin-left: auto;*/
}
.stakeholderPage.sidebar_mini #sidebar_main .menu_section > ul > li.uk-active {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
width: inherit;
height: inherit;
margin: 0;
} }
.stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle { .stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle {
border-color: var(--monitor-portal-color); border-color: var(--monitor-portal-color);
} }
/* Section Tools*/ /* Section Tools*/
.dashboard .section { .dashboard .section {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
padding-right: 10px; padding-right: 10px;
border: rgba(0, 0, 0, 0) solid 1px; border: rgba(0, 0, 0, 0) solid 1px;
position: relative; position: relative;
} }
.dashboard .section .tools { .dashboard .section .tools {
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
transform: translate(-50%, -100%); transform: translate(-50%, -100%);
display: none; display: none;
} }
.dashboard .section:not(.list-view) { .dashboard .section:not(.list-view) {
border: white solid 1px; border: white solid 1px;
} }
.dashboard .section:not(.list-view):hover { .dashboard .section:not(.list-view):hover {
border: var(--secondary-color) solid 1px; border: var(--secondary-color) solid 1px;
} }
.dashboard .section:not(.list-view):hover .tools { .dashboard .section:not(.list-view):hover .tools {
display: block; display: block;
width: 50px; width: 50px;
background: var(--secondary-color) ; background: var(--secondary-color);
color: white; color: white;
-webkit-clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%); -webkit-clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0, 100% 100%, 0% 100%); clip-path: polygon(20% 0%, 80% 0, 100% 100%, 0% 100%);
} }
.dashboard .section:not(.list-view):hover .tools a{ .dashboard .section:not(.list-view):hover .tools a {
color: white; color: white;
} }
.dashboard .section:hover .tools .actions a:last-child { .dashboard .section:hover .tools .actions a:last-child {
margin-left: 3px margin-left: 3px;
;
} }
/* New section*/ /* New section*/
.dashboard .new-section { .dashboard .new-section {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
padding-right: 10px; padding-right: 10px;
border: #cecece dashed 2px; border: #cecece dashed 2px;
background-color: white; background-color: white;
min-height: 100px; min-height: 100px;
position: relative; position: relative;
} }
.dashboard .new-section .tools { .dashboard .new-section .tools {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.dashboard .new-section .tools .md-btn { .dashboard .new-section .tools .md-btn {
background-color: var(--secondary-color); background-color: var(--secondary-color);
position: relative; position: relative;
min-width: 40px; min-width: 40px;
min-height: 40px; min-height: 40px;
border-radius: 50%; border-radius: 50%;
} }
.dashboard .new-section .tools .md-btn .material-icons { .dashboard .new-section .tools .md-btn .material-icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
margin: 0; margin: 0;
}
/*Search */
#searchFormPanel{
margin-top: 30px;
height: 250px;
} }
.tm-header .uk-navbar-container{ /*Search */
background-color: var(--background-color) !important; #searchFormPanel {
box-shadow: none !important; margin-top: 30px;
height: 250px;
}
.tm-header .uk-navbar-container {
background-color: var(--background-color) !important;
box-shadow: none !important;
} }
.visibility { .visibility {
border-right: 1px solid var(--secondary-color); border-right: 1px solid rgba(var(--secondary-color-rgb), 0.5);
border-bottom: 1px solid var(--secondary-color); border-bottom: 1px solid rgba(var(--secondary-color-rgb), 0.5);
padding: 10px 8px; padding: 10px 8px;
margin-right: 4px; margin-right: 4px;
color: rgba(var(--text-color), 0.5); color: rgba(var(--text-color-rgb), 0.5);
} }
.visibility.small { .visibility.small {
padding: 3px 2px; padding: 3px 2px;
} }
.descriptionIcon{ .descriptionIcon {
position: absolute; position: absolute;
bottom: 3px; bottom: 3px;
left: 3px; left: 3px;
} }