Autofocus compose area on opening a conversation (#77)

Fixes #41

src/directives/compose_area.ts

@@ -528,7 +528,7 @@ export default [
                         <i class="md-primary emoji-trigger trigger is-enabled material-icons">tag_faces</i>
                     </div>
                     <div>
-                        <div class="compose" contenteditable translate translate-attr-data-placeholder="messenger.COMPOSE_MESSAGE"></div>
+                        <div class="compose" contenteditable translate translate-attr-data-placeholder="messenger.COMPOSE_MESSAGE" autofocus></div>
                     </div>
                     <div>
                         <i class="md-primary send-trigger trigger material-icons">send</i>

src/sass/helpers/_colors.scss

@@ -9,4 +9,6 @@ $url-light-blue: #63a6cf;
 $dark-background-color: #F6F6F6;
 $bright-background-color: white;
 
-$material-card-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16),0px 2px 5px 0px rgba(0,0,0,0.23);
+$material-card-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16),0px 2px 5px 0px rgba(0,0,0,0.23);
+
+$active-placeholder-color: lightgray;

src/sass/sections/_compose_area.scss

@@ -1,4 +1,5 @@
 #conversation #conversation-footer compose-area {
+
     > div:first-child {
         display: flex;
         flex-direction: row;
@@ -21,6 +22,12 @@
                 overflow-y: auto;
                 // This is where the user enters text
                 div.compose {
+                    // show placeholder if field is on focus
+                    &:empty:before{
+                        content: attr(data-placeholder);
+                        display: block;
+                        color: $active-placeholder-color;
+                    }
                     padding: $main-padding;
                     top: 0;
                     left: 0;