Igor Kulikov
7 years ago
22 changed files with 1076 additions and 186 deletions
@ -0,0 +1,46 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
@mixin rule-node-colors { |
|||
&.tb-filter-type { |
|||
background-color: #f1e861; |
|||
} |
|||
|
|||
&.tb-enrichment-type { |
|||
background-color: #cdf14e; |
|||
} |
|||
|
|||
&.tb-transformation-type { |
|||
background-color: #79cef1; |
|||
} |
|||
|
|||
&.tb-action-type { |
|||
background-color: #f1928f; |
|||
} |
|||
|
|||
&.tb-external-type { |
|||
background-color: #fbc766; |
|||
} |
|||
|
|||
&.tb-rule-chain-type { |
|||
background-color: #d6c4f1; |
|||
} |
|||
|
|||
&.tb-unknown-type { |
|||
background-color: #f16c29; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,165 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'; |
|||
import { Hotkey, HotkeysService } from 'angular2-hotkeys'; |
|||
|
|||
@Component({ |
|||
selector : 'tb-hotkeys-cheatsheet', |
|||
styles : [` |
|||
.tb-hotkeys-container { |
|||
display: table !important; |
|||
position: fixed; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
color: #333; |
|||
font-size: 1em; |
|||
background-color: rgba(255,255,255,0.9); |
|||
outline: 0; |
|||
} |
|||
.tb-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; |
|||
} |
|||
.tb-hotkeys-container.fade.in { |
|||
z-index: 10002; |
|||
visibility: visible; |
|||
opacity: 1; |
|||
} |
|||
.tb-hotkeys-title { |
|||
font-weight: bold; |
|||
text-align: center; |
|||
font-size: 1.2em; |
|||
} |
|||
.tb-hotkeys { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
} |
|||
.tb-hotkeys table { |
|||
margin: auto; |
|||
color: #333; |
|||
} |
|||
.tb-content { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
} |
|||
.tb-hotkeys-keys { |
|||
padding: 5px; |
|||
text-align: right; |
|||
} |
|||
.tb-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; |
|||
} |
|||
.tb-hotkeys-text { |
|||
padding-left: 10px; |
|||
font-size: 1em; |
|||
} |
|||
.tb-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; |
|||
} |
|||
.tb-hotkeys-close:hover { |
|||
background-color: #fff; |
|||
cursor: pointer; |
|||
} |
|||
@media all and (max-width: 500px) { |
|||
.tb-hotkeys { |
|||
font-size: 0.8em; |
|||
} |
|||
} |
|||
@media all and (min-width: 750px) { |
|||
.tb-hotkeys { |
|||
font-size: 1.2em; |
|||
} |
|||
} `],
|
|||
template : `<div tabindex="-1" class="tb-hotkeys-container fade" [ngClass]="{'in': helpVisible}" style="display:none"><div class="tb-hotkeys">
|
|||
<h4 class="tb-hotkeys-title">{{ title }}</h4> |
|||
<table *ngIf="helpVisible"><tbody> |
|||
<tr *ngFor="let hotkey of hotkeysList"> |
|||
<td class="tb-hotkeys-keys"> |
|||
<span *ngFor="let key of hotkey.formatted" class="tb-hotkeys-key">{{ key }}</span> |
|||
</td> |
|||
<td class="tb-hotkeys-text">{{ hotkey.description }}</td> |
|||
</tr> |
|||
</tbody></table> |
|||
<div class="tb-hotkeys-close" (click)="toggleCheatSheet()">×</div> |
|||
</div></div>`,
|
|||
}) |
|||
export class TbCheatSheetComponent implements OnInit, OnDestroy { |
|||
|
|||
helpVisible = false; |
|||
@Input() title: string = 'Keyboard Shortcuts:'; |
|||
|
|||
@Input() |
|||
hotkeys: Hotkey[]; |
|||
|
|||
hotkeysList: Hotkey[]; |
|||
|
|||
private mousetrap: MousetrapInstance; |
|||
|
|||
constructor(private _elementRef: ElementRef, |
|||
private hotkeysService: HotkeysService) { |
|||
this.mousetrap = new Mousetrap(this._elementRef.nativeElement); |
|||
this.mousetrap.bind('?', (event: KeyboardEvent, combo: string) => { |
|||
this.toggleCheatSheet(); |
|||
}); |
|||
} |
|||
|
|||
public ngOnInit(): void { |
|||
if (this.hotkeys) { |
|||
this.hotkeysList = this.hotkeys.filter(hotkey => hotkey.description); |
|||
} |
|||
} |
|||
|
|||
public setHotKeys(hotkeys: Hotkey[]) { |
|||
this.hotkeysList = hotkeys.filter(hotkey => hotkey.description); |
|||
} |
|||
|
|||
public toggleCheatSheet(): void { |
|||
this.helpVisible = !this.helpVisible; |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
this.mousetrap.unbind('?'); |
|||
} |
|||
} |
|||
@ -0,0 +1,86 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import {Directive, Input, OnInit, OnDestroy, ElementRef} from '@angular/core'; |
|||
import {Hotkey, ExtendedKeyboardEvent} from 'angular2-hotkeys'; |
|||
import 'mousetrap'; |
|||
import { TbCheatSheetComponent } from '@shared/components/cheatsheet.component'; |
|||
|
|||
@Directive({ |
|||
selector : '[tb-hotkeys]' |
|||
}) |
|||
export class TbHotkeysDirective implements OnInit, OnDestroy { |
|||
@Input() hotkeys: Hotkey[] = []; |
|||
@Input() cheatSheet: TbCheatSheetComponent; |
|||
|
|||
private mousetrap: MousetrapInstance; |
|||
private hotkeysList: Hotkey[] = []; |
|||
|
|||
private _preventIn = ['INPUT', 'SELECT', 'TEXTAREA']; |
|||
|
|||
constructor(private _elementRef: ElementRef) { |
|||
this.mousetrap = new Mousetrap(this._elementRef.nativeElement); |
|||
(this._elementRef.nativeElement as HTMLElement).tabIndex = -1; |
|||
(this._elementRef.nativeElement as HTMLElement).style.outline = '0'; |
|||
} |
|||
|
|||
ngOnInit() { |
|||
for (let hotkey of this.hotkeys) { |
|||
this.hotkeysList.push(hotkey); |
|||
this.bindEvent(hotkey); |
|||
} |
|||
if (this.cheatSheet) { |
|||
let hotkeyObj: Hotkey = new Hotkey( |
|||
'?', |
|||
(event: KeyboardEvent) => { |
|||
this.cheatSheet.toggleCheatSheet(); |
|||
return false; |
|||
}, |
|||
[], |
|||
'Show / hide this help menu', |
|||
); |
|||
this.hotkeysList.unshift(hotkeyObj); |
|||
this.bindEvent(hotkeyObj); |
|||
this.cheatSheet.setHotKeys(this.hotkeysList); |
|||
} |
|||
} |
|||
|
|||
private bindEvent(hotkey: Hotkey): void { |
|||
this.mousetrap.bind((<Hotkey>hotkey).combo, (event: KeyboardEvent, combo: string) => { |
|||
let shouldExecute = true; |
|||
if(event) { |
|||
let target: HTMLElement = <HTMLElement>(event.target || event.srcElement); |
|||
let nodeName: string = target.nodeName.toUpperCase(); |
|||
if((' ' + target.className + ' ').indexOf(' mousetrap ') > -1) { |
|||
shouldExecute = true; |
|||
} else if(this._preventIn.indexOf(nodeName) > -1 && (<Hotkey>hotkey).allowIn.map(allow => allow.toUpperCase()).indexOf(nodeName) === -1) { |
|||
shouldExecute = false; |
|||
} |
|||
} |
|||
|
|||
if(shouldExecute) { |
|||
return (<Hotkey>hotkey).callback.apply(this, [event, combo]); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
for (let hotkey of this.hotkeysList) { |
|||
this.mousetrap.unbind(hotkey.combo); |
|||
} |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue