Use h1 for hotkeys modal

And so hide what's behind the modal
pull/6000/head
Chocobozzz 2023-10-06 10:36:54 +02:00
parent 1019aaf8e7
commit 7938f1d5e6
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
5 changed files with 25 additions and 4 deletions

View File

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

View File

@ -3,6 +3,10 @@
.peertube-container {
padding-bottom: 20px;
&.hotkeys-modal-opened {
display: none;
}
}
.main-row {

View File

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

View File

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

View File

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