Choose account popup

interface/client/collections.js

@@ -4,13 +4,14 @@
 */
 
 
+
 // BROWSER RELATED
 // Contains the accounts
 Tabs = new Mongo.Collection('tabs', {connection: null});
-pers = new PersistentMinimongo2(Tabs, 'Mist');
 
-if(typeof syncMinimongo !== 'undefined')
-    syncMinimongo(Tabs);
+if (typeof window.mist.syncMinimongo !== 'undefined') {
+    window.mist.syncMinimongo.frontendSync(Tabs);
+}
 
 
 // Contains the address book

interface/client/lib/thirdParty.js

@@ -1,5 +1,3 @@
-
-
 // set spinner options
 Meteor.Spinner.options = {
     lines: 12, // The number of lines to draw

interface/client/mistAPIBackend.js

@@ -31,7 +31,7 @@ mistAPIBackend = function(event) {
     var webview = this.webview;
     var arg = event.args[0];
 
-    console.trace('mistAPIBackend event', event);
+    // console.trace('mistAPIBackend event', event);
 
     if(event.channel === 'setWebviewId') {
         Tabs.update(template.data._id, {$set:{

interface/client/styles/browserbar.import.less

@@ -32,92 +32,22 @@
         // ANIMATION
         transition: height 0.25s, box-shadow 0.5s;
 
-        &.show-bar {
-            height: @gridHeight * 20;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-
-            .url-input {
-                opacity: 0.9;
-                transition-duration: 0.3s;
-                transition-delay: 0.1s;        
-                transform: translateX(0) translateZ(0);
-            }
-
-            .url-breadcrumb {
-                opacity: 0;
-                visibility: hidden;
-                transition-duration: 0.3s;                
-                transition-delay: 0.1s; 
-                transform: translateX(20px) translateZ(0);
-                word-spacing: -5px;
-            }
-
-            &:after {
-                display: block;
-                position: absolute;
-                left: 5%;
-                top: 28px;
-                width: 20px;
-                height: 20px;
-                margin-left: -10px;
-                content: "◢◣";
-                color: @colorGrayDark;
-                font-size: 50%;
-                letter-spacing: -2px;
-                transition: left .5s ease-in-out;
-            }
-        }
-
-        &.dapp-info {
-            button.dapp-info {
-                color: @colorGrayDark;
-            }
-
-            div.dapp-info {
-                display: flex;
-            }
-        }
-
-        &.accounts {
-            button.accounts {
-                color: @colorGrayDark;
-            }
-            button.dapp-info {
-                color: @colorLink;
-            }
-
-            div.accounts {
-                display: flex;
-            }
-
-            &:after {
-                left: 95%;
-            }
-        }
-
-        &.url {
-            &:after {
-                left: 50%;
-            }
-            div.url {
-                display: flex;
-            }
-        }
-
-        > button {
+        > .dapp-info, > button {
+            color: #6691c2;
             position: relative;
             padding-left: 0;
             margin-top: 1px;
             max-width: 33%;
-            height: @gridHeight;
+            height: 21px;
             font-family: @sourceSansPro;
             font-size: @fontSizeSmall;
             font-weight: 500;
-            line-height: @gridHeight;
+            line-height: 21px;
             white-space: nowrap;
+            margin-top: -1px;
 
             &.has-icon {
-                padding-left: @gridWidth*0.75;
+                padding-left: @gridWidth * 0.84;
             }
 
             &:focus {
@@ -128,27 +58,36 @@
                 .dapp-shorten-text;
             }
 
-            .dapp-identicon {
-                margin-top: -2px;
-            }
-
             .app-icon {
                 position: absolute;
-                top: 1px;
+                top: 0;
                 left: 0;
-                width: 16px;
-                height: 16px;
-                border-radius: 8px;
+                width: 21px;
+                height: 21px;
+                border-radius: 50%;
+                -webkit-user-drag: none;
+                user-drag: none;
             }
 
-            .icon-key {
-              display: block;
-              float: right;
-              top: 3px;
-              margin-left: 4px;
-              position: relative;
+            .connect-button {
+                float: left;
+                margin-right: 8px;
+                text-transform: uppercase;
+            }            
+            .connect-button, .dapp-info span {
+                line-height: 21px;
+                display: inline-block;
             }
 
+            span.no-accounts {
+                background-image: url(/images/anonymous-icon.png);
+                background-size: cover;
+                background-position: 50%;
+                width: 21px;
+                height: 21px;
+                display: inline-block;
+                border-radius: 50%;
+            }
         }
 
         > form {
@@ -203,7 +142,6 @@
                     color: @colorLinkBlur;
                 }            
             }
-
         }
 
         div.dapp-info,
@@ -279,8 +217,8 @@
         }
 
         .app-bar {
-            margin-left: @gridWidth * 1;
-            margin-right: 0;
+            margin-left: @gridWidth /2;
+            margin-right: @gridWidth /2;
         }
 
     }
@@ -392,7 +330,7 @@
     .browser-bar .accounts {
       width: 0;
       text-overflow: clip;
-      padding-left: @gridWidth * 0.5;
+      padding-left: @gridWidth * 0.75;
     }    
 }
 

interface/client/styles/menu.import.less

@@ -129,10 +129,43 @@ aside.sidebar {
                 //     text-align: left;
                 // }
             }
+
+
+            // Remove tab button
+            button.main {
+                img {
+                    transition: 180ms linear opacity;    
+                }
+            }
+
+            &:not(.browser):not(.wallet) header:hover {
+                button.main img {
+                    opacity: 0;
+                }
+                button.remove-tab {
+                    opacity: 1;
+                }
+            }
+            button.remove-tab {
+                box-sizing: border-box;
+                position: absolute;
+                padding: 6px 8px 0px 2px;
+                transition: 180ms linear opacity;
+                left: 8px;
+                opacity: 0;
+                top: 0;
+                color: @colorLinkBlur;
+                height: @gridHeight*2;
+                z-index: 2;
+                &:focus {
+                    border: none;
+                }
+            }
+
             button.slide-out {
                 position: absolute;
                 right: @gridHeight/2;
-                top: @gridHeight/1.5;
+                top: @gridHeight/1.75;
                 width: 30px;
                 height: 20px;
                 background: url('icons/expand-icon.png') no-repeat center;
@@ -289,4 +322,10 @@ aside.sidebar {
             margin: @gridHeight/2 @gridWidth/4;
         }
     }
-}
+}
+
+// Remove tab button related code
+aside.full-tabs button.remove-tab {
+    display: none;
+}
+