Merge branch 'release/10.6' of https://github.com/opf/openproject into release/10.6

app/assets/stylesheets/content/_forms.sass

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

app/assets/stylesheets/content/_modal.lsg

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

app/assets/stylesheets/content/_modal.sass

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

config/locales/js-en.yml

@@ -948,6 +948,9 @@ en:
         has_children: "The work package has %{childUnits}:"
         confirm_deletion_children: "I acknowledge that ALL descendants of the listed work packages will be recursively removed."
         deletes_children: "All child work packages and their descendants will also be recursively deleted."
+      destroy_time_entry:
+        title: "Confirm deletion of time entry"
+        text: "Are you sure you want to delete the following time entry?"
 
     notice_no_results_to_display: "No visible results to display."
     notice_successful_create: "Successful creation."

frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.html

@@ -1,5 +1,6 @@
 <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">
@@ -14,10 +15,19 @@
     </div>
 
     <div class="ngdialog-body op-modal--modal-body">
-      <p [textContent]="text.text"></p>
+      <p>
+        <span [textContent]="text.text"></span>
+        <br/>
+        <span *ngFor="let data of passedData">
+          <br/>
+          <strong>{{data}}</strong>
+        </span>
+      </p>
     </div>
+
     <div class="op-modal--modal-footer">
-      <button class="confirm-form-submit--continue button -highlight"
+      <button class="confirm-form-submit--continue button"
+              [ngClass]="dangerHighlighting ? '-danger': '-highlight'"
               (click)="confirmAndClose($event)"
               [textContent]="text.button_continue"
               [attr.title]="text.button_continue">

frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.sass

@@ -1,8 +0,0 @@
-
-.op-modal--modal-close-button
-  right: 1.75rem
-  top: 1.6rem
-
-.op-modal--modal-container
-  padding-bottom: 0
-   

frontend/src/app/components/modals/confirm-dialog/confirm-dialog.modal.ts

@@ -42,11 +42,12 @@ export interface ConfirmDialogOptions {
   closeByEscape?:boolean;
   showClose?:boolean;
   closeByDocument?:boolean;
+  passedData?:string[];
+  dangerHighlighting?:boolean;
 }
 
 @Component({
-  templateUrl: './confirm-dialog.modal.html',
-  styleUrls:['./confirm-dialog.modal.sass']
+  templateUrl: './confirm-dialog.modal.html'
 })
 export class ConfirmDialogModal extends OpModalComponent {
 
@@ -64,18 +65,23 @@ export class ConfirmDialogModal extends OpModalComponent {
     close_popup: this.I18n.t('js.close_popup_title')
   };
 
+  public passedData:string[];
+
+  public dangerHighlighting:boolean;
+
   constructor(readonly elementRef:ElementRef,
               @Inject(OpModalLocalsToken) public locals:OpModalLocalsMap,
               readonly cdRef:ChangeDetectorRef,
               readonly I18n:I18nService) {
 
     super(locals, cdRef, elementRef);
-
     this.options = locals.options || {};
+
+    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);
-
     // override default texts if any
     this.text = _.defaults(this.options.text, this.text);
   }

frontend/src/app/components/modals/wp-destroy-modal/wp-destroy.modal.html

@@ -1,23 +1,19 @@
 <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>

frontend/src/app/modules/grids/widgets/time-entries/list/time-entries-list.component.ts

@@ -20,8 +20,8 @@ export abstract class WidgetTimeEntriesListComponent extends AbstractWidgetCompo
     edit: this.i18n.t('js.button_edit'),
     delete: this.i18n.t('js.button_delete'),
     confirmDelete: {
-      text: this.i18n.t('js.text_are_you_sure'),
-      title: this.i18n.t('js.modals.form_submit.title')
+      text: this.i18n.t('js.modals.destroy_time_entry.text'),
+      title: this.i18n.t('js.modals.destroy_time_entry.title')
     },
     noResults: this.i18n.t('js.grid.widgets.time_entries_list.no_results'),
   };
@@ -115,12 +115,18 @@ export abstract class WidgetTimeEntriesListComponent extends AbstractWidgetCompo
 
   public deleteIfConfirmed(event:Event, entry:TimeEntryResource) {
     event.preventDefault();
-
     this.confirmDialog.confirm({
       text: this.text.confirmDelete,
       closeByEscape: true,
       showClose: true,
-      closeByDocument: true
+      closeByDocument: true,
+      passedData:[
+        '#' + entry.workPackage?.idFromLink + ' ' + entry.workPackage?.name,
+        this.i18n.t(
+          'js.units.hour',
+          { count: this.timezone.toHours(entry.hours) }) + ' (' + entry.activity?.name + ')'
+      ],
+      dangerHighlighting: true
     }).then(() => {
       entry.delete().then(() => {
         let newEntries = this.entries.filter((anEntry) => {