diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts index d6c0fb7d7..1655dc40a 100644 --- a/dmp-frontend/src/app/app.component.ts +++ b/dmp-frontend/src/app/app.component.ts @@ -64,12 +64,31 @@ export class AppComponent implements OnInit, AfterViewInit { ngAfterViewInit(): void { setTimeout(() => { this.sideNavSubscription = this.sidenavService.status().subscribe(isopen=>{ + const hamburger = document.getElementById('hamburger'); if(isopen){ //update value of hamburfer - document.getElementById('hamburger').classList.add('change'); + if(!hamburger){//try later + setTimeout(() => { + const hamburger = document.getElementById('hamburger'); + if(hamburger){ + hamburger.classList.add('change'); + } + }, 300); + }else{ + hamburger.classList.add('change'); + } this.sidenav.open() - }else{ - document.getElementById('hamburger').classList.remove('change'); + }else{//closed + if(!hamburger){//try later + setTimeout(() => { + const hamburger = document.getElementById('hamburger'); + if(hamburger){ + hamburger.classList.remove('change'); + } + }, 300); + }else{ + hamburger.classList.remove('change'); + } this.sidenav.close(); } diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts index 913ab6d1b..e093b543b 100644 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts +++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.ts @@ -388,7 +388,10 @@ export class GuidedTourComponent implements AfterViewInit, OnDestroy { } const scrollAdjustment = this.currentTourStep.scrollAdjustment ? this.currentTourStep.scrollAdjustment : 0; - const tourStepHeight = typeof this.tourStep.nativeElement.getBoundingClientRect === 'function' ? this.tourStep.nativeElement.getBoundingClientRect().height : 0; + let tourStepHeight = 0; + if (this.tourStep != null && this.tourStep.nativeElement != null && typeof this.tourStep.nativeElement.getBoundingClientRect === 'function') { + tourStepHeight = this.tourStep.nativeElement.getBoundingClientRect().height; + } const elementHeight = this.selectedElementRect.height + scrollAdjustment + tourStepHeight; if ((this.windowRef.nativeWindow.innerHeight - this.topOfPageAdjustment) < elementHeight) { diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html index 8cdbfaac0..c0a869bb5 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.html @@ -67,12 +67,12 @@ --> - + - + + [formControl]="this.form.get('title')" required> @@ -145,6 +145,7 @@ [form]="form.get('fields').get(''+i)" [showOrdinal]="false" [indexPath]="indexPath + 'f' + i" [viewOnly]="viewOnly" [expandView]="hasFocus" + [canBeDeleted]="form.get('fields')['controls'].length !=1" (delete)="deleteField(i)"> diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts index 864770e50..69e75370c 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/composite-field/dataset-profile-editor-composite-field.component.ts @@ -32,6 +32,7 @@ import { CurrencyDataEditorModel } from '../../../admin/field-data/currency-data import { ValidationDataEditorModel } from '../../../admin/field-data/validation-data-editor-models'; import { DatasetProfileService } from '@app/core/services/dataset-profile/dataset-profile.service'; import { OrganizationsDataEditorModel } from '../../../admin/field-data/organizations-data-editor-models'; +import { EditorCustomValidators } from '../../custom-validators/editor-custom-validators'; @Component({ selector: 'app-dataset-profile-editor-composite-field-component', @@ -59,6 +60,7 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh viewStyleEnum = DatasetProfileFieldViewStyle; viewTypeEnum = ViewStyleType; + private myCustomValidators:EditorCustomValidators = new EditorCustomValidators(); constructor( private dialog: MatDialog, @@ -358,15 +360,15 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox) fieldForm.addControl('data', new WordListFieldDataEditorModel().buildForm()); - this.form.get('data').setValidators(this._atLeastOneElementListValidator('options')); - this.form.get('data').updateValueAndValidity(); + fieldForm.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('options')); + fieldForm.get('data').updateValueAndValidity(); break; case this.viewTypeEnum.Other: fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox) fieldForm.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE - fieldForm.get('data').setValidators(this._atLeastOneElementListValidator('autoCompleteSingleDataList')); - + fieldForm.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList')); + fieldForm.get('data').updateValueAndValidity(); break; case this.viewTypeEnum.InternalDmpEntities: @@ -380,6 +382,9 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh case this.viewTypeEnum.RadioBox: fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox) fieldForm.addControl('data', new RadioBoxFieldDataEditorModel().buildForm()); + fieldForm.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('options')); + fieldForm.get('data').updateValueAndValidity(); + break; case this.viewTypeEnum.TextArea: fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.TextArea) @@ -416,7 +421,7 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh break; case this.viewTypeEnum.Organizations: fieldForm.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.Organizations) - this.form.addControl('data', new OrganizationsDataEditorModel().buildForm()); + fieldForm.addControl('data', new OrganizationsDataEditorModel().buildForm()); // this.form.addControl('data', new OrganizationsDataEditorModel().buildForm()) // fieldForm.addControl('data', new DatasetsAutoCompleteFieldDataEditorModel().buildForm()); //TODO break; @@ -436,7 +441,9 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh (this.form.get('fields')).push(fieldForm); - // fieldForm.updateValueAndValidity(); + fieldForm.get('viewStyle').get('renderStyle').updateValueAndValidity(); + fieldForm.get('data').updateValueAndValidity(); + } @@ -488,17 +495,17 @@ export class DatasetProfileEditorCompositeFieldComponent implements OnInit, OnCh // } - private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{ - return (control: AbstractControl): ValidationErrors | null=>{ + // private _atLeastOneElementListValidator(arrayToCheck): ValidatorFn{ + // return (control: AbstractControl): ValidationErrors | null=>{ - const fa = control.get(arrayToCheck) as FormArray; + // const fa = control.get(arrayToCheck) as FormArray; - if(fa.length === 0){ - return {emptyArray: true}; - } - return null; - } - } + // if(fa.length === 0){ + // return {emptyArray: true}; + // } + // return null; + // } + // } calculateLabelWidth(numbering: string){ diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html index b36e10663..d221f961b 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.html @@ -12,7 +12,7 @@
  • visibility
  • -
  • +
  • delete
  • diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts index 111c98f42..4cef20a53 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/field/dataset-profile-editor-field.component.ts @@ -60,7 +60,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements @Input() expandView: boolean = true; - + @Input() canBeDeleted:boolean = true; @Output() delete = new EventEmitter(); @@ -425,7 +425,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox) this.form.addControl('data', new WordListFieldDataEditorModel().buildForm()); - this.form.get('data').setValidators(this.myCustomValidators._atLeastOneElementListValidator('options')); + this.form.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('options')); this.form.get('data').updateValueAndValidity(); break; @@ -433,7 +433,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.ComboBox) this.form.addControl('data', new AutoCompleteFieldDataEditorModel().buildForm()); //TODO SEE - this.form.get('data').setValidators(this.myCustomValidators._atLeastOneElementListValidator('autoCompleteSingleDataList')); + this.form.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('autoCompleteSingleDataList')); this.form.get('data').updateValueAndValidity(); @@ -450,7 +450,7 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements this.form.get('viewStyle').get('renderStyle').setValue(DatasetProfileFieldViewStyle.RadioBox) this.form.addControl('data', new RadioBoxFieldDataEditorModel().buildForm()); - this.form.get('data').setValidators(this.myCustomValidators._atLeastOneElementListValidator('options')); + this.form.get('data').setValidators(this.myCustomValidators.atLeastOneElementListValidator('options')); this.form.get('data').updateValueAndValidity(); break; @@ -504,6 +504,10 @@ export class DatasetProfileEditorFieldComponent extends BaseComponent implements this.form.addControl('data', new ValidationDataEditorModel().buildForm()); break; } + + this.form.get('data').updateValueAndValidity(); + this.form.get('viewStyle').get('renderStyle').updateValueAndValidity(); + this.form.updateValueAndValidity(); setTimeout(() => { //TODO this.showPreview = true; }); diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts index d3a36d010..a7005e339 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section-fieldset/dataset-profile-editor-section-fieldset.component.ts @@ -130,6 +130,8 @@ export class DatasetProfileEditorSectionFieldSetComponent extends BaseComponent if(el){ el.scrollIntoView({behavior: "smooth"}); } + }else{//scroll on top + window.scrollTo({top:0, behavior:'smooth'}); } } diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html index 74f55f3f0..2ce1a73b2 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/editor/components/section/dataset-profile-editor-section.component.html @@ -13,7 +13,8 @@
    {{'DATASET-PROFILE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}
    + formControlName="title" required> + {{'GENERAL.VALIDATION.REQUIRED' | translate}} +
    @@ -127,7 +128,7 @@
    1.1 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME'| translate}} *
    {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-NAME-HINT'| translate}}
    - {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -139,7 +140,7 @@
    {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-DESCRIPTION-HINT'| translate}}
    - {{'GENERAL.VALIDATION.REQUIRED' @@ -153,7 +154,7 @@
    1.3 {{'DATASET-PROFILE-EDITOR.STEPS.GENERAL-INFO.DATASET-TEMPLATE-LANGUAGE'| translate}} *
    - + {{ lang.name }} @@ -181,7 +182,7 @@
    --> - +
    @@ -200,7 +201,8 @@ (removeEntry)="onRemoveEntry($event)" [itemSelected]="selectedTocEntry" [viewOnly]="viewOnly" - (dataNeedsRefresh)="onDataNeedsRefresh()"> + (dataNeedsRefresh)="onDataNeedsRefresh()" + [colorizeInvalid]="colorizeInvalid">
    @@ -224,6 +226,7 @@
    {{'DATASET-PROFILE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}
    + {{'GENERAL.VALIDATION.REQUIRED' | translate}} @@ -402,7 +405,7 @@
    - + @@ -440,12 +443,20 @@
    - + - @@ -33,10 +33,14 @@
    - - {{parentLink.subEntries?.length}} - + + + priority_high + + {{parentLink.subEntries?.length}} + + + [parentRootId]="parentRootId" + [colorizeInvalid]="colorizeInvalid"> diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts index 60493a298..058989859 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents-internal-section/table-of-contents-internal-section.ts @@ -1,7 +1,7 @@ import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop'; import { DOCUMENT } from '@angular/common'; import { Component, EventEmitter, Inject, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'; -import { FormArray } from '@angular/forms'; +import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; import { BaseComponent } from '@common/base/base.component'; import { Foo, ToCEntry, ToCEntryType } from '../table-of-contents-entry'; @@ -31,6 +31,8 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent @Input() draggingItemId: string; @Input() parentRootId: string; + @Input() colorizeInvalid:boolean = false; + @Input() viewOnly: boolean; // @Input() dropListGroup: Set = new Set(); @Input() dropListGroup: string[]; @@ -229,4 +231,78 @@ export class DatasetProfileTableOfContentsInternalSection extends BaseComponent return tocEntryFound? tocEntryFound: null; } + + + + colorError():boolean{ + + if(!this.colorizeInvalid) return false; + + const form = this.parentLink.form; + if(!form || form.valid || !form.touched) return false; + + const allFieldsAreTouched = this.allFieldsAreTouched(form); + + //fieldset may have errros that are inside its controls and not in the fieldsetFormGroup + if(this.parentLink.type === this.tocEntryType.FieldSet && allFieldsAreTouched) return true; + + if(form.errors && allFieldsAreTouched) return true; + + + + //checking form controls if have errors + let hasErrors = false; + + if(allFieldsAreTouched){ + if(form instanceof FormGroup){ + const formGroup = form as FormGroup; + + const controls = Object.keys(formGroup.controls); + + controls.forEach(control=>{ + if(formGroup.get(control).errors){ + hasErrors = true; + } + }) + + } + } + + return hasErrors; + } + + + allFieldsAreTouched(aControl:AbstractControl){//auto na testaroume + + if(!aControl|| aControl.untouched) return false; + + if(aControl instanceof FormControl){ + return aControl.touched; + }else if(aControl instanceof FormGroup){ + const controlKeys = Object.keys((aControl as FormGroup).controls); + let areAllTouched = true; + controlKeys.forEach(key=>{ + if(!this.allFieldsAreTouched(aControl.get(key))){ + areAllTouched = false; + } + }) + // const areAllTouched = controlKeys.reduce((acc, key)=>acc && this._allFieldsAreTouched(aControl.get(key)), true); + return areAllTouched; + + }else if(aControl instanceof FormArray){ + const controls = (aControl as FormArray).controls; + // const areAllTouched = controls.reduce((acc, control)=>acc && this._allFieldsAreTouched(control), true); + let areAllTouched = true; + // controls.reduce((acc, control)=>acc && this._allFieldsAreTouched(control), true); + controls.forEach(control=>{ + if(!this.allFieldsAreTouched(control)){ + areAllTouched = false; + } + }); + return areAllTouched; + } + + + return false; + } } \ No newline at end of file diff --git a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html index ae8b0f26d..00ff6e9ae 100644 --- a/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html +++ b/dmp-frontend/src/app/ui/admin/dataset-profile/table-of-contents/table-of-contents.html @@ -22,6 +22,7 @@ [draggingItemId]="draggingItemId" [parentRootId]="ROOT_ID" style="padding-right: 1em;" + [colorizeInvalid]="colorizeInvalid" > + + + + + + + + + +
    + + + +
    +
    + +
    +
    + +
    +
    + + + + + +
    +
    + +
    +
    + +
    +
    + + + +
    +
    + +
    +
    + +
    +
    + + + + + +
    +
    +
    + +
    + DMP editor + DMP outputs + Dataset editor + Validated DMP + Finalized DMP +
    +
    +
    +
    + +
    + +
    +
    Argos in the OpenAIRE ecosystem
    +
    + +

    + Argos is hooked on the OpenAIRE ecosystem comprising a diverse set of services and tools for Open + Science and Scholarly Communication, from technical to educational and consultative in nature. + OpenAIRE services and tools are provided for immediate consumption by end-users, i.e. researchers, + research communities, research performing or funding organizations and policymakers. Moreover, + OpenAIRE services are exploitable by software engineers. Argos integrates other OpenAIRE services to + maximise efficiency of operations in Open and FAIR ecosystems and to make connections that add + value in Open Science at global scale. OpenAIRE services that Argos connects to are: +

    + +
    +
    +
    + + + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +
    +
    +
    + +

    Useful Resources

    + + + + +

    More details on ARGOS as registered in the OpenAIRE services catalogue is available here: http://catalogue.openaire.eu/service/openaire.argos. @@ -168,6 +484,8 @@ + + diff --git a/dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png b/dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png new file mode 100644 index 000000000..6d1fe7742 Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/3_dmp_editor.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png b/dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png new file mode 100644 index 000000000..f1a699edd Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/4_dataset_editor.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/6_validated_is.png b/dmp-frontend/src/assets/splash/assets/img/6_validated_is.png new file mode 100644 index 000000000..4464c9d5b Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/6_validated_is.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png b/dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png new file mode 100644 index 000000000..a9a15c7e6 Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/8_finalized_is.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/dmp_out.png b/dmp-frontend/src/assets/splash/assets/img/dmp_out.png new file mode 100644 index 000000000..8685c528e Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/dmp_out.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png b/dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png new file mode 100644 index 000000000..d774e7c29 Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/lifecycle_full_color.png differ diff --git a/dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png b/dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png new file mode 100644 index 000000000..1e013eb86 Binary files /dev/null and b/dmp-frontend/src/assets/splash/assets/img/openaire_ecosystem.png differ diff --git a/dmp-frontend/src/assets/splash/css/styles.css b/dmp-frontend/src/assets/splash/css/styles.css index 345f8aaf1..4fdd15185 100644 --- a/dmp-frontend/src/assets/splash/css/styles.css +++ b/dmp-frontend/src/assets/splash/css/styles.css @@ -150,11 +150,15 @@ p a { color: #212121; } -.title-1, .title-2, .title-3, .title-4 { +.title-1, .title-2, .title-3, .title-4, .title-5 { text-align: left; font-size: 2.37rem; font-family: 'Roboto', sans-serif; } +.title-5{ + color: #129D99; + font: normal normal 300 27px/35px Roboto; +} .page-title { text-align: center; @@ -379,3 +383,220 @@ hr { .ext-link-icon { margin-left: .2rem; } + + +/* ABOUT HOW-IT-WORKDS PAGE REDESIGN */ + +.red-dot{ + width: 27px; + height: 27px; + z-index: 20; + border: 3px solid #ee254091; + position: absolute; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} +.inner-red-dot{ + background-color: #EE2540; + width: 19px; + height: 19px; + border-radius: 50%; +} + +.tooltip >.tooltip-inner { + padding: 2em; + background-color: #FFF; + color: black; + box-shadow: 0px 3px 6px #0000001A; + text-align: start; + max-width: 25em; +} +.tooltip .show{ + opacity: 1 !important; +} +.tooltip h2{ + color: #23BCBA; + font-size: 1.3rem; + font-weight: bold; + line-height: 2rem; +} + +.tooltip.bs-tooltip-top .arrow:before { +border-top-color: #fff +} +.tooltip.bs-tooltip-right .arrow:before { +border-right-color: #fff; +} +.tooltip.bs-tooltip-left .arrow:before { +border-left-color: #fff; +} +.tooltip.bs-tooltip-bottom .arrow:before { +border-bottom-color: #fff; +} + +.tooltip.show { + opacity: 1 !important; +} + +.image-coloured { + width: 100%; + height: auto; + display: block; + z-index: 1; + position: absolute; + left: 0; + top: 0px; + clip-path: polygon(0% 0%); + opacity: 0; + transition: opacity 200ms 50ms ease-in-out; +} + +.image-grey { + width: 100%; + height: auto; + display: block; + z-index: 0; + filter: grayscale(100%); +} + +.clip-draft{ + clip-path:polygon(41.84% 0.0%, 40.13% 46.41%, 40.90% 100%, 0.0% 100.0%, 0.0% 0.0%); +} +.clip-validated{ + clip-path: polygon(41.84% 0%, 40.13% 46.41%, 40.9% 100%, 68.32% 100.0%, 68.32% 0%); +} +.clip-finalized{ + clip-path: polygon(58.86% 0.0%, 58.74% 100.0%, 88.65% 100.0%, 88.65% 0.0%); +} +.clip-dmp{ + clip-path: polygon(80.26% 0.0%, 80.13% 100.0%, 100.00% 100.0%, 100.0% 0.0%); +} + +/* .preface-img{ + width: 100%; height: auto; display: block; z-index: 2; + position: absolute; + top:0; + left: 0; + opacity: 1; + filter: grayscale(100%); + + transition-property: opacity; + transition-duration: 300ms; + transition-delay: 50ms; + transition-timing-function: ease-in; +} */ + + + +.options-menu{ + box-shadow: 0px 6px 15px #0000001A; + border-radius: 36px; + padding: 3.2em 4.1em !important; + min-height: 30em; +} +/* First level of tabs */ +.options-menu .nav-tabs{ + border-color: transparent !important; + color: #212121; + margin-bottom: 1.2em; +} +.options-menu .nav-tabs .nav-item .nav-link{ + font-weight: normal; + border-radius: 0px !important; + padding: 0.2rem 0rem !important; +} +.options-menu .nav-tabs .nav-item:first-child .nav-link{ + margin-left: 0px; +} + +.options-menu .nav-tabs .nav-link.active{ + font-weight: bold; + border-left:0px!important; + border-top:0px !important; + border-right:0px !important; +} + +.options-menu .nav-tabs .nav-link:hover:not(.active){ + border-color: transparent !important; +} +.options-menu .nav-tabs .nav-link{ + opacity: 0.5; + transition: opacity 200ms 50ms ease-out; +} +.options-menu .nav-tabs .nav-link:hover{ + color: #212121; +} +.options-menu .nav-tabs .nav-link.active{ + border-bottom: 3px solid black !important; + opacity: 1; +} + + +/* nested tabs */ +.options-menu .nav-pills{ + margin-bottom: 1em; +} +.options-menu .nav-pills .nav-link{ + padding: .3rem 1.3rem !important; + font-weight: normal; + border-radius: 40px; + border: 1px solid #1A1A1A; + color: #1A1A1A; + opacity: 0.5; + /* transition: opacity 200ms 50ms ease-out; */ +} +.options-menu .nav-pills .nav-link.active{ + background-color: #129D99; + font-weight: bold; + color: #F9FBFC; + border: 1px solid transparent; + opacity: 1; +} +.options-menu .nav-pills .nav-item:first-child .nav-link{ + margin-left: 0px; +} + +.img-fragment-step{ + width: auto; + max-width: 100%; + max-height:23em; + position: absolute; + opacity: 0; + transition: opacity 200ms 50ms ease-out; +} + +.opacity-0{ + opacity: 0; +} +.opacity-1{ + opacity: 1; +} + +.nav-tab-inner-text{ + text-align: left; + font-size: 0.9em; + letter-spacing: 0px; + color: #1A1A1A; + opacity: 1; +} +.resources-list{ + margin-bottom: 9em; +} +/* .resources-list li::marker{ + font-size: 1.5em; + color: #23BCBA; +} */ +.blue-dot{ + width: 0.7em; + height: 0.7em; + background-color: #23BCBA; + border-radius: 50%; + +} +.img-sharp{ + image-rendering: -webkit-optimize-contrast; + image-rendering: -moz-crisp-edges; +} +/* END OF ABOUT HOW-IT-WORKDS PAGE REDESIGN */ \ No newline at end of file diff --git a/dmp-frontend/src/assets/splash/js/how-it-works.js b/dmp-frontend/src/assets/splash/js/how-it-works.js new file mode 100644 index 000000000..7aad01b62 --- /dev/null +++ b/dmp-frontend/src/assets/splash/js/how-it-works.js @@ -0,0 +1,105 @@ + +jQuery(function(){ + const $img_coloured = $('#img-coloured'); + const $img_preface = $('.preface-img'); + const $action_dots = $('[data-clip-mode]'); + const $lifecycle_img_container = $('#lifecycle-img-container'); + let current_mode = null; + + const mutationObserver = new MutationObserver(function(mutations) { + mutations.forEach(mutation=>{ + if(mutation.attributeName === 'class'){//class changed + const isActive = mutation.target.className.includes('active'); + const target_image_id = mutation.target.attributes['data-img-fragment'].value; + + if(target_image_id && target_image_id.length){ + + + //dummy fix clean all opacities + $('.img-fragment-step').each(function(){ + $(this).removeClass('opacity-1'); + }); + + + if(isActive){ + $("#"+target_image_id).addClass('opacity-1'); + } + } + + + if(mutation.target.id == 'multiple-navigation-1' && isActive){ //search children + + const $target_nav_links = $('.sub-navigation-button'); + $target_nav_links.removeClass('active'); + $target_nav_links.first().addClass('active'); + } + } + }) + }); + + + $(function () { + $('[data-toggle="tooltip"]').tooltip({html:true}) + }) + + $action_dots.on('mouseenter', function(){ + const mode = $(this).attr('data-clip-mode'); + current_mode = mode; + + $img_coloured.addClass(mode); + // $img_preface.addClass('opacity-0'); + $img_coloured.addClass('opacity-1'); + + $action_dots.each(function(){ + if($(this).attr('data-clip-mode') != mode){ + $(this).addClass('d-none'); + }; + }); + }); + $action_dots.on('mouseleave', function(){ + + }); + + + $lifecycle_img_container.on('mouseleave', function(){ + if(current_mode){ + const mode = current_mode; + + + //give animation time to complete + setTimeout(() => { + $img_coloured.removeClass(mode); + $action_dots.each(function(){ + $(this).removeClass('d-none'); + }); + }, 300); + $img_coloured.removeClass('opacity-1'); + // $img_preface.removeClass('opacity-0'); + + } + + current_mode = null; + }); + + + $("[data-img-fragment]").each(function(){ + const nodeElement = $(this)[0]; + + mutationObserver.observe(nodeElement ,{attributes:true}); + }); + + + $('.navigate-dot').on('click', function(){ + + const navigate_to = $(this).attr('data-navigate-to'); + + if(navigate_to){ + const $navigate_to = $('#'+navigate_to); + $navigate_to.click(); + const offset = $('#options-menu').offset().top - 120; + window.scrollTo({top:offset, behavior:'smooth'}) + } + }); + + +});