Skip to content

Commit

Permalink
Improved look & feel of log panel; additional style changes; introduc…
Browse files Browse the repository at this point in the history 
…ed account status message
  • Loading branch information
@danleeb
danleeb committed May 29, 2012
1 parent 9187d9c commit 5f9f200
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 45 deletions.
23 changes: 13 additions & 10 deletions CHANGELOG.txt
View file
Expand Up @@ -9,19 +9,19 @@ Qt Application:

JavaScript Phone:
- Improve persisting of calls (accepted, missed, times, data?)
- settings panel
+ settings panel
+ change host/username/password (save in localStorage)
+ clear log history
- set forceOutgoingNumber
- set maxCallLogs value
- show/hide log
- debug settings (errorHandler, phone log level)
+ set forceOutgoingNumber
+ set maxCallLogs value
+ show/hide log
+ debug settings (errorHandler, phone log level)
- log:
- show list of log files: getLogFileList
- show content of log file: getLogFileContent
- delete log file: deleteLogFile
- connection to server / server-less calls
- show registration/account status
/ show list of log files: getLogFileList
/ show content of log file: getLogFileContent
/ delete log file: deleteLogFile
+ connection to server / server-less calls
+ show registration/account status
- compact/detailed list switchers (contacts, calls)
- compact list: auto-switch if col is too small
- show contact in call log and "add contact"-field if number matches
Expand All @@ -30,6 +30,9 @@ JavaScript Phone:
- total call time
- total calls (incoming/outgoing)
- contact search
- resize issue with tinyscrollbar (contacts panel)
possible solution: call update on panel switch
- resize phone controls when height < ~460
[- print contact list]
- run JSLint
- minimized versions
Expand Down
52 changes: 42 additions & 10 deletions build/phone/css/style.css
View file
Expand Up @@ -40,6 +40,7 @@ input, .ui-state-focus { outline:none; }
font-size:21px;
font-weight:bold;
line-height:10px;
text-shadow:-1px -1px 0px #444;
cursor:pointer;
}
.btn:hover, #numblock button:hover {
Expand All @@ -64,6 +65,7 @@ input, .ui-state-focus { outline:none; }
background:-webkit-gradient(linear, left top, left bottom, from(#181), to(#070));
border-top:1px solid #292;
border-bottom:1px solid #181;
text-shadow:-1px -1px 0px #464;
color:#ddd;
}
.btn.accept:hover {
Expand All @@ -76,6 +78,7 @@ input, .ui-state-focus { outline:none; }
background:-webkit-gradient(linear, left top, left bottom, from(#a22), to(#911));
border-top:1px solid #c33;
border-bottom:1px solid #b22;
text-shadow:-1px -1px 0px #522;
color:#eaa;
}
.btn.hangup:hover {
Expand All @@ -101,7 +104,8 @@ input, .ui-state-focus { outline:none; }
padding-top:17px;
color:#18b;
text-align:center;
font-size:17px;
line-height:18px;
font-size:20px;
}
#nav li.active div { color:#fff; }
#navcontacts div { border-right:1px solid #036; }
Expand All @@ -117,10 +121,10 @@ input, .ui-state-focus { outline:none; }
border-top:3px solid #18b;
}
#contacts, #phone, #calls {
min-height:410px;
background:#000;
height:100%;
}
#phone { min-height:410px; }
#contacts .content { height:100%; border-right:1px solid #333; }
#calls .content { height:100%; border-left:1px solid #333; }
.bg {
Expand Down Expand Up @@ -180,7 +184,8 @@ input, .ui-state-focus { outline:none; }
right:0;
width:30px;
color:#000;
line-height:10px;
text-shadow:none;
opacity:0.5;
}

/*************** Phone ***************/
Expand Down Expand Up @@ -231,8 +236,14 @@ input, .ui-state-focus { outline:none; }
text-align:center;
}
#numblock { padding-top:10px; }
#numblock button, #phoneControls .btn { height:40px; margin:4px; }
#numblock button, #phoneControls .btn { height:37px; margin:4px; }
#numblock button { width:65px; }
#status {
color:#aaa;
font-size:16px;
font-weight:bold;
text-shadow:-1px -1px 1px #000;
}
.accept { width:90px; }
.hangup { width:110px; }
#settingsControls {
Expand Down Expand Up @@ -335,14 +346,35 @@ input, .ui-state-focus { outline:none; }
position:fixed;
bottom:0; left:0; right:0;
height:100px;
}
#logDrag {
position:absolute;
bottom:100%; left:50%; margin-left:-30px;
width:60px;
height:8px;
background:#444;
border-top:1px solid #666;
border-top-left-radius:4px;
border-top-right-radius:4px;
cursor:n-resize;
color:#222;
text-align:center;
line-height:0px;
font-family:"Times New Roman";
font-size:21px;
font-weight:bold;
text-shadow:1px 1px 1px #666;
}
#log ul {
overflow-y:scroll;
background-color:#ddd;
border-top:5px solid #777;
color:#444;
height:100%;
background-color:#111;
border-top:2px solid #444;
color:#777;
font-family:Courier;
font-size:11px;
}
#log div { border-bottom:1px solid #ccc; }
#log ul li { padding:1px; border-bottom:1px solid #222; }

/*************** Dialogs ***************/
.ui-dialog { padding:0; background:#000; border:2px solid #17a; font-family:Helvetica; border-radius:0; }
Expand All @@ -360,9 +392,9 @@ input, .ui-state-focus { outline:none; }
.ui-dialog.error .ui-dialog-content { font-size:15px; color:#f44; padding:5px; }
.ui-dialog .ui-dialog-titlebar-close.ui-state-hover { background:#fff; opacity:0.9; border-color:#fff; }
.ui-dialog .item { position:relative; padding:6px 28px 6px 20px; border-bottom:1px solid #333; }
.ui-dialog .item.category { padding-left:10px; background:#222; color:#ccc; font-size:14px; }
.ui-dialog .item.category { padding-left:10px; background:#222; color:#ccc; font-size:13px; font-weight:bold; }
.ui-dialog label { display:block; margin-bottom:2px; font-size:13px; color:#ddd; }
.ui-dialog span { font-size:18px; color:#ddd; }
.ui-dialog .ui-dialog-content span { font-size:16px; color:#eee; }
.ui-dialog input[type="text"], .ui-dialog input[type="password"] {
width:98%;
background:#d6d6d6;
Expand Down
3 changes: 2 additions & 1 deletion build/phone/index.html
View file
Expand Up @@ -35,6 +35,7 @@
<button>+</button><button>0</button><button>&lt;</button>
</div>
<div id="phoneControls">
<div id="status">_______________________</div>
<button id="buttonCall" class="btn accept">Call</button>
<button id="buttonHangUpAll" class="btn hangup">End All</button>
</div>
Expand All @@ -52,7 +53,7 @@
<div class="viewport"><div class="overview"><div class="content"></div></div></div>
</div>
</div>
<div id="log"></div>
<div id="log"><div id="logDrag">....</div><ul></ul></div>
<div id="settingsDialog" title="Settings">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport"><div class="overview"><div class="content">
Expand Down
93 changes: 69 additions & 24 deletions build/phone/js/script.js
View file
Expand Up @@ -3,14 +3,13 @@ jQuery(document).ready(function($) {
host: null, // 'localhost',
sipaccount: 'user',
sipsecret: 'pw',
//forceOutgoing: null,
//forceOutgoing: false,
mode: li.Phone.MODE_IO
};

//-------------------------------------------------------------------------
// Application
var app = {
maxCallLogs: 30,
text: {
newContact: 'New contact'
},
Expand All @@ -19,7 +18,9 @@ jQuery(document).ready(function($) {
db: window.localStorage,
contacts: [],
calls: [],
settings: {},
settings: {
maxCallLogs: 30
},

loadSettings: function(defaults) {
//this.db.settings = "";
Expand All @@ -28,14 +29,33 @@ jQuery(document).ready(function($) {
if (this.db.settings) {
$.extend(this.settings, JSON.parse(this.db.settings));
}
var keys = ['host', 'sipaccount', 'sipsecret'];
$.each(keys, function(i, val) {
$('#settingsDialog input[name=settings-' + val + ']').val(self.settings[val])
.change(function() {
$.each(['host', 'sipaccount', 'sipsecret'], function(i, val) {
$('input[name=settings-' + val + ']').change(function() {
self.settings[val] = $(this).val();
self.persistSettings();
});
}).val(self.settings[val]);
});
$('input[name=settings-maxcalllogs]').change(function() {
self.settings['maxCallLogs'] = parseInt($(this).val());
self.persistSettings();
}).val(self.settings['maxCallLogs']);
$('input[name=settings-forcenumber]').change(function() {
var val = $.trim($(this).val());
self.settings['forceOutgoing'] = (val === '') ? false : val;
self.phone.setOptions({ forceOutgoingNumber: self.settings['forceOutgoing'] });
self.persistSettings();
}).val(self.settings['forceOutgoing'] ? self.settings['forceOutgoing']: '');
$('input[name=settings-log]').change(function() {
if ($(this).is(':checked')) {
$('#log').show();
$('#container').css('bottom', $('#log').height());
} else {
$('#log').hide();
$('#container').css('bottom', 0);
}
$('#contacts').tinyscrollbar_update('relative');
$('#calls').tinyscrollbar_update('relative');
});
},
start: function() {
if (this.db.contacts) {
Expand All @@ -54,15 +74,21 @@ jQuery(document).ready(function($) {
this.connected();
}
},
status: function(msg) {
$('#status').text(msg).animate({ 'opacity': 0.25 }, 3000);
},
connected: function() {
//alert('connected');
this.status('connected');
},
disconnected: function() {
alert('disconnected');
},
exit: function() {
this.status('disconnected');
},
registerPhone: function() {
if (!this.settings.host || $.trim(this.settings.host) === '') {
this.status('not connected');
} else {
this.status('connecting...');
}
this.phone.unregister();
this.phone.register({
host: this.settings.host,
Expand All @@ -77,20 +103,20 @@ jQuery(document).ready(function($) {
var $name = $('<input class="name" value="' + contact.name + '" title="Edit name" />').appendTo($contact)
.trigger('blur')
.change(function() {
var val = $.trim($(this).val()), inserted = false;
var val = $.trim($(this).val()), inserted = false, i;
if (val === '') {
$(this).val(contact.name);
} else {
contact.name = val;
}
$contact.appendTo('#contacts .content');
for (var i = 0; i < self.contacts.length; i++) {
for (i = 0; i < self.contacts.length; i++) {
if (self.contacts[i] === contact) {
self.contacts.splice(i, 1);
}
}
// Sorted by name
for (var i = 0; i < self.contacts.length; i++) {
for (i = 0; i < self.contacts.length; i++) {
if (self.contacts[i].name.toLowerCase() > contact.name.toLowerCase()) {
$('#contacts .content > div').eq(i).before($contact);
self.contacts.splice(i, 0, contact);
Expand Down Expand Up @@ -222,6 +248,9 @@ jQuery(document).ready(function($) {
$('#nav' + tab).addClass('active').siblings('#navphone, #navcontacts').removeClass('active');
}
}
if (tab === 'contacts' || tab === 'calls') {
$('#' + tab).tinyscrollbar_update('relative');
}
},
persistSettings: function() {
this.db.settings = JSON.stringify(this.settings);
Expand Down Expand Up @@ -268,7 +297,7 @@ jQuery(document).ready(function($) {
if (data.state < li.Phone.SIP_SC_BAD_REQUEST) {
app.connected();
} else {
app.exit();
app.disconnected();
this.unregister();
li.errorHandler.add(li.errorType.PHONE_ERROR, { output: data.state });
}
Expand All @@ -282,14 +311,14 @@ jQuery(document).ready(function($) {
});
// Listeners to print log and error messages
app.phone.addListener('onLogMessage', function(obj) {
$('#log').append('<div>' + obj.time + ': (' + obj.status + ') <' + obj.domain + '> ['
+ obj.code + '] ' + obj.message + '</div>');
$('#log ul').append('<li>' + obj.time + ': (' + obj.status + ') <' + obj.domain + '> ['
+ obj.code + '] ' + obj.message + '</li>');
});
li.errorHandler.addListener('onError', function(data) {
$('#log').append('<div>' + data.errorMessage + ': ' + data.errorData + '</div>');
$('#log ul').append('<li>' + data.errorMessage + ': ' + data.errorData + '</li>');
});
li.errorHandler.addListener('onLog', function(data) {
$('#log').append('<div>' + data.message + '</div>');
$('#log ul').append('<li>' + data.message + '</li>');
});

// Check, if there are some errors from the last execution of GreenJ
Expand All @@ -304,7 +333,6 @@ jQuery(document).ready(function($) {

//-------------------------------------------------------------------------
// Elements
$('#log').hide();
$('#numblock button').click(function() {
var button = $(this).text(),
val = $('#number').val();
Expand All @@ -329,8 +357,8 @@ jQuery(document).ready(function($) {
$('#number').val('').trigger('change').focus();
});
$('#addNumber').click(function() {
app.addContact({ name: app.text.newContact, number: $.trim($('#number').val()) });
app.selectTab('contacts');
app.addContact({ name: app.text.newContact, number: $.trim($('#number').val()) });
$('#contacts .name').first().focus();
$('#contacts').tinyscrollbar_update();
});
Expand Down Expand Up @@ -434,6 +462,23 @@ jQuery(document).ready(function($) {
$ruler.remove();
});

$('#log').hide();
var startheight = 0;
$('#logDrag').draggable({
containment: 'body',
helper: 'clone',
appendTo: 'body',
axis: 'y',
cursor: 'n-resize',
start: function(event, ui) {
startheight = $('#log').height() + ui.position.top;
},
drag: function(event, ui) {
$('#log').height(startheight - ui.position.top);
$('#container').css('bottom', startheight - ui.position.top);
}
});

app.start();

var cols = 0;
Expand Down Expand Up @@ -466,9 +511,9 @@ jQuery(document).ready(function($) {
$(this).css('top', ((windowh - $(this).outerHeight()) / 2) + $(window).scrollTop() + 'px');
$(this).css('left', ((windoww - $(this).outerWidth()) / 2) + $(window).scrollLeft() + 'px');
});
$('#settingsDialog').dialog('option', 'height', (windowh > 625) ? 500 : (windowh * (windowh < 360 ? 1.0 : 0.8)))
$('#settingsDialog').dialog('option', 'height', (windowh > 625) ? 500 : (windowh * (windowh < 450 ? 1.0 : 0.8)))
.dialog('option', 'width', (windoww > 560) ? 450 : (windoww * (windoww < 360 ? 1.0 : 0.8)));

$('#contacts').tinyscrollbar_update('relative');
$('#calls').tinyscrollbar_update('relative');
$('#settingsDialog').tinyscrollbar_update('relative');
Expand Down

0 comments on commit 5f9f200

Please sign in to comment.