Add default action attribute to modal

This commit is contained in:
kiswa 2017-01-31 23:57:57 +00:00
parent cebbdb0a16
commit a89d473e62
4 changed files with 19 additions and 6 deletions

View File

@ -135,7 +135,7 @@
<button class="flat" <button class="flat"
(click)="removeBoard()" (click)="removeBoard()"
[disabled]="saving">Yes</button> [disabled]="saving">Yes</button>
<button <button #defaultAction
(click)="modal.close(MODAL_CONFIRM_ID)" (click)="modal.close(MODAL_CONFIRM_ID)"
[disabled]="saving">No</button> [disabled]="saving">No</button>
</div> </div>
@ -272,7 +272,7 @@
</div> </div>
<div class="buttons"> <div class="buttons">
<button (click)="addEditBoard()" [disabled]="saving"> <button #defaultAction (click)="addEditBoard()" [disabled]="saving">
<i class="icon" <i class="icon"
[ngClass]="{ 'icon-plus': modalProps.title === 'Add', 'icon-floppy': modalProps.title !== 'Add' }"></i> [ngClass]="{ 'icon-plus': modalProps.title === 'Add', 'icon-floppy': modalProps.title !== 'Add' }"></i>
{{ modalProps.title === 'Add' ? 'Add' : 'Save' }} {{ modalProps.title === 'Add' ? 'Add' : 'Save' }}

View File

@ -33,6 +33,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div *ngIf="loading" class="center"> <div *ngIf="loading" class="center">
<div class="spinner"></div> <div class="spinner"></div>
</div> </div>
@ -48,8 +49,10 @@
modal-id="{{ MODAL_CONFIRM_ID }}"> modal-id="{{ MODAL_CONFIRM_ID }}">
<div class="center">Removing a user cannot be undone.<br>Continue?</div> <div class="center">Removing a user cannot be undone.<br>Continue?</div>
<div class="buttons"> <div class="buttons">
<button class="flat" (click)="removeUser()">Yes</button> <button class="flat"
<button (click)="modal.close(MODAL_CONFIRM_ID)">No</button> (click)="removeUser()">Yes</button>
<button #defaultAction
(click)="modal.close(MODAL_CONFIRM_ID)">No</button>
</div> </div>
</tb-modal> </tb-modal>
@ -110,7 +113,8 @@
</label> </label>
<div class="buttons"> <div class="buttons">
<button (click)="addEditUser()" [disabled]="saving"> <button #defaultAction
(click)="addEditUser()" [disabled]="saving">
<i class="icon" <i class="icon"
[ngClass]="{ 'icon-plus': modalProps.prefix === '', [ngClass]="{ 'icon-plus': modalProps.prefix === '',
'icon-floppy': modalProps.prefix !== '' }"></i> 'icon-floppy': modalProps.prefix !== '' }"></i>

View File

@ -4,7 +4,8 @@
<div class="modal" <div class="modal"
[ngClass]="{ wide: wide, animated: animate, 'modal-closed': !isOpen }" [ngClass]="{ wide: wide, animated: animate, 'modal-closed': !isOpen }"
(click)="filterClick($event)"> (click)="filterClick($event)"
(keyup.enter)="clickDefaultAction()">
<div class="title" *ngIf="modalTitle"> <div class="title" *ngIf="modalTitle">
<h2> <h2>
{{ modalTitle }} {{ modalTitle }}

View File

@ -19,6 +19,7 @@ export class Modal implements OnInit {
@Input() wide = false; @Input() wide = false;
@ContentChild('focusMe') focusElement: any; @ContentChild('focusMe') focusElement: any;
@ContentChild('defaultAction') defaulActionElement: any;
isOpen = false; isOpen = false;
animate = true; animate = true;
@ -43,11 +44,18 @@ export class Modal implements OnInit {
private filterClick(event: Event): void { private filterClick(event: Event): void {
event = event || window.event; event = event || window.event;
// Prevent click from propagating to modal container
if (event.stopPropagation) { if (event.stopPropagation) {
event.stopPropagation(); event.stopPropagation();
} else { } else {
event.cancelBubble = true; event.cancelBubble = true;
} }
} }
private clickDefaultAction(): void {
if (this.defaulActionElement) {
this.defaulActionElement.nativeElement.click();
}
}
} }