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

feat: decrease the size between the keyboard layout and description in split mode (#990)

Browse Source 
* feat: decrease the size between the keyboard layout and description if split

* fix: increase the distance between the keyboard and keyboard desc.

* fix: increase the description distance in split mode
This commit is contained in:
Róbert Kiss
2019-07-28 20:43:12 +02:00
committed by László Monda
parent 0015e6deb3
commit c2c997c9b0
2 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,4 +26,5 @@
<editable-text *ngIf="showDescription" <editable-text *ngIf="showDescription"
[ngModel]="description" [ngModel]="description"
(ngModelChange)="descriptionChanged.emit($event)" (ngModelChange)="descriptionChanged.emit($event)"
[@moveDescription]="descriptionAnimation"
placeholder="No description provided for this keymap."></editable-text> placeholder="No description provided for this keymap."></editable-text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@@ -49,6 +49,16 @@ import { LastEditedKey } from '../../../models';
})), })),
transition('visible => invisible', animate('200ms')), transition('visible => invisible', animate('200ms')),
transition('invisible => visible', animate('200ms 500ms')) transition('invisible => visible', animate('200ms 500ms'))
]),
trigger('moveDescription', [
state('down', style({
'margin-top': '0.5em'
})),
state('up', style({
'margin-top': '-6.5%'
})),
transition('down => up', animate(500)),
transition('up => down', animate(500))
]) ])
] ]
}) })
@@ -74,6 +84,7 @@ export class SvgKeyboardComponent {
separator: SvgSeparator; separator: SvgSeparator;
separatorStyle: SafeStyle; separatorStyle: SafeStyle;
separatorAnimation = 'visible'; separatorAnimation = 'visible';
descriptionAnimation = 'down';
constructor(private svgModuleProvider: SvgModuleProviderService, constructor(private svgModuleProvider: SvgModuleProviderService,
private sanitizer: DomSanitizer) { private sanitizer: DomSanitizer) {
@@ -123,9 +134,11 @@ export class SvgKeyboardComponent {
if (this.halvesInfo.areHalvesMerged) { if (this.halvesInfo.areHalvesMerged) {
this.moduleAnimationStates = []; this.moduleAnimationStates = [];
this.separatorAnimation = 'visible'; this.separatorAnimation = 'visible';
this.descriptionAnimation = 'down';
} else { } else {
this.moduleAnimationStates = ['rotateRight', 'rotateLeft']; this.moduleAnimationStates = ['rotateRight', 'rotateLeft'];
this.separatorAnimation = 'invisible'; this.separatorAnimation = 'invisible';
this.descriptionAnimation = 'up';
} }
if (this.halvesInfo.isLeftHalfConnected) { if (this.halvesInfo.isLeftHalfConnected) {