From 3fa7e976fbb00db5914c0e665a00e5f3045d8c6d Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Thu, 28 Mar 2019 16:28:04 -0400
Subject: [PATCH] drag n drop adjustments

---
 src/popup/scss/box.scss                 | 60 ++++++++++++++----------
 src/popup/vault/add-edit.component.html | 62 ++++++++++++-------------
 2 files changed, 65 insertions(+), 57 deletions(-)

diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss
index 5e5874b027..10033fa352 100644
--- a/src/popup/scss/box.scss
+++ b/src/popup/scss/box.scss
@@ -377,10 +377,6 @@
                     }
                 }
             }
-
-            &:last-child {
-                padding-right: 2px !important;
-            }
         }
 
         &.no-pad .row-btn {
@@ -389,6 +385,41 @@
         }
     }
 
+    &:not(.box-draggable-row) {
+        .action-buttons .row-btn:last-child {
+            padding-right: 2px !important;
+        }
+    }
+
+    &.box-draggable-row {
+        &.box-content-row-checkbox {
+            input[type="checkbox"] + .drag-handle {
+                margin-left: 10px;
+            }
+        }
+    }
+
+    .drag-handle {
+        cursor: move;
+        padding: 10px 2px 10px 8px;
+        user-select: none;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
+    }
+
+    &.cdk-drag-preview {
+        position: relative;
+        display: flex;
+        align-items: center;
+        opacity: 0.8;
+    
+        @include themify($themes) {
+            background-color: themed('boxBackgroundColor');
+        }
+    }
+
     select.field-type {
         margin: 5px 0 0 25px;
         width: calc(100% - 25px);
@@ -504,24 +535,3 @@
         }
     }
 }
-
-.box-drag-handle {
-    cursor: move;
-    user-select: none;
-    margin-left: 5px;
-
-    @include themify($themes) {
-        color: themed('mutedColor');
-    }
-}
-
-.cdk-drag-preview {
-    position: relative;
-    display: flex;
-    align-items: center;
-    opacity: .8;
-
-    @include themify($themes) {
-        background-color: themed('boxBackgroundColor');
-    }
-}
diff --git a/src/popup/vault/add-edit.component.html b/src/popup/vault/add-edit.component.html
index c5bfbd88f3..7782b97060 100644
--- a/src/popup/vault/add-edit.component.html
+++ b/src/popup/vault/add-edit.component.html
@@ -275,39 +275,37 @@
                 {{'customFields' | i18n}}
             </div>
             <div class="box-content">
-                <div cdkDropList (cdkDropListDropped)="drop($event)">
-                    <ng-container *ngIf="cipher.hasFields">
-                        <div class="box-content-row box-content-row-multi" appBoxRow cdkDrag
-                            *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
-                            [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
-                            <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
-                                <i class="fa fa-minus-circle fa-lg"></i>
-                            </a>
-                            <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
-                            <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
-                            <div class="row-main">
-                                <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
-                                    class="row-label" placeholder="{{'name' | i18n}}" appInputVerbatim>
-                                <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
-                                    *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}" appInputVerbatim>
-                                <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
-                                    name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced" appInputVerbatim
-                                    *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
-                            </div>
-                            <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" [(ngModel)]="f.value"
-                                *ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
-                            <div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
-                                <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
-                                    (click)="toggleFieldValue(f)">
-                                    <i class="fa fa-lg"
-                                        [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
-                                </a>
-                            </div>
-                            <span class="box-drag-handle" title="{{'dragToSort' | i18n}}" cdkDragHandle>
-                                <i class="fa fa-bars"></i>
-                            </span>
+                <div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="cipher.hasFields">
+                    <div class="box-content-row box-content-row-multi box-draggable-row" appBoxRow cdkDrag
+                        *ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
+                        [ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
+                        <a href="#" appStopClick (click)="removeField(f)" title="{{'remove' | i18n}}">
+                            <i class="fa fa-minus-circle fa-lg"></i>
+                        </a>
+                        <label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
+                        <label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
+                        <div class="row-main">
+                            <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
+                                class="row-label" placeholder="{{'name' | i18n}}" appInputVerbatim>
+                            <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
+                                *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}" appInputVerbatim>
+                            <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
+                                name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced" appInputVerbatim
+                                *ngIf="f.type === fieldType.Hidden" placeholder="{{'value' | i18n}}">
                         </div>
-                    </ng-container>
+                        <input id="fieldValue{{i}}" name="Field.Value{{i}}" type="checkbox" [(ngModel)]="f.value"
+                            *ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
+                        <div class="action-buttons" *ngIf="f.type === fieldType.Hidden">
+                            <a class="row-btn" href="#" appStopClick appBlurClick title="{{'toggleVisibility' | i18n}}"
+                                (click)="toggleFieldValue(f)">
+                                <i class="fa fa-lg"
+                                    [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
+                            </a>
+                        </div>
+                        <div class="drag-handle" title="{{'dragToSort' | i18n}}" cdkDragHandle>
+                            <i class="fa fa-bars"></i>
+                        </div>
+                    </div>
                 </div>
                 <div class="box-content-row box-content-row-newmulti" appBoxRow>
                     <a href="#" appStopClick (click)="addField()">