From 4c94b48b2bc0790217612445355c521de608405f Mon Sep 17 00:00:00 2001 From: apapachristou Date: Tue, 24 Nov 2020 19:04:37 +0200 Subject: [PATCH 1/8] Fix style on confirmation dialog button --- .../confirmation-dialog.component.html | 2 +- .../confirmation-dialog.component.scss | 44 ++++++++++++------- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html b/dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html index fe5bf1f3d..4247532d3 100644 --- a/dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html +++ b/dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.html @@ -24,7 +24,7 @@
-
+
diff --git a/dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.scss b/dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.scss index 65639a814..523155cb4 100644 --- a/dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.scss +++ b/dmp-frontend/src/common/modules/confirmation-dialog/confirmation-dialog.component.scss @@ -1,25 +1,25 @@ .confirmation-dialog { .confirmation { - padding-bottom: 20px; + padding-bottom: 20px; } .privacy-policy-names { - font-weight: 700; - padding: 1em; + font-weight: 700; + padding: 1em; } .close-btn { - margin-left: auto; - cursor: pointer; + margin-left: auto; + cursor: pointer; } .warn-text { - color: #f44336; + color: #f44336; } .cancel { - background-color: #aaaaaa; - color: #ffffff; + background-color: #aaaaaa; + color: #ffffff; } .cancel-btn { @@ -32,23 +32,23 @@ } .confirm { - background-color: #2cba6c; - color: #ffffff; + background-color: #2cba6c; + color: #ffffff; } .delete { - background-color: #ba2c2c; - color: #ffffff; + background-color: #ba2c2c; + color: #ffffff; } .checkbox-privacy { - padding: 0em 1em; + padding: 0em 1em; } .required-policy { - padding: 0em 1.2em 1em; - font-size: smaller; - color: #f44336; + padding: 0em 1.2em 1em; + font-size: smaller; + color: #f44336; } .submit-btn { @@ -69,4 +69,14 @@ background-color: #129d99; color: #ffffff; } - } + + .delete-btn { + min-width: 101px; + height: 43px; + background: #ffffff; + color: #ba2c2c; + border: 1px solid #ba2c2c; + border-radius: 30px; + opacity: 1; + } +} From c796745c733a063696aa1d1ad1e156c150042929 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Tue, 24 Nov 2020 19:05:32 +0200 Subject: [PATCH 2/8] Adds language --- dmp-frontend/src/assets/i18n/de.json | 8 ++++++++ dmp-frontend/src/assets/i18n/en.json | 8 ++++++++ dmp-frontend/src/assets/i18n/es.json | 8 ++++++++ dmp-frontend/src/assets/i18n/gr.json | 8 ++++++++ dmp-frontend/src/assets/i18n/sk.json | 8 ++++++++ dmp-frontend/src/assets/i18n/tr.json | 10 +++++++++- 6 files changed, 49 insertions(+), 1 deletion(-) diff --git a/dmp-frontend/src/assets/i18n/de.json b/dmp-frontend/src/assets/i18n/de.json index 8ba654889..0d73a61ad 100644 --- a/dmp-frontend/src/assets/i18n/de.json +++ b/dmp-frontend/src/assets/i18n/de.json @@ -1355,6 +1355,14 @@ "ADD-DATASET-DESCRIPTION": "Add Dataset", "ADD-DATASET": "Add Dataset", "ADD-DMP-DESCRIPTION": "Add DMP Description" + }, + "TOUR-GUIDE": { + "DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.", + "START-NEW": "Create your DMP with Start new DMP.", + "IMPORT-DMP": "You can import a DMP", + "START-WIZARD": "or create new in Argos.", + "DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.", + "NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process." } }, "USER-DIALOG": { diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 5a5c2fc47..a03460d98 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -1359,6 +1359,14 @@ "ADD-DATASET-DESCRIPTION": "Add Dataset", "ADD-DATASET": "Add Dataset", "ADD-DMP-DESCRIPTION": "Add DMP Description" + }, + "TOUR-GUIDE": { + "DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.", + "START-NEW": "Create your DMP with Start new DMP.", + "IMPORT-DMP": "You can import a DMP", + "START-WIZARD": "or create new in Argos.", + "DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.", + "NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process." } }, "USER-DIALOG": { diff --git a/dmp-frontend/src/assets/i18n/es.json b/dmp-frontend/src/assets/i18n/es.json index 61ae7e046..af0317f91 100644 --- a/dmp-frontend/src/assets/i18n/es.json +++ b/dmp-frontend/src/assets/i18n/es.json @@ -1355,6 +1355,14 @@ "ADD-DATASET-DESCRIPTION": "Añadir la descripción del dataset", "ADD-DATASET": "Añadir un dataset", "ADD-DMP-DESCRIPTION": "Añadir la descripción de un PGD" + }, + "TOUR-GUIDE": { + "DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.", + "START-NEW": "Create your DMP with Start new DMP.", + "IMPORT-DMP": "You can import a DMP", + "START-WIZARD": "or create new in Argos.", + "DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.", + "NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process." } }, "USER-DIALOG": { diff --git a/dmp-frontend/src/assets/i18n/gr.json b/dmp-frontend/src/assets/i18n/gr.json index f95ba004f..625d7da16 100644 --- a/dmp-frontend/src/assets/i18n/gr.json +++ b/dmp-frontend/src/assets/i18n/gr.json @@ -1355,6 +1355,14 @@ "ADD-DATASET-DESCRIPTION": "Προσθήκη Περιγραφής Συνόλου Δεδομένων", "ADD-DATASET": "Προσθήκη Συνόλου Δεδομένων", "ADD-DMP-DESCRIPTION": "Προσθήκη Περιγραφής Σχεδίου Διαχείρισης Δεδομένων " + }, + "TOUR-GUIDE": { + "DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.", + "START-NEW": "Create your DMP with Start new DMP.", + "IMPORT-DMP": "You can import a DMP", + "START-WIZARD": "or create new in Argos.", + "DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.", + "NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process." } }, "USER-DIALOG": { diff --git a/dmp-frontend/src/assets/i18n/sk.json b/dmp-frontend/src/assets/i18n/sk.json index 29b2a48dc..497c47f0e 100644 --- a/dmp-frontend/src/assets/i18n/sk.json +++ b/dmp-frontend/src/assets/i18n/sk.json @@ -1355,6 +1355,14 @@ "ADD-DATASET-DESCRIPTION": "Pridať súbor dát", "ADD-DATASET": "Pridať súbor dát", "ADD-DMP-DESCRIPTION": "Pridať opis DMP" + }, + "TOUR-GUIDE": { + "DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.", + "START-NEW": "Create your DMP with Start new DMP.", + "IMPORT-DMP": "You can import a DMP", + "START-WIZARD": "or create new in Argos.", + "DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.", + "NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process." } }, "USER-DIALOG": { diff --git a/dmp-frontend/src/assets/i18n/tr.json b/dmp-frontend/src/assets/i18n/tr.json index bc64b01a3..a262a2cca 100644 --- a/dmp-frontend/src/assets/i18n/tr.json +++ b/dmp-frontend/src/assets/i18n/tr.json @@ -1320,7 +1320,7 @@ "TITLE-DASHED": "-Dil-", "CLOSE": "Kapat" }, - "DAHBOARD": { + "DASHBOARD": { "MY-GRANTS": "Hibelerim", "GRANTS": "Hibeler", "MY-DMPS": "VYP'larım", @@ -1355,6 +1355,14 @@ "ADD-DATASET-DESCRIPTION": "Veri Seti Tanımı Ekle", "ADD-DATASET": "Veri Seti Ekle", "ADD-DMP-DESCRIPTION": "VYP Tanımı Ekle" + }, + "TOUR-GUIDE": { + "DMP": "This is your dashboard. You can view and edit all DMPs that you have either contributed to or created yourself.", + "START-NEW": "Create your DMP with Start new DMP.", + "IMPORT-DMP": "You can import a DMP", + "START-WIZARD": "or create new in Argos.", + "DATASET": "This is your dashboard. You can view and edit all Datasets that you have either contributed to or created yourself.", + "NEW-DATASET": "With Add Dataset you can describe new datasets anytime in the research process." } }, "USER-DIALOG": { From 208824f55b75c3f60d04736acf772837d6366f44 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Tue, 24 Nov 2020 19:09:10 +0200 Subject: [PATCH 3/8] Adds guided tour on dashboard for new user --- .../guided-tour/guided-tour.component.scss | 444 +++++++++--------- .../guided-tour/guided-tour.service.ts | 396 ++++++++-------- .../app/ui/dashboard/dashboard.component.html | 249 +++++----- .../app/ui/dashboard/dashboard.component.scss | 7 +- .../app/ui/dashboard/dashboard.component.ts | 89 +++- .../ui/dmp/listing/dmp-listing.component.ts | 3 - .../start-new-dmp-dialog.component.html | 20 +- .../src/app/ui/navbar/navbar.component.html | 6 +- .../src/app/ui/navbar/navbar.component.scss | 4 + .../src/app/ui/sidebar/sidebar.component.html | 2 +- 10 files changed, 667 insertions(+), 553 deletions(-) diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss index ae71afc9d..acaa99214 100644 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss +++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss @@ -1,246 +1,254 @@ ngx-guided-tour { - .guided-tour-user-input-mask { - position: fixed; - top: 0; - left: 0; - display: block; - height: 100%; - width: 100%; - max-height: 100vh; - text-align: center; - opacity: 0; - } + .guided-tour-user-input-mask { + position: fixed; + top: 0; + left: 0; + display: block; + height: 100%; + width: 100%; + max-height: 100vh; + text-align: center; + opacity: 0; + } - .guided-tour-spotlight-overlay { - position: fixed; - box-shadow: 0 0 0 9999px rgba(0,0,0,.7), 0 0 1.5rem rgba(0,0,0,.5); - border-radius: 44px; /*custom add*/ - } + .guided-tour-spotlight-overlay { + position: fixed; + box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7), 0 0 1.5rem rgba(0, 0, 0, 0.5); + border-radius: 44px; /*custom add*/ + } - .tour-orb { - position: fixed; - width: 20px; - height: 20px; - border-radius: 50%; + .tour-orb { + position: fixed; + width: 20px; + height: 20px; + border-radius: 50%; - .tour-orb-ring { - width: 35px; - height: 35px; - position: relative; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - animation: pulse 2s linear infinite; + .tour-orb-ring { + width: 35px; + height: 35px; + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation: pulse 2s linear infinite; - &:after { - content: ''; - display: inline-block; - height: 100%; - width: 100%; - border-radius: 50%; - } - } + &:after { + content: ""; + display: inline-block; + height: 100%; + width: 100%; + border-radius: 50%; + } + } - @keyframes pulse { - from { - transform: translate(-50%, -50%) scale(0.45); - opacity: 1.0; - } - to { - transform: translate(-50%, -50%) scale(1); - opacity: 0.0; - } - } - } + @keyframes pulse { + from { + transform: translate(-50%, -50%) scale(0.45); + opacity: 1; + } + to { + transform: translate(-50%, -50%) scale(1); + opacity: 0; + } + } + } - .tour-step { - position: fixed; - &.page-tour-step { - // max-width: 400px; - max-width: 1043px; /*custom add*/ - width: 50%; - left: 50%; - top: 50%; - border-radius: 5px; - transform: translate(-50%, -50%) - } - &.tour-bottom, &.tour-bottom-right, &.tour-bottom-left { - .tour-arrow::before { - position: absolute; - } - .tour-block { - margin-top: 10px; - } - } + .tour-step { + position: fixed; + &.page-tour-step { + // max-width: 400px; + max-width: 1043px; /*custom add*/ + width: 50%; + left: 50%; + top: 50%; + border-radius: 5px; + transform: translate(-50%, -50%); + } + &.tour-bottom, + &.tour-bottom-right, + &.tour-bottom-left { + .tour-arrow::before { + position: absolute; + } + .tour-block { + margin-top: 10px; + } + } - &.tour-top, &.tour-top-right, &.tour-top-left { - margin-bottom: 10px; + &.tour-top, + &.tour-top-right, + &.tour-top-left { + margin-bottom: 10px; - .tour-arrow::before { - position: absolute; - bottom: 0; - } - .tour-block { - margin-bottom: 10px; - } - } + .tour-arrow::before { + position: absolute; + bottom: 0; + } + .tour-block { + margin-bottom: 10px; + } + } - &.tour-bottom , &.tour-top { - .tour-arrow::before { - // transform: translateX(-50%); - // left: 50%; - /*custom add*/ - transform: scale(2); - left: 494px; - } - /*custom add*/ - margin-top: 20px; - margin-left: 10px; - } + &.tour-bottom, + &.tour-top { + .tour-arrow::before { + // transform: translateX(-50%); + // left: 50%; + /*custom add*/ + transform: scale(2); + left: 494px; + } + /*custom add*/ + margin-top: 20px; + margin-left: 10px; + } - &.tour-bottom-right, &.tour-top-right { - .tour-arrow::before { - transform: translateX(-100%); - left: calc(100% - 5px); - } - } + &.tour-bottom-right, + &.tour-top-right { + .tour-arrow::before { + transform: translateX(-100%); + left: calc(100% - 5px); + } + } - &.tour-bottom-left, &.tour-top-left { - .tour-arrow::before { - left: 5px; - } - } + &.tour-bottom-left, + &.tour-top-left { + .tour-arrow::before { + left: 5px; + } + } - &.tour-left { - .tour-arrow::before { - position: absolute; - left: 100%; - transform: translateX(-100%); - top: 5px; - } - .tour-block { - margin-right: 10px; - } - } + &.tour-left { + .tour-arrow::before { + position: absolute; + left: 100%; + transform: translateX(-100%); + top: 5px; + } + .tour-block { + margin-right: 10px; + } + } - &.tour-right { - margin-left: 10px; /*custom add*/ - .tour-arrow::before { - transform: scale(1.5); /*custom add*/ - position: absolute; - left: 0; - top: 5px; - } - .tour-block { - margin-top: -15px; /*custom add*/ - margin-left: 10px; - } - } + &.tour-right { + margin-left: 10px; /*custom add*/ + .tour-arrow::before { + transform: scale(1.5); /*custom add*/ + position: absolute; + left: 0; + top: 5px; + } + .tour-block { + margin-top: -15px; /*custom add*/ + margin-left: 10px; + } + } - .tour-block { - // padding: 15px 25px; + .tour-block { + // padding: 15px 25px; - /*custom add*/ - padding: 15px 25px 15px 0px; - max-height: 348px; - border-radius: 5px; - } + /*custom add*/ + padding: 15px 25px 15px 0px; + max-height: 348px; + border-radius: 5px; + } - .tour-title { - // font-weight: bold !important; - // padding-bottom: 20px; + .tour-title { + // font-weight: bold !important; + // padding-bottom: 20px; - /*custom add*/ - font-weight: lighter !important; - font-size: 16px !important; - padding: 28px 5px 0px 65px; - overflow: auto; - text-align: left; - color: #212121; - line-height: 26px; - white-space:pre-line; - height: 210px; - } + /*custom add*/ + font-weight: lighter !important; + font-size: 16px !important; + padding: 28px 5px 0px 65px; + overflow: auto; + text-align: left; + color: #212121; + line-height: 26px; + white-space: pre-line; + // height: 210px; + } - h3.tour-title { - font-size: 20px; - } - h2.tour-title { - font-size: 30px; - } + h3.tour-title { + font-size: 20px; + } + h2.tour-title { + font-size: 30px; + } - .tour-buttons { - overflow: hidden; // clearfix - padding: 10px 70px 30px 65px; /*custom add*/ + .tour-buttons { + overflow: hidden; // clearfix + padding: 10px 70px 30px 65px; /*custom add*/ - button.link-button { - padding-left: 0; - font-size: 15px; - font-weight: bold; - max-width: none !important; - cursor: pointer; - text-align: center; - white-space: nowrap; - vertical-align: middle; - border: 1px solid transparent; - line-height: 1.5; - background-color: transparent; - position: relative; - outline: none; - padding: 0 15px; - -webkit-appearance: button; - } + button.link-button { + padding-left: 0; + font-size: 15px; + font-weight: bold; + max-width: none !important; + cursor: pointer; + text-align: center; + white-space: nowrap; + vertical-align: middle; + border: 1px solid transparent; + line-height: 1.5; + background-color: transparent; + position: relative; + outline: none; + padding: 0 15px; + -webkit-appearance: button; + } - button.skip-button.link-button { - // padding-left: 0; - border-left: 0; + button.skip-button.link-button { + // padding-left: 0; + border-left: 0; - /*custom add*/ - padding: 0; - float: right; - width: 133px; - height: 40px; - border: 1px solid #129D99; - background: #FFFFFF 0% 0% no-repeat padding-box; - color: #129D99; - } + /*custom add*/ + padding: 0; + float: right; + width: 133px; + height: 40px; + border: 1px solid #129d99; + background: #ffffff 0% 0% no-repeat padding-box; + color: #129d99; + } - .next-button { - cursor: pointer; - // border-radius: 1px; - // float: right; - border: none; - outline: none; - // padding-left: 10px; - // padding-right: 10px; + .next-button { + cursor: pointer; + // border-radius: 1px; + // float: right; + border: none; + outline: none; + // padding-left: 10px; + // padding-right: 10px; - /*custom add*/ - float: left; - padding: 10px 0px;; - width: 101px; - background: #129D99 0% 0% no-repeat padding-box; - } + /*custom add*/ + float: left; + padding: 10px 0px; + width: 101px; + background: #129d99 0% 0% no-repeat padding-box; + } - /*custom add*/ - button.skip-button.link-button, .next-button { - font-size: 14px; - font-weight: bold; - letter-spacing: 0.35px; - height: 40px; - box-shadow: 0px 3px 6px #1E202029; - border-radius: 30px; - } - } + /*custom add*/ + button.skip-button.link-button, + .next-button { + font-size: 14px; + font-weight: bold; + letter-spacing: 0.35px; + height: 40px; + box-shadow: 0px 3px 6px #1e202029; + border-radius: 30px; + } + } - /*custom add*/ - .argos-present-img { - background: url("../../../assets/splash/assets/img/2_Sign_in/Svg/Sign\ In.svg") no-repeat; - min-width: 176px; - height: 220px; - position: relative; - top: 110px; - left: -85px; - border-top: none; - } - } + /*custom add*/ + .argos-present-img { + background: url("../../../assets/splash/assets/img/2_Sign_in/Svg/Sign\ In.svg") no-repeat; + min-width: 176px; + height: 220px; + position: relative; + top: 110px; + left: -85px; + border-top: none; + } + } } diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts b/dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts index 2823f24d0..1250ceac9 100644 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts +++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.service.ts @@ -1,4 +1,4 @@ -import { debounceTime } from 'rxjs/operators'; +import { debounceTime, delay } from 'rxjs/operators'; import { ErrorHandler, Inject, Injectable } from '@angular/core'; import { Observable, Subject, fromEvent } from 'rxjs'; import { GuidedTour, TourStep, Orientation, OrientationConfiguration } from './guided-tour.constants'; @@ -8,222 +8,224 @@ import { WindowRefService } from "./windowref.service"; @Injectable() export class GuidedTourService { - public guidedTourCurrentStepStream: Observable; - public guidedTourOrbShowingStream: Observable; + public guidedTourCurrentStepStream: Observable; + public guidedTourOrbShowingStream: Observable; - private _guidedTourCurrentStepSubject = new Subject(); - private _guidedTourOrbShowingSubject = new Subject(); - private _currentTourStepIndex = 0; - private _currentTour: GuidedTour = null; - private _onFirstStep = true; - private _onLastStep = true; - private _onResizeMessage = false; + private _guidedTourCurrentStepSubject = new Subject(); + private _guidedTourOrbShowingSubject = new Subject(); + private _currentTourStepIndex = 0; + private _currentTour: GuidedTour = null; + private _onFirstStep = true; + private _onLastStep = true; + private _onResizeMessage = false; - constructor( - public errorHandler: ErrorHandler, - private windowRef: WindowRefService, - @Inject(DOCUMENT) private dom - ) { - this.guidedTourCurrentStepStream = this._guidedTourCurrentStepSubject.asObservable(); - this.guidedTourOrbShowingStream = this._guidedTourOrbShowingSubject.asObservable(); + constructor( + public errorHandler: ErrorHandler, + private windowRef: WindowRefService, + @Inject(DOCUMENT) private dom + ) { + this.guidedTourCurrentStepStream = this._guidedTourCurrentStepSubject.asObservable(); + this.guidedTourOrbShowingStream = this._guidedTourOrbShowingSubject.asObservable(); - fromEvent(this.windowRef.nativeWindow, 'resize').pipe(debounceTime(200)).subscribe(() => { - if (this._currentTour && this._currentTourStepIndex > -1) { - if (this._currentTour.minimumScreenSize && this._currentTour.minimumScreenSize >= this.windowRef.nativeWindow.innerWidth) { - this._onResizeMessage = true; - const dialog = this._currentTour.resizeDialog || { - title: 'Please resize', - content: 'You have resized the tour to a size that is too small to continue. Please resize the browser to a larger size to continue the tour or close the tour.' - }; + fromEvent(this.windowRef.nativeWindow, 'resize').pipe(debounceTime(200)).subscribe(() => { + if (this._currentTour && this._currentTourStepIndex > -1) { + if (this._currentTour.minimumScreenSize && this._currentTour.minimumScreenSize >= this.windowRef.nativeWindow.innerWidth) { + this._onResizeMessage = true; + const dialog = this._currentTour.resizeDialog || { + title: 'Please resize', + content: 'You have resized the tour to a size that is too small to continue. Please resize the browser to a larger size to continue the tour or close the tour.' + }; - this._guidedTourCurrentStepSubject.next(dialog); - } else { - this._onResizeMessage = false; - this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); - } + this._guidedTourCurrentStepSubject.next(dialog); + } else { + this._onResizeMessage = false; + this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); + } + } + }); + } + + public nextStep(): void { + if (this._currentTour.steps[this._currentTourStepIndex].closeAction) { + this._currentTour.steps[this._currentTourStepIndex].closeAction(); + } + if (this._currentTour.steps[this._currentTourStepIndex + 1]) { + this._currentTourStepIndex++; + this._setFirstAndLast(); + if (this._currentTour.steps[this._currentTourStepIndex].action) { + this._currentTour.steps[this._currentTourStepIndex].action(); + // Usually an action is opening something so we need to give it time to render. + setTimeout(() => { + if (this._checkSelectorValidity()) { + this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); + } else { + this.nextStep(); + } + }); + } else { + setTimeout(() => { + if (this._checkSelectorValidity()) { + this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); + } else { + this.nextStep(); + } + }, 500); } - }); - } + } else { + if (this._currentTour.completeCallback) { + this._currentTour.completeCallback(); + } + this.resetTour(); + } + } - public nextStep(): void { - if (this._currentTour.steps[this._currentTourStepIndex].closeAction) { - this._currentTour.steps[this._currentTourStepIndex].closeAction(); - } - if (this._currentTour.steps[this._currentTourStepIndex + 1]) { - this._currentTourStepIndex++; - this._setFirstAndLast(); - if (this._currentTour.steps[this._currentTourStepIndex].action) { - this._currentTour.steps[this._currentTourStepIndex].action(); - // Usually an action is opening something so we need to give it time to render. - setTimeout(() => { - if (this._checkSelectorValidity()) { - this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); - } else { - this.nextStep(); - } - }); - } else { - if (this._checkSelectorValidity()) { - this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); - } else { - this.nextStep(); - } - } - } else { - if (this._currentTour.completeCallback) { - this._currentTour.completeCallback(); - } - this.resetTour(); - } - } + public backStep(): void { + if (this._currentTour.steps[this._currentTourStepIndex].closeAction) { + this._currentTour.steps[this._currentTourStepIndex].closeAction(); + } + if (this._currentTour.steps[this._currentTourStepIndex - 1]) { + this._currentTourStepIndex--; + this._setFirstAndLast(); + if (this._currentTour.steps[this._currentTourStepIndex].action) { + this._currentTour.steps[this._currentTourStepIndex].action(); + setTimeout(() => { + if (this._checkSelectorValidity()) { + this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); + } else { + this.backStep(); + } + }); + } else { + if (this._checkSelectorValidity()) { + this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); + } else { + this.backStep(); + } + } + } else { + this.resetTour(); + } + } - public backStep(): void { - if (this._currentTour.steps[this._currentTourStepIndex].closeAction) { - this._currentTour.steps[this._currentTourStepIndex].closeAction(); - } - if (this._currentTour.steps[this._currentTourStepIndex - 1]) { - this._currentTourStepIndex--; - this._setFirstAndLast(); - if (this._currentTour.steps[this._currentTourStepIndex].action) { - this._currentTour.steps[this._currentTourStepIndex].action(); - setTimeout(() => { - if (this._checkSelectorValidity()) { - this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); - } else { - this.backStep(); - } - }); - } else { - if (this._checkSelectorValidity()) { - this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); - } else { - this.backStep(); - } - } - } else { - this.resetTour(); - } - } + public skipTour(): void { + if (this._currentTour.skipCallback) { + this._currentTour.skipCallback(this._currentTourStepIndex); + } + this.resetTour(); + } - public skipTour(): void { - if (this._currentTour.skipCallback) { - this._currentTour.skipCallback(this._currentTourStepIndex); - } - this.resetTour(); - } + public resetTour(): void { + this.dom.body.classList.remove('tour-open'); + this._currentTour = null; + this._currentTourStepIndex = 0; + this._guidedTourCurrentStepSubject.next(null); + } - public resetTour(): void { - this.dom.body.classList.remove('tour-open'); - this._currentTour = null; - this._currentTourStepIndex = 0; - this._guidedTourCurrentStepSubject.next(null); - } + public startTour(tour: GuidedTour): void { + this._currentTour = cloneDeep(tour); + this._currentTour.steps = this._currentTour.steps.filter(step => !step.skipStep); + this._currentTourStepIndex = 0; + this._setFirstAndLast(); + this._guidedTourOrbShowingSubject.next(this._currentTour.useOrb); + if ( + this._currentTour.steps.length > 0 + && (!this._currentTour.minimumScreenSize + || (this.windowRef.nativeWindow.innerWidth >= this._currentTour.minimumScreenSize)) + ) { + if (!this._currentTour.useOrb) { + this.dom.body.classList.add('tour-open'); + } + if (this._currentTour.steps[this._currentTourStepIndex].action) { + this._currentTour.steps[this._currentTourStepIndex].action(); + } + if (this._checkSelectorValidity()) { + this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); + } else { + this.nextStep(); + } + } + } - public startTour(tour: GuidedTour): void { - this._currentTour = cloneDeep(tour); - this._currentTour.steps = this._currentTour.steps.filter(step => !step.skipStep); - this._currentTourStepIndex = 0; - this._setFirstAndLast(); - this._guidedTourOrbShowingSubject.next(this._currentTour.useOrb); - if ( - this._currentTour.steps.length > 0 - && (!this._currentTour.minimumScreenSize - || (this.windowRef.nativeWindow.innerWidth >= this._currentTour.minimumScreenSize)) - ) { - if (!this._currentTour.useOrb) { - this.dom.body.classList.add('tour-open'); - } - if (this._currentTour.steps[this._currentTourStepIndex].action) { - this._currentTour.steps[this._currentTourStepIndex].action(); - } - if (this._checkSelectorValidity()) { - this._guidedTourCurrentStepSubject.next(this.getPreparedTourStep(this._currentTourStepIndex)); - } else { - this.nextStep(); - } - } - } + public activateOrb(): void { + this._guidedTourOrbShowingSubject.next(false); + this.dom.body.classList.add('tour-open'); + } - public activateOrb(): void { - this._guidedTourOrbShowingSubject.next(false); - this.dom.body.classList.add('tour-open'); - } + private _setFirstAndLast(): void { + this._onLastStep = (this._currentTour.steps.length - 1) === this._currentTourStepIndex; + this._onFirstStep = this._currentTourStepIndex === 0; + } - private _setFirstAndLast(): void { - this._onLastStep = (this._currentTour.steps.length - 1) === this._currentTourStepIndex; - this._onFirstStep = this._currentTourStepIndex === 0; - } + private _checkSelectorValidity(): boolean { + if (this._currentTour.steps[this._currentTourStepIndex].selector) { + const selectedElement = this.dom.querySelector(this._currentTour.steps[this._currentTourStepIndex].selector); + if (!selectedElement) { + this.errorHandler.handleError( + // If error handler is configured this should not block the browser. + new Error(`Error finding selector ${this._currentTour.steps[this._currentTourStepIndex].selector} on step ${this._currentTourStepIndex + 1} during guided tour: ${this._currentTour.tourId}`) + ); + return false; + } + } + return true; + } - private _checkSelectorValidity(): boolean { - if (this._currentTour.steps[this._currentTourStepIndex].selector) { - const selectedElement = this.dom.querySelector(this._currentTour.steps[this._currentTourStepIndex].selector); - if (!selectedElement) { - this.errorHandler.handleError( - // If error handler is configured this should not block the browser. - new Error(`Error finding selector ${this._currentTour.steps[this._currentTourStepIndex].selector} on step ${this._currentTourStepIndex + 1} during guided tour: ${this._currentTour.tourId}`) - ); - return false; - } - } - return true; - } + public get onLastStep(): boolean { + return this._onLastStep; + } - public get onLastStep(): boolean { - return this._onLastStep; - } + public get onFirstStep(): boolean { + return this._onFirstStep; + } - public get onFirstStep(): boolean { - return this._onFirstStep; - } + public get onResizeMessage(): boolean { + return this._onResizeMessage; + } - public get onResizeMessage(): boolean { - return this._onResizeMessage; - } + public get currentTourStepDisplay(): number { + return this._currentTourStepIndex + 1; + } - public get currentTourStepDisplay(): number { - return this._currentTourStepIndex + 1; - } + public get currentTourStepCount(): number { + return this._currentTour && this._currentTour.steps ? this._currentTour.steps.length : 0; + } - public get currentTourStepCount(): number { - return this._currentTour && this._currentTour.steps ? this._currentTour.steps.length : 0; - } + public get preventBackdropFromAdvancing(): boolean { + return this._currentTour && this._currentTour.preventBackdropFromAdvancing; + } - public get preventBackdropFromAdvancing(): boolean { - return this._currentTour && this._currentTour.preventBackdropFromAdvancing; - } + private getPreparedTourStep(index: number): TourStep { + return this.setTourOrientation(this._currentTour.steps[index]); + } - private getPreparedTourStep(index: number): TourStep { - return this.setTourOrientation(this._currentTour.steps[index]); - } + private setTourOrientation(step: TourStep): TourStep { + const convertedStep = cloneDeep(step); + if ( + convertedStep.orientation + && !(typeof convertedStep.orientation === 'string') + && (convertedStep.orientation as OrientationConfiguration[]).length + ) { + (convertedStep.orientation as OrientationConfiguration[]).sort((a: OrientationConfiguration, b: OrientationConfiguration) => { + if (!b.maximumSize) { + return 1; + } + if (!a.maximumSize) { + return -1; + } + return b.maximumSize - a.maximumSize; + }); - private setTourOrientation(step: TourStep): TourStep { - const convertedStep = cloneDeep(step); - if ( - convertedStep.orientation - && !(typeof convertedStep.orientation === 'string') - && (convertedStep.orientation as OrientationConfiguration[]).length - ) { - (convertedStep.orientation as OrientationConfiguration[]).sort((a: OrientationConfiguration, b: OrientationConfiguration) => { - if (!b.maximumSize) { - return 1; - } - if (!a.maximumSize) { - return -1; - } - return b.maximumSize - a.maximumSize; - }); + let currentOrientation: Orientation = Orientation.Top; + (convertedStep.orientation as OrientationConfiguration[]).forEach( + (orientationConfig: OrientationConfiguration) => { + if (!orientationConfig.maximumSize || this.windowRef.nativeWindow.innerWidth <= orientationConfig.maximumSize) { + currentOrientation = orientationConfig.orientationDirection; + } + } + ); - let currentOrientation: Orientation = Orientation.Top; - (convertedStep.orientation as OrientationConfiguration[]).forEach( - (orientationConfig: OrientationConfiguration) => { - if (!orientationConfig.maximumSize || this.windowRef.nativeWindow.innerWidth <= orientationConfig.maximumSize) { - currentOrientation = orientationConfig.orientationDirection; - } - } - ); - - convertedStep.orientation = currentOrientation; - } - return convertedStep; - } + convertedStep.orientation = currentOrientation; + } + return convertedStep; + } } diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html index 02258c127..ed8022f1a 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html @@ -1,24 +1,67 @@
-
-
-
- -

{{'DASHBOARD.DMP-QUESTION' | translate}}

-

{{'DASHBOARD.INFO-DMP-TEXT' | translate}}

-

+

+
+ clear + +

{{'DASHBOARD.DMP-QUESTION' | translate}}

+

{{'DASHBOARD.INFO-DMP-TEXT' | translate}}

+ +

{{'DASHBOARD.NEW-QUESTION' | translate}} {{'DASHBOARD.OPEN-AIR-GUIDE' | translate}} {{'DASHBOARD.LEARN-MORE' | translate}}

-
- - - +

{{'DASHBOARD.DMP-ABOUT-BEG' | translate}} + {{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} + {{'DASHBOARD.DMP-ABOUT-END' | translate}} +

+ +
+
+ + + +
+
+ +
+ + +
+ +
+
{{'DASHBOARD.LATEST-ACTIVITY' | translate}}
+ + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
+ + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
+ + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
+ + + +
{{'DASHBOARD.EMPTY-LIST' | translate}}
+
+ +
+ + +
-
+ + +
{{'DASHBOARD.PERSONAL-USAGE' | translate}}
0
{{'DASHBOARD.DMPS' | translate}} @@ -29,48 +72,8 @@
0
{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}
-
-
-
-
-
-
- clear -

- {{'DASHBOARD.DMP-ABOUT-BEG' | translate}} - {{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} - {{'DASHBOARD.DMP-ABOUT-END' | translate}}

-
- - -
-
-
{{'DASHBOARD.LATEST-ACTIVITY' | translate}}
- - - -
{{'DASHBOARD.EMPTY-LIST' | translate}}
- - - -
{{'DASHBOARD.EMPTY-LIST' | translate}}
- - - -
{{'DASHBOARD.EMPTY-LIST' | translate}}
- - - -
{{'DASHBOARD.EMPTY-LIST' | translate}}
-
- -
- - -
-
+ +
{{'DASHBOARD.PERSONAL-USAGE' | translate}}
{{dashboardStatisticsData?.totalDataManagementPlanCount}}
@@ -86,84 +89,91 @@ {{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}
+ +
+ +
+
+ +
-
- -
-
- +
+
+ -
-
-
-
-
- clear -
-

{{'DASHBOARD.TITLE' | translate}}

-

{{'DASHBOARD.INFO-TEXT' | translate}}

+
+
+
+
+
+ clear +
+

{{'DASHBOARD.TITLE' | translate}}

+

{{'DASHBOARD.INFO-TEXT' | translate}}

+
+
+ + + +
-
- - - -
-
-
-
{{'DASHBOARD.LATEST-ACTIVITY' | translate}}
- - - -
{{'DASHBOARD.EMPTY-LIST' | translate}}
- - - -
{{'DASHBOARD.EMPTY-LIST' | translate}}
- - - -
{{'DASHBOARD.EMPTY-LIST' | translate}}
- - - + + +
-
-
-
-
{{'DASHBOARD.PUBLIC-USAGE' | translate}}
-
0
- {{'DASHBOARD.PUBLIC-DMPS' | translate}} -
0
- {{'DASHBOARD.PUBLIC-DATASETS' | translate}} -
0
- {{'DASHBOARD.GRANTS' | translate}} -
0
- {{'DASHBOARD.RELATED-ORGANISATIONS' | translate}} -
-
-
{{'DASHBOARD.PUBLIC-USAGE' | translate}}
-
- {{dashboardStatisticsData?.totalDataManagementPlanCount}}
- {{'DASHBOARD.PUBLIC-DMPS' | translate}} -
- {{dashboardStatisticsData?.totalDataSetCount}}
- {{'DASHBOARD.PUBLIC-DATASETS' | translate}} -
- {{dashboardStatisticsData?.totalGrantCount}}
- {{'DASHBOARD.GRANTS' | translate}} -
- {{dashboardStatisticsData?.totalOrganisationCount}}
- {{'DASHBOARD.RELATED-ORGANISATIONS' | translate}} +
+
+
{{'DASHBOARD.PUBLIC-USAGE' | translate}}
+
0
+ {{'DASHBOARD.PUBLIC-DMPS' | translate}} +
0
+ {{'DASHBOARD.PUBLIC-DATASETS' | translate}} +
0
+ {{'DASHBOARD.GRANTS' | translate}} +
0
+ {{'DASHBOARD.RELATED-ORGANISATIONS' | translate}} +
+
+
{{'DASHBOARD.PUBLIC-USAGE' | translate}}
+
+ {{dashboardStatisticsData?.totalDataManagementPlanCount}}
+ {{'DASHBOARD.PUBLIC-DMPS' | translate}} +
+ {{dashboardStatisticsData?.totalDataSetCount}}
+ {{'DASHBOARD.PUBLIC-DATASETS' | translate}} +
+ {{dashboardStatisticsData?.totalGrantCount}}
+ {{'DASHBOARD.GRANTS' | translate}} +
+ {{dashboardStatisticsData?.totalOrganisationCount}}
+ {{'DASHBOARD.RELATED-ORGANISATIONS' | translate}} +
@@ -171,11 +181,10 @@
-
- {{ 'FAQ.TITLE' | translate }} diff --git a/dmp-frontend/src/app/ui/navbar/navbar.component.scss b/dmp-frontend/src/app/ui/navbar/navbar.component.scss index 53999807b..0d3206b6a 100644 --- a/dmp-frontend/src/app/ui/navbar/navbar.component.scss +++ b/dmp-frontend/src/app/ui/navbar/navbar.component.scss @@ -134,3 +134,7 @@ $mat-card-header-size: 40px !default; background-color: #ececec; border-radius: 6px; } + +.new-dmp-dialog { + padding: 0em .5em 0em 0em; +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html index 59c961998..c40d2d023 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html @@ -4,7 +4,7 @@
- + {{ groupMenuRoute.icon }} person {{groupMenuRoute.title | translate}} From f5d5835edb3411aab51208d4b88aa4b39f120c25 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Wed, 25 Nov 2020 13:43:01 +0200 Subject: [PATCH 4/8] Style fix on tour guide panel --- .../src/app/library/guided-tour/guided-tour.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss index acaa99214..1e7d652a2 100644 --- a/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss +++ b/dmp-frontend/src/app/library/guided-tour/guided-tour.component.scss @@ -160,7 +160,7 @@ ngx-guided-tour { /*custom add*/ font-weight: lighter !important; font-size: 16px !important; - padding: 28px 5px 0px 65px; + padding: 28px 5px 25px 65px; overflow: auto; text-align: left; color: #212121; @@ -178,7 +178,7 @@ ngx-guided-tour { .tour-buttons { overflow: hidden; // clearfix - padding: 10px 70px 30px 65px; /*custom add*/ + padding: 10px 70px 18px 65px; /*custom add*/ button.link-button { padding-left: 0; From 06f156c687dbb3434387a5ca197a0c174cf0c499 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Wed, 25 Nov 2020 14:22:30 +0200 Subject: [PATCH 5/8] Fix bug on dmp editor that prevented request grants on funder change (change on single autocomplete component to be reviewed) --- .../single/single-auto-complete-configuration.ts | 2 ++ .../single/single-auto-complete.component.ts | 6 +++++- .../dataset-editor/dataset-editor.component.ts | 1 - .../dataset-editor-details.component.ts | 1 - .../dmp/editor/funding-info/funding-info.component.ts | 10 ++++++---- 5 files changed, 13 insertions(+), 7 deletions(-) diff --git a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete-configuration.ts b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete-configuration.ts index dad7fcf59..fbb609e3c 100644 --- a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete-configuration.ts +++ b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete-configuration.ts @@ -32,6 +32,8 @@ export interface SingleAutoCompleteConfiguration { // Selected value formating template selectedValueTemplate?: TemplateRef; + // To revert: "We set the items observable on focus to avoid the request being executed on component load." + forceFocus?: boolean; autoSelectFirstOptionOnBlur?: boolean; } diff --git a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts index ea1b767e3..a202ce1f5 100644 --- a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts +++ b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts @@ -220,7 +220,7 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple _onInputFocus() { // We set the items observable on focus to avoid the request being executed on component load. - if (!this._items) { + if (!this._items || this.forceFocus) { this._items = this._inputSubject.pipe( startWith(null), debounceTime(this.requestDelay), @@ -321,4 +321,8 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple get autoSelectFirstOptionOnBlur(): boolean { return this.configuration.autoSelectFirstOptionOnBlur != null ? this.configuration.autoSelectFirstOptionOnBlur : false; } + + get forceFocus(): boolean { + return this.configuration.forceFocus != null ? this.configuration.forceFocus : false; + } } diff --git a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.ts b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.ts index 76160acb4..341cb9a9e 100644 --- a/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.ts +++ b/dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-editor/dataset-editor.component.ts @@ -58,7 +58,6 @@ export class DatasetEditorComponent extends BaseComponent { public restartTour(label: string): void { this.setDashboardTourDmp(label); - // console.log(this.dashboardTourDmp.steps[0].selector); this.guidedTourService.startTour(this.dashboardTourDmp); } diff --git a/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts b/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts index 31338f977..f4113eac9 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts @@ -141,7 +141,6 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn public restartTour(label: string): void { this.setDashboardTourDmp(label); - // console.log(this.dashboardTourDmp.steps[0].selector); this.guidedTourService.startTour(this.dashboardTourDmp); } diff --git a/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.ts b/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.ts index 5557e9f77..f3a6392cd 100644 --- a/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.ts +++ b/dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.ts @@ -38,6 +38,7 @@ export class FundingInfoComponent extends BaseComponent implements OnInit { isCreateNewProject = false; isCreateNewFunder = false; grant: GrantTabModel; + forceFocus = false; grantAutoCompleteConfiguration: SingleAutoCompleteConfiguration; projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration; @@ -98,8 +99,10 @@ export class FundingInfoComponent extends BaseComponent implements OnInit { initialItems: () => this.searchGrant(''), displayFn: (item) => item['label'] + this.getGrantIdText(item), titleFn: (item) => item['label'] + this.getGrantIdText(item), - subtitleFn: (item) => item['source'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['source'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')) - }; + subtitleFn: (item) => item['source'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['source'] : (item['key'] ? this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.SOURCE:') + item['key'] : this.language.instant('TYPES.EXTERNAL-DATASET-TYPE.NO-SOURCE')), + forceFocus: this.forceFocus, + } + // this.forceFocus = false; this.projectAutoCompleteConfiguration = { filterFn: this.searchProject.bind(this), @@ -116,7 +119,6 @@ export class FundingInfoComponent extends BaseComponent implements OnInit { grantRequestItem.criteria.like = query; if (this.funderFormGroup.get('existFunder').value) { grantRequestItem.criteria.funderReference = this.funderFormGroup.controls['existFunder'].value.reference; - console.log(grantRequestItem); } return this.grantService.getWithExternal(grantRequestItem); } @@ -237,8 +239,8 @@ export class FundingInfoComponent extends BaseComponent implements OnInit { || (funder.existFunder !== null && funder.existFunder !== undefined && funder.existFunder.id !== undefined)) { this.grantformGroup.reset(); this.grantformGroup.enable(); + this.forceFocus = true; this.setGrantValidators(); - // this.grantformGroup.updateValueAndValidity(); } else { this.grantformGroup.reset(); this.grantformGroup.disable(); From 2f61e471394c4bb96dc47c2d8977a8c532b73da7 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Wed, 25 Nov 2020 18:08:51 +0200 Subject: [PATCH 6/8] On focus out of autocompletes clear value if not selected option (to be reviewed) --- .../multiple/multiple-auto-complete.component.ts | 10 ++++++++++ .../single/single-auto-complete.component.ts | 6 ++++++ 2 files changed, 16 insertions(+) diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts index 5ccb029f1..89470bca2 100644 --- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts +++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts @@ -201,6 +201,10 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40)) { this._inputSubject.next(this.inputValue); } + + // if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40) && event.keyCode !== COMMA) { + // this._inputSubject.next(this.inputValue); + // } } public onKeyDown(event) { @@ -232,6 +236,12 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp if (this.inputValue && this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) { this.optionSelectedInternal(this.autocomplete.options.first.value); } + + // Clear text if not an option + if (this.inputValue && this.inputValue.length > 1) { + this.inputValue = ''; + document.getElementById(($event.target).id).focus(); + } } diff --git a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts index a202ce1f5..bbcd65fa8 100644 --- a/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts +++ b/dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts @@ -242,6 +242,12 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple this.inputValue = this._displayFn(this.autocomplete.options.first.value); this.optionSelectedInternal(this.autocomplete.options.first.value); } + + // Clear text if not an option + else if (this.inputValue && this.inputValue.length > 1) { + this.inputValue = ''; + document.getElementById(($event.target).id).focus(); + } } onChange = (_: any) => { }; From 142c9ab5eac3e1dd40799e5dd2978e4eb6d0178d Mon Sep 17 00:00:00 2001 From: apapachristou Date: Wed, 25 Nov 2020 18:45:37 +0200 Subject: [PATCH 7/8] Adds dots on all steps of datset editor table of content --- .../components/form-section/form-section.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html index 440606e24..ee2dbc193 100644 --- a/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html +++ b/dmp-frontend/src/app/ui/misc/dataset-description-form/components/form-section/form-section.component.html @@ -3,7 +3,7 @@ -
{{form.get('numbering').value}} {{form.get('title').value}}
+
{{form.get('numbering').value}}. {{form.get('title').value}}
 From f87f8e31af54b26ae484e21739e10b21887e7dfd Mon Sep 17 00:00:00 2001 From: apapachristou Date: Fri, 27 Nov 2020 14:41:27 +0200 Subject: [PATCH 8/8] Makes login dialog responsive on add new account --- dmp-frontend/src/app/ui/user-profile/user-profile.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/dmp-frontend/src/app/ui/user-profile/user-profile.component.ts b/dmp-frontend/src/app/ui/user-profile/user-profile.component.ts index 86f815057..7d2d5bcc0 100644 --- a/dmp-frontend/src/app/ui/user-profile/user-profile.component.ts +++ b/dmp-frontend/src/app/ui/user-profile/user-profile.component.ts @@ -294,6 +294,7 @@ export class UserProfileComponent extends BaseComponent implements OnInit, OnDes restoreFocus: false, autoFocus: false, width: '653px', + maxHeight: '90vh', data: { } });