TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

* Add styles for modals with dangerZone

Browse Source 
* 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
8 changed files with 148 additions and 138 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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. 71
      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. 142
      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

6
app/assets/stylesheets/content/_forms.sass
Unescape View File

@ -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

23
app/assets/stylesheets/content/_modal.lsg
Unescape View File

@ -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>
```

17
app/assets/stylesheets/content/_modal.sass
Unescape View File

@ -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

71
frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.html
Unescape View File

@ -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>

5
frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.sass
Unescape View File

@ -1,5 +0,0 @@
.confirm-dialog--modal
p
margin-right: 15px

16
frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.ts
Unescape View File

@ -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);

142
frontend/src/app/components/modals/wp-destroy-modal/wp-destroy.modal.html
Unescape View File

@ -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>

6
frontend/src/app/modules/grids/widgets/time-entries/list/time-entries-list.component.ts
Unescape View File

@ -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) => {

Write Preview
Loading…
Cancel
Save