* Add styles for modals with dangerZone

* Make confirmDialog Component customizable for that dangerZone styling
* Apply correct HTML structure for the WpDestroy Modal to use the new dangerZone styling
pull/8420/head
Henriette Darge 4 years ago
parent 31ac0d39ef
commit de4e50f821
  1. 6
      app/assets/stylesheets/content/_forms.sass
  2. 23
      app/assets/stylesheets/content/_modal.lsg
  3. 17
      app/assets/stylesheets/content/_modal.sass
  4. 23
      frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.html
  5. 5
      frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.sass
  6. 16
      frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.ts
  7. 22
      frontend/src/app/components/modals/wp-destroy-modal/wp-destroy.modal.html
  8. 6
      frontend/src/app/modules/grids/widgets/time-entries/list/time-entries-list.component.ts

@ -181,12 +181,6 @@ hr
.form--space
padding-top: 1rem
&.-left-spacing
padding-left: 1rem
&.-big
padding-top: 20px
.form--row
@include grid-block
@include grid-visible-overflow

@ -55,7 +55,7 @@
</ul>
```
## Modals: With footer
## Modals: Highlighted and with footer
```
<div class="op-modal--modal-container -highlight">
@ -87,3 +87,24 @@
</div>
</div>
```
## Modals: Danger zone highlighting
```
<div class="op-modal--modal-container -highlight -danger-zone">
<div class="op-modal--modal-header">
<h3 class="icon-context icon-warning">Confirm deletion of Work Package</h3>
<a class="op-modal--modal-close-button" title="Close popup">
<i class="icon-close"></i>
</a>
</div>
<div class="op-modal--modal-body">
<p>Are you sure you want to delete the following work package?<p>
<p> ... </p>
</div>
<div class="op-modal--modal-footer">
<button name="button" type="submit" class="button -danger">Continue</button>
<button name="button" type="submit" class="button">Cancel</button>
</div>
</div>
```

@ -88,7 +88,6 @@ $modal-footer-height: $modal-header-height
margin-bottom: 0px
.op-modal--modal-footer
margin: 1em 0
padding: 0 1.5rem
button:last-of-type
@ -127,6 +126,10 @@ $modal-footer-height: $modal-header-height
h2, h3
@include text-shortener
margin: 0
border: none
.op-modal--modal-footer
margin: 1em 0
.op-modal--modal-close-button
right: 10px
@ -134,10 +137,18 @@ $modal-footer-height: $modal-header-height
@include varprop(line-height, modal-header-height)
@include varprop(color, header-item-font-color)
.avatar,
.icon-context
.avatar
margin-right: 0.5rem
&.-danger-zone
.op-modal--modal-header
@include varprop(background-color, content-form-danger-zone-bg-color)
@include varprop(border-bottom-color, content-form-danger-zone-bg-color)
.op-modal--modal-close-button
@include varprop(color, content-form-danger-zone-font-color)
// Specific styles for columns-modal
.columns-modal--content
margin-bottom: 15px

@ -1,8 +1,8 @@
<div class="op-modal--portal confirm-form-submit--modal ngdialog-theme-openproject">
<div class="op-modal--modal-container confirm-dialog--modal loading-indicator--location"
[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
@ -11,29 +11,25 @@
[attr.title]="text.close_popup">
</i>
</a>
<h3 class="icon-context icon-attention" [textContent]="text.title"></h3>
</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>
<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>
</ng-container>
</div>
</section>
<div class="form--space -left-spacing">
<div class="op-modal--modal-footer">
<button class="confirm-form-submit--continue button"
[ngClass]="classes.button"
(click)="confirmAndClose($event)" [textContent]="text.button_continue"
[ngClass]="dangerHighlighting ? '-danger': '-highlight'"
(click)="confirmAndClose($event)"
[textContent]="text.button_continue"
[attr.title]="text.button_continue">
</button>
<button class="confirm-form-submit--cancel button"
@ -41,8 +37,7 @@
[textContent]="text.button_cancel"
[attr.title]="text.button_cancel">
</button>
</div>
</form>
</div>
</div>
</div>

@ -43,12 +43,11 @@ export interface ConfirmDialogOptions {
showClose?:boolean;
closeByDocument?:boolean;
passedData?:string[];
classes?:{form?:string; button?:string};
dangerHighlighting?:boolean;
}
@Component({
templateUrl: './confirm-dialog.modal.html',
styleUrls:['./confirm-dialog.modal.sass']
templateUrl: './confirm-dialog.modal.html'
})
export class ConfirmDialogModal extends OpModalComponent {
@ -66,9 +65,9 @@ export class ConfirmDialogModal extends OpModalComponent {
close_popup: this.I18n.t('js.close_popup_title')
};
public passedData?:string[];
public passedData:string[];
public classes:{form?:string; button?:string} = {};
public dangerHighlighting:boolean;
constructor(readonly elementRef:ElementRef,
@Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
@ -77,10 +76,9 @@ export class ConfirmDialogModal extends OpModalComponent {
super(locals, cdRef, elementRef);
this.options = locals.options || {};
this.classes = this.options.classes || {};
this.classes.button = this.options.classes?.button || '-highlight';
//this.classes = this.options.classes;
this.passedData = this.options?.passedData || [];
this.dangerHighlighting = _.defaultTo(this.options.dangerHighlighting, false);
this.passedData = _.defaultTo(this.options.passedData, []);
this.closeOnEscape = _.defaultTo(this.options.closeByEscape, true);
this.closeOnOutsideClick = _.defaultTo(this.options.closeByDocument, true);
this.showClose = _.defaultTo(this.options.showClose, true);

@ -1,23 +1,19 @@
<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"
<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">
<div class="op-modal--modal-body">
<ng-container *ngIf="singleWorkPackage">
<p>
<span [textContent]="text.text"></span>
@ -30,7 +26,7 @@
</p>
<div *ngIf="singleWorkPackageChildren && singleWorkPackageChildren.length > 0">
<p class="danger-zone--warning">
<span class="icon icon-error"></span>
<span class="icon-context icon-error"></span>
<strong [textContent]="text.warning"></strong>:
<span [textContent]="text.hasChildren(singleWorkPackage)"></span>
</p>
@ -47,7 +43,7 @@
</ng-container>
<ng-container *ngIf="workPackages.length > 1">
<p class="danger-zone--warning">
<span class="icon icon-error"></span>
<span class="icon-context icon-error"></span>
<strong [textContent]="text.text"></strong>
</p>
<ul>
@ -74,9 +70,8 @@
</label>
</div>
</div>
</section>
<div class="form--space -left-spacing">
<div class="op-modal--modal-footer">
<button class="button -danger"
[textContent]="text.confirm"
[attr.disabled]="busy || blockedDueToUnconfirmedChildren || undefined"
@ -87,6 +82,5 @@
(click)="closeMe($event)">
</button>
</div>
</form>
</div>
</div>

@ -122,9 +122,11 @@ export abstract class WidgetTimeEntriesListComponent extends AbstractWidgetCompo
closeByDocument: true,
passedData:[
'#' + entry.workPackage?.idFromLink + ' ' + entry.workPackage?.name,
this.timezone.toHours(entry.hours) + ' ' + this.text.hour + ' (' + entry.activity?.name + ')'
this.i18n.t(
'js.units.hour',
{ count: this.timezone.toHours(entry.hours) }) + ' (' + entry.activity?.name + ')'
],
classes: {form:'danger-zone' , button:'-danger'}
dangerHighlighting: true
}).then(() => {
entry.delete().then(() => {
let newEntries = this.entries.filter((anEntry) => {

Loading…
Cancel
Save