From 8c718dcf1d1004bc03f98a1145217fecfcb36baa Mon Sep 17 00:00:00 2001
From: Maciej Jarczok <maciej.jarczok@gmail.com>
Date: Sat, 3 May 2014 21:59:35 +0200
Subject: [PATCH] connecting indicator styles

---
 app/scripts/app/templates/peer.hbs | 18 ++++++-------
 app/scripts/app/templates/user.hbs | 17 +++++-------
 app/styles/layout/_media.sass      | 10 ++++---
 app/styles/modules/_users.sass     | 42 ++++++++++++++++++++----------
 4 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/app/scripts/app/templates/peer.hbs b/app/scripts/app/templates/peer.hbs
index 3e37ad3..d7bb7c4 100644
--- a/app/scripts/app/templates/peer.hbs
+++ b/app/scripts/app/templates/peer.hbs
@@ -27,17 +27,15 @@
 
 <div class="user-info">
   {{#if model.email}}<div class="user-email">{{model.email}}</div>{{/if}}
-  {{#if controller.hasCustomRoomName}}
-    <div class="user-id">
-      {{model.public_ip}}
-    </div>
-  {{/if}}
-  {{#if model.local_ip}}
-    <div class="user-id">
-      <div {{bind-attr class=":user-connection-status model.peer.state"}}></div>
+  <div class="user-ip">
+    <div {{bind-attr class=":user-connection-status model.peer.state"}}></div>
+    {{#if controller.hasCustomRoomName}}
+      <strong>{{model.public_ip}}</strong>
+    {{/if}}
+    {{#if model.local_ip}}
       {{model.local_ip}}
-    </div>
-  {{/if}}
+    {{/if}}
+  </div>
 </div>
 
 {{view ShareDrop.App.FileField action="uploadFile" file=transfer.file}}
diff --git a/app/scripts/app/templates/user.hbs b/app/scripts/app/templates/user.hbs
index 054920e..4b6d3aa 100644
--- a/app/scripts/app/templates/user.hbs
+++ b/app/scripts/app/templates/user.hbs
@@ -3,20 +3,17 @@
 </div>
 <div class="user-info">
   <div class="user-label">You</div>
+  <div class="user-ip">
+    {{#if controller.hasCustomRoomName}}
+      <strong>{{model.public_ip}}</strong>
+    {{/if}}
 
-  {{#if controller.hasCustomRoomName}}
-    <div class="user-id">
-      {{model.public_ip}}
-    </div>
-  {{/if}}
-
-  {{#if model.local_ip}}
-    <div class="user-id">
+    {{#if model.local_ip}}
       {{#if view.hasManyLocalIps}}
         {{view Ember.Select content=view.localIps value=model.local_ip}}
       {{else}}
         {{model.local_ip}}
       {{/if}}
-    </div>
-  {{/if}}
+    {{/if}}
+  </div>
 </div>
diff --git a/app/styles/layout/_media.sass b/app/styles/layout/_media.sass
index f4f669f..8e35072 100644
--- a/app/styles/layout/_media.sass
+++ b/app/styles/layout/_media.sass
@@ -35,7 +35,7 @@
       .user-info
         z-index: 1
         position: absolute
-        top: 35px
+        top: 30px
         left: 0
         padding-left: 170px
         width: 100%
@@ -43,10 +43,14 @@
           font-size: 1.4rem
         .user-label
           font-size: 1.8rem
-        .user-id
-          margin-top: 4px
+        .user-ip
           font-size: 1.2rem
           color: #808080
+        .user-connection-status
+          top: 0
+          left: -9.2rem
+          margin-top: 0
+          +scale(1.75)
       .popover
         $bg_color: #f4f4f4
         left: 100px !important
diff --git a/app/styles/modules/_users.sass b/app/styles/modules/_users.sass
index 9d290e8..8a50fc2 100644
--- a/app/styles/modules/_users.sass
+++ b/app/styles/modules/_users.sass
@@ -14,7 +14,7 @@ $user-size: 76px
       position: relative
       width: $user-size
       height: $user-size
-      +transition(all .2s ease-in-out)
+      transition: all .2s ease-in-out
       svg
         top: 0
         bottom: 0
@@ -32,7 +32,7 @@ $user-size: 76px
       height: $user-size - 10
       border-radius: 50%
       +animation(shadow .8s ease-in)
-      +transition(all .2s ease-in-out)
+      transition: all .2s ease-in-out
 
     .user-info
       position: absolute
@@ -43,27 +43,35 @@ $user-size: 76px
       .user-label, .user-email
         font-weight: bold
         color: #606060
-        padding-bottom: 4px
+        padding-bottom: .4rem
       .user-email
         font-size: 1rem
         +ellipsis
       .user-label
         font-size: 1.4rem
-      .user-id
-        font-size: 1rem
-        color: #808080
-      .user-connection-status
+      .user-ip
+        position: relative
         display: inline-block
-        width: 6px
-        height: 6px
-        vertical-align: middle
+        font-size: 1rem
+        line-height: 1.2em
+        color: #808080
+        > strong
+          display: block
+      .user-connection-status
+        position: absolute
+        left: -1rem
+        top: 50%
+        margin-top: -.3rem
+        width: .6rem
+        height: .6rem
         border-radius: 50%
         &.disconnected
           display: none
         &.connecting
           background: rgba($blue,.5)
+          +animation(blink .75s infinite)
         &.connected
-          background: rgba($green,.5)
+          background: rgba($green,.8)
 
       select
         +appearance(none)
@@ -130,7 +138,6 @@ $user-size: 76px
             border-color: rgba($blue,.8)
         &::after
           opacity: 0
-          transition: opacity .3s
           position: absolute
           pointer-events: none
           top: 5px
@@ -140,17 +147,24 @@ $user-size: 76px
           color: white
           font-size: 3rem
           font-weight: bold
-          background: transparentize($green,.2)
+          background: rgba($green,.8)
           border: 1px solid white
           +transform(scaleX(-1) rotate(-45deg))
           +circle($user-size - 10)
+          transition: opacity .3s
         &.transfer-completed
           &::after
             opacity: 1
 
++keyframes(blink)
+  0%
+    opacity: 1
+  50%
+    opacity: 0
+
 +keyframes(shadow)
   0%
     opacity: 0
   50%
     opacity: 1
-    box-shadow: rgba(0, 0, 0, 0.3) 0 0 15px
+    box-shadow: rgba(black, .3) 0 0 15px