From 581128503c161bc3b569ca5d87e4eea8b0d15150 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Tue, 7 May 2019 08:03:27 -0700
Subject: Allow dragging seed phrase during Confirm Seed Phrase (#6557)

* Add basic drag and drop functionality

* Refactor seed phrase data structure

* Insert to list when drop

* Save before refactor

* Finish DND

* Fix linter

* update package-lock.json

* Address styling feedbacks

* Add box shadow on hover

* Finish adding unit tests

* Remove describe.only
---
 .../seed-phrase/confirm-seed-phrase/index.scss     | 93 +++++++++++++++++-----
 1 file changed, 72 insertions(+), 21 deletions(-)

(limited to 'ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss')

diff --git a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
index 93137618c..f025a503f 100644
--- a/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
+++ b/ui/app/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
@@ -3,37 +3,58 @@
     margin-bottom: 12px;
   }
 
-  &__selected-seed-words {
-    min-height: 190px;
-    max-width: 496px;
-    border: 1px solid #CDCDCD;
-    border-radius: 6px;
-    background-color: $white;
-    margin: 24px 0 36px;
-    padding: 12px;
-  }
-
   &__shuffled-seed-words {
-    max-width: 496px;
+    max-width: 575px;
   }
 
   &__seed-word {
-    display: inline-block;
-    color: #5B5D67;
-    background-color: #E7E7E7;
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
     padding: 8px 18px;
-    min-width: 64px;
+    width: 128px;
+    height: 41px;
     margin: 4px;
     text-align: center;
+    border-radius: 4px;
+    cursor: move;
+
+    &--shuffled {
+      cursor: pointer;
+      margin: 6px;
+    }
 
     &--selected {
-      background-color: #85D1CC;
       color: $white;
     }
 
-    &--shuffled {
-      cursor: pointer;
-      margin: 6px;
+    &--dragging {
+      margin: 0;
+    }
+
+    &--empty {
+      background-color: transparent;
+      border-color: transparent;
+      cursor: default;
+
+      &:hover,
+      &:active {
+        background-color: transparent;
+        border-color: transparent;
+        cursor: default;
+        box-shadow: none !important;
+      }
+    }
+
+    &--hidden {
+      display: none !important;
+    }
+
+    &--drop-hover {
+      background-color: transparent;
+      border-color: transparent;
+      color: transparent;
     }
 
     @media screen and (max-width: 575px) {
@@ -42,7 +63,37 @@
     }
   }
 
-  button {
-    margin-top: 0xp;
+  &__selected-seed-words {
+    display: flex;
+    flex-flow: row wrap;
+    min-height: 161px;
+    max-width: 575px;
+    border: 1px solid #CDCDCD;
+    border-radius: 6px;
+    background-color: $white;
+    margin: 24px 0 36px;
+    padding: 12px;
+
+    &__pending-seed {
+      display: none;
+    }
+
+    &__selected-seed {
+      display: inline-flex;
+
+      &:hover {
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+      }
+    }
+
+    &--dragging {
+      .confirm-seed-phrase__selected-seed-words__pending-seed {
+        display: inline-flex;
+      }
+
+      .confirm-seed-phrase__selected-seed-words__selected-seed {
+        display: none;
+      }
+    }
   }
 }
-- 
cgit