New Address Selector Component (#3829)

* WIP new address selector * WIP Working New Account Selector * WIP Fully working Addres Selector (missing keyboards navigation) * WIP Address Selector * Fully functionnal new Address Selector! * Implement disabled prop * Don't auto-open on focus + Text Selection fix * Add copy address capabilities * Better Address Selector Focus * Search from tags * [Address Selector] Better Focus // Parity Background * Linting * [Adress Selector] Better focused input style * Better focus support for inputs * Fix style issue * Add tags to accounts * linting * Add label to address selector * Removed old address selector + improved styling * Fixing address selection issues * fix test * Better logs... * PR Grumbles Part 1 * PR Grumbles Part 2 * PR Grumbles Part 3.1 * PR Grumbles Part 3.2 * PR Grumbles Part 3.3 * New Portal Component * Simpler Transition for Portal * PR Grumbles Part 4 * Align font-family with rest of UI * Fix null value input * Fix Webpack build...
2016-12-27 10:59:37 +01:00
parent 4e51f93176
commit 1ffc6ac58c
25 changed files with 1289 additions and 312 deletions
--- a/js/src/ui/AccountCard/accountCard.css
+++ b/js/src/ui/AccountCard/accountCard.css
@@ -0,0 +1,105 @@
+/* Copyright 2015, 2016 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.account {
+  padding: 1em;
+  margin: 0.5em 0;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  background-color: rgba(0, 0, 0, 0.8);
+
+  transition: transform ease-out 0.1s;
+  transform: scale(1);
+
+  &.copied {
+    animation-duration: 0.25s;
+    animation-name: copied;
+  }
+
+  &:focus {
+    transform: scale(0.99);
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.accountInfo {
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+
+  > * {
+    padding: 0.25em 0;
+  }
+
+  .addressContainer {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 0.9em;
+
+    .address {
+      &:hover {
+        cursor: text;
+      }
+    }
+  }
+
+  .accountName {
+    font-weight: 700 !important;
+  }
+
+}
+
+.balance {
+  .tag {
+    margin-left: 0.5em;
+    font-size: 0.85em;
+  }
+}
+
+@keyframes copied {
+  from {
+    transform: scale(0.99);
+  }
+
+  50% {
+    transform: scale(0.97);
+  }
+
+  to {
+    transform: scale(0.99);
+  }
+}