From 4695a849077a5ce0335d7769ff2fa50fe84bb534 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Wed, 25 Sep 2013 10:09:24 +0200
Subject: [PATCH 1/4] [ux] conenteditable status to look like input

---
 clientapp/templates.js              |  2 +-
 clientapp/templates/pages/main.jade |  2 +-
 public/css/app/forms.styl           |  3 ++-
 public/css/app/settings.styl        |  8 +++++++-
 public/css/otalk.css                | 18 +++++++++++++++---
 5 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/clientapp/templates.js b/clientapp/templates.js
index 0ef535c..be24648 100644
--- a/clientapp/templates.js
+++ b/clientapp/templates.js
@@ -131,7 +131,7 @@ exports.pages.groupchat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><div><h3>Current status<span contenteditable="true" class="status"></span></h3></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Alerts</h3><button class="enableAlerts">Enable alerts</button></div></section>');
+        buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Alerts</h3><button class="enableAlerts">Enable alerts</button></div></section>');
     }
     return buf.join("");
 };
diff --git a/clientapp/templates/pages/main.jade b/clientapp/templates/pages/main.jade
index 116a5e1..0e229c2 100644
--- a/clientapp/templates/pages/main.jade
+++ b/clientapp/templates/pages/main.jade
@@ -2,7 +2,7 @@ section.page.main
 
   div
     h3 Current status
-      span.status(contenteditable="true")
+    .status(contenteditable="true")
 
   div#avatarChanger
     h3 Change Avatar
diff --git a/public/css/app/forms.styl b/public/css/app/forms.styl
index 8a2aef6..8c111bc 100644
--- a/public/css/app/forms.styl
+++ b/public/css/app/forms.styl
@@ -27,7 +27,8 @@ input[type=text]:focus,
 input[type=email]:focus, 
 input[type=search]:focus,
 input[type=password]:focus,
-textarea:focus
+textarea:focus,
+.main .status:focus
   outline: none
   border: 1px solid lighten($activeBlue, 50%)
 
diff --git a/public/css/app/settings.styl b/public/css/app/settings.styl
index 5c146be..c5b402b 100644
--- a/public/css/app/settings.styl
+++ b/public/css/app/settings.styl
@@ -1,14 +1,20 @@
 @import '../_variables'
 @import '../_mixins'
 
-.main div
+.main > div
   padding: 20px
   border-bottom: 1px solid $grayOutline
 
   &:last-of-type
     border: none
 
+  .status
+    padding: 5px
+    background: $grayBackground
+    roundall(3px)
+
 .uploadRegion
+  padding: 15px
   font-size: $fontSmall
   roundall(3px)
   margin: 10px 0
diff --git a/public/css/otalk.css b/public/css/otalk.css
index a99503a..e629fd5 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -781,14 +781,25 @@ h3 {
   border: 1px solid #efe391;
   color: #d2bd2d;
 }
-.main div {
+.main > div {
   padding: 20px;
   border-bottom: 1px solid #e4e4e4;
 }
-.main div:last-of-type {
+.main > div:last-of-type {
   border: none;
 }
+.main > div .status {
+  padding: 5px;
+  background: #f7f7f7;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -o-border-radius: 3px;
+  -border-radius: 3px;
+  border-radius: 3px;
+}
 .uploadRegion {
+  padding: 15px;
   font-size: 12px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
@@ -905,7 +916,8 @@ input[type=text]:focus,
 input[type=email]:focus,
 input[type=search]:focus,
 input[type=password]:focus,
-textarea:focus {
+textarea:focus,
+.main .status:focus {
   outline: none;
   border: 1px solid #78daff;
 }

From 949e217fd2cce6df750303f9ccaab2b6bc38a420 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Wed, 25 Sep 2013 10:29:23 +0200
Subject: [PATCH 2/4] [ux] display unread count when it's not empty

---
 public/css/app/roster.styl | 2 +-
 public/css/otalk.css       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl
index 8773cb8..d18838d 100644
--- a/public/css/app/roster.styl
+++ b/public/css/app/roster.styl
@@ -66,7 +66,7 @@
     &:hover
       background: $sidebarActive
 
-      &.hasUnread .unread
+      .unread:not(:empty)
         display: block
 
     &.online, &.chat, &.dnd, &.away, &.xa
diff --git a/public/css/otalk.css b/public/css/otalk.css
index e629fd5..1d74c68 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -384,8 +384,8 @@ h3 {
 #bookmarks li:hover {
   background: #1f2d49;
 }
-#roster li:hover.hasUnread .unread,
-#bookmarks li:hover.hasUnread .unread {
+#roster li:hover .unread:not(:empty),
+#bookmarks li:hover .unread:not(:empty) {
   display: block;
 }
 #roster li.online:after,

From 19784fed26c86b930475e5dd8b8676d8e2aaaabe Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Wed, 25 Sep 2013 10:45:23 +0200
Subject: [PATCH 3/4] [ux] fix status alignment

---
 public/css/app/roster.styl | 5 +++--
 public/css/otalk.css       | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl
index d18838d..d0591b9 100644
--- a/public/css/app/roster.styl
+++ b/public/css/app/roster.styl
@@ -146,12 +146,13 @@
     .status
       color: $textSecondary
       font-size: 10px
+      font-weight: 400
       line-height: 12px
       margin: 0
-      margin-left: 30px
+      margin-left: 40px
 
       &:not(:empty)
-        margin-top: -2px
+        margin-top: -8px
 
     .unread
       display: none
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 1d74c68..7aef622 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -503,13 +503,14 @@ h3 {
 #bookmarks li .status {
   color: #b7b7b7;
   font-size: 10px;
+  font-weight: 400;
   line-height: 12px;
   margin: 0;
-  margin-left: 30px;
+  margin-left: 40px;
 }
 #roster li .status:not(:empty),
 #bookmarks li .status:not(:empty) {
-  margin-top: -2px;
+  margin-top: -8px;
 }
 #roster li .unread,
 #bookmarks li .unread {

From 0582a947a61e256c5c85f034acb86859621d879b Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Wed, 25 Sep 2013 13:18:14 +0200
Subject: [PATCH 4/4] [ux] make pending messages different color

---
 public/css/app/chat.styl | 2 +-
 public/css/otalk.css     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl
index eb56e17..3527654 100644
--- a/public/css/app/chat.styl
+++ b/public/css/app/chat.styl
@@ -109,7 +109,7 @@
         content: 'edited '
 
     &.pending
-      background-color: red
+      color: lighten($baseText, 50%)
 
     .body
       display: inline
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 7aef622..9eb05ff 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -728,7 +728,7 @@ h3 {
   content: 'edited ';
 }
 .messages .message.pending {
-  background-color: #f00;
+  color: #ababab;
 }
 .messages .message .body {
   display: inline;