From 61bf5a02ff1d908c17cc45e1a08069e62485afa9 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Mon, 23 Sep 2013 13:47:39 +0200
Subject: [PATCH] [ux] started on pulsating dot on composing

---
 public/css/app/roster.styl |  35 +++++++++---
 public/css/otalk.css       | 106 ++++++++++++++++++++++++++++++++-----
 2 files changed, 120 insertions(+), 21 deletions(-)

diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl
index e10d7a6..5d5f1dd 100644
--- a/public/css/app/roster.styl
+++ b/public/css/app/roster.styl
@@ -32,7 +32,7 @@
 
       a
         position: relative
-        width: 120px
+        width: 130px
 
       .button
         background: $sidebarButton
@@ -43,7 +43,7 @@
   h1
     font-size: $fontSmall
     margin: 0
-    padding: 20px 15px 10px 15px
+    padding: 10px
     color: white
     text-transform: uppercase
 
@@ -62,9 +62,6 @@
     -webkit-transition: all .3s ease-in 0
     -moz-transition: all .3s ease-in 0
 
-    &:nth-child(2n)
-      background: lighten($sidebarBg, 4%)
-
     &:hover
       background: $activeBlue
 
@@ -87,7 +84,7 @@
 
     &.offline:not(:hover)
       .name
-        color: $textSecondary
+        color: darken($textSecondary, 40%)
 
       img
         opacity: .25
@@ -102,11 +99,26 @@
       .name
         color: $baseText
 
+    &.composing, &.paused
+
+      &:after
+        content: ''
+        position: absolute
+        top: 50%
+        right: 10px
+        height: 8px
+        width: 8px
+        margin-top: -4px
+        roundall(10px)
+        animation: pulsate 1.5s infinite ease-in
+
     &.composing
-      border-right: 4px solid orange
+      &:after
+        background: #f57900
 
     &.paused
-      border-right: 4px solid #666
+      &:after
+        background: $textSecondary
 
     img
       opacity: 1
@@ -150,3 +162,10 @@
       font-weight: bold
       background: $activeBlue
 
+@keyframes pulsate
+  0%
+    opacity: 1.0
+  50%
+    opacity: 0.5
+  100%
+    opacity: 1.0
\ No newline at end of file
diff --git a/public/css/otalk.css b/public/css/otalk.css
index d387ccd..30847f0 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -280,7 +280,7 @@ td {
 }
 #menu .main li a {
   position: relative;
-  width: 120px;
+  width: 130px;
 }
 #menu .main li .button {
   background: #1f2d49;
@@ -291,7 +291,7 @@ td {
 #menu h1 {
   font-size: 12px;
   margin: 0;
-  padding: 20px 15px 10px 15px;
+  padding: 10px;
   color: #fff;
   text-transform: uppercase;
 }
@@ -312,10 +312,6 @@ td {
   -webkit-transition: all 0.3s ease-in 0;
   -moz-transition: all 0.3s ease-in 0;
 }
-#roster li:nth-child(2n),
-#bookmarks li:nth-child(2n) {
-  background: #111e23;
-}
 #roster li:hover,
 #bookmarks li:hover {
   background: #00aeef;
@@ -346,7 +342,7 @@ td {
 }
 #roster li.offline:not(:hover) .name,
 #bookmarks li.offline:not(:hover) .name {
-  color: #b7b7b7;
+  color: #6e6e6e;
 }
 #roster li.offline:not(:hover) img,
 #bookmarks li.offline:not(:hover) img {
@@ -369,13 +365,32 @@ td {
 #bookmarks li.offline.activeContact .name {
   color: #565656;
 }
-#roster li.composing,
-#bookmarks li.composing {
-  border-right: 4px solid #ffa500;
+#roster li.composing:after,
+#bookmarks li.composing:after,
+#roster li.paused:after,
+#bookmarks li.paused:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  height: 8px;
+  width: 8px;
+  margin-top: -4px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -khtml-border-radius: 10px;
+  -o-border-radius: 10px;
+  -border-radius: 10px;
+  border-radius: 10px;
+  animation: pulsate 1.5s infinite ease-in;
 }
-#roster li.paused,
-#bookmarks li.paused {
-  border-right: 4px solid #666;
+#roster li.composing:after,
+#bookmarks li.composing:after {
+  background: #f57900;
+}
+#roster li.paused:after,
+#bookmarks li.paused:after {
+  background: #b7b7b7;
 }
 #roster li img,
 #bookmarks li img {
@@ -442,6 +457,71 @@ td {
   font-weight: bold;
   background: #00aeef;
 }
+@-moz-keyframes pulsate {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes pulsate {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+@-o-keyframes pulsate {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+@-ms-keyframes pulsate {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes pulsate {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
 .page.chat {
   padding-top: 0px;
   height: 100%;