From 1ff342d37e0fe26218cd6146fd713b15903c9a57 Mon Sep 17 00:00:00 2001 From: Valentin Date: Thu, 12 Aug 2021 12:43:42 +0300 Subject: [PATCH] - added help mode modal, wip on creating directive to click on elements to open their docs when help mode is on - added back 'devFeaturesEnabled' check, deleted by mistake - extracted the help mode code from base screen into a separate component - created directive for help mode to open the doc into another tab when an element is selected - added 'gif' illustration instead of 'png' - added help mode directive also for the 'new dossier button' --- apps/red-ui/src/app/app.module.ts | 4 + .../base-screen/base-screen.component.html | 5 +- .../base-screen/base-screen.component.ts | 2 + .../help-mode-dialog.component.html | 17 ++++ .../help-mode-dialog.component.scss | 36 ++++++++ .../help-mode-dialog.component.ts | 10 +++ .../help-mode/help-mode.component.html | 18 ++++ .../help-mode/help-mode.component.scss | 82 ++++++++++++++++++ .../help-mode/help-mode.component.ts | 38 ++++++++ .../src/app/modules/icons/icons.module.ts | 3 +- .../page-header/page-header.component.html | 3 +- .../shared/directives/help-mode.directive.ts | 54 ++++++++++++ .../shared/services/help-mode.service.ts | 18 ++++ .../src/app/modules/shared/shared.module.ts | 3 +- apps/red-ui/src/assets/help-mode/links.json | 38 ++++++++ .../src/assets/icons/general/help-outline.svg | 13 +++ .../src/assets/illustrations/illustration.gif | Bin 0 -> 323009 bytes apps/red-ui/src/assets/styles/_variables.scss | 1 + apps/red-ui/src/assets/styles/red-dialog.scss | 8 ++ .../src/assets/styles/red-help-mode.scss | 26 ++++++ apps/red-ui/src/assets/styles/red-theme.scss | 1 + 21 files changed, 376 insertions(+), 4 deletions(-) create mode 100644 apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html create mode 100644 apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss create mode 100644 apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.ts create mode 100644 apps/red-ui/src/app/components/help-mode/help-mode.component.html create mode 100644 apps/red-ui/src/app/components/help-mode/help-mode.component.scss create mode 100644 apps/red-ui/src/app/components/help-mode/help-mode.component.ts create mode 100644 apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts create mode 100644 apps/red-ui/src/app/modules/shared/services/help-mode.service.ts create mode 100644 apps/red-ui/src/assets/help-mode/links.json create mode 100644 apps/red-ui/src/assets/icons/general/help-outline.svg create mode 100644 apps/red-ui/src/assets/illustrations/illustration.gif create mode 100644 apps/red-ui/src/assets/styles/red-help-mode.scss 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

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