From 652ff543e3c3f56ffa08cf14035263c5546b77be Mon Sep 17 00:00:00 2001 From: Aayush Date: Wed, 13 Feb 2019 14:15:05 +0545 Subject: [PATCH 1/7] Removed the width property for the keyboard spacebar --- src/core/src/components/keyboard-key/keyboard-key.component.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/src/components/keyboard-key/keyboard-key.component.scss b/src/core/src/components/keyboard-key/keyboard-key.component.scss index d18c8d7c..81b4b119 100644 --- a/src/core/src/components/keyboard-key/keyboard-key.component.scss +++ b/src/core/src/components/keyboard-key/keyboard-key.component.scss @@ -54,7 +54,6 @@ $mat-keyboard-capslock-shine: #adff2f !default; // } // } &- { - width: 550px !important; margin: 0 auto; } From 7fbee40f87ad7f6a2f6d24e005bb702bca49d916 Mon Sep 17 00:00:00 2001 From: Aayush Date: Wed, 13 Mar 2019 15:58:06 +0545 Subject: [PATCH 2/7] Changed the icon for the enter button and chnaged the color for the hide keyboard --- .../keyboard-key/keyboard-key.component.scss | 18 +++++++++++++++++- src/core/src/configs/keyboard-icons.config.ts | 2 +- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/core/src/components/keyboard-key/keyboard-key.component.scss b/src/core/src/components/keyboard-key/keyboard-key.component.scss index 81b4b119..b7ed38e3 100644 --- a/src/core/src/components/keyboard-key/keyboard-key.component.scss +++ b/src/core/src/components/keyboard-key/keyboard-key.component.scss @@ -58,7 +58,23 @@ $mat-keyboard-capslock-shine: #adff2f !default; } &-hide { - color: darkgrey; + color: black; + .material-icons { + font-size: 30px; + height: 30px; + } + } + + &-enter { + background-color: #74bb24; + .material-icons { + color: #74bb24; + border-radius: 50%; + background: white; + height: 16px; + width: 16px; + font-size: 15px; + } } } diff --git a/src/core/src/configs/keyboard-icons.config.ts b/src/core/src/configs/keyboard-icons.config.ts index 0dd56476..4319e94f 100644 --- a/src/core/src/configs/keyboard-icons.config.ts +++ b/src/core/src/configs/keyboard-icons.config.ts @@ -6,7 +6,7 @@ const MAT_KEYBOARD_ICONS = new InjectionToken('keyboard-icons.co const keyboardIcons: IKeyboardIcons = { [KeyboardClassKey.Bksp]: 'keyboard_backspace', [KeyboardClassKey.Caps]: '', - [KeyboardClassKey.Enter]: 'keyboard_return', + [KeyboardClassKey.Enter]: 'check', [KeyboardClassKey.Shift]: 'keyboard_arrow_up', [KeyboardClassKey.Space]: ' ', [KeyboardClassKey.Tab]: '', From 89d7d54c3bf6366c6763a9b08486179478fdbf70 Mon Sep 17 00:00:00 2001 From: Aayush Date: Wed, 13 Mar 2019 15:59:43 +0545 Subject: [PATCH 3/7] Changed the color for the checkmark --- .../src/components/keyboard-key/keyboard-key.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/src/components/keyboard-key/keyboard-key.component.scss b/src/core/src/components/keyboard-key/keyboard-key.component.scss index b7ed38e3..cd9bdceb 100644 --- a/src/core/src/components/keyboard-key/keyboard-key.component.scss +++ b/src/core/src/components/keyboard-key/keyboard-key.component.scss @@ -70,7 +70,7 @@ $mat-keyboard-capslock-shine: #adff2f !default; .material-icons { color: #74bb24; border-radius: 50%; - background: white; + background: #e2f8c9; height: 16px; width: 16px; font-size: 15px; From 9caf1349b7651ebad464bf8fd5f0486ef8b2d3c2 Mon Sep 17 00:00:00 2001 From: Aayush Date: Wed, 13 Mar 2019 16:47:54 +0545 Subject: [PATCH 4/7] Changed the font size of the enter key --- .../src/components/keyboard-key/keyboard-key.component.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/src/components/keyboard-key/keyboard-key.component.scss b/src/core/src/components/keyboard-key/keyboard-key.component.scss index cd9bdceb..ca65fd84 100644 --- a/src/core/src/components/keyboard-key/keyboard-key.component.scss +++ b/src/core/src/components/keyboard-key/keyboard-key.component.scss @@ -71,9 +71,9 @@ $mat-keyboard-capslock-shine: #adff2f !default; color: #74bb24; border-radius: 50%; background: #e2f8c9; - height: 16px; - width: 16px; - font-size: 15px; + height: 30px; + width: 30px; + font-size: 30px; } } } From baf8d1b6f41a89bbce8801a8fa0681656dd32666 Mon Sep 17 00:00:00 2001 From: Aayush Date: Wed, 13 Mar 2019 16:48:15 +0545 Subject: [PATCH 5/7] Dismiss the keyboard when enter clicked --- src/core/src/components/keyboard-key/keyboard-key.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/src/components/keyboard-key/keyboard-key.component.ts b/src/core/src/components/keyboard-key/keyboard-key.component.ts index 137bd080..d8b89a86 100644 --- a/src/core/src/components/keyboard-key/keyboard-key.component.ts +++ b/src/core/src/components/keyboard-key/keyboard-key.component.ts @@ -195,6 +195,7 @@ export class MatKeyboardKeyComponent implements OnInit { char = VALUE_NEWLINE; } else { this.enterClick.emit(event); + this._keyboardService.dismiss(); // TODO: trigger submit / onSubmit / ngSubmit properly (for the time being this has to be handled by the user himself) // console.log(this.control.ngControl.control.root) // this.input.nativeElement.form.submit(); From ba17ec1052b0ad0a142511bdd258b7c43d592bf9 Mon Sep 17 00:00:00 2001 From: Aayush Date: Thu, 14 Mar 2019 17:46:41 +0545 Subject: [PATCH 6/7] Completed adding event for the next click --- .../src/components/keyboard-key/keyboard-key.component.ts | 6 +++++- src/core/src/components/keyboard/keyboard.component.html | 1 + src/core/src/components/keyboard/keyboard.component.ts | 6 ++++++ src/core/src/directives/keyboard.directive.ts | 3 +++ 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/core/src/components/keyboard-key/keyboard-key.component.ts b/src/core/src/components/keyboard-key/keyboard-key.component.ts index d8b89a86..f130046c 100644 --- a/src/core/src/components/keyboard-key/keyboard-key.component.ts +++ b/src/core/src/components/keyboard-key/keyboard-key.component.ts @@ -88,6 +88,9 @@ export class MatKeyboardKeyComponent implements OnInit { @Output() keyClick = new EventEmitter(); + @Output() + nextClick = new EventEmitter(); + get lowerKey(): string { return `${this.key}`.toLowerCase(); } @@ -195,7 +198,7 @@ export class MatKeyboardKeyComponent implements OnInit { char = VALUE_NEWLINE; } else { this.enterClick.emit(event); - this._keyboardService.dismiss(); + this.nextClick.emit(this); // TODO: trigger submit / onSubmit / ngSubmit properly (for the time being this has to be handled by the user himself) // console.log(this.control.ngControl.control.root) // this.input.nativeElement.form.submit(); @@ -218,6 +221,7 @@ export class MatKeyboardKeyComponent implements OnInit { case KeyboardClassKey.Hide: this._keyboardService.dismiss(); + this.input.nativeElement.blur(); break; default: diff --git a/src/core/src/components/keyboard/keyboard.component.html b/src/core/src/components/keyboard/keyboard.component.html index 8972e173..5f3b2025 100644 --- a/src/core/src/components/keyboard/keyboard.component.html +++ b/src/core/src/components/keyboard/keyboard.component.html @@ -19,6 +19,7 @@ (altClick)="onAltClick()" (shiftClick)="onShiftClick()" (keyClick)="onKeyClick()" + (nextClick)="onNextClick($event)" > diff --git a/src/core/src/components/keyboard/keyboard.component.ts b/src/core/src/components/keyboard/keyboard.component.ts index 76c38c3a..0055dd39 100644 --- a/src/core/src/components/keyboard/keyboard.component.ts +++ b/src/core/src/components/keyboard/keyboard.component.ts @@ -58,6 +58,7 @@ export class MatKeyboardComponent implements OnInit { shiftClick: EventEmitter = new EventEmitter(); + nextClick: EventEmitter = new EventEmitter(); // returns an observable of the input instance get inputInstance(): Observable { return this._inputInstance$.asObservable(); @@ -221,6 +222,11 @@ export class MatKeyboardComponent implements OnInit { this.enterClick.next(); } + onNextClick(keyBoardInstance) { + // notify subscribers + this.nextClick.next(keyBoardInstance); + } + /** * simulates clicking `CapsLock` key * @param targetState diff --git a/src/core/src/directives/keyboard.directive.ts b/src/core/src/directives/keyboard.directive.ts index 21c6051d..caef87af 100644 --- a/src/core/src/directives/keyboard.directive.ts +++ b/src/core/src/directives/keyboard.directive.ts @@ -28,6 +28,8 @@ export class MatKeyboardDirective implements OnDestroy { @Output() shiftClick: EventEmitter = new EventEmitter(); + @Output() nextClick: EventEmitter = new EventEmitter(); + constructor(private _elementRef: ElementRef, private _keyboardService: MatKeyboardService, @Optional() @Self() private _control?: NgControl) {} @@ -57,6 +59,7 @@ export class MatKeyboardDirective implements OnDestroy { this._keyboardRef.instance.capsClick.subscribe(() => this.capsClick.next()); this._keyboardRef.instance.altClick.subscribe(() => this.altClick.next()); this._keyboardRef.instance.shiftClick.subscribe(() => this.shiftClick.next()); + this._keyboardRef.instance.nextClick.subscribe((keyboardInstance) => this.nextClick.next(keyboardInstance)); } @HostListener('blur', ['$event']) From 42b2a03e34e135665ee3e5424366720adbb0a311 Mon Sep 17 00:00:00 2001 From: Aayush Date: Thu, 14 Mar 2019 17:47:42 +0545 Subject: [PATCH 7/7] Increased the font size for the hide keyboard --- .../src/components/keyboard-key/keyboard-key.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/src/components/keyboard-key/keyboard-key.component.scss b/src/core/src/components/keyboard-key/keyboard-key.component.scss index ca65fd84..69e3c04e 100644 --- a/src/core/src/components/keyboard-key/keyboard-key.component.scss +++ b/src/core/src/components/keyboard-key/keyboard-key.component.scss @@ -60,8 +60,8 @@ $mat-keyboard-capslock-shine: #adff2f !default; &-hide { color: black; .material-icons { - font-size: 30px; - height: 30px; + font-size: 45px; + height: 45px; } }