moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-11 20:15:00 -05:00
Code Issues Releases Wiki Activity

basic call bar UI

Browse Source
This commit is contained in:
Henrik Joreteg 2013-10-15 16:21:22 -07:00
parent ba9b0a7baf
commit 8860dc3753
12 changed files with 157 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
clientapp/helpers/callbar.js
View File

@ -1,248 +0,0 @@
var CallBar = function (options) {
var spec = options || {};
this.states = {
incoming: {
buttons: [
{
cls: 'answer',
label: 'Answer'
},
{
cls: 'ignore',
label: 'Ignore'
}
]
},
calling: {
buttons: [{
cls: 'cancel',
label: 'Cancel'
}]
},
active: {
buttons: [{
cls: 'end',
label: 'End Call'
}],
timer: true
},
inactive: {
buttons: [],
clearUser: true,
hidden: true
},
ending: {
buttons: []
},
waiting: {
buttons: []
}
};
this.config = {
defaultName: '',
defaultNumber: 'Unknown Number'
};
};
CallBar.prototype.render = function () {
if (!this.dom) {
this.dom = this.domify(template(this));
this.addButtonHandlers();
document.body.insertBefore(this.dom, document.body.firstChild);
} else {
this.dom.innerHTML = this.domify(template(this)).innerHTML;
}
this.setState('inactive');
return this.dom;
};
CallBar.prototype.addButtonHandlers = function () {
var self = this;
this.dom.addEventListener('click', function (e) {
var target = e.target;
if (target.tagName === 'BUTTON') {
if (self[target.className]) {
self[target.className]();
}
return false;
}
}, true);
};
CallBar.prototype.getStates = function () {
return Object.keys(this.states);
};
CallBar.prototype.setState = function (state) {
if (!this.dom) return this;
var buttons = this.dom.querySelectorAll('button'),
callActionsEl = this.dom.querySelector('.callActions'),
self = this,
stateDef = this.states[state],
forEach = Array.prototype.forEach;
if (stateDef) {
// set proper class on bar itself
this.getStates().forEach(function (cls) {
self.dom.classList.remove(cls);
});
self.dom.classList.add(state);
// set/remove 'hidden' class on bar itself
if (stateDef.hidden) {
self.dom.classList.remove('visible');
document.body.classList.remove('candybarVisible');
} else {
self.dom.classList.add('visible');
document.body.classList.add('candybarVisible');
}
// remove all the buttons
forEach.call(buttons, function (button) {
button.parentElement.removeChild(button);
});
// add buttons
stateDef.buttons.forEach(function (button) {
callActionsEl.appendChild(self.domify('<button class="' + button.cls + '">' + button.label + '</button>'));
});
// start/stop timer
if (stateDef.timer) {
if (this.timerStopped) {
this.startTimer();
}
} else {
this.resetTimer();
}
// reset user if relevant
if (stateDef.clearUser) {
this.clearUser();
}
} else {
throw new Error('Invalid value for CallBar state. Valid values are: ' + this.getStates().join(', '));
}
return this;
};
CallBar.prototype.endGently = function (delay) {
var self = this;
this.setState('ending');
setTimeout(function () {
self.dom.classList.remove('visible');
setTimeout(function () {
self.setState('inactive');
self.clearUser();
}, 1000);
}, 1000);
return this;
};
CallBar.prototype.setImageUrl = function (url) {
this.attachImageDom(!!url);
this.imageDom.src = url;
this.dom.classList[!!url ? 'add' : 'remove']('havatar');
};
CallBar.prototype.attachImageDom = function (bool) {
if (!this.imageDom) {
this.imageDom = this.dom.querySelector('.callerAvatar');
}
if (bool && !this.imageDom.parentElement) {
this.dom.insertBefore(this.imageDom, this.dom.firstChild);
} else if (this.imageDom.parentElement) {
this.imageDom.parentElement.removeChild(this.imageDom);
}
return this.imageDom;
};
CallBar.prototype.getUser = function () {
var user = this.user || {},
self = this;
return {
picUrl: user.picUrl,
name: (user.name && user.name) || this.config.defaultName,
number: function () {
if (user.number && user.number !== self.config.defaultNumber) {
if (phoney) {
return phoney.stringify(user.number);
} else {
return escape(user.number);
}
} else {
return self.config.defaultNumber;
}
}()
};
};
CallBar.prototype.setUser = function (details) {
this.user = details;
if (!this.dom) return;
var user = this.getUser();
this.dom.querySelector('.callerNumber').innerHTML = user.number;
this.dom.querySelector('.callerName').innerHTML = user.name;
this.setImageUrl(user.picUrl);
return this;
};
CallBar.prototype.clearUser = function () {
this.setUser({
picUrl: '',
name: '',
number: ''
});
return this;
};
CallBar.prototype.domify = function (str) {
var div = document.createElement('div');
div.innerHTML = str;
return div.firstElementChild;
};
CallBar.prototype.startTimer = function () {
this.timerStartTime = Date.now();
this.timerStopped = false;
this.updateTimer();
return this;
};
CallBar.prototype.stopTimer = function () {
this.timerStopped = true;
return this;
};
CallBar.prototype.resetTimer = function () {
this.timerStopped = true;
this.setTimeInDom('0:00:00');
return this;
};
CallBar.prototype.updateTimer = function () {
if (this.timerStopped) return;
var diff = Date.now() - this.timerStartTime,
s = Math.floor(diff / 1000) % 60,
min = Math.floor((diff / 1000) / 60) % 60,
hr = Math.floor(((diff / 1000) / 60) / 60) % 60,
time = [hr, this.zeroPad(min), this.zeroPad(s)].join(':');
if (this.time !== time) {
this.time = time;
this.setTimeInDom(time);
}
setTimeout(this.updateTimer.bind(this), 100);
};
CallBar.prototype.setTimeInDom = function (timeString) {
if (!this.dom) return;
this.dom.querySelector('.callTime').innerHTML = timeString;
};
CallBar.prototype.zeroPad = function (num) {
return ((num + '').length === 1) ? '0' + num : num;
};

2
clientapp/models/call.js
View File

@ -9,7 +9,7 @@ var logger = require('andlog');
module.exports = HumanModel.define({ module.exports = HumanModel.define({
type: 'call', type: 'call',
session: { session: {
contactJid: 'object', contact: 'object',
jingleSession: 'object', jingleSession: 'object',
state: ['string', true, 'inactive'], state: ['string', true, 'inactive'],
multiUser: ['boolean', true, false] multiUser: ['boolean', true, false]

5
clientapp/models/me.js
View File

@ -16,7 +16,7 @@ module.exports = HumanModel.define({
this.bind('change:hasFocus', function () { this.bind('change:hasFocus', function () {
this.setActiveContact(this._activeContact); this.setActiveContact(this._activeContact);
}, this); }, this);
this.calls.bind('add remove reset', this.updateActiveCalls, this);
this.contacts.bind('change:unreadCount', this.updateUnreadCount, this); this.contacts.bind('change:unreadCount', this.updateUnreadCount, this);
app.state.bind('change:active', this.updateIdlePresence, this); app.state.bind('change:active', this.updateIdlePresence, this);
}, },
@ -124,5 +124,8 @@ module.exports = HumanModel.define({
count = ''; count = '';
} }
app.state.badge = '' + count; app.state.badge = '' + count;
},
updateActiveCalls: function () {
app.state.hasActiveCall = !!this.calls.length;
} }
}); });

3
clientapp/models/state.js
View File

@ -34,7 +34,8 @@ module.exports = HumanModel.define({
idleSince: 'date', idleSince: 'date',
allowAlerts: ['bool', true, false], allowAlerts: ['bool', true, false],
badge: ['string', true, ''], badge: ['string', true, ''],
pageTitle: ['string', true, ''] pageTitle: ['string', true, ''],
hasActiveCall: ['boolean', true, false]
}, },
derived: { derived: {
title: { title: {

4
clientapp/templates.js
View File

@ -13,7 +13,7 @@ exports.pages = {};
exports.body = function anonymous(locals) { exports.body = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p> \nYou\'re currently <strong>disconnected</strong></p><button class="reconnect">Reconnect</button></aside></div><header id="calls"></header><aside id="menu"><nav class="main"><li><a href="/logout" class="button">Logout</a></li><li><a href="/" class="button"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></li></nav><section id="roster"><h1>Roster</h1><nav></nav></section><section id="bookmarks"><h1>Bookmarks</h1><nav></nav></section></aside><section id="pages"></section></body>'); buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p> \nYou\'re currently <strong>disconnected</strong></p><button class="reconnect">Reconnect</button></aside></div><header id="calls"></header><div id="wrapper"><aside id="menu"><nav class="main"><li><a href="/logout" class="button">Logout</a></li><li><a href="/" class="button"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></li></nav><section id="roster"><h1>Roster</h1><nav></nav></section><section id="bookmarks"><h1>Bookmarks</h1><nav></nav></section></aside><main id="pages"></main></div></body>');
} }
return buf.join(""); return buf.join("");
}; };
@ -46,7 +46,7 @@ exports.includes.bareMessage = function anonymous(locals) {
exports.includes.call = function anonymous(locals) { exports.includes.call = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<div class="call"><img class="callerAvatar"/><h1 class="caller"><span class="callerName"></span><span class="callerNumber"></span></h1><h2 class="callTime"></h2><div class="callActions"></div></div>'); buf.push('<div class="call"><img class="callerAvatar"/><h1 class="caller"><span class="callerName"></span><span class="callerNumber"></span></h1><h2 class="callTime"></h2><div class="callActions"><button class="answer">Answer</button><button class="ignore">Ignore</button><button class="cancel">Cancel</button><button class="end">End</button><button class="mute">Mute</button></div></div>');
} }
return buf.join(""); return buf.join("");
}; };

25
clientapp/templates/body.jade
View File

@ -6,21 +6,22 @@ body
strong disconnected strong disconnected
button.reconnect Reconnect button.reconnect Reconnect
header#calls header#calls
aside#menu #wrapper
nav.main aside#menu
nav.main
li li
a(href="/logout", class="button") Logout a(href="/logout", class="button") Logout
li li
a(href="/", class="button") a(href="/", class="button")
svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25") svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25")
g(transform='scale(0.4)') g(transform='scale(0.4)')
path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z') path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z') path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
| Settings | Settings
section#roster section#roster
h1 Roster h1 Roster
nav nav
section#bookmarks section#bookmarks
h1 Bookmarks h1 Bookmarks
nav nav
section#pages main#pages

5
clientapp/templates/includes/call.jade
View File

@ -5,3 +5,8 @@
span.callerNumber span.callerNumber
h2.callTime h2.callTime
.callActions .callActions
button.answer Answer
button.ignore Ignore
button.cancel Cancel
button.end End
button.mute Mute

4
clientapp/views/main.js
View File

@ -19,12 +19,14 @@ module.exports = HumanView.extend({
'click .reconnect': 'handleReconnect' 'click .reconnect': 'handleReconnect'
}, },
classBindings: { classBindings: {
connected: '#connectionOverlay' connected: '#connectionOverlay',
hasActiveCall: '#wrapper'
}, },
render: function () { render: function () {
$('head').append(templates.head()); $('head').append(templates.head());
$('body').removeClass('aux'); $('body').removeClass('aux');
this.renderAndBind(); this.renderAndBind();
console.log('this.model', this.model);
this.renderCollection(me.contacts, ContactListItem, this.$('#roster nav')); this.renderCollection(me.contacts, ContactListItem, this.$('#roster nav'));
this.renderCollection(me.mucs, MUCListItem, this.$('#bookmarks nav')); this.renderCollection(me.mucs, MUCListItem, this.$('#bookmarks nav'));
this.renderCollection(me.calls, CallView, this.$('#calls')); this.renderCollection(me.calls, CallView, this.$('#calls'));

20
public/css/_mixins.styl
View File

@ -36,17 +36,17 @@ turn($deg)
-o-transform: rotate($deg) -o-transform: rotate($deg)
transform: rotate($deg) transform: rotate($deg)
transform($param) transform()
-webkit-transform: $param -webkit-transform: arguments
-moz-transform: $param -moz-transform: arguments
-ms-transform: $param -ms-transform: arguments
transform: $param transform: arguments
transition($attr, $dur, $timing, $delay) transition()
-webkit-transition: $attr $dur $timing $delay -webkit-transition: arguments
-o-transition: $attr $dur $timing $delay -o-transition: arguments
transition: $attr $dur $timing $delay transition: arguments
-moz-transition: $attr $dur $timing $delay -moz-transition: arguments
flip-horizontal() flip-horizontal()
-moz-transform: scaleX(-1) -moz-transform: scaleX(-1)

137
public/css/app/callbar.styl
View File

@ -1,77 +1,77 @@
@import _mixins @import _mixins
@import _variables @import _variables
body $callHeight = 80px
position: relative !important
-webkit-transition: top 1s
&.candybarVisible #wrapper
top: 100px position: relative !important
transition: all 1s
&.hasActiveCall
transform: translateY($callHeight)
#calls #calls
position: fixed position: fixed
top: -120px top: 0
left: 0px left: 0px
-webkit-transition: background-color 1s transition: all 1s
-webkit-transition: top 1s
width: 100% width: 100%
height: 80px height: $callHeight
padding: 10px
z-index: 1000 z-index: 1000
background: white
&.visible &:empty, &.ending
top: 0px transform: translateY(-($callHeight))
&.havatar .call
height: $callHeight
padding: 0
margin: 0
&.incoming
background: $activeBlue
.callTime
display: none
.callerName:before
content: "Incoming: "
&.waiting
background: $activeBlue
.spinner div
background-color: #fff
&.calling
callbar($blue)
.callTime
display: none
.callerName:before
content: "Calling: "
&.active
callbar($green)
.callerName:before
content: "On Call: "
&.inactive
callbar(#fff)
&.remote
callbar($blue #333)
.callTime
display: none
&.ending
.callerName:before
content: "Call ending with: "
callbar($grey)
.callActions .callActions
left: 100px position: absolute
.caller left: 10px
margin-left: 90px top: 50px
display: block
&.incoming width: 100%
background: blue
.callTime
display: none
.callerName:before
content: "Incoming: "
&.waiting
callbar($orange)
.spinner div
background-color: #fff
&.calling
callbar($blue)
.callTime
display: none
.callerName:before
content: "Calling: "
&.active
callbar($green)
.callerName:before
content: "On Call: "
&.inactive
callbar(#fff)
&.remote
callbar($blue #333)
.callTime
display: none
&.ending
.callerName:before
content: "Call ending with: "
callbar($grey)
.callActions
position: absolute
left: 10px
top: 50px
display: block
width: 100%
nav nav
float: left float: left
@ -104,22 +104,19 @@ body
.callerAvatar .callerAvatar
float: left float: left
width: 65px width: 50px
height: 65px height: 50px
border: 5px solid #eee
margin-right: 10px margin-right: 10px
roundall(25px)
.callerName, .callTime
.callerName, .callTime
font-weight: bold font-weight: bold
color: #fff color: #fff
text_shadow(rgba(0,0,0,.7),0,1px,0) text_shadow(rgba(0,0,0,.7),0,1px,0)
line-height: 1 line-height: 1
.caller .caller
margin: margin: 0
top: 0px
right: 30px
left: 0px
font-size: 20px font-size: 20px
padding-bottom: 0px padding-bottom: 0px
border-bottom: 2px groove rgba(255,255,255,.4) border-bottom: 2px groove rgba(255,255,255,.4)

82
public/css/otalk.css
View File

@ -1027,61 +1027,75 @@ button:hover,
a.button:hover { a.button:hover {
background: #007aa7; background: #007aa7;
} }
body { #wrapper {
position: relative !important; position: relative !important;
-webkit-transition: top 1s; -webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
-moz-transition: all 1s;
} }
body.candybarVisible { #wrapper.hasActiveCall {
top: 100px; -webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-ms-transform: translateY(80px);
transform: translateY(80px);
} }
#calls { #calls {
position: fixed; position: fixed;
top: -120px; top: 0;
left: 0px; left: 0px;
-webkit-transition: background-color 1s; -webkit-transition: all 1s;
-webkit-transition: top 1s; -o-transition: all 1s;
transition: all 1s;
-moz-transition: all 1s;
width: 100%; width: 100%;
height: 80px; height: 80px;
padding: 10px;
z-index: 1000; z-index: 1000;
background: #fff;
} }
#calls.visible { #calls:empty,
top: 0px; #calls.ending {
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-ms-transform: translateY(-80px);
transform: translateY(-80px);
} }
#calls.havatar .callActions { #calls .call {
left: 100px; height: 80px;
padding: 0;
margin: 0;
} }
#calls.havatar .caller { #calls .call.incoming {
margin-left: 90px; background: #00aeef;
} }
#calls.incoming { #calls .call.incoming .callTime {
background: #00f;
}
#calls.incoming .callTime {
display: none; display: none;
} }
#calls.incoming .callerName:before { #calls .call.incoming .callerName:before {
content: "Incoming: "; content: "Incoming: ";
} }
#calls.waiting .spinner div { #calls .call.waiting {
background: #00aeef;
}
#calls .call.waiting .spinner div {
background-color: #fff; background-color: #fff;
} }
#calls.calling .callTime { #calls .call.calling .callTime {
display: none; display: none;
} }
#calls.calling .callerName:before { #calls .call.calling .callerName:before {
content: "Calling: "; content: "Calling: ";
} }
#calls.active .callerName:before { #calls .call.active .callerName:before {
content: "On Call: "; content: "On Call: ";
} }
#calls.remote .callTime { #calls .call.remote .callTime {
display: none; display: none;
} }
#calls.ending .callerName:before { #calls .call.ending .callerName:before {
content: "Call ending with: "; content: "Call ending with: ";
} }
#calls .callActions { #calls .call .callActions {
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 50px; top: 50px;
@ -1127,10 +1141,15 @@ rgba(0,0,0,0.2)
} }
#calls .callerAvatar { #calls .callerAvatar {
float: left; float: left;
width: 65px; width: 50px;
height: 65px; height: 50px;
border: 5px solid #eee;
margin-right: 10px; margin-right: 10px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-khtml-border-radius: 25px;
-o-border-radius: 25px;
-border-radius: 25px;
border-radius: 25px;
} }
#calls .callerName, #calls .callerName,
#calls .callTime { #calls .callTime {
@ -1140,14 +1159,11 @@ rgba(0,0,0,0.7)
line-height: 1; line-height: 1;
} }
#calls .caller { #calls .caller {
margin: 0;
font-size: 20px; font-size: 20px;
padding-bottom: 0px; padding-bottom: 0px;
border-bottom: 2px groove rgba(255,255,255,0.4); border-bottom: 2px groove rgba(255,255,255,0.4);
} }
#calls .caller margin:top: 0px {
right: 30px;
left: 0px;
}
#calls .callerName { #calls .callerName {
display: inline; display: inline;
} }

2
public/x-manifest.cache
View File

@ -1,5 +1,5 @@
CACHE MANIFEST CACHE MANIFEST
# 0.0.1 1381864472792 # 0.0.1 1381879209705
CACHE: CACHE:
/app.js /app.js