uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: add keyboard separator line (#673)

Browse Source 
* fix: blhost wrapper return with Promise.reject if error code !== 0

* feat: add keyboard separator line
This commit is contained in:
Róbert Kiss
2018-06-13 00:39:14 +02:00
committed by László Monda
parent f34cb2df56
commit 9ef11eaa34
8 changed files with 71 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html
View File

@@ -1,5 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
<svg:g svg-module *ngFor="let module of modules; let i = index"
<svg xmlns="http://www.w3.org/2000/svg"
[attr.viewBox]="viewBox"
height="100%"
width="100%">
<svg:g svg-module
*ngFor="let module of modules; let i = index"
[coverages]="module.coverages"
[keyboardKeys]="module.keyboardKeys"
[keybindAnimationEnabled]="keybindAnimationEnabled"
@@ -11,8 +15,11 @@
[selected]="selectedKey?.moduleId === i"
(keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
(keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
(capture)="onCapture(i, $event.index, $event.captured)"
/>
(capture)="onCapture(i, $event.index, $event.captured)" />
<svg:path [ngClass]="{'separator-visible': !halvesSplit, 'separator-hide': halvesSplit}"
[attr.d]="separator.d"
[attr.style]="separatorStyle" />
</svg>
<editable-text *ngIf="showDescription"
[ngModel]="description"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

30
packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.scss
View File

@@ -8,3 +8,33 @@ editable-text {
padding-right: 2em;
display: block;
}
.separator-visible {
animation: visible-fade-in 1.5s;
opacity: 1;
}
@keyframes visible-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.separator-hide {
animation: visible-fade-out 1.5s;
opacity: 0;
}
@keyframes visible-fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

9
packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts
View File

@@ -1,10 +1,12 @@
import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
import { animate, state, trigger, style, transition } from '@angular/animations';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { Module } from 'uhk-common';
import { SvgModule } from '../module';
import { SvgModuleProviderService } from '../../../services/svg-module-provider.service';
import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
import { SvgSeparator } from '../separator';
@Component({
selector: 'svg-keyboard',
@@ -41,8 +43,11 @@ export class SvgKeyboardComponent implements OnInit {
modules: SvgModule[];
viewBox: string;
moduleAnimationStates: string[];
separator: SvgSeparator;
separatorStyle: SafeStyle;
constructor(private svgModuleProvider: SvgModuleProviderService) {
constructor(private svgModuleProvider: SvgModuleProviderService,
private sanitizer: DomSanitizer) {
this.modules = [];
this.viewBox = '-520 582 1100 470';
this.halvesSplit = false;
@@ -98,5 +103,7 @@ export class SvgKeyboardComponent implements OnInit {
private setModules() {
this.modules = this.svgModuleProvider.getSvgModules(this.keyboardLayout);
this.separator = this.svgModuleProvider.getSvgSeparator();
this.separatorStyle = this.sanitizer.bypassSecurityTrustStyle(this.separator.style);
}
}

5
packages/uhk-web/src/app/components/svg/separator/convert-xml-to-svg-separator.ts Normal file
View File

@@ -0,0 +1,5 @@
import { SvgSeparator } from './svg-separator.model';
export const convertXmlToSvgSeparator = (obj: { path: any[], $: Object }): SvgSeparator => {
return obj.path[0].$;
};

2
packages/uhk-web/src/app/components/svg/separator/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './svg-separator.model';
export * from './convert-xml-to-svg-separator';

4
packages/uhk-web/src/app/components/svg/separator/svg-separator.model.ts Normal file
View File

@@ -0,0 +1,4 @@
export interface SvgSeparator {
style: string;
d: string;
}