Add default action attribute to modal
This commit is contained in:
parent
cebbdb0a16
commit
a89d473e62
@ -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' }}
|
||||||
|
@ -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>
|
||||||
|
@ -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 }}
|
||||||
|
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user