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 @@