Change time indicator

clientapp/models/contact.js

@@ -75,18 +75,40 @@ module.exports = HumanModel.define({
             }
         },
         formattedTZO: {
-            deps: ['timezoneOffset', 'displayName'],
+            deps: ['timezoneOffset'],
             fn: function () {
-                if (this.timezoneOffset !== undefined) {
-                    var localTZO = (new Date()).getTimezoneOffset();
-                    var diff = Math.abs(localTZO  % (24 * 60) - this.timezoneOffset % (24 * 60)) / 60;
-                    if (diff === 0) {
-                        return this.displayName + ' is in the same timezone as you';
+                if (!this.timezoneOffset) return '';
+
+                var localTime = new Date();
+                var localTZO = localTime.getTimezoneOffset();
+                var diff = Math.abs(localTZO  % (24 * 60) - this.timezoneOffset % (24 * 60));
+                var remoteTime = new Date(Date.now() + diff * 60000);
+
+
+                var day = remoteTime.getDate();
+                var hour = remoteTime.getHours();
+                var minutes = remoteTime.getMinutes();
+
+                var days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+                var dow = days[remoteTime.getDay()];
+                var localDow = days[localTime.getDay()];
+
+                var m = (hour >= 12) ? ' PM' : ' AM';
+
+                hour = hour % 12;
+                if (hour === 0) {
+                    hour = 12;
                 }
-                    var dir = (localTZO > this.timezoneOffset) ? 'ahead of' : 'behind';
-                    return this.displayName + ' is ' + diff + 'hrs ' + dir + ' you';
+
+                var strDay = (day < 10) ? '0' + day : day;
+                var strHour = (hour < 10) ? '0' + hour : hour;
+                var strMin = (minutes < 10) ? '0' + minutes: minutes;
+
+                if (localDow == dow) {
+                    return strHour + ':' + strMin + m;
                 } else {
-                    return '';
+                    return dow + ' ' + strHour + ':' + strMin + m;
                 }
             }
         },

public/css/otalk.css

@@ -879,7 +879,7 @@ button.secondary:hover:not(:disabled) {
 }
 .conversation header {
   padding: 0px;
-  padding-left: 8px;
+  padding-left: 6px;
   border-bottom: 2px solid #eee;
   position: fixed;
   right: 0px;
@@ -898,9 +898,9 @@ button.secondary:hover:not(:disabled) {
   content: '';
   position: absolute;
   top: 50%;
-  height: 8px;
-  width: 8px;
-  margin-top: -4px;
+  height: 6px;
+  width: 6px;
+  margin-top: -3px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
@@ -953,7 +953,7 @@ button.secondary:hover:not(:disabled) {
   display: block;
 }
 .conversation header .controls button {
-  margin-top: 4px;
+  margin-top: 5px;
 }
 .conversation header .controls.joined .joinRoom {
   display: none;
@@ -982,19 +982,17 @@ button.secondary:hover:not(:disabled) {
 }
 .conversation header .name {
   margin: 10px;
-  margin-left: 15px;
+  margin-left: 10px;
   margin-right: 5px;
   padding: 0px;
   font-size: 14px;
-  line-height: 14px;
   max-width: 50%;
 }
 .conversation header .status {
   margin: 10px;
   margin-left: 0px;
   padding: 0px;
-  font-size: 14px;
-  line-height: 14px;
+  font-size: 12px;
   max-width: 75%;
   float: left;
   overflow: hidden;
@@ -1022,13 +1020,14 @@ button.secondary:hover:not(:disabled) {
   line-height: 20px;
   color: #898989;
   background: #eee;
+  border: 1px solid #d6d6d6;
 }
 .conversation header .tzo:not(:empty):before {
   content: 'Current Time: ';
   font-weight: bold;
 }
 .conversation header .call {
-  margin-top: 4px;
+  margin-top: 5px;
   text-transform: capitalize;
 }
 .conversation header .activeCall {

public/css/pages/chat.styl

@@ -17,7 +17,7 @@
 
   header
     padding: 0px
-    padding-left: 8px
+    padding-left: 6px
     border-bottom: 2px solid $gray-lighter
     position: fixed
     right: 0px
@@ -31,9 +31,9 @@
         content: ''
         position: absolute
         top: 50%
-        height: 8px
-        width: 8px
-        margin-top: -4px
+        height: 6px
+        width: 6px
+        margin-top: -3px
         roundall(10px)
 
     &.online,
@@ -86,7 +86,7 @@
         display: block
 
       button
-        margin-top: 4px
+        margin-top: 5px
 
       &.joined
         .joinRoom
@@ -108,19 +108,17 @@
 
     .name
       margin: 10px
-      margin-left: 15px
+      margin-left: 10px
       margin-right: 5px
       padding: 0px
       font-size: $font-size-base
-      line-height: 14px
       max-width: 50%
 
     .status
       margin: 10px
       margin-left: 0px
       padding: 0px
-      font-size: $font-size-base
-      line-height: 14px
+      font-size: $font-size-small
       max-width: 75%
       float: left
       overflow: hidden
@@ -143,13 +141,14 @@
       line-height: 20px
       color: lighten($gray, 30%)
       background: $gray-lighter
+      border: 1px solid darken($gray-lighter, 10%)
 
       &:before
         content: 'Current Time: '
         font-weight: bold
 
     .call
-      margin-top: 4px
+      margin-top: 5px
       text-transform: capitalize
 
     .activeCall

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1387522881010
+# 0.0.1 1387525625986
 
 CACHE:
 /app.js