* Make confirmDialog Component customizable for that dangerZone styling * Apply correct HTML structure for the WpDestroy Modal to use the new dangerZone stylingpull/8420/head
parent
31ac0d39ef
commit
de4e50f821
@ -1,48 +1,43 @@ |
||||
<div class="op-modal--portal confirm-form-submit--modal ngdialog-theme-openproject"> |
||||
<div class="op-modal--portal confirm-form-submit--modal ngdialog-theme-openproject"> |
||||
<div class="op-modal--modal-container confirm-dialog--modal loading-indicator--location" |
||||
data-indicator-name="modal" |
||||
tabindex="0"> |
||||
|
||||
[ngClass]="{'-highlight -danger-zone' : dangerHighlighting }" |
||||
data-indicator-name="modal" |
||||
tabindex="0"> |
||||
<div class="op-modal--modal-header"> |
||||
<a class="op-modal--modal-close-button" *ngIf="showClose"> |
||||
<i |
||||
class="icon-close" |
||||
(click)="closeMe($event)" |
||||
[attr.title]="text.close_popup"> |
||||
class="icon-close" |
||||
(click)="closeMe($event)" |
||||
[attr.title]="text.close_popup"> |
||||
</i> |
||||
</a> |
||||
<h3 class="icon-context icon-attention" [textContent]="text.title"></h3> |
||||
</div> |
||||
|
||||
<div class="ngdialog-body op-modal--modal-body"> |
||||
<p> |
||||
<span [textContent]="text.text"></span> |
||||
<br/> |
||||
<span *ngFor="let data of passedData"> |
||||
<br/> |
||||
<strong>{{data}}</strong> |
||||
</span> |
||||
</p> |
||||
</div> |
||||
|
||||
<form class="form" |
||||
[ngClass]="classes?.form"> |
||||
<section class="form--section -inner-scrolling"> |
||||
<h3 class="icon-context icon-attention form--section-title" [textContent]="text.title"></h3> |
||||
<div class="modal-inner-scrolling-container"> |
||||
<ng-container> |
||||
<p> |
||||
<span [textContent]="text.text"></span> |
||||
<span *ngFor="let data of passedData"> |
||||
<br/> |
||||
<strong>{{data}}</strong> |
||||
</span> |
||||
</p> |
||||
</ng-container> |
||||
</div> |
||||
</section> |
||||
<div class="op-modal--modal-footer"> |
||||
<button class="confirm-form-submit--continue button" |
||||
[ngClass]="dangerHighlighting ? '-danger': '-highlight'" |
||||
(click)="confirmAndClose($event)" |
||||
[textContent]="text.button_continue" |
||||
[attr.title]="text.button_continue"> |
||||
</button> |
||||
<button class="confirm-form-submit--cancel button" |
||||
(click)="closeMe($event)" |
||||
[textContent]="text.button_cancel" |
||||
[attr.title]="text.button_cancel"> |
||||
</button> |
||||
|
||||
<div class="form--space -left-spacing"> |
||||
<button class="confirm-form-submit--continue button" |
||||
[ngClass]="classes.button" |
||||
(click)="confirmAndClose($event)" [textContent]="text.button_continue" |
||||
[attr.title]="text.button_continue"> |
||||
</button> |
||||
<button class="confirm-form-submit--cancel button" |
||||
(click)="closeMe($event)" |
||||
[textContent]="text.button_cancel" |
||||
[attr.title]="text.button_cancel"> |
||||
</button> |
||||
</div> |
||||
|
||||
</form> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
@ -1,5 +0,0 @@ |
||||
|
||||
|
||||
.confirm-dialog--modal |
||||
p |
||||
margin-right: 15px |
@ -1,92 +1,86 @@ |
||||
<div class="op-modal--portal "> |
||||
<div class="op-modal--portal"> |
||||
<div id="wp_destroy_modal" |
||||
class="op-modal--modal-container wp-table--configuration-modal loading-indicator--location" |
||||
class="op-modal--modal-container wp-table--configuration-modal loading-indicator--location -highlight -danger-zone" |
||||
data-indicator-name="modal" |
||||
tabindex="0"> |
||||
<div class="op-modal--modal-header"> |
||||
<a class="op-modal--modal-close-button"> |
||||
<i |
||||
class="icon-close" |
||||
(click)="closeMe($event)" |
||||
[attr.title]="text.close"> |
||||
<i class="icon-close" |
||||
(click)="closeMe($event)" |
||||
[attr.title]="text.close"> |
||||
</i> |
||||
</a> |
||||
<h3 class="icon-context icon-attention" [textContent]="text.title"></h3> |
||||
</div> |
||||
|
||||
<form name="modalWpDestroyForm" class="form danger-zone"> |
||||
<section class="form--section -inner-scrolling"> |
||||
<h3 class="form--section-title" [textContent]="text.title"></h3> |
||||
|
||||
<div class="modal-inner-scrolling-container"> |
||||
<ng-container *ngIf="singleWorkPackage"> |
||||
<p> |
||||
<span [textContent]="text.text"></span> |
||||
<br/> |
||||
<strong> |
||||
{{ singleWorkPackage.type.name }} |
||||
#{{ singleWorkPackage.id }} |
||||
{{ singleWorkPackage.subject }} |
||||
</strong> |
||||
</p> |
||||
<div *ngIf="singleWorkPackageChildren && singleWorkPackageChildren.length > 0"> |
||||
<p class="danger-zone--warning"> |
||||
<span class="icon icon-error"></span> |
||||
<strong [textContent]="text.warning"></strong>: |
||||
<span [textContent]="text.hasChildren(singleWorkPackage)"></span> |
||||
</p> |
||||
<ul> |
||||
<li *ngFor="let child of singleWorkPackageChildren"> |
||||
#<span [textContent]="child.id"></span> |
||||
<span [textContent]="child.subject || ''"></span> |
||||
</li> |
||||
</ul> |
||||
<p> |
||||
<span [textContent]="text.deletesChildren"></span> |
||||
</p> |
||||
</div> |
||||
</ng-container> |
||||
<ng-container *ngIf="workPackages.length > 1"> |
||||
<div class="op-modal--modal-body"> |
||||
<ng-container *ngIf="singleWorkPackage"> |
||||
<p> |
||||
<span [textContent]="text.text"></span> |
||||
<br/> |
||||
<strong> |
||||
{{ singleWorkPackage.type.name }} |
||||
#{{ singleWorkPackage.id }} |
||||
{{ singleWorkPackage.subject }} |
||||
</strong> |
||||
</p> |
||||
<div *ngIf="singleWorkPackageChildren && singleWorkPackageChildren.length > 0"> |
||||
<p class="danger-zone--warning"> |
||||
<span class="icon icon-error"></span> |
||||
<strong [textContent]="text.text"></strong> |
||||
<span class="icon-context icon-error"></span> |
||||
<strong [textContent]="text.warning"></strong>: |
||||
<span [textContent]="text.hasChildren(singleWorkPackage)"></span> |
||||
</p> |
||||
<ul> |
||||
<li *ngFor="let wp of workPackages"> |
||||
#<span [textContent]="wp.id"></span> |
||||
&ngsp; |
||||
<span [textContent]="wp.subject"></span> |
||||
<strong *ngIf="children(wp).length > 0"> |
||||
(+ {{ text.childCount(wp) }}) |
||||
</strong> |
||||
<li *ngFor="let child of singleWorkPackageChildren"> |
||||
#<span [textContent]="child.id"></span> |
||||
<span [textContent]="child.subject || ''"></span> |
||||
</li> |
||||
</ul> |
||||
</ng-container> |
||||
<div *ngIf="mustConfirmChildren"> |
||||
<label class="form--label-with-check-box"> |
||||
<div class="form--check-box-container"> |
||||
<input type="checkbox" |
||||
name="confirm-children-deletion" |
||||
id="confirm-children-deletion" |
||||
[(ngModel)]="childrenDeletionConfirmed" |
||||
class="form--check-box" /> |
||||
</div> |
||||
{{ text.label_confirm_children_deletion }} |
||||
</label> |
||||
</div> |
||||
<p> |
||||
<span [textContent]="text.deletesChildren"></span> |
||||
</p> |
||||
</div> |
||||
</section> |
||||
|
||||
<div class="form--space -left-spacing"> |
||||
<button class="button -danger" |
||||
[textContent]="text.confirm" |
||||
[attr.disabled]="busy || blockedDueToUnconfirmedChildren || undefined" |
||||
(click)="confirmDeletion($event)"> |
||||
</button> |
||||
<button class="button" |
||||
[textContent]="text.cancel" |
||||
(click)="closeMe($event)"> |
||||
</button> |
||||
</ng-container> |
||||
<ng-container *ngIf="workPackages.length > 1"> |
||||
<p class="danger-zone--warning"> |
||||
<span class="icon-context icon-error"></span> |
||||
<strong [textContent]="text.text"></strong> |
||||
</p> |
||||
<ul> |
||||
<li *ngFor="let wp of workPackages"> |
||||
#<span [textContent]="wp.id"></span> |
||||
&ngsp; |
||||
<span [textContent]="wp.subject"></span> |
||||
<strong *ngIf="children(wp).length > 0"> |
||||
(+ {{ text.childCount(wp) }}) |
||||
</strong> |
||||
</li> |
||||
</ul> |
||||
</ng-container> |
||||
<div *ngIf="mustConfirmChildren"> |
||||
<label class="form--label-with-check-box"> |
||||
<div class="form--check-box-container"> |
||||
<input type="checkbox" |
||||
name="confirm-children-deletion" |
||||
id="confirm-children-deletion" |
||||
[(ngModel)]="childrenDeletionConfirmed" |
||||
class="form--check-box" /> |
||||
</div> |
||||
{{ text.label_confirm_children_deletion }} |
||||
</label> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
|
||||
<div class="op-modal--modal-footer"> |
||||
<button class="button -danger" |
||||
[textContent]="text.confirm" |
||||
[attr.disabled]="busy || blockedDueToUnconfirmedChildren || undefined" |
||||
(click)="confirmDeletion($event)"> |
||||
</button> |
||||
<button class="button" |
||||
[textContent]="text.cancel" |
||||
(click)="closeMe($event)"> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
Loading…
Reference in new issue