Skip to content

Commit

Permalink
[WIP] New style for dial pad
Browse files Browse the repository at this point in the history
  • Loading branch information
@danimaribeiro
danimaribeiro committed Nov 28, 2018
1 parent 966393c commit 7167e7e
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 79 deletions.
3 changes: 3 additions & 0 deletions voice_twilio/__manifest__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,7 @@
'data': [
'views/twilio_assets.xml',
],
'qweb': [
'static/src/xml/dial.xml'
],
}
26 changes: 26 additions & 0 deletions voice_twilio/static/src/css/dial.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.dialpad {
font-family: 100% 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
}
.dialpad ol, ul {
list-style: none;
padding: 0px;
}
.dialpad .number{
position:relative;z-index:2;padding:15px 20px;color:#4d4d4d;
font-weight:300;font-size:40px;background:#fff;height:78px;
border: 1px solid #ddd;
}
.dialpad .number > input {border: none;}
.dialpad .dials{margin:-1px 0 0 -1px;background:#1d1918;cursor:pointer}
.dialpad .dials:before,.dialpad .dials:after{content:"\0020";display:block;height:0;overflow:hidden}
.dialpad .dials:after{clear:both}
.dialpad .dials .digits{float:left;width:33.33%}
.dialpad .dials .digits p{font-weight:600;padding:15px 25px;border-top:1px solid #4d4d4d;border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #4d4d4d}
.dialpad .dials .digits p strong{font-size:50px;margin-right:8px;color:#fff}
.dialpad .dials .digits:active{background:#00caf2;border-top-color:#b2f2ff}
.compact .dials .digits p{padding:10px 10px; margin: 0px;}
.compact .dials .digits p strong{font-size:30px}
.compact .dials .digits p sup{text-transform:uppercase;color:#c1c1c1}
.compact .dials .pad-action{background:#093}
.compact .dials .pad-action:active{background:#0c3}
144 changes: 70 additions & 74 deletions voice_twilio/static/src/js/twilio_app.js
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,83 @@
odoo.define('twilio_base', function (require) {
odoo.define('voice_twilio', function (require) {
"use strict";

var core = require('web.core');
var base_bus = require('bus.bus');
var Dialog = require('web.Dialog');
var Model = require('web.Model');
var session = require('web.session');
var SystrayMenu = require('web.SystrayMenu');
var Widget = require('web.Widget');
var WebClient = require('web.WebClient');
var Notification = require('web.notification').Notification;
var core = require('web.core');
var base_bus = require('bus.bus');
var Dialog = require('web.Dialog');
var session = require('web.session');
var SystrayMenu = require('web.SystrayMenu');
var Widget = require('web.Widget');
var WebClient = require('web.WebClient');
var Notification = require('web.notification').Notification;

var QWeb = core.qweb;
var _t = core._t;
var QWeb = core.qweb;
var _t = core._t;

var TwilioCallNotification = Notification.extend({
template: "TwilioCallNotification",

var TwilioCallNotification = Notification.extend({
template: "TwilioCallNotification",
init: function(parent, title, text, callId) {
this._super(parent, title, text, true);
this.callId = callId;

init: function(parent, title, text, callId) {
this._super(parent, title, text, true);
this.callId = callId;

this.events = _.extend(this.events || {}, {
'click .link2answer': function() {
var self = this;
session.rpc("/twilio/token", {}).then(function (data) {
Twilio.Device.setup(data);
Twilio.Device.incoming(function(connection) {
connection.accept();
});
Twilio.Device.ready(function (device) {
var params = {
To: 'queue'
};
Twilio.Device.connect(params);
self.destroy(true);
this.events = _.extend(this.events || {}, {
'click .link2answer': function() {
var self = this;
session.rpc("/twilio/token", {}).then(function (data) {
Twilio.Device.setup(data);
Twilio.Device.incoming(function(connection) {
connection.accept();
});
Twilio.Device.ready(function (device) {
var params = {
To: 'queue'
};
Twilio.Device.connect(params);
self.destroy(true);
});
});
});
},
},

'click .link2reject': function() {
this.destroy(true);
},
});
},
});
'click .link2reject': function() {
this.destroy(true);
},
});
},
});

WebClient.include({
show_application: function() {
this.start_polling_calls();
return this._super();
},
on_logout: function() {
var self = this;
base_bus.bus.off('notification', this, this.bus_notification);
this._super();
},
start_polling_calls: function() {
this.channel_twilio_call = 'notify_twilio_call_' + this.session.uid;
base_bus.bus.add_channel(this.channel_twilio_call);
base_bus.bus.on('notification', this, this.twilio_call_notification);
base_bus.bus.start_polling();
},
twilio_call_notification: function(notifications) {
var self = this;
_.each(notifications, function (notification) {
var channel = notification[0];
var message = notification[1];
if (channel == self.channel_twilio_call) {
self.on_message_new_call(message);
WebClient.include({
show_application: function() {
this.start_polling_calls();
return this._super();
},
on_logout: function() {
var self = this;
base_bus.bus.off('notification', this, this.bus_notification);
this._super();
},
start_polling_calls: function() {
// this.channel_twilio_call = 'notify_twilio_call_' + this.session.uid;
// base_bus.bus.add_channel(this.channel_twilio_call);
// base_bus.bus.on('notification', this, this.twilio_call_notification);
// base_bus.bus.start_polling();
},
twilio_call_notification: function(notifications) {
var self = this;
_.each(notifications, function (notification) {
var channel = notification[0];
var message = notification[1];
if (channel == self.channel_twilio_call) {
self.on_message_new_call(message);
}
});
},
on_message_new_call: function(message){
if(this.notification_manager) {
var notification = new TwilioCallNotification(this.notification_manager, message.title, message.message, message.call_id);
this.notification_manager.display(notification);
}
});
},
on_message_new_call: function(message){
if(this.notification_manager) {
var notification = new TwilioCallNotification(this.notification_manager, message.title, message.message, message.call_id);
this.notification_manager.display(notification);
}
}
});

});

var OpenDialer = Widget.extend({
template: 'twilio_base.phone.dial',
Expand Down Expand Up @@ -114,6 +111,5 @@ WebClient.include({
Twilio.Device.disconnectAll();
},
});

core.action_registry.add('twilio_base.open_dialer', OpenDialer);
core.action_registry.add('voice_twilio.open_dialer', OpenDialer);
});
77 changes: 77 additions & 0 deletions voice_twilio/static/src/xml/dial.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates>

<t t-name="TwilioCallNotification" t-extend="Notification">
<t t-jquery=".o_notification_title > t" t-operation="replace">
<span t-attf-class="link2event eid_{{widget.callId}}">
<t t-esc="widget.title"/>
</span>
</t>
<t t-jquery=".o_notification_content" t-operation="append">
<br/><br/>
<button type="button" class="btn btn-success link2answer">
<i class="fa fa-phone"></i> Atender
</button>
<button type="button" class="btn btn-danger link2reject pull-right">Rejeitar</button>
</t>
</t>

<t t-name="twilio_base.phone.dial">
<div class="col-md-4" style="position: absolute;bottom: 0px;left: 0px; padding:0px;">
<div class="dialpad compact">
<div class="number">
<input type="text" />
</div>
<div class="dials">
<ol>
<li class="digits">
<p><strong>1</strong></p>
</li>
<li class="digits">
<p><strong>2</strong><sup>abc</sup></p>
</li>
<li class="digits">
<p><strong>3</strong><sup>def</sup></p>
</li>
<li class="digits">
<p><strong>4</strong><sup>ghi</sup></p>
</li>
<li class="digits">
<p><strong>5</strong><sup>jkl</sup></p>
</li>
<li class="digits">
<p><strong>6</strong><sup>mno</sup></p>
</li>
<li class="digits">
<p><strong>7</strong><sup>pqrs</sup></p>
</li>
<li class="digits">
<p><strong>8</strong><sup>tuv</sup></p>
</li>
<li class="digits">
<p><strong>9</strong><sup>wxyz</sup></p>
</li>
<li class="digits">
<p><strong>*</strong></p>
</li>
<li class="digits">
<p><strong>0</strong><sup>+</sup></p>
</li>
<li class="digits">
<p><strong>#</strong></p>
</li>
<li class="digits">
<p><strong><i class="fa fa-refresh"></i></strong> <sup>Clear</sup></p>
</li>
<li class="digits">
<p><strong><i class="fa fa-remove"></i></strong> <sup>Delete</sup></p>
</li>
<li class="digits pad-action">
<p><strong><i class="fa fa-phone"></i></strong> <sup>Call</sup></p>
</li>
</ol>
</div>
</div>
</div>
</t>
</templates>
16 changes: 11 additions & 5 deletions voice_twilio/views/twilio_assets.xml
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template id="bpmn_modeler_assets_frontend" name="bpmn_modeler_assets" inherit_id="web.assets_frontend">
<template id="assets_voice_twilio_backend" name="assets_voice_twilio_backend" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript"
src="//media.twiliocdn.com/sdk/js/client/v1.5/twilio.min.js"></script>
<script type="text/javascript"
src="/voice_twilio/static/src/js/twilio_app.js"></script>
<script type="text/javascript" src="//media.twiliocdn.com/sdk/js/client/v1.5/twilio.min.js"></script>
<script type="text/javascript" src="/voice_twilio/static/src/js/twilio_app.js"></script>
<link rel="stylesheet" href="/voice_twilio/static/src/css/dial.css"/>
</xpath>
</template>

<record id="action_home_page" model="ir.actions.client">
<field name="name">Abrir dial</field>
<field name="tag">voice_twilio.open_dialer</field>
</record>

<menuitem id="home_page_petstore_menu" parent="contacts.menu_contacts"
name="Discar" action="action_home_page"/>
</odoo>

0 comments on commit 7167e7e

Please sign in to comment.