diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 6ec5529a1..dbab0865a 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -34,6 +34,8 @@ import { configurationInitializer } from '@app-config/configuration.initializer' import { AppConfigService } from '@app-config/app-config.service'; import { SpotlightSearchComponent } from '@components/spotlight-search/spotlight-search.component'; import { PruningTranslationLoader } from '@utils/pruning-translation-loader'; +import { HelpModeComponent } from '@components/help-mode/help-mode.component'; +import { HelpModeDialogComponent } from '@components/help-mode-dialog/help-mode-dialog.component'; export function httpLoaderFactory(httpClient: HttpClient) { return new PruningTranslationLoader(httpClient, '/assets/i18n/', '.json'); @@ -58,6 +60,8 @@ const components = [ ToastComponent, NotificationsComponent, SpotlightSearchComponent, + HelpModeComponent, + HelpModeDialogComponent, ...screens ]; diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index b498cfc88..e75693f97 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -1,3 +1,4 @@ +
@@ -71,14 +72,16 @@ [icon]="'red:search'" [tooltip]="'search.header-label' | translate" tooltipPosition="below" + redactionHelpMode="search" > - +
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts index d296df378..3403ad893 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts @@ -12,6 +12,7 @@ import { SpotlightSearchAction } from '@components/spotlight-search/spotlight-se import { SpotlightSearchDialogData } from '@components/spotlight-search/spotlight-search-dialog-data'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { distinctUntilChanged, filter, map, startWith } from 'rxjs/operators'; +import { HelpModeService } from '@shared/services/help-mode.service'; interface MenuItem { readonly name: string; @@ -68,6 +69,7 @@ export class BaseScreenComponent { readonly userPreferenceService: UserPreferenceService, readonly titleService: Title, readonly fileDownloadService: FileDownloadService, + readonly helpModeService: HelpModeService, private readonly _router: Router, private readonly _translateService: TranslateService, private readonly _dialog: MatDialog diff --git a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html new file mode 100644 index 000000000..673853bf7 --- /dev/null +++ b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html @@ -0,0 +1,17 @@ +
+
+
+

+
+
+
+ +
+
+
+

+
+
+ + +
diff --git a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss new file mode 100644 index 000000000..173be4953 --- /dev/null +++ b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss @@ -0,0 +1,36 @@ +@import '../../../assets/styles/variables'; + +section { + height: 90%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +section > div { + display: flex; + justify-content: center; +} + +.welcome-to-help-mode { + height: 78px; + width: 440px; + color: $grey-1; + font-family: Inter, sans-serif; + font-size: 20px; + font-weight: 600; + letter-spacing: 0; + line-height: 26px; + text-align: center; +} + +.clicking-anywhere-on { + height: 54px; + width: 440px; + color: #283241; + font-family: Inter, sans-serif; + font-size: 13px; + letter-spacing: 0; + line-height: 18px; + text-align: center; +} diff --git a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.ts b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.ts new file mode 100644 index 000000000..f1aa6da46 --- /dev/null +++ b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'redaction-help-mode-dialog', + templateUrl: './help-mode-dialog.component.html', + styleUrls: ['./help-mode-dialog.component.scss'] +}) +export class HelpModeDialogComponent { + constructor() {} +} diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.html b/apps/red-ui/src/app/components/help-mode/help-mode.component.html new file mode 100644 index 000000000..9e77e9de0 --- /dev/null +++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.html @@ -0,0 +1,18 @@ +
+ +
Help Mode (H)
+
+
+
+

Help Mode

+
Open Help Mode Instructions
+
+ (esc) + +
+
+
diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.scss b/apps/red-ui/src/app/components/help-mode/help-mode.component.scss new file mode 100644 index 000000000..11e736dd8 --- /dev/null +++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.scss @@ -0,0 +1,82 @@ +@import '../../../assets/styles/variables'; + +.help-button { + width: 44px; + height: 40px; + position: absolute; + bottom: 20px; + right: 0; + z-index: 1; + background: $green-2; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25); + display: flex; + align-items: center; + justify-content: center; +} + +.help-button:hover { + cursor: pointer; + width: 146px; + + .text { + display: block; + } + + mat-icon { + padding-right: 8px; + } +} + +.text { + display: none; +} + +.help-mode-border { + box-sizing: border-box; + height: 100%; + width: 100%; + border-left: 8px solid $green-2; + border-right: 8px solid $green-2; + border-top: 8px solid $green-2; + border-bottom: 60px solid $green-2; + z-index: 10; + position: absolute; + pointer-events: none; + + .bottom { + position: fixed; + width: 100%; + bottom: 0; + left: 0; + display: flex; + justify-content: space-between; + pointer-events: visiblePainted; + + .help-mode-text { + padding-left: 20px; + padding-bottom: 10px; + } + + .instructions { + padding-top: 15px; + + a { + color: black; + text-decoration: underline; + } + } + + .close { + padding-right: 20px; + padding-bottom: 10px; + display: flex; + align-items: center; + + mat-icon:hover { + cursor: pointer; + } + } + } +} diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.ts b/apps/red-ui/src/app/components/help-mode/help-mode.component.ts new file mode 100644 index 000000000..e91395bf7 --- /dev/null +++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.ts @@ -0,0 +1,38 @@ +import { Component, HostListener } from '@angular/core'; +import { HelpModeDialogComponent } from '@components/help-mode-dialog/help-mode-dialog.component'; +import { HelpModeService } from '@shared/services/help-mode.service'; +import { MatDialog } from '@angular/material/dialog'; + +@Component({ + selector: 'redaction-help-mode', + templateUrl: './help-mode.component.html', + styleUrls: ['./help-mode.component.scss'] +}) +export class HelpModeComponent { + helpModeDialogIsOpened = false; + + constructor(readonly helpModeService: HelpModeService, private readonly _dialog: MatDialog) {} + + openHelpModeDialog() { + this.helpModeDialogIsOpened = true; + + const ref = this._dialog.open(HelpModeDialogComponent, { + panelClass: 'help-mode-container' + }); + + ref.afterClosed().subscribe(() => { + this.helpModeDialogIsOpened = false; + }); + } + + activateHelpMode() { + this.helpModeService.isHelpModeActive = true; + this.openHelpModeDialog(); + } + + @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) { + if (!this.helpModeDialogIsOpened) { + this.helpModeService.isHelpModeActive = false; + } + } +} diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index 7e2e39b94..cfc54b27d 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -83,7 +83,8 @@ export class IconsModule { 'upload', 'user', 'visibility', - 'visibility-off' + 'visibility-off', + 'help-outline' ]; for (const icon of icons) { diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html index c68fb9017..e7bb6a1fa 100644 --- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html +++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html @@ -1,7 +1,7 @@
{{ pageLabel }}
-
+
@@ -30,6 +30,7 @@ [icon]="config.icon" [label]="config.label | translate" [type]="config.type" + redactionHelpMode="new-dossier" > diff --git a/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts b/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts new file mode 100644 index 000000000..abb5ae7d4 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts @@ -0,0 +1,54 @@ +import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core'; +import { HelpModeService } from '@shared/services/help-mode.service'; +import * as links from '../../../../assets/help-mode/links.json'; +import { LanguageService } from '@i18n/language.service'; + +@Directive({ + selector: '[redactionHelpMode]', + exportAs: 'redactionHelpMode' +}) +export class HelpModeDirective { + @Input('redactionHelpMode') element: string; + private _lastChildCreated = null; + + constructor( + private readonly _elementRef: ElementRef, + private readonly _renderer: Renderer2, + private readonly _helpModeService: HelpModeService, + private readonly _languageService: LanguageService + ) {} + + @HostListener('click') onClick() { + if (this._helpModeService.isHelpModeActive) { + const currentLocale = this._languageService.currentLanguage; + window.open(links[this.element][currentLocale]); + } + } + + @HostListener('mouseover') onMouseOver() { + if (this._helpModeService.isHelpModeActive && !this._lastChildCreated) { + const element = this._elementRef.nativeElement; + this._renderer.setStyle(element, 'position', 'relative'); + + this._lastChildCreated = this._renderer.createElement('div'); + this._renderer.addClass(this._lastChildCreated, 'help-mode-on-mouse-over'); + this._renderer.addClass(this._lastChildCreated, `help-mode-on-mouse-over-${this.element}`); + + if (this.element === 'quick-filters') { + this._renderer.insertBefore(element, this._lastChildCreated, element.firstChild); + } else { + this._renderer.appendChild(element, this._lastChildCreated); + } + } + } + + @HostListener('mouseleave') onMouseLeave() { + if (this._helpModeService.isHelpModeActive && this._lastChildCreated) { + const element = this._elementRef.nativeElement; + this._renderer.removeStyle(element, 'position'); + + this._renderer.removeChild(element, this._lastChildCreated); + this._lastChildCreated = null; + } + } +} diff --git a/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts b/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts new file mode 100644 index 000000000..52cbd833b --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class HelpModeService { + private _isHelpModeActive = false; + + constructor() {} + + get isHelpModeActive(): boolean { + return this._isHelpModeActive; + } + + set isHelpModeActive(isHelpModeActive: boolean) { + this._isHelpModeActive = isHelpModeActive; + } +} diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index 49a35194f..46abe1990 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -29,6 +29,7 @@ import { AssignUserDropdownComponent } from './components/assign-user-dropdown/a import { InputWithActionComponent } from '@shared/components/input-with-action/input-with-action.component'; import { PageHeaderComponent } from './components/page-header/page-header.component'; import { DatePipe } from '@shared/pipes/date.pipe'; +import { HelpModeDirective } from '@shared/directives/help-mode.directive'; const buttons = [FileDownloadBtnComponent, UserButtonComponent]; @@ -53,7 +54,7 @@ const components = [ ...buttons ]; -const utils = [DatePipe, HasScrollbarDirective, NavigateLastDossiersScreenDirective]; +const utils = [DatePipe, HasScrollbarDirective, NavigateLastDossiersScreenDirective, HelpModeDirective]; const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule]; diff --git a/apps/red-ui/src/assets/help-mode/links.json b/apps/red-ui/src/assets/help-mode/links.json new file mode 100644 index 000000000..75250e5c3 --- /dev/null +++ b/apps/red-ui/src/assets/help-mode/links.json @@ -0,0 +1,38 @@ +{ + "user-menu": { + "en": "https://docs.redactmanager.com/preview/en/user-menu.html", + "de": "", + "it": "", + "fr": "" + }, + "filters": { + "en": "https://docs.redactmanager.com/preview/en/create-and-manage-dossier/dossier-overview/dossier-list.html", + "de": "", + "it": "", + "fr": "" + }, + "quick-filters": { + "en": "https://docs.redactmanager.com/preview/en/create-and-manage-dossier/dossier-overview/dossier-list.html", + "de": "", + "it": "", + "fr": "" + }, + "new-dossier": { + "en": "https://docs.redactmanager.com/preview/en/create-and-manage-dossier.html", + "de": "", + "it": "", + "fr": "" + }, + "search": { + "en": "", + "de": "", + "it": "", + "fr": "" + }, + "notifications": { + "en": "", + "de": "", + "it": "", + "fr": "" + } +} diff --git a/apps/red-ui/src/assets/icons/general/help-outline.svg b/apps/red-ui/src/assets/icons/general/help-outline.svg new file mode 100644 index 000000000..d01e67c86 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/help-outline.svg @@ -0,0 +1,13 @@ + + + 428C536E-06D6-470A-B4AC-08782CEF9A36 + + + + + + + + + + diff --git a/apps/red-ui/src/assets/illustrations/illustration.gif b/apps/red-ui/src/assets/illustrations/illustration.gif new file mode 100644 index 000000000..235159e27 Binary files /dev/null and b/apps/red-ui/src/assets/illustrations/illustration.gif differ diff --git a/apps/red-ui/src/assets/styles/_variables.scss b/apps/red-ui/src/assets/styles/_variables.scss index fd75a9385..be6a0f8ce 100644 --- a/apps/red-ui/src/assets/styles/_variables.scss +++ b/apps/red-ui/src/assets/styles/_variables.scss @@ -11,6 +11,7 @@ $grey-7: #9398a0; $grey-8: #f9fafb; $grey-9: #f5f5f7; $grey-10: #313d4e; +$grey-11: #ecedf0; $blue-1: #4875f7; $blue-2: #48c9f7; diff --git a/apps/red-ui/src/assets/styles/red-dialog.scss b/apps/red-ui/src/assets/styles/red-dialog.scss index 2b1824205..9167f2ebc 100644 --- a/apps/red-ui/src/assets/styles/red-dialog.scss +++ b/apps/red-ui/src/assets/styles/red-dialog.scss @@ -6,6 +6,14 @@ border-radius: 8px !important; } +.help-mode-container .mat-dialog-container { + height: 420px; + width: 600px; + border-radius: 8px; + background: $grey-11; + box-shadow: 0 10px 10px 0 rgba(40, 50, 65, 0.3); +} + .dialog { position: relative; min-height: 80px; diff --git a/apps/red-ui/src/assets/styles/red-help-mode.scss b/apps/red-ui/src/assets/styles/red-help-mode.scss new file mode 100644 index 000000000..d36937a1f --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-help-mode.scss @@ -0,0 +1,26 @@ +@import 'variables'; + +.help-mode-on-mouse-over { + background: rgba(92, 229, 148, 0.5); + z-index: 1; + box-shadow: 0 0 0 2px $green-2 inset; + position: absolute; + top: -5px; + left: -5px; + width: 100%; + height: 100%; + padding-right: 5px; + padding-bottom: 10px; + cursor: help; +} + +.help-mode-on-mouse-over-filters, +.help-mode-on-mouse-over-quick-filters, +.help-mode-on-mouse-over-new-dossier { + padding-right: 10px; +} + +.help-mode-on-mouse-over-search, +.help-mode-on-mouse-over-notifications { + padding-left: 4px; +} diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index d55ffb091..41738c02c 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -24,3 +24,4 @@ @import 'red-loading'; @import 'red-progress-bar'; @import 'red-tabs'; +@import 'red-help-mode';