From 23c298b6f6a9aa4ca7c0bc087fc22e5b22d78098 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Sat, 14 Aug 2021 02:23:31 +0300
Subject: [PATCH] added more css updates

---
 .../base-screen/base-screen.component.html    |  2 +-
 .../help-mode-dialog.component.html           |  8 ++++---
 .../help-mode-dialog.component.scss           | 23 ++++---------------
 .../help-mode/help-mode.component.html        |  2 +-
 .../help-mode/help-mode.component.scss        |  1 +
 .../help-mode/help-mode.component.ts          | 10 +++++++-
 6 files changed, 22 insertions(+), 24 deletions(-)

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 47a649a11..668564f71 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,5 +1,5 @@
 <!--Disabled HelpMode for release-->
-<!--<redaction-help-mode></redaction-help-mode>-->
+<redaction-help-mode></redaction-help-mode>
 
 <div class="red-top-bar">
     <div class="top-bar-row">
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
index 324dba8cd..58470ee76 100644
--- 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
@@ -1,6 +1,8 @@
 <section class="dialog">
-    <p class="welcome-to-help-mode pre" [innerHTML]="'help-mode.welcome-to-help-mode' | translate"></p>
-    <img src="assets/illustrations/illustration.gif" alt="" width="335" />
-    <p class="clicking-anywhere-on pre" [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
+    <div class="content">
+        <p class="heading-l pre" [innerHTML]="'help-mode.welcome-to-help-mode' | translate"></p>
+        <img src="assets/illustrations/illustration.gif" alt="" width="335" />
+        <p class="pre" [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
+    </div>
     <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
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
index 7658ba88b..3a3a69d4e 100644
--- 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
@@ -1,31 +1,18 @@
 @import '../../../assets/styles/variables';
 
 section {
-    height: 90%;
     background: $grey-11;
     display: flex;
-    flex-direction: column;
     justify-content: center;
-    align-items: center;
 }
 
-.welcome-to-help-mode {
-    height: 78px;
+.content {
     width: 440px;
-    font-size: 20px;
-    font-weight: 600;
-    letter-spacing: 0;
-    line-height: 26px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
     padding-top: 20px;
-}
-
-.clicking-anywhere-on {
-    height: 54px;
-    width: 440px;
-    font-size: 13px;
-    letter-spacing: 0;
-    line-height: 18px;
-    text-align: center;
     padding-bottom: 30px;
+    line-height: 18px;
 }
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
index 18dd783f9..940a1cbfc 100644
--- 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
@@ -4,7 +4,7 @@
 </div>
 <div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive">
     <div class="bottom">
-        <h3>{{ 'help-mode.text' | translate }}</h3>
+        <p class="heading">{{ 'help-mode.text' | translate }}</p>
         <a class="instructions" (click)="helpModeService.openHelpModeDialog()" *ngIf="!helpModeService.helpModeDialogIsOpened">
             {{ 'help-mode.instructions' | translate }}
         </a>
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
index 9d76eb43c..8c3b1186f 100644
--- 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
@@ -14,6 +14,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: all 0.25s;
 }
 
 .help-button:hover {
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
index 9cae62bc8..8d5cb92d9 100644
--- 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
@@ -14,9 +14,17 @@ export class HelpModeComponent {
         this.helpModeService.openHelpModeDialog();
     }
 
-    @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
+    @HostListener('document:keydown.escape') onEscKeydownHandler() {
         if (!this.helpModeService.helpModeDialogIsOpened) {
             this.helpModeService.isHelpModeActive = false;
         }
     }
+
+    @HostListener('document:keydown.h', ['$event']) onHKeydownHandler(event) {
+        const node = event?.target?.nodeName?.toLocaleLowerCase();
+        console.log(node);
+        if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
+            this.activateHelpMode();
+        }
+    }
 }