From 7aba23d13fe56835b07ebb00c0b4c2a929551ec3 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Tue, 11 Sep 2018 15:07:31 +0200 Subject: wrap the hotkeys component to allow templating :art: --- client/src/app/app.component.html | 2 +- client/src/app/app.module.ts | 3 +- client/src/app/core/hotkeys/hotkeys.component.html | 18 ++++ client/src/app/core/hotkeys/hotkeys.component.scss | 105 +++++++++++++++++++++ client/src/app/core/hotkeys/hotkeys.component.ts | 46 +++++++++ client/src/app/core/hotkeys/hotkeys.module.ts | 23 +++++ client/src/app/core/hotkeys/index.ts | 1 + client/src/app/core/index.ts | 3 +- client/src/app/core/theme/theme.service.ts | 1 - 9 files changed, 198 insertions(+), 4 deletions(-) create mode 100644 client/src/app/core/hotkeys/hotkeys.component.html create mode 100644 client/src/app/core/hotkeys/hotkeys.component.scss create mode 100644 client/src/app/core/hotkeys/hotkeys.component.ts create mode 100644 client/src/app/core/hotkeys/hotkeys.module.ts create mode 100644 client/src/app/core/hotkeys/index.ts (limited to 'client/src/app') diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 23ed04c2d..87de874bb 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -1,6 +1,6 @@
- +
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index ba16c072e..e5a188321 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -5,7 +5,8 @@ import { ResetPasswordModule } from '@app/reset-password' import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core' import { ClipboardModule } from 'ngx-clipboard' -import { HotkeyModule, IHotkeyOptions } from 'angular2-hotkeys' +import { HotkeyModule } from '@app/core/hotkeys' +import { IHotkeyOptions } from 'angular2-hotkeys' import 'focus-visible' import { AppRoutingModule } from './app-routing.module' diff --git a/client/src/app/core/hotkeys/hotkeys.component.html b/client/src/app/core/hotkeys/hotkeys.component.html new file mode 100644 index 000000000..61f03be33 --- /dev/null +++ b/client/src/app/core/hotkeys/hotkeys.component.html @@ -0,0 +1,18 @@ +
+
+

{{ title }}

+
+ + + + + + + +
+ {{ key }} + {{ hotkey.description }}
+
+
×
+
+
\ No newline at end of file diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss new file mode 100644 index 000000000..9af10b7c4 --- /dev/null +++ b/client/src/app/core/hotkeys/hotkeys.component.scss @@ -0,0 +1,105 @@ +.cfp-hotkeys-container { + display: table !important; + position: fixed; + overflow: auto; + width: 100%; + height: 100%; + top: 0; + left: 0; + color: #333; + font-size: 1em; + background-color: rgba(255,255,255,0.9); +} + +.cfp-hotkeys-container.fade { + z-index: -1024; + visibility: hidden; + opacity: 0; + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} + +.cfp-hotkeys-container.fade.in { + z-index: 10002; + visibility: visible; + opacity: 1; +} + +.cfp-hotkeys-title { + font-weight: bold; + text-align: center; + font-size: 1.2em; +} + +.cfp-hotkeys { + width: 100%; + height: 100%; + display: table-cell; + vertical-align: middle; +} + +.cfp-hotkeys table { + margin: auto; + color: #333; +} + +.cfp-content { + display: table-cell; + vertical-align: middle; +} + +.cfp-hotkeys-keys { + padding: 5px; + text-align: right; +} + +.cfp-hotkeys-key { + display: inline-block; + color: #fff; + background-color: #333; + border: 1px solid #333; + border-radius: 5px; + text-align: center; + margin-right: 5px; + box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb; + padding: 5px 9px; + font-size: 1em; +} + +.cfp-hotkeys-text { + padding-left: 10px; + font-size: 1em; +} + +.cfp-hotkeys-close { + position: fixed; + top: 20px; + right: 20px; + font-size: 2em; + font-weight: bold; + padding: 5px 10px; + border: 1px solid #ddd; + border-radius: 5px; + min-height: 45px; + min-width: 45px; + text-align: center; +} + +.cfp-hotkeys-close:hover { + background-color: #fff; + cursor: pointer; +} + +@media all and (max-width: 500px) { + .cfp-hotkeys { + font-size: 0.8em; + } +} + +@media all and (min-width: 750px) { + .cfp-hotkeys { + font-size: 1.2em; + } +} \ No newline at end of file diff --git a/client/src/app/core/hotkeys/hotkeys.component.ts b/client/src/app/core/hotkeys/hotkeys.component.ts new file mode 100644 index 000000000..f6f299965 --- /dev/null +++ b/client/src/app/core/hotkeys/hotkeys.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit, OnDestroy, Input } from '@angular/core' +import { Subscription } from 'rxjs' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { HotkeysService, Hotkey } from 'angular2-hotkeys' + +@Component({ + selector : 'my-hotkeys-cheatsheet', + templateUrl : './hotkeys.component.html', + styleUrls: [ './hotkeys.component.scss' ] +}) +export class CheatSheetComponent implements OnInit, OnDestroy { + helpVisible = false + @Input() title = this.i18n('Keyboard Shortcuts:') + subscription: Subscription + + hotkeys: Hotkey[] + + constructor ( + private hotkeysService: HotkeysService, + private i18n: I18n + ) {} + + public ngOnInit (): void { + this.subscription = this.hotkeysService.cheatSheetToggle.subscribe((isOpen) => { + if (isOpen !== false) { + this.hotkeys = this.hotkeysService.hotkeys.filter(hotkey => hotkey.description) + } + + if (isOpen === false) { + this.helpVisible = false + } else { + this.toggleCheatSheet() + } + }) + } + + public ngOnDestroy (): void { + if (this.subscription) { + this.subscription.unsubscribe() + } + } + + public toggleCheatSheet (): void { + this.helpVisible = !this.helpVisible + } +} diff --git a/client/src/app/core/hotkeys/hotkeys.module.ts b/client/src/app/core/hotkeys/hotkeys.module.ts new file mode 100644 index 000000000..7d420587e --- /dev/null +++ b/client/src/app/core/hotkeys/hotkeys.module.ts @@ -0,0 +1,23 @@ +import { NgModule, ModuleWithProviders } from '@angular/core' +import { CommonModule } from '@angular/common' +import { HotkeysDirective, IHotkeyOptions, HotkeyOptions, HotkeysService } from 'angular2-hotkeys' +import { CheatSheetComponent } from './hotkeys.component' + +export * from './hotkeys.component' + +@NgModule({ + imports : [CommonModule], + exports : [HotkeysDirective, CheatSheetComponent], + declarations : [HotkeysDirective, CheatSheetComponent] +}) +export class HotkeyModule { + static forRoot (options: IHotkeyOptions = {}): ModuleWithProviders { + return { + ngModule : HotkeyModule, + providers : [ + HotkeysService, + { provide : HotkeyOptions, useValue : options } + ] + } + } +} diff --git a/client/src/app/core/hotkeys/index.ts b/client/src/app/core/hotkeys/index.ts new file mode 100644 index 000000000..4f2796766 --- /dev/null +++ b/client/src/app/core/hotkeys/index.ts @@ -0,0 +1 @@ +export * from './hotkeys.module' diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts index 521afc29c..524589d74 100644 --- a/client/src/app/core/index.ts +++ b/client/src/app/core/index.ts @@ -1,6 +1,7 @@ export * from './auth' -export * from './server' export * from './confirm' export * from './routing' +export * from './server' export * from './theme' + export * from './core.module' diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts index 17d33b4e5..a6eef0898 100644 --- a/client/src/app/core/theme/theme.service.ts +++ b/client/src/app/core/theme/theme.service.ts @@ -16,7 +16,6 @@ export class ThemeService { this.previousTheme['inputPlaceholderColor'] = '#fff' this.darkTheme = (peertubeLocalStorage.getItem('theme') === 'dark') - console.log(this.darkTheme) if (this.darkTheme) this.toggleDarkTheme(false) } -- cgit v1.2.3