Drag n drop sorting for custom fields (#906)

* Try to fix some security vulnerabilities present in used packages

(Ran npm audit fix, solved some of the issues)

* Implement custom field ordering with new handle placement

(WIP, as an update for the jslib is needed to work correctly)

* Update reference for jslib

* Restore original state of package-lock.json

* Downgrade node sass package

package-lock.json

@@ -413,6 +413,15 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/cdk": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.2.1.tgz",
+      "integrity": "sha512-oU1Pjq3JkDtkXquLxWK84A2jOCeYRf352dVGbQCxWoSOQ5KBtMAd42huGidPiOSHN6/f7xZwL3n4fq3fVIut8A==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/common": {
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-7.2.1.tgz",
@@ -9648,6 +9657,12 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
+    "parse5": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+      "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+      "optional": true
+    },
     "parseqs": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",

package.json

@@ -21,7 +21,7 @@
     "test:watch": "karma start"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^7.2.1",
+    "@angular/compiler-cli": "^7.2.11",
     "@ngtools/webpack": "^7.2.2",
     "@types/chrome": "^0.0.73",
     "@types/jasmine": "^2.8.8",
@@ -75,6 +75,7 @@
   },
   "dependencies": {
     "@angular/animations": "7.2.1",
+    "@angular/cdk": "7.2.1",
     "@angular/common": "7.2.1",
     "@angular/compiler": "7.2.1",
     "@angular/core": "7.2.1",

src/_locales/en/messages.json

@@ -886,6 +886,9 @@
   "newCustomField": {
     "message": "New Custom Field"
   },
+  "dragToSort": {
+    "message": "Drag to sort"
+  },
   "cfTypeText": {
     "message": "Text"
   },

src/popup/app.module.ts

@@ -1,6 +1,7 @@
 import 'core-js';
 import 'zone.js/dist/zone';
 
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ToasterModule } from 'angular2-toaster';
 import { Angulartics2Module } from 'angulartics2';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
@@ -149,6 +150,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         }),
         ToasterModule.forRoot(),
         InfiniteScrollModule,
+        DragDropModule,
     ],
     declarations: [
         ActionButtonsComponent,

src/popup/scss/box.scss

@@ -1,6 +1,7 @@
 @import "variables.scss";
 
 .box {
+    position: relative;
     width: 100%;
     margin: 10px 0;
 
@@ -31,7 +32,113 @@
             padding: 10px 15px;
         }
 
+        &.condensed .box-content-row, .box-content-row.condensed {
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+
+        &.no-hover .box-content-row, .box-content-row.no-hover {
+            &:hover, &:focus {
+                background-color: initial !important;
+            }
+        }
+    }
+
+    .box-footer {
+        margin: 5px 10px;
+        font-size: $font-size-small;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
+    }
+
+    &.list {
+        .box-content {
             .box-content-row {
+                padding: 3px 10px;
+                text-decoration: none;
+
+                @include themify($themes) {
+                    color: themed('textColor');
+                }
+
+                &.padded {
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+                }
+
+                &:hover, &:focus, &.active {
+                    @include themify($themes) {
+                        background-color: themed('listItemBackgroundHoverColor');
+                    }
+                }
+
+                &:focus {
+                    border-left: 5px solid #000000;
+                    padding-left: 5px;
+
+                    @include themify($themes) {
+                        border-left-color: themed('mutedColor');
+                    }
+                }
+
+                .action-buttons {
+                    .row-btn {
+                        padding-left: 5px;
+                        padding-right: 5px;
+                    }
+                }
+
+                .text:not(.no-ellipsis), .detail {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                .row-main {
+                    display: flex;
+                    min-width: 0;
+
+                    .row-main-content {
+                        min-width: 0;
+                    }
+                }
+            }
+
+            &.single-line {
+                .box-content-row {
+                    display: flex;
+                    padding-top: 10px;
+                    padding-bottom: 10px;
+                }
+            }
+        }
+    }
+
+    &.only-list {
+        margin-bottom: 0;
+
+        .box-content {
+            border-bottom: none;
+        }
+    }
+
+    &.full-list {
+        margin: 0;
+
+        .box-content {
+            border: none;
+        }
+    }
+}
+
+.stacked-boxes {
+    display: flex;
+    flex-direction: column;
+}
+
+.box-content-row {
     display: block;
     padding: 10px 15px;
     position: relative;
@@ -396,110 +503,25 @@
             background-color: $brand-primary;
         }
     }
-        }
+}
 
-        &.condensed .box-content-row, .box-content-row.condensed {
-            padding-top: 5px;
-            padding-bottom: 5px;
-        }
-
-        &.no-hover .box-content-row, .box-content-row.no-hover {
-            &:hover, &:focus {
-                background-color: initial !important;
-            }
-        }
-    }
-
-    .box-footer {
-        margin: 5px 10px;
-        font-size: $font-size-small;
+.box-drag-handle {
+    cursor: move;
+    user-select: none;
+    margin-left: 5px;
 
     @include themify($themes) {
         color: themed('mutedColor');
     }
-    }
-
-    &.list {
-        .box-content {
-            .box-content-row {
-                padding: 3px 10px;
-                text-decoration: none;
-
-                @include themify($themes) {
-                    color: themed('textColor');
-                }
-
-                &.padded {
-                    padding-top: 10px;
-                    padding-bottom: 10px;
-                }
-
-                &:hover, &:focus, &.active {
-                    @include themify($themes) {
-                        background-color: themed('listItemBackgroundHoverColor');
-                    }
-                }
-
-                &:focus {
-                    border-left: 5px solid #000000;
-                    padding-left: 5px;
-
-                    @include themify($themes) {
-                        border-left-color: themed('mutedColor');
-                    }
-                }
-
-                .action-buttons {
-                    .row-btn {
-                        padding-left: 5px;
-                        padding-right: 5px;
-                    }
-                }
-
-                .text:not(.no-ellipsis), .detail {
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                }
-
-                .row-main {
-                    display: flex;
-                    min-width: 0;
-
-                    .row-main-content {
-                        min-width: 0;
-                    }
-                }
-            }
-
-            &.single-line {
-                .box-content-row {
-                    display: flex;
-                    padding-top: 10px;
-                    padding-bottom: 10px;
-                }
-            }
-        }
-    }
-
-    &.only-list {
-        margin-bottom: 0;
-
-        .box-content {
-            border-bottom: none;
-        }
-    }
-
-    &.full-list {
-        margin: 0;
-
-        .box-content {
-            border: none;
-        }
-    }
 }
 
-.stacked-boxes {
+.cdk-drag-preview {
+    position: relative;
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    opacity: .8;
+
+    @include themify($themes) {
+        background-color: themed('boxBackgroundColor');
+    }
 }

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

@@ -275,8 +275,9 @@
                 {{'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
+                        <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}}">
@@ -302,8 +303,12 @@
                                         [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>
                     </ng-container>
+                </div>
                 <div class="box-content-row box-content-row-newmulti" appBoxRow>
                     <a href="#" appStopClick (click)="addField()">
                         <i class="fa fa-plus-circle fa-fw fa-lg"></i> {{'newCustomField' | i18n}}