add CSS for TabCompleteBar

src/skins/vector/css/molecules/TabCompleteBar.css

@@ -0,0 +1,35 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_TabCompleteBar {
+    overflow: hidden;
+}
+
+.mx_TabCompleteBar_item {
+    display: inline-block;
+    margin-right: 15px;
+}
+
+.mx_TabCompleteBar_item img {
+    border-radius: 24px;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.mx_TabCompleteBar_text {
+    color: #4a4a4a;
+    opacity: 0.5;
+}

src/skins/vector/css/organisms/RoomView.css

@@ -182,7 +182,7 @@ limitations under the License.
 }
 
 .mx_RoomView_inCall .mx_RoomView_statusAreaBox {
-    background-color: #76CFA6;    
+    background-color: #76CFA6;
     color: #fff;
     position: relative;
 }
@@ -249,6 +249,12 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_RoomView_tabCompleteBar {
+    margin-top: 5px;
+    margin-left: 65px;
+    color: #4a4a4a;
+}
+
 .mx_RoomView_typingBar {
     margin-top: 6px;
     margin-left: 65px;
@@ -256,18 +262,46 @@ limitations under the License.
     opacity: 0.5;
 }
 
+.mx_RoomView_tabCompleteImage,
 .mx_RoomView_typingImage {
     display: inline;
-    margin-left: -47px;
+    margin-left: -50px;
     margin-top: -4px;
     float: left;
 }
 
+.mx_RoomView_tabCompleteImage {
+    opacity: 0.5;    
+}
+
 .mx_RoomView_typingText {
     overflow-y: hidden;
     display: block;
 }
 
+.mx_RoomView_tabCompleteWrapper {
+    display: flex;
+    display: -webkit-flex;
+    height: 24px;
+}
+
+.mx_RoomView_tabCompleteWrapper .mx_TabCompleteBar {
+    flex: 1 1 auto;
+    -webkit-flex: 1 1 auto;
+}
+
+.mx_RoomView_tabCompleteEol {
+    flex: 0 0 auto;
+    -webkit-flex: 0 0 auto;
+    color: #76CFA6;
+}
+
+.mx_RoomView_tabCompleteEol img {
+    vertical-align: middle;
+    margin-right: 8px;
+    margin-top: -2px;
+}
+
 .mx_RoomView .mx_MessageComposer {
     -webkit-box-ordinal-group: 5;
     -moz-box-ordinal-group: 5;

src/skins/vector/img/eol.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="22px" height="16px" viewBox="-1 -1 22 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_eol</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="03_2-Mentions-autocomplete" sketch:type="MSArtboardGroup" transform="translate(-772.000000, -670.000000)">
+            <g id="icon_eol" sketch:type="MSLayerGroup" transform="translate(772.000000, 670.000000)">
+                <path d="M0,7.5 L17,7.5" id="Path-118" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
+                <path d="M13,2 L18,7.38056399 L13,12.761128" id="Path-119" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
+                <path d="M19.5,0 L19.5,14" id="Path-120" stroke="#80CEF4" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>