aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2018-09-11 15:07:31 +0200
committerRigel Kent <sendmemail@rigelk.eu>2018-09-11 21:33:22 +0200
commit7aba23d13fe56835b07ebb00c0b4c2a929551ec3 (patch)
treee67f5a28ec12d6250231d2450354390cd8ae9ce0 /client/src/app
parent5284d4028c5db6e32b73b13731622ba477597561 (diff)
downloadPeerTube-7aba23d13fe56835b07ebb00c0b4c2a929551ec3.tar.gz
PeerTube-7aba23d13fe56835b07ebb00c0b4c2a929551ec3.tar.zst
PeerTube-7aba23d13fe56835b07ebb00c0b4c2a929551ec3.zip
wrap the hotkeys component to allow templating :art:
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/app.component.html2
-rw-r--r--client/src/app/app.module.ts3
-rw-r--r--client/src/app/core/hotkeys/hotkeys.component.html18
-rw-r--r--client/src/app/core/hotkeys/hotkeys.component.scss105
-rw-r--r--client/src/app/core/hotkeys/hotkeys.component.ts46
-rw-r--r--client/src/app/core/hotkeys/hotkeys.module.ts23
-rw-r--r--client/src/app/core/hotkeys/index.ts1
-rw-r--r--client/src/app/core/index.ts3
-rw-r--r--client/src/app/core/theme/theme.service.ts1
9 files changed, 198 insertions, 4 deletions
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 @@
1<div *ngIf="customCSS" [innerHTML]="customCSS"></div> 1<div *ngIf="customCSS" [innerHTML]="customCSS"></div>
2 2
3<hotkeys-cheatsheet></hotkeys-cheatsheet> 3<my-hotkeys-cheatsheet></my-hotkeys-cheatsheet>
4 4
5<div [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }"> 5<div [ngClass]="{ 'user-logged-in': isUserLoggedIn(), 'user-not-logged-in': !isUserLoggedIn() }">
6 <div class="header"> 6 <div class="header">
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'
5 5
6import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core' 6import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
7import { ClipboardModule } from 'ngx-clipboard' 7import { ClipboardModule } from 'ngx-clipboard'
8import { HotkeyModule, IHotkeyOptions } from 'angular2-hotkeys' 8import { HotkeyModule } from '@app/core/hotkeys'
9import { IHotkeyOptions } from 'angular2-hotkeys'
9import 'focus-visible' 10import 'focus-visible'
10 11
11import { AppRoutingModule } from './app-routing.module' 12import { 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 @@
1<div class="cfp-hotkeys-container fade" [ngClass]="{'in': helpVisible}">
2 <div class="cfp-hotkeys">
3 <h4 class="cfp-hotkeys-title">{{ title }}</h4>
4 <div class="cfp-hotkeys-table">
5 <table>
6 <tbody>
7 <tr *ngFor="let hotkey of hotkeys">
8 <td class="cfp-hotkeys-keys">
9 <span *ngFor="let key of hotkey.formatted" class="cfp-hotkeys-key">{{ key }}</span>
10 </td>
11 <td class="cfp-hotkeys-text">{{ hotkey.description }}</td>
12 </tr>
13 </tbody>
14 </table>
15 </div>
16 <div class="cfp-hotkeys-close" (click)="toggleCheatSheet()">&#215;</div>
17 </div>
18</div> \ 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 @@
1.cfp-hotkeys-container {
2 display: table !important;
3 position: fixed;
4 overflow: auto;
5 width: 100%;
6 height: 100%;
7 top: 0;
8 left: 0;
9 color: #333;
10 font-size: 1em;
11 background-color: rgba(255,255,255,0.9);
12}
13
14.cfp-hotkeys-container.fade {
15 z-index: -1024;
16 visibility: hidden;
17 opacity: 0;
18 -webkit-transition: opacity 0.15s linear;
19 -moz-transition: opacity 0.15s linear;
20 -o-transition: opacity 0.15s linear;
21 transition: opacity 0.15s linear;
22}
23
24.cfp-hotkeys-container.fade.in {
25 z-index: 10002;
26 visibility: visible;
27 opacity: 1;
28}
29
30.cfp-hotkeys-title {
31 font-weight: bold;
32 text-align: center;
33 font-size: 1.2em;
34}
35
36.cfp-hotkeys {
37 width: 100%;
38 height: 100%;
39 display: table-cell;
40 vertical-align: middle;
41}
42
43.cfp-hotkeys table {
44 margin: auto;
45 color: #333;
46}
47
48.cfp-content {
49 display: table-cell;
50 vertical-align: middle;
51}
52
53.cfp-hotkeys-keys {
54 padding: 5px;
55 text-align: right;
56}
57
58.cfp-hotkeys-key {
59 display: inline-block;
60 color: #fff;
61 background-color: #333;
62 border: 1px solid #333;
63 border-radius: 5px;
64 text-align: center;
65 margin-right: 5px;
66 box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
67 padding: 5px 9px;
68 font-size: 1em;
69}
70
71.cfp-hotkeys-text {
72 padding-left: 10px;
73 font-size: 1em;
74}
75
76.cfp-hotkeys-close {
77 position: fixed;
78 top: 20px;
79 right: 20px;
80 font-size: 2em;
81 font-weight: bold;
82 padding: 5px 10px;
83 border: 1px solid #ddd;
84 border-radius: 5px;
85 min-height: 45px;
86 min-width: 45px;
87 text-align: center;
88}
89
90.cfp-hotkeys-close:hover {
91 background-color: #fff;
92 cursor: pointer;
93}
94
95@media all and (max-width: 500px) {
96 .cfp-hotkeys {
97 font-size: 0.8em;
98 }
99}
100
101@media all and (min-width: 750px) {
102 .cfp-hotkeys {
103 font-size: 1.2em;
104 }
105} \ 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 @@
1import { Component, OnInit, OnDestroy, Input } from '@angular/core'
2import { Subscription } from 'rxjs'
3import { I18n } from '@ngx-translate/i18n-polyfill'
4import { HotkeysService, Hotkey } from 'angular2-hotkeys'
5
6@Component({
7 selector : 'my-hotkeys-cheatsheet',
8 templateUrl : './hotkeys.component.html',
9 styleUrls: [ './hotkeys.component.scss' ]
10})
11export class CheatSheetComponent implements OnInit, OnDestroy {
12 helpVisible = false
13 @Input() title = this.i18n('Keyboard Shortcuts:')
14 subscription: Subscription
15
16 hotkeys: Hotkey[]
17
18 constructor (
19 private hotkeysService: HotkeysService,
20 private i18n: I18n
21 ) {}
22
23 public ngOnInit (): void {
24 this.subscription = this.hotkeysService.cheatSheetToggle.subscribe((isOpen) => {
25 if (isOpen !== false) {
26 this.hotkeys = this.hotkeysService.hotkeys.filter(hotkey => hotkey.description)
27 }
28
29 if (isOpen === false) {
30 this.helpVisible = false
31 } else {
32 this.toggleCheatSheet()
33 }
34 })
35 }
36
37 public ngOnDestroy (): void {
38 if (this.subscription) {
39 this.subscription.unsubscribe()
40 }
41 }
42
43 public toggleCheatSheet (): void {
44 this.helpVisible = !this.helpVisible
45 }
46}
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 @@
1import { NgModule, ModuleWithProviders } from '@angular/core'
2import { CommonModule } from '@angular/common'
3import { HotkeysDirective, IHotkeyOptions, HotkeyOptions, HotkeysService } from 'angular2-hotkeys'
4import { CheatSheetComponent } from './hotkeys.component'
5
6export * from './hotkeys.component'
7
8@NgModule({
9 imports : [CommonModule],
10 exports : [HotkeysDirective, CheatSheetComponent],
11 declarations : [HotkeysDirective, CheatSheetComponent]
12})
13export class HotkeyModule {
14 static forRoot (options: IHotkeyOptions = {}): ModuleWithProviders {
15 return {
16 ngModule : HotkeyModule,
17 providers : [
18 HotkeysService,
19 { provide : HotkeyOptions, useValue : options }
20 ]
21 }
22 }
23}
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 @@
1export * from './auth' 1export * from './auth'
2export * from './server'
3export * from './confirm' 2export * from './confirm'
4export * from './routing' 3export * from './routing'
4export * from './server'
5export * from './theme' 5export * from './theme'
6
6export * from './core.module' 7export * 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 {
16 this.previousTheme['inputPlaceholderColor'] = '#fff' 16 this.previousTheme['inputPlaceholderColor'] = '#fff'
17 17
18 this.darkTheme = (peertubeLocalStorage.getItem('theme') === 'dark') 18 this.darkTheme = (peertubeLocalStorage.getItem('theme') === 'dark')
19 console.log(this.darkTheme)
20 if (this.darkTheme) this.toggleDarkTheme(false) 19 if (this.darkTheme) this.toggleDarkTheme(false)
21 } 20 }
22 21