From 7938f1d5e6038395a0a2a2d4cc840f160ef6617f Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 6 Oct 2023 10:36:54 +0200
Subject: [PATCH] Use h1 for hotkeys modal

And so hide what's behind the modal
---
 client/src/app/app.component.html                  | 7 +++++--
 client/src/app/app.component.scss                  | 4 ++++
 client/src/app/app.component.ts                    | 9 +++++++++
 client/src/app/core/hotkeys/hotkeys.component.html | 2 +-
 client/src/app/core/hotkeys/hotkeys.component.ts   | 7 ++++++-
 5 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index e14e5a8c1..24d6f53ec 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,8 +1,11 @@
 <div *ngIf="customCSS" [innerHTML]="customCSS"></div>
 
-<my-hotkeys-cheatsheet></my-hotkeys-cheatsheet>
+<my-hotkeys-cheatsheet (hotkeysModalStateChange)="onHotkeysModalStateChange($event)"></my-hotkeys-cheatsheet>
 
-<div class="peertube-container" [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }">
+<div
+  class="peertube-container"
+  [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn(), 'hotkeys-modal-opened': hotkeysModalOpened }"
+>
   <div class="root-header">
 
     <div class="top-left-block">
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 3ce9edede..a0882b175 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -3,6 +3,10 @@
 
 .peertube-container {
   padding-bottom: 20px;
+
+  &.hotkeys-modal-opened {
+    display: none;
+  }
 }
 
 .main-row {
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index e598be56f..983a4b9b2 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -49,6 +49,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   customCSS: SafeHtml
   broadcastMessage: { message: string, dismissable: boolean, class: string } | null = null
+  hotkeysModalOpened = false
 
   private serverConfig: HTMLServerConfig
 
@@ -308,6 +309,8 @@ export class AppComponent implements OnInit, AfterViewInit {
     }
   }
 
+  // ---------------------------------------------------------------------------
+
   private initHotkeys () {
     this.hotkeysService.add([
       new Hotkey([ '/', 's' ], (event: KeyboardEvent): boolean => {
@@ -347,6 +350,12 @@ export class AppComponent implements OnInit, AfterViewInit {
     ])
   }
 
+  onHotkeysModalStateChange (opened: boolean) {
+    this.hotkeysModalOpened = opened
+  }
+
+  // ---------------------------------------------------------------------------
+
   private loadUser () {
     const tokens = this.userLocalStorage.getTokens()
     if (!tokens) return
diff --git a/client/src/app/core/hotkeys/hotkeys.component.html b/client/src/app/core/hotkeys/hotkeys.component.html
index 5dd0e4758..103f28411 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.html
+++ b/client/src/app/core/hotkeys/hotkeys.component.html
@@ -1,6 +1,6 @@
 <div class="cfp-hotkeys-container fade" [ngClass]="{'in': helpVisible}">
   <div class="cfp-hotkeys">
-    <h4 class="cfp-hotkeys-title">{{ title }}</h4>
+    <h1 class="cfp-hotkeys-title">{{ title }}</h1>
 
     <ul role="presentation">
       <li *ngFor="let hotkey of hotkeys">
diff --git a/client/src/app/core/hotkeys/hotkeys.component.ts b/client/src/app/core/hotkeys/hotkeys.component.ts
index 60b7516aa..2c610a442 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.ts
+++ b/client/src/app/core/hotkeys/hotkeys.component.ts
@@ -1,6 +1,6 @@
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { Subscription } from 'rxjs'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
 
 @Component({
   selector: 'my-hotkeys-cheatsheet',
@@ -9,6 +9,9 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'
 })
 export class CheatSheetComponent implements OnInit, OnDestroy {
   @Input() title = $localize`Keyboard Shortcuts:`
+
+  @Output() hotkeysModalStateChange = new EventEmitter<boolean>()
+
   helpVisible = false
   subscription: Subscription
 
@@ -29,6 +32,8 @@ export class CheatSheetComponent implements OnInit, OnDestroy {
       } else {
         this.toggleHelpVisible()
       }
+
+      this.hotkeysModalStateChange.emit(this.helpVisible)
     })
   }