68346: Drag-handle in front of row

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

@@ -16,8 +16,10 @@
   border-top: $table-border-width solid $table-border-color;
 }
 
-.drag-handle:hover {
-  cursor: move;
+.drag-handle {
+  &:hover {
+    cursor: grab;
+  }
 }
 
 .cdk-drag-preview {

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

@@ -22,9 +22,9 @@
                 }">
       <ds-item-edit-bitstream [fieldUpdate]="updateValue"
                               [bundleUrl]="bundle.self">
-        <button disabled slot="drag-handle" class="drag-handle btn btn-outline-secondary btn-sm" cdkDragHandle>
+        <div slot="drag-handle" class="drag-handle text-secondary float-left p-1" cdkDragHandle>
           <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
-        </button>
+        </div>
       </ds-item-edit-bitstream>
     </div>
     <ng-container *ngVar="(bitstreamsRD$ | async) as bitstreamsRD">

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">
-    {{ bitstream.name }}
+    <ng-content select="[slot=drag-handle]"></ng-content>
+    <div class="float-left">
+      {{ bitstream.name }}
+    </div>
   </div>
   <div class="col-2 col-sm-3 row-element">
     {{ bitstream.description }}
@@ -29,8 +32,6 @@
               title="{{'item.edit.bitstreams.edit.buttons.undo' | translate}}">
         <i class="fas fa-undo-alt fa-fw"></i>
       </button>
-      <ng-content select="[slot=drag-handle]">
-      </ng-content>
     </div>
   </div>
 </ng-template>