From 032752f8a581cd757d1e898bd25151c345fd1eb4 Mon Sep 17 00:00:00 2001 From: Konstantinos Triantafyllou Date: Mon, 19 Oct 2020 09:07:43 +0000 Subject: [PATCH] [Monitor Dashboard | Trunk]: Organize new dashboard theme to files git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59619 d315682c-612b-4755-9ff5-7f18f6832af3 --- angular.json | 1 - src/app/app.component.ts | 3 +- .../edit-stakeholder.component.ts | 301 +++++++++++++++ .../edit-stakeholder.module.ts | 12 + .../manageStakeholder.component.html | 146 +++---- .../manageStakeholder.component.ts | 365 +----------------- .../manageStakeholders.component.html | 79 +--- .../manageStakeholders.component.ts | 208 +--------- .../manageStakeholders.module.ts | 4 +- src/app/topic/topic.component.html | 2 +- src/app/utils/indicator-utils.ts | 9 +- src/assets/dashboard-theme/card.css | 0 src/assets/dashboard-theme/dropdowns.css | 22 ++ src/assets/dashboard-theme/input.css | 58 +++ src/assets/dashboard-theme/main.css | 7 + src/assets/dashboard-theme/structure.css | 111 ++++++ src/assets/dashboard-theme/tabs-pills.css | 0 src/assets/dashboard-theme/text.css | 20 + src/assets/dashboard-theme/variables.css | 24 ++ src/assets/monitor-custom.css | 31 -- src/assets/new.css | 134 +------ src/environments/environment.ts | 8 +- src/material.scss | 17 +- src/styles.css | 5 +- 24 files changed, 704 insertions(+), 863 deletions(-) create mode 100644 src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts create mode 100644 src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts create mode 100644 src/assets/dashboard-theme/card.css create mode 100644 src/assets/dashboard-theme/dropdowns.css create mode 100644 src/assets/dashboard-theme/input.css create mode 100644 src/assets/dashboard-theme/main.css create mode 100644 src/assets/dashboard-theme/structure.css create mode 100644 src/assets/dashboard-theme/tabs-pills.css create mode 100644 src/assets/dashboard-theme/text.css create mode 100644 src/assets/dashboard-theme/variables.css diff --git a/angular.json b/angular.json index 0c1cd14..978bec2 100644 --- a/angular.json +++ b/angular.json @@ -23,7 +23,6 @@ "styles": [ "src/styles.css", "src/material.scss", - "src/assets/search.scss", "node_modules/datatables.net-dt/css/jquery.dataTables.css" ], "scripts": [ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index f87f2ef..89464e6 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -10,6 +10,7 @@ import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sideba import {MenuItem, RootMenuItem} from "./openaireLibrary/sharedComponents/menu"; import {Stakeholder, Topic} from "./openaireLibrary/monitor/entities/stakeholder"; import {LinksResolver} from "./search/links-resolver"; +import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component"; @Component({ @@ -29,7 +30,7 @@ export class AppComponent implements OnInit, OnDestroy { sideBarItems: MenuItem[] = []; specialSideBarMenuItem:MenuItem = null; menuItems: RootMenuItem[] = []; - menuHeader = { route: "/", url: null, title: "Default menu header", logoUrl: null, logoSmallUrl:null, position:'center', badge: false }; + menuHeader: Header = { route: "/", url: null, title: "Default menu header", logoUrl: null, logoSmallUrl:null, position:'center', badge: false }; userMenuItems: MenuItem[] = [new MenuItem("", "My profile", "", "", false, [], [], {})]; adminMenuItems: MenuItem[] = []; stakeholder: Stakeholder = null; diff --git a/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts new file mode 100644 index 0000000..b9ceb52 --- /dev/null +++ b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.component.ts @@ -0,0 +1,301 @@ +import {Component, Input} from "@angular/core"; +import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder"; +import {FormBuilder, FormGroup, Validators} from "@angular/forms"; +import {StakeholderUtils} from "../../utils/indicator-utils"; +import {Option} from "../../openaireLibrary/dashboard/sharedComponents/input/input.component"; +import {Subscription} from "rxjs"; +import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties"; +import {properties} from "../../../environments/environment"; +import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service"; +import {UtilitiesService} from "../../openaireLibrary/services/utilities.service"; + +@Component({ + selector: 'edit-stakeholder', + template: ` +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
No default profiles has been found + for this type. +
+
+ +
+
+ +
+
+
+
+ +
+ +
` +}) +export class EditStakeholderComponent { + @Input() + public maxHeight = 'none'; + public stakeholderFb: FormGroup; + public stakeholderUtils: StakeholderUtils = new StakeholderUtils(); + public defaultStakeholdersOptions: Option[]; + public defaultStakeholders: Stakeholder[]; + public stakeholders: Stakeholder[]; + public stakeholder: Stakeholder; + public isDefault: boolean; + public isNew: boolean; + public properties: EnvProperties = properties; + private subscriptions: any[] = []; + /** + * Photo upload + * */ + public file: File; + public photo: string | ArrayBuffer; + public uploadError: string; + public deleteCurrentPhoto: boolean = false; + private maxsize: number = 200 * 1024; + + constructor(private fb: FormBuilder, + private stakeholderService: StakeholderService, + private utilsService: UtilitiesService) { + } + + public init(stakeholder: Stakeholder, stakeholders: Stakeholder[], defaultStakeholders: Stakeholder[], isDefault: boolean, isNew: boolean) { + this.uploadError = null; + this.deleteCurrentPhoto = false; + this.stakeholder = stakeholder; + this.stakeholders = stakeholders; + this.defaultStakeholders = defaultStakeholders; + this.isDefault = isDefault; + this.isNew = isNew; + this.stakeholderFb = this.fb.group({ + _id: this.fb.control(this.stakeholder._id), + defaultId: this.fb.control(this.stakeholder.defaultId), + name: this.fb.control(this.stakeholder.name, Validators.required), + description: this.fb.control(this.stakeholder.description), + index_name: this.fb.control(this.stakeholder.index_name, Validators.required), + index_id: this.fb.control(this.stakeholder.index_id, Validators.required), + index_shortName: this.fb.control(this.stakeholder.index_shortName, Validators.required), + creationDate: this.fb.control(this.stakeholder.creationDate), + alias: this.fb.control(this.stakeholder.alias, + [ + Validators.required, + this.stakeholderUtils.aliasValidator( + (isDefault) ? + this.defaultStakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) : + this.stakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) + )] + ), + isDefault: this.fb.control(isDefault), + visibility: this.fb.control(this.stakeholder.visibility, Validators.required), + type: this.fb.control(this.stakeholder.type, Validators.required), + topics: this.fb.control(this.stakeholder.topics), + managers: this.fb.control(this.stakeholder.managers), + isUpload: this.fb.control(this.stakeholder.isUpload), + logoUrl: this.fb.control(this.stakeholder.logoUrl), + }); + this.initPhoto(); + this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => { + this.onTypeChange(value, defaultStakeholders); + })); + this.subscriptions.push(this.stakeholderFb.get('logoUrl').valueChanges.subscribe(value => { + if (value) { + this.photo = value; + } else { + this.photo = 'assets/common-assets/curator-default.png'; + } + })); + if (!isDefault) { + this.stakeholderFb.setControl('defaultId', this.fb.control(stakeholder.defaultId, Validators.required)); + } + if (isNew) { + setTimeout(() => { + this.stakeholderFb.get('type').enable(); + }, 0); + } else { + if (this.stakeholderFb.value.type) { + setTimeout(() => { + this.stakeholderFb.get('type').disable(); + }, 0); + } else { + setTimeout(() => { + this.stakeholderFb.get('type').enable(); + }, 0); + } + } + } + + public get disabled(): boolean { + return this.stakeholderFb && (this.stakeholderFb.invalid || (this.stakeholderFb.pristine && !this.isNew && !this.file)); + } + + reset() { + this.stakeholderFb = null; + this.subscriptions.forEach(subscription => { + if (subscription instanceof Subscription) { + subscription.unsubscribe(); + } + }); + } + + onTypeChange(value, defaultStakeholders: Stakeholder[]) { + this.stakeholderFb.setControl('defaultId', this.fb.control(this.stakeholder.defaultId, Validators.required)); + this.defaultStakeholdersOptions = [{ + label: 'New blank profile', + value: '-1' + }]; + defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => { + this.defaultStakeholdersOptions.push({ + label: 'Use ' + stakeholder.name + ' profile', + value: stakeholder._id + }) + }); + } + + public save(callback: Function) { + if (this.file) { + this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => { + this.deletePhoto(); + this.removePhoto(); + this.stakeholderFb.get('logoUrl').setValue(res.filename); + this.saveStakeholder(callback); + }, error => { + this.uploadError = "An error has been occurred during upload your image. Try again later"; + this.saveStakeholder(callback); + }); + } else if (this.deleteCurrentPhoto) { + this.deletePhoto(); + this.saveStakeholder(callback); + } else { + this.saveStakeholder(callback); + } + } + + public saveStakeholder(callback: Function) { + if (this.isNew) { + if (!this.stakeholderFb.value.isDefault) { + let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId); + this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value, + (stakeholder ? stakeholder.topics : []))); + } + this.removePhoto(); + this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL, + this.stakeholderFb.value).subscribe(stakeholder => { + callback(stakeholder); + }); + } else { + this.stakeholderFb.get('type').enable(); + this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => { + callback(stakeholder); + }); + } + } + + fileChangeEvent(event) { + if (event.target.files && event.target.files[0]) { + this.file = event.target.files[0]; + if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') { + this.uploadError = 'You must choose a file with type: image/png or image/jpeg!'; + this.stakeholderFb.get('isUpload').setValue(false); + this.removePhoto(); + } else if (this.file.size > this.maxsize) { + this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.'; + this.stakeholderFb.get('isUpload').setValue(false); + this.removePhoto() + } else { + this.uploadError = null; + const reader = new FileReader(); + reader.readAsDataURL(this.file); + reader.onload = () => { + this.photo = reader.result; + this.stakeholderFb.get('isUpload').setValue(true); + }; + } + } + } + + initPhoto() { + if (this.stakeholderFb.get('logoUrl').value) { + if (!this.stakeholderFb.value.isUpload) { + this.photo = this.stakeholderFb.get('logoUrl').value; + } else { + this.photo = this.properties.utilsService + "/download/" + this.stakeholderFb.get('logoUrl').value; + } + } else { + this.photo = 'assets/common-assets/curator-default.png'; + } + } + + removePhoto() { + if (typeof document != 'undefined') { + (document.getElementById("photo")).value = ""; + } + this.initPhoto(); + this.file = null; + } + + remove() { + this.stakeholderFb.get('isUpload').setValue(false); + if (this.file) { + this.removePhoto(); + } + if (this.stakeholder.isUpload) { + this.stakeholderFb.get('logoUrl').setValue(null); + this.deleteCurrentPhoto = true; + } + } + + public deletePhoto() { + if (this.stakeholder.logoUrl) { + this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.stakeholder.logoUrl).subscribe(); + } + } +} diff --git a/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts new file mode 100644 index 0000000..d713c88 --- /dev/null +++ b/src/app/manageStakeholder/edit-stakeholder/edit-stakeholder.module.ts @@ -0,0 +1,12 @@ +import {NgModule} from "@angular/core"; +import {EditStakeholderComponent} from "./edit-stakeholder.component"; +import {CommonModule} from "@angular/common"; +import {InputModule} from "../../openaireLibrary/dashboard/sharedComponents/input/input.module"; +import {ReactiveFormsModule} from "@angular/forms"; + +@NgModule({ + imports: [CommonModule, InputModule, ReactiveFormsModule], + declarations: [EditStakeholderComponent], + exports: [EditStakeholderComponent] +}) +export class EditStakeholderModule {} diff --git a/src/app/manageStakeholder/manageStakeholder.component.html b/src/app/manageStakeholder/manageStakeholder.component.html index dd8d336..dacdff6 100644 --- a/src/app/manageStakeholder/manageStakeholder.component.html +++ b/src/app/manageStakeholder/manageStakeholder.component.html @@ -1,73 +1,79 @@
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- -
-
- - -
- -
-
{{uploadError}}
- -
- -
-
-
-
- OR -
-
- -
-
-
-
-
-
-
-
-
-
-
-
No default profiles has been found for this type.
-
-
-
- - +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+ + +
+ +
+
{{uploadError}}
+ +
+ +
+
+
+
- OR -
+
+ +
+
+
+
+
+
+
+
+
+
+
+
No default profiles has been found for + this type. +
+
+
+
+ diff --git a/src/app/manageStakeholder/manageStakeholder.component.ts b/src/app/manageStakeholder/manageStakeholder.component.ts index f599a35..857bdbc 100644 --- a/src/app/manageStakeholder/manageStakeholder.component.ts +++ b/src/app/manageStakeholder/manageStakeholder.component.ts @@ -13,371 +13,10 @@ import {UserManagementService} from "../openaireLibrary/services/user-management import {Session} from "../openaireLibrary/login/utils/helper.class"; import {UtilitiesService} from "../openaireLibrary/services/utilities.service"; -declare var UIkit; - @Component({ - selector: 'home', + selector: 'manage-stakeholder', templateUrl: "./manageStakeholder.component.html" }) -export class ManageStakeholderComponent implements OnInit, OnDestroy { +export class ManageStakeholderComponent { - public properties: EnvProperties; - public loading: boolean = true; - public stakeholderUtils: StakeholderUtils = new StakeholderUtils(); - public defaultStakeholders: Stakeholder[]; - public stakeholders: Stakeholder[]; - public stakeholder: Stakeholder; - public stakeholderFb: FormGroup; - public index: number; - public user = null; - /** - * Filtered Stakeholders - */ - public displayDefaultStakeholders: Stakeholder[]; - public displayStakeholders: Stakeholder[]; - - public defaultStakeholdersOptions: Option[] = []; - - /** - * Top filters - */ - public filters: FormGroup; - public all: Option = { - value: 'all', - label: 'All' - }; - - /** - * Grid or List View - */ - public grid: boolean = true; - private subscriptions: any[] = []; - - /** - * Photo upload - * */ - public file: File; - public photo: string | ArrayBuffer; - public uploadError: string; - public deleteCurrentPhoto: boolean = false; - private maxsize: number = 200 * 1024; - - @ViewChild('editStakeholderModal') editStakeholderModal: AlertModal; - @ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal; - - constructor(private stakeholderService: StakeholderService, - private utilsService: UtilitiesService, - private userManagementService: UserManagementService, - private propertiesService: EnvironmentSpecificService, - private title: Title, - private fb: FormBuilder) { - } - - ngOnInit(): void { - this.buildFilters(); - this.propertiesService.loadEnvironment() - .then(properties => { - this.properties = properties; - this.title.setTitle('Manage profiles'); - this.userManagementService.getUserInfo().subscribe(user => { - this.user = user; - }); - let data = zip( - this.stakeholderService.getDefaultStakeholders(this.properties.monitorServiceAPIURL), - this.stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL) - ); - data.subscribe(res => { - this.defaultStakeholders = res[0]; - this.stakeholders = res[1]; - this.displayDefaultStakeholders = res[0]; - this.displayStakeholders = res[1]; - this.loading = false; - }); - }); - this.subscriptions.push(UIkit.util.on(document, 'hidden', '#edit_modal', (): void => { - this.removePhoto(); - })); - } - - ngOnDestroy(): void { - this.subscriptions.forEach(value => { - if (value instanceof Subscriber) { - value.unsubscribe(); - } else if (value instanceof Function) { - value(); - } - }); - } - - hide(element: any) { - UIkit.dropdown(element).hide(); - } - - public changeGrid(value) { - this.grid = value; - } - - private buildFilters() { - this.filters = this.fb.group({ - privacy: this.fb.control('all'), - status: this.fb.control('all'), - keyword: this.fb.control('') - }); - this.subscriptions.push(this.filters.get('privacy').valueChanges.subscribe(value => { - this.onPrivacyChange(value); - })); - this.subscriptions.push(this.filters.get('status').valueChanges.subscribe(value => { - this.onStatusChange(value); - })); - this.subscriptions.push(this.filters.get('keyword').valueChanges.subscribe(value => { - this.onKeywordChange(value); - })); - } - - onPrivacyChange(value) { - this.displayDefaultStakeholders = this.filterPrivacy(this.defaultStakeholders, value); - this.displayStakeholders = this.filterPrivacy(this.stakeholders, value); - } - - onStatusChange(value) { - this.displayDefaultStakeholders = this.filterStatus(this.defaultStakeholders, value); - this.displayStakeholders = this.filterStatus(this.stakeholders, value); - } - - onKeywordChange(value) { - this.displayDefaultStakeholders = this.filterByKeyword(this.defaultStakeholders, value); - this.displayStakeholders = this.filterByKeyword(this.stakeholders, value); - } - - onTypeChange(value) { - this.defaultStakeholdersOptions = [{ - label: 'New blank profile', - value: '-1' - }]; - this.defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => { - this.defaultStakeholdersOptions.push({ - label: 'Use ' + stakeholder.name + ' profile', - value: stakeholder._id - }) - }); - } - - - private filterPrivacy(stakeholders: Stakeholder[], value): Stakeholder[] { - if (value === 'all') { - return stakeholders; - } else { - return stakeholders.filter(stakeholder => stakeholder.isPublic === value); - } - } - - private filterStatus(stakeholders: Stakeholder[], value): Stakeholder[] { - if (value === 'all') { - return stakeholders; - } else { - return stakeholders.filter(stakeholder => stakeholder.isActive === value); - } - } - - private filterByKeyword(stakeholders: Stakeholder[], value): Stakeholder[] { - if (value === null || value === '') { - return stakeholders; - } else { - return stakeholders.filter(stakeholder => ( - stakeholder.index_id && stakeholder.index_id.toLowerCase().includes(value.toLowerCase())) || - stakeholder.index_shortName && stakeholder.index_shortName.toLowerCase().includes(value.toLowerCase()) || - stakeholder.index_name && stakeholder.index_name.toLowerCase().includes(value.toLowerCase()) - ); - } - } - - public editStakeholder(stakeholder: Stakeholder = null, isDefault: boolean = false) { - if (isDefault) { - this.index = (stakeholder) ? this.defaultStakeholders.findIndex(value => value._id === stakeholder._id) : -1; - } else { - this.index = (stakeholder) ? this.stakeholders.findIndex(value => value._id === stakeholder._id) : -1; - } - if (!stakeholder) { - this.stakeholder = new Stakeholder(null, null, null, - null, null, null, false, false, null); - } else { - this.stakeholder = stakeholder; - } - this.stakeholderFb = this.fb.group({ - _id: this.fb.control(this.stakeholder._id), - defaultId: this.fb.control(this.stakeholder.defaultId), - name: this.fb.control(this.stakeholder.name, Validators.required), - description: this.fb.control(this.stakeholder.description), - index_name: this.fb.control(this.stakeholder.index_name, Validators.required), - index_id: this.fb.control(this.stakeholder.index_id, Validators.required), - index_shortName: this.fb.control(this.stakeholder.index_shortName, Validators.required), - creationDate: this.fb.control(this.stakeholder.creationDate), - alias: this.fb.control(this.stakeholder.alias, - [ - Validators.required, - this.stakeholderUtils.aliasValidator( - (isDefault) ? - this.defaultStakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) : - this.stakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) - )] - ), - isDefault: this.fb.control(isDefault), - isPublic: this.fb.control(this.stakeholder.isPublic), - isActive: this.fb.control(this.stakeholder.isActive), - type: this.fb.control(this.stakeholder.type, Validators.required), - topics: this.fb.control(this.stakeholder.topics), - managers: this.fb.control(this.stakeholder.managers), - isUpload: this.fb.control(this.stakeholder.isUpload), - logoUrl: this.fb.control(this.stakeholder.logoUrl), - }); - this.initPhoto(); - this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => { - this.onTypeChange(value); - })); - this.subscriptions.push(this.stakeholderFb.get('logoUrl').valueChanges.subscribe(value => { - if(value) { - this.photo = value; - } else { - this.photo = 'assets/common-assets/curator-default.png'; - } - })); - if (!isDefault) { - this.stakeholderFb.setControl('defaultId', this.fb.control(this.stakeholder.defaultId, Validators.required)); - } - if (this.index !== -1) { - if (this.stakeholderFb.value.type) { - setTimeout(() => { - this.stakeholderFb.get('type').disable(); - }, 0); - } else { - setTimeout(() => { - this.stakeholderFb.get('type').enable(); - }, 0); - } - this.editStakeholderModal.okButtonText = 'Save Changes'; - } else { - setTimeout(() => { - this.stakeholderFb.get('type').enable(); - }, 0); - this.editStakeholderModal.okButtonText = 'Create'; - } - this.uploadError = null; - this.deleteCurrentPhoto = false; - this.editStakeholderModal.cancelButtonText = 'Cancel'; - this.editStakeholderModal.okButtonLeft = false; - this.editStakeholderModal.alertMessage = false; - this.editStakeholderModal.open(); - } - - public save() { - if (this.file) { - this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => { - this.deletePhoto(); - this.removePhoto(); - this.stakeholderFb.get('logoUrl').setValue(res.filename); - this.saveStakeholder(); - }, error => { - this.uploadError = "An error has been occurred during upload your image. Try again later"; - this.saveStakeholder(); - }); - } else if (this.deleteCurrentPhoto) { - this.deletePhoto(); - this.saveStakeholder(); - } else { - this.saveStakeholder(); - } - } - - public saveStakeholder() { - if (this.index === -1) { - if (!this.stakeholderFb.value.isDefault) { - let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId); - this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value, - (stakeholder ? stakeholder.topics : []))); - } - this.removePhoto(); - this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL, - this.stakeholderFb.value).subscribe(stakeholder => { - if (stakeholder.defaultId === null) { - this.defaultStakeholders.push(stakeholder); - } else { - this.stakeholders.push(stakeholder); - } - }); - } else { - this.stakeholderFb.get('type').enable(); - this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => { - if (stakeholder.defaultId == null) { - this.defaultStakeholders[this.index] = stakeholder; - } else { - this.stakeholders[this.index] = stakeholder; - } - }); - } - } - - - public isAdministrator(): boolean { - return Session.isPortalAdministrator(this.user); - } - - public deletePhoto() { - if (this.stakeholder.logoUrl) { - this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.stakeholder.logoUrl).subscribe(); - } - } - - fileChangeEvent(event) { - if (event.target.files && event.target.files[0]) { - this.file = event.target.files[0]; - if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') { - this.uploadError = 'You must choose a file with type: image/png or image/jpeg!'; - this.stakeholderFb.get('isUpload').setValue(false); - this.removePhoto(); - } else if (this.file.size > this.maxsize) { - this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.'; - this.stakeholderFb.get('isUpload').setValue(false); - this.removePhoto() - } else { - this.uploadError = null; - const reader = new FileReader(); - reader.readAsDataURL(this.file); - reader.onload = () => { - this.photo = reader.result; - this.stakeholderFb.get('isUpload').setValue(true); - }; - } - } - } - - initPhoto() { - if (this.stakeholderFb.get('logoUrl').value) { - if (!this.stakeholderFb.value.isUpload) { - this.photo = this.stakeholderFb.get('logoUrl').value; - } else { - this.photo = this.properties.utilsService + "/download/" + this.stakeholderFb.get('logoUrl').value; - } - } else { - this.photo = 'assets/common-assets/curator-default.png'; - } - } - - removePhoto() { - if (typeof document != 'undefined') { - (document.getElementById("photo")).value = ""; - } - this.initPhoto(); - this.file = null; - } - - remove() { - this.stakeholderFb.get('isUpload').setValue(false); - if (this.file) { - this.removePhoto(); - } - if (this.stakeholder.isUpload) { - this.stakeholderFb.get('logoUrl').setValue(null); - this.deleteCurrentPhoto = true; - } - } } diff --git a/src/app/manageStakeholders/manageStakeholders.component.html b/src/app/manageStakeholders/manageStakeholders.component.html index 54547ff..203a577 100644 --- a/src/app/manageStakeholders/manageStakeholders.component.html +++ b/src/app/manageStakeholders/manageStakeholders.component.html @@ -1,5 +1,5 @@
-
+
@@ -53,8 +53,8 @@
-
-
    +
    +
    • Edit
    • @@ -140,8 +140,8 @@
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      - -
      -
      -
      -
      - -
      -
      - - -
      - -
      -
      {{uploadError}}
      -       -
      - -
      -
      -
      -
      - OR -
      -
      - -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      -
      No default profiles has been found for this type.
      -
      -
      -
      + id="edit_modal" [large]="true" + (alertOutput)="editStakeholderComponent.save(callback)" + [okDisabled]="editStakeholderComponent.disabled"> +       diff --git a/src/app/manageStakeholders/manageStakeholders.component.ts b/src/app/manageStakeholders/manageStakeholders.component.ts index b8044c4..a6c6399 100644 --- a/src/app/manageStakeholders/manageStakeholders.component.ts +++ b/src/app/manageStakeholders/manageStakeholders.component.ts @@ -5,13 +5,13 @@ import {EnvironmentSpecificService} from "../openaireLibrary/utils/properties/en import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder"; import {Subscriber, zip} from "rxjs"; import {StakeholderUtils} from "../utils/indicator-utils"; -import {FormBuilder, FormGroup, Validators} from "@angular/forms"; +import {FormBuilder, FormGroup} from "@angular/forms"; import {AlertModal} from "../openaireLibrary/utils/modal/alert"; import {Option} from "../openaireLibrary/dashboard/sharedComponents/input/input.component"; import {Title} from "@angular/platform-browser"; import {UserManagementService} from "../openaireLibrary/services/user-management.service"; import {Session} from "../openaireLibrary/login/utils/helper.class"; -import {UtilitiesService} from "../openaireLibrary/services/utilities.service"; +import {EditStakeholderComponent} from "../manageStakeholder/edit-stakeholder/edit-stakeholder.component"; declare var UIkit; @@ -27,7 +27,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { public defaultStakeholders: Stakeholder[]; public stakeholders: Stakeholder[]; public stakeholder: Stakeholder; - public stakeholderFb: FormGroup; public index: number; public user = null; /** @@ -35,9 +34,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { */ public displayDefaultStakeholders: Stakeholder[]; public displayStakeholders: Stakeholder[]; - - public defaultStakeholdersOptions: Option[] = []; - /** * Top filters */ @@ -47,26 +43,18 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { label: 'All' }; + public callback: Function; + /** * Grid or List View */ public grid: boolean = true; private subscriptions: any[] = []; - - /** - * Photo upload - * */ - public file: File; - public photo: string | ArrayBuffer; - public uploadError: string; - public deleteCurrentPhoto: boolean = false; - private maxsize: number = 200 * 1024; - @ViewChild('editStakeholderModal') editStakeholderModal: AlertModal; @ViewChild('deleteStakeholderModal') deleteStakeholderModal: AlertModal; + @ViewChild('editStakeholderComponent') editStakeholderComponent: EditStakeholderComponent; constructor(private stakeholderService: StakeholderService, - private utilsService: UtilitiesService, private userManagementService: UserManagementService, private propertiesService: EnvironmentSpecificService, private title: Title, @@ -95,7 +83,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { }); }); this.subscriptions.push(UIkit.util.on(document, 'hidden', '#edit_modal', (): void => { - this.removePhoto(); + this.editStakeholderComponent.removePhoto(); })); } @@ -149,19 +137,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { this.displayStakeholders = this.filterByKeyword(this.stakeholders, value); } - onTypeChange(value) { - this.defaultStakeholdersOptions = [{ - label: 'New blank profile', - value: '-1' - }]; - this.defaultStakeholders.filter(stakeholder => stakeholder.type === value).forEach(stakeholder => { - this.defaultStakeholdersOptions.push({ - label: 'Use ' + stakeholder.name + ' profile', - value: stakeholder._id - }) - }); - } - private filterPrivacy(stakeholders: Stakeholder[], value): Stakeholder[] { if (value === 'all') { @@ -199,121 +174,34 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { } if (!stakeholder) { this.stakeholder = new Stakeholder(null, null, null, - null, null, null, false, false, null); + null, null, null, null, null); } else { this.stakeholder = stakeholder; } - this.stakeholderFb = this.fb.group({ - _id: this.fb.control(this.stakeholder._id), - defaultId: this.fb.control(this.stakeholder.defaultId), - name: this.fb.control(this.stakeholder.name, Validators.required), - description: this.fb.control(this.stakeholder.description), - index_name: this.fb.control(this.stakeholder.index_name, Validators.required), - index_id: this.fb.control(this.stakeholder.index_id, Validators.required), - index_shortName: this.fb.control(this.stakeholder.index_shortName, Validators.required), - creationDate: this.fb.control(this.stakeholder.creationDate), - alias: this.fb.control(this.stakeholder.alias, - [ - Validators.required, - this.stakeholderUtils.aliasValidator( - (isDefault) ? - this.defaultStakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) : - this.stakeholders.filter(stakeholder => stakeholder.alias !== this.stakeholder.alias) - )] - ), - isDefault: this.fb.control(isDefault), - isPublic: this.fb.control(this.stakeholder.isPublic), - isActive: this.fb.control(this.stakeholder.isActive), - type: this.fb.control(this.stakeholder.type, Validators.required), - topics: this.fb.control(this.stakeholder.topics), - managers: this.fb.control(this.stakeholder.managers), - isUpload: this.fb.control(this.stakeholder.isUpload), - logoUrl: this.fb.control(this.stakeholder.logoUrl), - }); - this.initPhoto(); - this.subscriptions.push(this.stakeholderFb.get('type').valueChanges.subscribe(value => { - this.onTypeChange(value); - })); - this.subscriptions.push(this.stakeholderFb.get('logoUrl').valueChanges.subscribe(value => { - if(value) { - this.photo = value; - } else { - this.photo = 'assets/common-assets/curator-default.png'; - } - })); - if (!isDefault) { - this.stakeholderFb.setControl('defaultId', this.fb.control(this.stakeholder.defaultId, Validators.required)); - } + this.editStakeholderComponent.init(this.stakeholder, this.stakeholders, this.defaultStakeholders, isDefault, this.index === -1); if (this.index !== -1) { - if (this.stakeholderFb.value.type) { - setTimeout(() => { - this.stakeholderFb.get('type').disable(); - }, 0); - } else { - setTimeout(() => { - this.stakeholderFb.get('type').enable(); - }, 0); - } - this.editStakeholderModal.okButtonText = 'Save Changes'; - } else { - setTimeout(() => { - this.stakeholderFb.get('type').enable(); - }, 0); - this.editStakeholderModal.okButtonText = 'Create'; - } - this.uploadError = null; - this.deleteCurrentPhoto = false; - this.editStakeholderModal.cancelButtonText = 'Cancel'; - this.editStakeholderModal.okButtonLeft = false; - this.editStakeholderModal.alertMessage = false; - this.editStakeholderModal.open(); - } - - public save() { - if (this.file) { - this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.stakeholder.alias), this.file).subscribe(res => { - this.deletePhoto(); - this.removePhoto(); - this.stakeholderFb.get('logoUrl').setValue(res.filename); - this.saveStakeholder(); - }, error => { - this.uploadError = "An error has been occurred during upload your image. Try again later"; - this.saveStakeholder(); - }); - } else if (this.deleteCurrentPhoto) { - this.deletePhoto(); - this.saveStakeholder(); - } else { - this.saveStakeholder(); - } - } - - public saveStakeholder() { - if (this.index === -1) { - if (!this.stakeholderFb.value.isDefault) { - let stakeholder = this.defaultStakeholders.find(value => value._id === this.stakeholderFb.value.defaultId); - this.stakeholderFb.setValue(this.stakeholderUtils.createFunderFromDefaultProfile(this.stakeholderFb.value, - (stakeholder ? stakeholder.topics : []))); - } - this.removePhoto(); - this.stakeholderService.buildStakeholder(this.properties.monitorServiceAPIURL, - this.stakeholderFb.value).subscribe(stakeholder => { + this.callback = (stakeholder: Stakeholder) => { if (stakeholder.defaultId === null) { this.defaultStakeholders.push(stakeholder); } else { this.stakeholders.push(stakeholder); } - }); + }; + this.editStakeholderModal.okButtonText = 'Save Changes'; } else { - this.stakeholderFb.get('type').enable(); - this.stakeholderService.saveElement(this.properties.monitorServiceAPIURL, this.stakeholderFb.value).subscribe(stakeholder => { + this.callback = (stakeholder: Stakeholder) => { if (stakeholder.defaultId == null) { this.defaultStakeholders[this.index] = stakeholder; } else { this.stakeholders[this.index] = stakeholder; } - }); + }; + this.editStakeholderModal.okButtonText = 'Create'; } + this.editStakeholderModal.cancelButtonText = 'Cancel'; + this.editStakeholderModal.okButtonLeft = false; + this.editStakeholderModal.alertMessage = false; + this.editStakeholderModal.open(); } public deleteStakeholderOpen(stakeholder: Stakeholder) { @@ -361,64 +249,4 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy { public isAdministrator(): boolean { return Session.isPortalAdministrator(this.user); } - - public deletePhoto() { - if (this.stakeholder.logoUrl) { - this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.stakeholder.logoUrl).subscribe(); - } - } - - fileChangeEvent(event) { - if (event.target.files && event.target.files[0]) { - this.file = event.target.files[0]; - if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') { - this.uploadError = 'You must choose a file with type: image/png or image/jpeg!'; - this.stakeholderFb.get('isUpload').setValue(false); - this.removePhoto(); - } else if (this.file.size > this.maxsize) { - this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.'; - this.stakeholderFb.get('isUpload').setValue(false); - this.removePhoto() - } else { - this.uploadError = null; - const reader = new FileReader(); - reader.readAsDataURL(this.file); - reader.onload = () => { - this.photo = reader.result; - this.stakeholderFb.get('isUpload').setValue(true); - }; - } - } - } - - initPhoto() { - if (this.stakeholderFb.get('logoUrl').value) { - if (!this.stakeholderFb.value.isUpload) { - this.photo = this.stakeholderFb.get('logoUrl').value; - } else { - this.photo = this.properties.utilsService + "/download/" + this.stakeholderFb.get('logoUrl').value; - } - } else { - this.photo = 'assets/common-assets/curator-default.png'; - } - } - - removePhoto() { - if (typeof document != 'undefined') { - (document.getElementById("photo")).value = ""; - } - this.initPhoto(); - this.file = null; - } - - remove() { - this.stakeholderFb.get('isUpload').setValue(false); - if (this.file) { - this.removePhoto(); - } - if (this.stakeholder.isUpload) { - this.stakeholderFb.get('logoUrl').setValue(null); - this.deleteCurrentPhoto = true; - } - } } diff --git a/src/app/manageStakeholders/manageStakeholders.module.ts b/src/app/manageStakeholders/manageStakeholders.module.ts index 583d224..04e2576 100644 --- a/src/app/manageStakeholders/manageStakeholders.module.ts +++ b/src/app/manageStakeholders/manageStakeholders.module.ts @@ -9,6 +9,7 @@ import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module"; import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module"; import {ReactiveFormsModule} from "@angular/forms"; import {AdminDashboardGuard} from "../utils/adminDashboard.guard"; +import {EditStakeholderModule} from "../manageStakeholder/edit-stakeholder/edit-stakeholder.module"; @NgModule({ declarations: [ManageStakeholdersComponent], @@ -19,7 +20,8 @@ import {AdminDashboardGuard} from "../utils/adminDashboard.guard"; InputModule, LoadingModule, AlertModalModule, - ReactiveFormsModule + ReactiveFormsModule, + EditStakeholderModule ], providers: [ AdminDashboardGuard, PreviousRouteRecorder, diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html index 0df86d2..2eecaca 100644 --- a/src/app/topic/topic.component.html +++ b/src/app/topic/topic.component.html @@ -305,7 +305,7 @@
    -
    +
    li > a, .uk-dropdown-nav > li:hover > a { + padding: 4px 10px; + color: var(--text-color); + font-weight: 400 !important; + font-size: var(--small-font-size); +} + +.uk-dropdown .uk-nav-divider { + margin: 4px 10px; + border-color: var(--secondary-color); +} diff --git a/src/assets/dashboard-theme/input.css b/src/assets/dashboard-theme/input.css new file mode 100644 index 0000000..1f86274 --- /dev/null +++ b/src/assets/dashboard-theme/input.css @@ -0,0 +1,58 @@ +.uk-form-label { + font-size: var(--font-size); + font-family: "Roboto", sans-serif; + color: currentColor; +} + +.uk-form-hint { + font-family: "Roboto", sans-serif; + color: currentColor; +} + +.input-box { + background-color: #FAFAFA; + border: 1px solid transparent; + padding: 16px; + border-radius: 4px; + color: currentColor; + height: auto; +} + +.input-box:focus { + color: currentColor; +} + +.input-box:not(.uk-form-danger) { + border-color: #D1D1D1 !important; +} + +.input-box::placeholder { + color: rgba(122, 122, 122, 0.7); +} + +.input-box .mat-select { + font-family: "Open Sans", sans-serif; + font-size: var(--font-size); +} + +.input-box .mat-select-value { + color: currentColor; +} + +.input-box .mat-form-field-infix { + border: none !important; + line-height: 30px; + padding: 0 !important; +} + +.input-box .mat-form-field-appearance-legacy .mat-form-field-wrapper { + padding: 0 !important; +} + +.input-box .mat-form-field-appearance-legacy .mat-form-field-underline { + display: none; +} + +.input-box .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper { + display: none; +} diff --git a/src/assets/dashboard-theme/main.css b/src/assets/dashboard-theme/main.css new file mode 100644 index 0000000..af55d59 --- /dev/null +++ b/src/assets/dashboard-theme/main.css @@ -0,0 +1,7 @@ +@import "variables.css"; +@import "text.css"; +@import "structure.css"; +@import "input.css"; +@import "tabs-pills.css"; +@import "card.css"; +@import "dropdowns.css"; diff --git a/src/assets/dashboard-theme/structure.css b/src/assets/dashboard-theme/structure.css new file mode 100644 index 0000000..4fa9f58 --- /dev/null +++ b/src/assets/dashboard-theme/structure.css @@ -0,0 +1,111 @@ +:root { + --sidebar-width: 320px; + --sidebar-mini-width: 130px; + --sidebar-font-size: 14px; + --header-height: 100px; + --background-color: #F9FBFC; +} + +#sidebar_main .badge { + height: 59px; + position: absolute; + top: 0; + left: -5px; + z-index: 1; + background-color: transparent; + display: block !important; +} + +#sidebar_main #sidebar_content { + width: var(--sidebar-width); + position: fixed; + height: 100%; + top: 0; + bottom: 0; + left: 0; + z-index: 981; + background: #fff; +} + +.sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle { + left: calc(var(--sidebar-mini-width) + 0px); + +} + +.sidebar_main_swipe #sidebar_switcher_toggle { + left: calc(var(--sidebar-width) + 0px); +} + +#sidebar_main .menu_section > ul > li > a { + font-size: var(--sidebar-font-size); + color: rgba(0, 0, 0, .7); +} + +#sidebar_main .menu_section > ul > li > a:hover, #sidebar_main .menu_section > ul li.current_section > a { + color: var(--secondary-color); +} + +#sidebar_switcher_toggle { + top: 320px !important; + position: fixed; + background: #ffffff; + border: 1px solid var(--portal-dark-color); + border-left: 0; + cursor: pointer; + padding: 0 4px; + width: 10px; + height: 66px; + z-index: 981; +} + +.sidebar_main_swipe #page_content { + padding-left: var(--sidebar-width); + padding-top: var(--header-height); + transition: 0.5s; +} + +/*Sidebar close*/ +.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #page_content { + padding-left: 0; + transition: 0.5s; +} + +.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_main #sidebar_content { + display: none; + width: 0; +} + +.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_switcher_toggle { + left: 10px; +} + +/*Sidebar mini*/ +.sidebar_main_swipe.sidebar_mini #page_content { + padding-left: var(--sidebar-mini-width); + transition: 0.5s; +} + +.sidebar_mini #sidebar_main #sidebar_content { + width: var(--sidebar-mini-width); +} + +#sidebar_main .menu_section > ul > li > a { + display: block; +} + +#sidebar_main #sidebar_content { + border-right: 1px solid var(--portal-dark-color); +} + +#page_content { + min-height: calc(100vh - var(--header-height)); + background-color: var(--background-color); +} + +#page_content_inner { + padding: 50px 50px 100px 50px; +} + +navbar > * { + background-color: var(--background-color); +} diff --git a/src/assets/dashboard-theme/tabs-pills.css b/src/assets/dashboard-theme/tabs-pills.css new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/dashboard-theme/text.css b/src/assets/dashboard-theme/text.css new file mode 100644 index 0000000..e810fce --- /dev/null +++ b/src/assets/dashboard-theme/text.css @@ -0,0 +1,20 @@ +:root { + --font-size: 16px; + --text-color: #212121; + --small-font-size: 14px; + --large-font-size: 18px; +} + +body { + color: var(--text-color); + font-size: var(--font-size); + font-family: "Open Sans", sans-serif; +} + +.uk-text-small { + font-size: var(--small-font-size); +} + +.uk-text-large { + font-size: var(--large-font-size); +} diff --git a/src/assets/dashboard-theme/variables.css b/src/assets/dashboard-theme/variables.css new file mode 100644 index 0000000..844b424 --- /dev/null +++ b/src/assets/dashboard-theme/variables.css @@ -0,0 +1,24 @@ +:root { + --portal-main-color: #8DCA26; + --portal-main-contrast: white; + --portal-dark-color: #7c9144; + --primary-color: var(--theme-primary-color); + --secondary-color: var(--theme-secondary-color); + --contrast-color: white; + + /* Portable Variables*/ + --theme-primary-color: #222080; + --theme-secondary-color: #4686E5; + --openaire-main-color: #313179; + --explore-portal-color: #D95F2D; + --provide-portal-color: #37C7E9; + --monitor-portal-color: #8DCA26; + --connect-portal-color: #EBB13E; + --develop-portal-color: #DA65AB; + + --explore-portal-lower-tone: #a0462c; + --provide-portal-lower-tone: #3A8FA3; + --monitor-portal-lower-tone: #7c9144; + --connect-portal-lower-tone: #b48536; + --develop-portal-lower-tone: #9f4e7e; +} diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css index c95f469..afb412e 100644 --- a/src/assets/monitor-custom.css +++ b/src/assets/monitor-custom.css @@ -1,34 +1,3 @@ -:root { - --portal-main-color: #4686E5; /*#8DCA26;*/ - --portal-main-contrast: white; - --portal-dark-color: #004494;/*#7c9144;*/ - - --openaire-main-color: #313179; - - --explore-portal-color: #D95F2D; - --provide-portal-color: #37C7E9; - --monitor-portal-color: #8DCA26; - --connect-portal-color: #EBB13E; - --develop-portal-color: #DA65AB; - - --explore-portal-lower-tone: #a0462c; - --provide-portal-lower-tone: #3A8FA3; - --monitor-portal-lower-tone: #7c9144; - --connect-portal-lower-tone: #b48536; - --develop-portal-lower-tone: #9f4e7e; - - - /* Dashboard variables*/ - --sidebar-width: 320px; - --sidebar-mini-width: 130px; - --sidebar-font-size: 14px; - --header-height: 70px; - --primary-color: #0d47a1; - --secondary-color: #1CA9D5; - - --monitor-header-menu-height: 100px; -} - .refresh-iframe { background-color: rgba(0, 0, 0, 0.50); position: absolute; diff --git a/src/assets/new.css b/src/assets/new.css index 296e29c..fdb6878 100644 --- a/src/assets/new.css +++ b/src/assets/new.css @@ -1,32 +1,12 @@ :root { - --portal-main-color: #4686E5; /*#8DCA26;*/ + --portal-main-color: #8DCA26; --portal-main-contrast: white; - --portal-dark-color: #004494;/*#7c9144;*/ + --portal-dark-color: #7c9144; +} - --openaire-main-color: #313179; - - --explore-portal-color: #D95F2D; - --provide-portal-color: #37C7E9; - --monitor-portal-color: #8DCA26; - --connect-portal-color: #EBB13E; - --develop-portal-color: #DA65AB; - - --explore-portal-lower-tone: #a0462c; - --provide-portal-lower-tone: #3A8FA3; - --monitor-portal-lower-tone: #7c9144; - --connect-portal-lower-tone: #b48536; - --develop-portal-lower-tone: #9f4e7e; - - - /* Dashboard variables*/ - --sidebar-width: 320px; - --sidebar-mini-width: 130px; - --sidebar-font-size: 14px; - --header-height: 70px; - --primary-color: #0d47a1; - --secondary-color: #1CA9D5; - - --monitor-header-menu-height: 100px; +.stakeholderPage { + --primary-color: var(--theme-secondary-color); + --secondary-color: var(--theme-primary-color); } /*Stakeholder Specific*/ .publicationsSearchForm{ @@ -48,16 +28,6 @@ } /*General*/ -#sidebar_main #sidebar_content{ - width:var(--sidebar-width); - position: fixed; - height: 100%; - top: 0; - bottom: 0; - left: 0; - z-index: 981; - background: #fff; -} .stakeholderPage { background: #F9FBFC !important; } @@ -83,7 +53,7 @@ top: 320px !important; position: fixed; height: 36px; - background-color: var(--portal-main-color); + background-color: var(--secondary-color); border-radius: 4px 0 0 4px; cursor: pointer; padding: 0 2px; @@ -92,96 +62,20 @@ /*z-index: 981;*/ right: 0; } -.sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle{ - left:calc( var(--sidebar-mini-width) + 0px); - -} -.sidebar_main_swipe #sidebar_switcher_toggle{ - left:calc( var(--sidebar-width) + 0px); -} -#sidebar_switcher_toggle { - top: 320px !important; - position: fixed; - background: #fff; - background-color: rgb(255, 255, 255); - border: 1px solid var(--portal-dark-color); - border-left: 0px ; - cursor: pointer; - padding: 0 4px; - width:10px; - height: 66px; - z-index: 981; -} /*Sidebar*/ -.badge { - height: 59px; - position: absolute; - top: 0; - left: -5px; - z-index: 1; - background-color: transparent; - display: block !important; -} /*Style*/ - - -#sidebar_main .menu_section > ul li > a { - font-size: var(--sidebar-font-size); - color: rgba(0,0,0,.7); -} - -.dashboard #sidebar_main .menu_section > ul > li > a:hover, #sidebar_main .menu_section > ul li.current_section > a { - color: var(--portal-main-color); -} /*#sidebar_main .menu_section > ul li.current_section > a {*/ /* font-size: var(--sidebar-font-size);*/ /* color: rgba(0,0,0,.7);*/ /*}*/ -.sidebar_main_swipe #page_content{ - padding-left: var(--sidebar-width); - transition: 0.5s; -} - -/*Sidebar close*/ -.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #page_content{ - padding-left:0; - transition: 0.5s; - -} -.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_main #sidebar_content { - display: none; - width:0; - -} -.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_switcher_toggle{ - left: 10px; -} -/*Sidebar mini*/ -.sidebar_main_swipe.sidebar_mini #page_content{ - padding-left:var(--sidebar-mini-width); - transition: 0.5s; - -} - -.sidebar_mini #sidebar_main #sidebar_content { - width: var(--sidebar-mini-width); - -} -#sidebar_main .menu_section > ul > li > a { - display: block; -} - -.dashboard #sidebar_main #sidebar_content{ - border-right: 1px solid var(--portal-dark-color); -} /*Sidebar Header logo */ #sidebar_main .sidebar_main_header .portalLogo{ background: url("/assets/logo-large-monitor.png") no-repeat; background-size: contain ; margin-left: 35px; margin-top: 5px; - height:50px; + height:50px; } .sidebar_mini #sidebar_main .sidebar_main_header .portalLogo{ @@ -243,7 +137,7 @@ border: 0 transparent !important; } .categoriesTabs.uk-tab > li.uk-active > a,.categoriesTabs.uk-tab > li > a:focus, .categoriesTabs.uk-tab > li > a:hover { - color: var(--portal-main-color) !important + color: var(--secondary-color) !important } .categoriesTabs >li a{ font-size: 14px; @@ -268,8 +162,8 @@ .uk-subnav-pill.subCategoriesTabs > li.uk-active > a{ color: white; - border: 1px solid var(--portal-main-color); - background-color: var(--portal-main-color); + border: 1px solid var(--secondary-color); + background-color: var(--secondary-color); opacity: 1 ; } @@ -280,11 +174,11 @@ /*dashboard tabs*/ .categoriesTabs.uk-tab.admin > li.uk-active > a, .categoriesTabs.uk-tab.admin > li > a:focus, .categoriesTabs.uk-tab.admin > li > a:hover { - color: var(--portal-dark-color) !important + color: var(--primary-color) !important } .uk-subnav-pill.subCategoriesTabs.admin > li.uk-active > a{ - border: 1px solid var(--portal-dark-color); - background-color: var(--portal-dark-color); + border: 1px solid var(--primary-color); + background-color: var(--primary-color); } /* Section Tools*/ diff --git a/src/environments/environment.ts b/src/environments/environment.ts index cc93234..9a97089 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -49,13 +49,13 @@ export let properties: EnvProperties = { vocabulariesAPI: "https://dev-openaire.d4science.org/provision/mvc/vocabularies/", piwikBaseUrl: "https://analytics.openaire.eu/piwik.php?idsite=", piwikSiteId: "80", - registryUrl: 'http://mpagasas.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/registry/', + /*registryUrl: 'http://mpagasas.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/registry/', loginUrl: "http://mpagasas.di.uoa.gr:8180/dnet-login/openid_connect_login", userInfoUrl: "http://mpagasas.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=", - logoutUrl: 'http://mpagasas.di.uoa.gr:8180/dnet-login/openid_logout', - /*loginUrl: "http://dl170.madgik.di.uoa.gr:8180/dnet-login/openid_connect_login", + logoutUrl: 'http://mpagasas.di.uoa.gr:8180/dnet-login/openid_logout',*/ + loginUrl: "http://dl170.madgik.di.uoa.gr:8180/dnet-login/openid_connect_login", userInfoUrl: "http://dl170.madgik.di.uoa.gr:8180/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=", - logoutUrl: "https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",*/ + logoutUrl: "https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=", cookieDomain: ".di.uoa.gr", feedbackmail: "openaire.test@gmail.com", cacheUrl: "http://scoobydoo.di.uoa.gr:3000/get?url=", diff --git a/src/material.scss b/src/material.scss index 4008866..2e6485d 100644 --- a/src/material.scss +++ b/src/material.scss @@ -1,8 +1,19 @@ @import '~@angular/material/theming'; @include mat-core(); -$my-app-primary: mat-palette($mat-blue, 900); -$my-app-accent: mat-palette($mat-blue, 700); - +$primary-color: ( + 0: var(--primary-color), + contrast: ( + 50: var(--contrast-color) + ) +); +$secondary-color: ( + 0: var(--secondary-color), + contrast: ( + 50: var(--contrast-color) + ) +); +$my-app-primary: mat-palette($primary-color, 0); +$my-app-accent: mat-palette($secondary-color, 0); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent); @include angular-material-theme($my-app-theme); diff --git a/src/styles.css b/src/styles.css index 74e8234..5c5a5d9 100644 --- a/src/styles.css +++ b/src/styles.css @@ -8,14 +8,11 @@ /*@import "assets/theme-assets/css/themes/my_theme.min.css";*/ /* You can add global styles to this file, and also import other style files */ -@import "~@angular/material/prebuilt-themes/indigo-pink.css"; @import "assets/common-assets/common/theme.css"; @import "assets/common-assets/common/custom.css"; @import "assets/common-assets/library.css"; +@import "assets/dashboard-theme/main.css"; /*@import "assets/theme-assets/dashboard-custom.css";*/ /*@import "assets/monitor-custom.css";*/ @import "assets/new.css"; -@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); -@import "assets/common-assets/common/theme-changes.css"; -