From dcecdc826013ef5dc23e00b77db97be7c69c9d7e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 20 Jul 2015 12:09:24 -0700
Subject: [PATCH] lipstick for hangup button and typing notifs

---
 skins/base/css/molecules/MemberInfo.css  |   2 ++
 skins/base/css/molecules/RoomHeader.css  |  30 +++++++++++++++++++----
 skins/base/css/organisms/RoomView.css    |  14 +++++++++++
 skins/base/img/typing.png                | Bin 0 -> 236 bytes
 skins/base/views/molecules/RoomHeader.js |   6 ++---
 skins/base/views/organisms/RoomView.js   |   1 +
 6 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 skins/base/img/typing.png

diff --git a/skins/base/css/molecules/MemberInfo.css b/skins/base/css/molecules/MemberInfo.css
index db41c51e50..144212d766 100644
--- a/skins/base/css/molecules/MemberInfo.css
+++ b/skins/base/css/molecules/MemberInfo.css
@@ -55,6 +55,8 @@ limitations under the License.
 
 .mx_MemberInfo_field {
     padding: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .mx_MemberInfo_button {
diff --git a/skins/base/css/molecules/RoomHeader.css b/skins/base/css/molecules/RoomHeader.css
index c107e18157..e13a21df6f 100644
--- a/skins/base/css/molecules/RoomHeader.css
+++ b/skins/base/css/molecules/RoomHeader.css
@@ -43,6 +43,26 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomHeader_hangupButton {
+    height: 48px;
+    margin-top: 18px;
+    background-color: #80cef4;
+    border-radius: 48px;
+    margin-right: 8px;
+    color: #fff;
+    line-height: 48px;
+    text-align: center;
+
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 0 0 90px;
+    flex: 0 0 90px;
+}
+
 .mx_RoomHeader_rightRow {
     height: 48px;
     margin-top: 18px;
@@ -50,11 +70,11 @@ limitations under the License.
     border-radius: 48px;
     border: 1px solid #a9dbf4;
 
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
-    order: 2;
+    -webkit-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -ms-flex-order: 3;
+    -webkit-order: 3;
+    order: 3;
 
     -webkit-flex: 0 0 200px;
     flex: 0 0 200px;    
diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index 9341f21335..07eeebf1b7 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@@ -105,6 +105,20 @@ limitations under the License.
     border-top: 1px solid #a8dbf3;
 }
 
+.mx_RoomView_typingBar {
+    margin-top: 17px;
+    margin-left: 56px;
+    color: #818794;
+}
+
+.mx_RoomView_typingBar img {
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-left: -64px;
+    margin-top: -7px;
+    float: left;    
+}
+
 .mx_RoomView .mx_MessageComposer {
     -webkit-box-ordinal-group: 5;
     -moz-box-ordinal-group: 5;
diff --git a/skins/base/img/typing.png b/skins/base/img/typing.png
new file mode 100644
index 0000000000000000000000000000000000000000..066a0ce8fdad969d262f00d0434d3a4c8a4ee6a8
GIT binary patch
literal 236
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEk|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*D5X`aE46Ln>}1{rUgj{%``D4^Oj9k5$2y#>IRxr4LpxyUSX<
zIuOX-XH}45J)t$C^=rCarIC^Gd8Up3|NotRE#=gH*~oqGzPL|%BJKNQTkzFJg~O7P
z5-A5{I$SqhnIiu$Q$R%bz`Lu$25g&F>h>EybE_`JFd1T*0xN^U0frATPF@pQo*f6e
OjKR~@&t;ucLK6TpLRvfk

literal 0
HcmV?d00001

diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js
index a67699772c..6958333bfc 100644
--- a/skins/base/views/molecules/RoomHeader.js
+++ b/skins/base/views/molecules/RoomHeader.js
@@ -44,8 +44,8 @@ module.exports = React.createClass({
                 case "ringback":
                 case "connected":
                     callButtons = (
-                        <div className="mx_RoomHeader_button" onClick={this.onHangupClick}>
-                        BYEBYE
+                        <div className="mx_RoomHeader_hangupButton" onClick={this.onHangupClick}>
+                            End call
                         </div>
                     );
                     break;
@@ -66,6 +66,7 @@ module.exports = React.createClass({
                             { topic }
                         </div>
                     </div>
+                    {callButtons}
                     <div className="mx_RoomHeader_rightRow">
                         <div className="mx_RoomHeader_button">
                             <img src="img/settings.png" width="32" height="32"/>
@@ -73,7 +74,6 @@ module.exports = React.createClass({
                         <div className="mx_RoomHeader_button">
                             <img src="img/search.png" width="32" height="32"/>
                         </div>
-                        {callButtons}
                         <div className="mx_RoomHeader_button" onClick={this.onVideoClick}>
                             <img src="img/video.png" width="32" height="32"/>
                         </div>
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index 9130dcc047..c20f9a8c58 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@@ -97,6 +97,7 @@ module.exports = React.createClass({
                 if (typingString) {
                     statusBar = (
                         <div className="mx_RoomView_typingBar">
+                            <img src="img/typing.png" width="40" height="40" alt=""/>
                             {typingString}
                         </div>
                     );