Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

- added help mode modal, wip on creating directive to click on elements to open their docs when help mode is on

Browse Source 
- 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'
This commit is contained in:
Valentin 2021-08-12 12:43:42 +03:00
parent f3fd36a851
commit 1ff342d37e
21 changed files with 376 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/app.module.ts
View File

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

5
apps/red-ui/src/app/components/base-screen/base-screen.component.html
View File

@ -1,3 +1,4 @@
<redaction-help-mode></redaction-help-mode>
<div class="red-top-bar">
<div class="top-bar-row">
<div *ngIf="!currentUser.isUser" class="menu-placeholder"></div>
@ -71,14 +72,16 @@
[icon]="'red:search'"
[tooltip]="'search.header-label' | translate"
tooltipPosition="below"
redactionHelpMode="search"
></iqser-circle-button>
<redaction-notifications></redaction-notifications>
<redaction-notifications redactionHelpMode="notifications"></redaction-notifications>
</div>
<redaction-user-button
[matMenuTriggerFor]="userMenu"
[showDot]="fileDownloadService.hasPendingDownloads"
[userId]="currentUser.id"
redactionHelpMode="user-menu"
></redaction-user-button>
<mat-menu #userMenu="matMenu" xPosition="before">

2
apps/red-ui/src/app/components/base-screen/base-screen.component.ts
View File

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

17
apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html Normal file
View File

@ -0,0 +1,17 @@
<section class="dialog">
<div>
<div class="welcome-to-help-mode">
<p [innerHTML]="'help-mode.welcome-to-help-mode' | translate"></p>
</div>
</div>
<div>
<img src="assets/illustrations/illustration.gif" alt="" width="335" height="167" />
</div>
<div>
<div class="clicking-anywhere-on">
<p [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
</div>
</div>
<iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
</section>

36
apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss Normal file
View File

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

10
apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.ts Normal file
View File

@ -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() {}
}

18
apps/red-ui/src/app/components/help-mode/help-mode.component.html Normal file
View File

@ -0,0 +1,18 @@
<div class="help-button" *ngIf="!helpModeService.isHelpModeActive" (click)="activateHelpMode()">
<mat-icon svgIcon="red:help-outline"></mat-icon>
<div class="text">Help Mode (H)</div>
</div>
<div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive">
<div class="bottom">
<div class="help-mode-text"><h3>Help Mode</h3></div>
<div class="instructions"><a (click)="openHelpModeDialog()" *ngIf="!helpModeDialogIsOpened"> Open Help Mode Instructions </a></div>
<div class="close">
(esc)
<iqser-circle-button
class="dialog-close"
icon="red:close"
(click)="helpModeService.isHelpModeActive = false"
></iqser-circle-button>
</div>
</div>
</div>

82
apps/red-ui/src/app/components/help-mode/help-mode.component.scss Normal file
View File

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

38
apps/red-ui/src/app/components/help-mode/help-mode.component.ts Normal file
View File

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

3
apps/red-ui/src/app/modules/icons/icons.module.ts
View File

@ -83,7 +83,8 @@ export class IconsModule {
'upload',
'user',
'visibility',
'visibility-off'
'visibility-off',
'help-outline'
];
for (const icon of icons) {

3
apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
View File

@ -1,7 +1,7 @@
<div class="page-header">
<div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
<div *ngIf="filters$ | async as filters" class="filters">
<div *ngIf="filters$ | async as filters" class="filters" redactionHelpMode="filters">
<div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
<ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
@ -30,6 +30,7 @@
[icon]="config.icon"
[label]="config.label | translate"
[type]="config.type"
redactionHelpMode="new-dossier"
></iqser-icon-button>
</ng-container>

54
apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts Normal file
View File

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

18
apps/red-ui/src/app/modules/shared/services/help-mode.service.ts Normal file
View File

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

3
apps/red-ui/src/app/modules/shared/shared.module.ts
View File

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

38
apps/red-ui/src/assets/help-mode/links.json Normal file
View File

@ -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": ""
}
}

13
apps/red-ui/src/assets/icons/general/help-outline.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>428C536E-06D6-470A-B4AC-08782CEF9A36</title>
<g id="Help-Mode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="01.-Help-button" transform="translate(-1408.000000, -645.000000)" fill="#283241" fill-rule="nonzero">
<g id="help-button" transform="translate(1294.000000, 635.000000)">
<g id="help" transform="translate(114.000000, 10.000000)">
<path d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
apps/red-ui/src/assets/illustrations/illustration.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 KiB

1
apps/red-ui/src/assets/styles/_variables.scss
View File

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

8
apps/red-ui/src/assets/styles/red-dialog.scss
View File

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

26
apps/red-ui/src/assets/styles/red-help-mode.scss Normal file
View File

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

1
apps/red-ui/src/assets/styles/red-theme.scss
View File

@ -24,3 +24,4 @@
@import 'red-loading';
@import 'red-progress-bar';
@import 'red-tabs';
@import 'red-help-mode';