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

---
 src/app/vault/add-edit.component.html | 65 +++++++++++++--------------
 src/scss/box.scss                     | 52 ++++++++++-----------
 2 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 92acab02f9..30f56be49e 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -261,41 +261,38 @@
                     {{'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 box-draggable-row" 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}}">
-                                    <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
-                                        *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
-                                    <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
-                                        name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
-                                        *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" 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}}">
+                                <input id="fieldValue{{i}}" type="text" name="Field.Value{{i}}" [(ngModel)]="f.value"
+                                    *ngIf="f.type === fieldType.Text" placeholder="{{'value' | i18n}}">
+                                <input id="fieldValue{{i}}" type="{{f.showValue ? 'text' : 'password'}}"
+                                    name="Field.Value{{i}}" [(ngModel)]="f.value" class="monospaced"
+                                    *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" appBoxRow>
                         <a href="#" appStopClick (click)="addField()">
diff --git a/src/scss/box.scss b/src/scss/box.scss
index dfddb09695..c31b58461a 100644
--- a/src/scss/box.scss
+++ b/src/scss/box.scss
@@ -303,10 +303,6 @@
                     }
                 }
             }
-
-            &:last-child {
-                padding-right: 2px !important;
-            }
         }
 
         &.no-pad .row-btn {
@@ -315,6 +311,33 @@
         }
     }
 
+    &:not(.box-draggable-row) {
+        .action-buttons .row-btn:last-child {
+            padding-right: 2px !important;
+        }
+    }
+
+    .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);
@@ -350,24 +373,3 @@
         }
     }
 }
-
-.box-drag-handle {
-    cursor: move;
-    margin-left: 5px;
-    user-select: none;
-
-    @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');
-    }
-}