From 1e1f7492d838a22888f3b8f1e0134161266d9e81 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 19 Jul 2015 01:58:04 +0100
Subject: [PATCH] basic skin of incomingCallBox

---
 .../css/molecules/voip/IncomingCallbox.css    |  53 ++++++++++++++++++
 skins/base/img/chevron-left.png               | Bin 0 -> 179 bytes
 .../views/molecules/voip/IncomingCallBox.js   |  25 +++++----
 .../molecules/voip/IncomingCallBox.js         |  10 ++--
 4 files changed, 71 insertions(+), 17 deletions(-)
 create mode 100644 skins/base/img/chevron-left.png

diff --git a/skins/base/css/molecules/voip/IncomingCallbox.css b/skins/base/css/molecules/voip/IncomingCallbox.css
index fd88ee27f7..2c57a3273a 100644
--- a/skins/base/css/molecules/voip/IncomingCallbox.css
+++ b/skins/base/css/molecules/voip/IncomingCallbox.css
@@ -13,3 +13,56 @@ 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_IncomingCallBox {
+    text-align: center;
+    border: 1px solid #a9dbf4;
+    border-radius: 8px;
+    background-color: #fff;
+    position: absolute;
+    z-index: 1000;
+    left: 235px;
+    top: 155px;
+    padding: 6px;
+}
+
+.mx_IncomingCallBox_chevron {
+    padding: 12px;
+    position: absolute;
+    left: -21px;
+    top: 0px;
+}
+
+.mx_IncomingCallBox_title {
+    padding: 6px;
+    font-weight: bold;
+}
+
+.mx_IncomingCallBox_buttons {
+    display: table-row;
+}
+
+.mx_IncomingCallBox_buttons_cell {
+    vertical-align: middle;
+    display: table-cell;
+    padding: 6px;
+    width: 50%;
+}
+
+.mx_IncomingCallBox_buttons_decline,
+.mx_IncomingCallBox_buttons_accept {
+    vertical-align: middle;
+    width: 80px;
+    height: 36px;
+    line-height: 36px;
+    border-radius: 36px;
+    color: #fff;
+}
+
+.mx_IncomingCallBox_buttons_decline {
+    background-color: #f48080;
+}
+
+.mx_IncomingCallBox_buttons_accept {
+    background-color: #80f480;
+}
diff --git a/skins/base/img/chevron-left.png b/skins/base/img/chevron-left.png
new file mode 100644
index 0000000000000000000000000000000000000000..12abcc264b12d97a6a147cc0f52fade565c5f7af
GIT binary patch
literal 179
zcmeAS@N?(olHy`uVBq!ia0vp^oIotV!3HFcc!W9wDajJoh?3y^w370~qErUQl>DSr
z1<%~X^wgl##FWaylc_d9MWLQ9jv*Ddl79UEZ_jME=j*}i|9yBW4s2_`|L^oi1LFs#
z4?oS8|Nmcj@dJB9u77Zff#m}mql`eV>_t9xD~=96pByepN2U~agH4?bjBE^Z!)FWZ
T-`I2+XaR$#tDnm{r-UW|(*-?*

literal 0
HcmV?d00001

diff --git a/skins/base/views/molecules/voip/IncomingCallBox.js b/skins/base/views/molecules/voip/IncomingCallBox.js
index 5adc71af79..4f152e44c6 100644
--- a/skins/base/views/molecules/voip/IncomingCallBox.js
+++ b/skins/base/views/molecules/voip/IncomingCallBox.js
@@ -17,7 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var classNames = require('classnames');
+var MatrixClientPeg = require("../../../../../src/MatrixClientPeg");
 var IncomingCallBoxController = require(
     "../../../../../src/controllers/molecules/voip/IncomingCallBox"
 );
@@ -31,7 +31,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        if (!this.state.incomingCallRoomId) {
+        if (!this.state.incomingCall || !this.state.incomingCall.roomId) {
             return (
                 <div>
                     <audio ref="ringAudio" loop>
@@ -41,26 +41,27 @@ module.exports = React.createClass({
                 </div>
             );
         }
+        var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name;
         return (
             <div className="mx_IncomingCallBox">
+                <img className="mx_IncomingCallBox_chevron" src="/img/chevron-left.png" width="9" height="16" />
                 <audio ref="ringAudio" loop>
                     <source src="media/ring.ogg" type="audio/ogg" />
                     <source src="media/ring.mp3" type="audio/mpeg" />
                 </audio>
-                <div className="mx_IncomingCallBox_avatar">
-                    <img src="img/voip.png" width="42" height="42"/>
-                </div>
                 <div className="mx_IncomingCallBox_title">
-                    General Incoming Call
+                    Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller }
                 </div>
                 <div className="mx_IncomingCallBox_buttons">
-                    <div className="mx_IncomingCallBox_buttons_decline"
-                    onClick={this.onRejectClick}>
-                        Decline
+                    <div className="mx_IncomingCallBox_buttons_cell">
+                        <div className="mx_IncomingCallBox_buttons_decline" onClick={this.onRejectClick}>
+                            Decline
+                        </div>
                     </div>
-                    <div className="mx_IncomingCallBox_buttons_accept"
-                    onClick={this.onAnswerClick}>
-                        Accept
+                    <div className="mx_IncomingCallBox_buttons_cell">
+                        <div className="mx_IncomingCallBox_buttons_accept" onClick={this.onAnswerClick}>
+                            Accept
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/controllers/molecules/voip/IncomingCallBox.js b/src/controllers/molecules/voip/IncomingCallBox.js
index 1d6cca9e54..809c0833ef 100644
--- a/src/controllers/molecules/voip/IncomingCallBox.js
+++ b/src/controllers/molecules/voip/IncomingCallBox.js
@@ -30,7 +30,7 @@ module.exports = {
 
     getInitialState: function() {
         return {
-            incomingCallRoomId: null
+            incomingCall: null
         }
     },
 
@@ -41,7 +41,7 @@ module.exports = {
         var call = CallHandler.getCall(payload.room_id);
         if (!call || call.call_state !== 'ringing') {
             this.setState({
-                incomingCallRoomId: null
+                incomingCall: null,
             });
             this.getRingAudio().pause();
             return;
@@ -55,20 +55,20 @@ module.exports = {
         }
 
         this.setState({
-            incomingCallRoomId: call.roomId
+            incomingCall: call
         });
     },
 
     onAnswerClick: function() {
         dis.dispatch({
             action: 'answer',
-            room_id: this.state.incomingCallRoomId
+            room_id: this.state.incomingCall.roomId
         });
     },
     onRejectClick: function() {
         dis.dispatch({
             action: 'hangup',
-            room_id: this.state.incomingCallRoomId
+            room_id: this.state.incomingCall.roomId
         });
     }
 };