68346: Further alignment fixes and separate drag handle component

src/app/+item-page/edit-item-page/edit-item-page.module.ts

@@ -26,6 +26,7 @@ import { ItemMoveComponent } from './item-move/item-move.component';
 import { ItemEditBitstreamBundleComponent } from './item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component';
 import { BundleDataService } from '../../core/data/bundle-data.service';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ItemEditBitstreamDragHandleComponent } from './item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component';
 
 /**
  * Module that contains all components related to the Edit Item page administrator functionality
@@ -61,6 +62,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
     EditRelationshipListComponent,
     ItemCollectionMapperComponent,
     ItemMoveComponent,
+    ItemEditBitstreamDragHandleComponent
   ],
   providers: [
     BundleDataService

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html

@@ -25,7 +25,10 @@
 
   <div *ngIf="item && bundles?.length > 0" class="container table-bordered mt-4">
     <div class="row header-row font-weight-bold">
-      <div class="col-2 col-md-3 col-lg-4 row-element">{{'item.edit.bitstreams.headers.name' | translate}}</div>
+      <div class="col-2 col-md-3 col-lg-4 row-element">
+        <ds-item-edit-bitstream-drag-handle></ds-item-edit-bitstream-drag-handle>
+        {{'item.edit.bitstreams.headers.name' | translate}}
+      </div>
       <div class="col-2 col-sm-3 row-element">{{'item.edit.bitstreams.headers.description' | translate}}</div>
       <div class="col-2 text-center row-element">{{'item.edit.bitstreams.headers.format' | translate}}</div>
       <div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center row-element">{{'item.edit.bitstreams.headers.actions' | translate}}</div>

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss

@@ -17,11 +17,16 @@
 }
 
 .drag-handle {
+  visibility: hidden;
   &:hover {
     cursor: grab;
   }
 }
 
+.bitstream-row:hover .drag-handle {
+  visibility: visible !important;
+}
+
 .cdk-drag-preview {
   margin-left: 0;
   box-sizing: border-box;

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

 <ng-template #bundleView>
   <div class="row bundle-row">
-    <div class="col-6 col-sm-7 col-md-8 col-lg-9 font-weight-bold row-element d-flex align-items-center">{{'item.edit.bitstreams.bundle.name' | translate:{ name: bundle.name } }}</div>
+    <div class="col-6 col-sm-7 col-md-8 col-lg-9 font-weight-bold row-element d-flex">
+      <ds-item-edit-bitstream-drag-handle></ds-item-edit-bitstream-drag-handle>
+      <div class="float-left d-flex align-items-center">
+        {{'item.edit.bitstreams.bundle.name' | translate:{ name: bundle.name } }}
+      </div>
+    </div>
     <div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center row-element">
       <div class="btn-group bundle-action-buttons">
         <button [routerLink]="['/items/', item.id, 'bitstreams', 'new']"
@@ -13,7 +18,7 @@
     </div>
   </div>
   <div [id]="bundle.id" class="bundle-bitstreams-list" *ngVar="((updates$ | async) | dsObjectValues) as updateValues" cdkDropList (cdkDropListDropped)="drop($event)">
-    <div class="row" *ngFor="let updateValue of updateValues" cdkDrag
+    <div class="row bitstream-row" *ngFor="let updateValue of updateValues" cdkDrag
          [ngClass]="{
                   'table-warning': updateValue.changeType === 0,
                   'table-danger': updateValue.changeType === 2,
@@ -22,9 +27,7 @@
                 }">
       <ds-item-edit-bitstream [fieldUpdate]="updateValue"
                               [bundleUrl]="bundle.self">
-        <div slot="drag-handle" class="drag-handle text-secondary float-left p-1 d-flex align-items-center" cdkDragHandle>
-          <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
-        </div>
+        <ds-item-edit-bitstream-drag-handle slot="drag-handle"></ds-item-edit-bitstream-drag-handle>
       </ds-item-edit-bitstream>
     </div>
     <ng-container *ngVar="(bitstreamsRD$ | async) as bitstreamsRD">

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.html

+<ng-template #handleView>
+  <div class="drag-handle text-muted float-left p-1 mr-2 d-flex align-items-center" cdkDragHandle>
+    <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
+  </div>
+</ng-template>

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.ts

+import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+
+@Component({
+  selector: 'ds-item-edit-bitstream-drag-handle',
+  styleUrls: ['../item-bitstreams.component.scss'],
+  templateUrl: './item-edit-bitstream-drag-handle.component.html',
+})
+export class ItemEditBitstreamDragHandleComponent implements OnInit {
+  /**
+   * The view on the drag-handle
+   */
+  @ViewChild('handleView') handleView;
+
+  constructor(private viewContainerRef: ViewContainerRef) {
+  }
+
+  ngOnInit(): void {
+    this.viewContainerRef.createEmbeddedView(this.handleView);
+  }
+
+}

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html

 <ng-template #bitstreamView>
   <div class="col-2 col-md-3 col-lg-4 row-element d-flex">
     <ng-content select="[slot=drag-handle]"></ng-content>
-    <div class="float-left d-flex align-items-center ml-2">
+    <div class="float-left d-flex align-items-center">
       {{ bitstream.name }}
     </div>
   </div>