drag n drop cleanup

src/app/vault/add-edit.component.html

@@ -125,8 +125,7 @@
                         </div>
                     </div>
                     <ng-container *ngIf="cipher.login.hasUris">
-                        <div class="row" appBoxRow
-                            *ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
+                        <div class="row" *ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
                             <div class="col-7 form-group">
                                 <label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
                                 <div class="input-group">
@@ -361,10 +360,8 @@
                         class="form-control"></textarea>
                 </div>
                 <h3 class="mt-4">{{'customFields' | i18n}}</h3>
-                <ng-container *ngIf="cipher.hasFields">
-                    <div cdkDropList (cdkDropListDropped)="drop($event)">
-                        <div class="row" appBoxRow cdkDrag
-                            *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction" >
+                <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
+                    <div class="row" cdkDrag *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction">
                         <div class="col-5 form-group">
                             <div class="d-flex">
                                 <label for="fieldName{{i}}">{{'name' | i18n}}</label>
@@ -400,7 +397,8 @@
                                             title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
                                             tabindex="-1">
                                             <i class="fa fa-lg"
-                                                    [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
+                                                [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}">
+                                            </i>
                                         </button>
                                         <button type="button" class="btn btn-outline-secondary"
                                             title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
@@ -418,14 +416,14 @@
                                     title="{{'remove' | i18n}}">
                                     <i class="fa fa-minus-circle fa-lg"></i>
                                 </button>
-                                    <span class="text-muted cursor-move" title="{{'dragToSort' | i18n}}">
-                                        <i class="fa fa-bars"></i>
-                                    </span>
+                                <button type="button" class="btn btn-link text-muted cursor-move"
+                                    title="{{'dragToSort' | i18n}}">
+                                    <i class="fa fa-bars fa-lg"></i>
+                                </button>
                             </div>
                         </div>
                     </div>
                 </div>
-                </ng-container>
                 <a href="#" appStopClick (click)="addField()" class="d-inline-block mb-2">
                     <i class="fa fa-plus-circle fa-fw"></i> {{'newCustomField' | i18n}}
                 </a>

src/locales/en/messages.json

@@ -151,6 +151,9 @@
   "value": {
     "message": "Value"
   },
+  "dragToSort": {
+    "message": "Drag to sort"
+  },
   "cfTypeText": {
     "message": "Text"
   },
@@ -406,9 +409,6 @@
   "unselectAll": {
     "message": "Unselect All"
   },
-  "value": {
-    "message": "Value"
-  },
   "launch": {
     "message": "Launch"
   },

src/scss/styles.scss

@@ -788,12 +788,11 @@ img.logo {
 
 .cdk-drag-preview {
     z-index: $zindex-tooltip !important;
-    padding: $spacer / 2;
-    opacity: .8;
+    opacity: 0.8;
     background-color: $white;
     border-radius: $border-radius;
 }
 
 .cursor-move {
-    cursor: move;
+    cursor: move !important;
 }