Operator Panel: Stylized status buttons, moved CSS to templates.
This commit is contained in:
Nate Jones
parent
515ae0f0ae
commit
ed511a229f
|
|
@ -263,41 +263,39 @@ require_once "resources/header.php";
|
|||
document.getElementById('cmd_reponse').innerHTML=xmlhttp.responseText;
|
||||
}
|
||||
|
||||
<?php
|
||||
//hide/show destination input field
|
||||
echo "function toggle_destination(ext) {\n";
|
||||
echo " refresh_stop();\n";
|
||||
echo " $('#destination_'+ext).fadeToggle(200, function(){\n";
|
||||
echo " if ($('#destination_'+ext).is(':visible')) {\n";
|
||||
echo " $('#destination_'+ext).focus();\n";
|
||||
echo " }\n";
|
||||
echo " else {\n";
|
||||
echo " $('#destination_'+ext).val('');\n";
|
||||
echo " refresh_start();\n";
|
||||
echo " }\n";
|
||||
echo " });\n";
|
||||
echo "}\n";
|
||||
function toggle_destination(ext) {
|
||||
refresh_stop();
|
||||
$('#destination_'+ext).fadeToggle(200, function(){
|
||||
if ($('#destination_'+ext).is(':visible')) {
|
||||
$('#destination_'+ext).focus();
|
||||
}
|
||||
else {
|
||||
$('#destination_'+ext).val('');
|
||||
refresh_start();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
echo "function get_transfer_cmd(uuid, destination) {\n";
|
||||
echo " cmd = \"uuid_transfer \"+uuid+\" \"+destination+\" XML ".trim($_SESSION['user_context'])."\";\n";
|
||||
echo " return cmd;\n";
|
||||
echo "}\n";
|
||||
function get_transfer_cmd(uuid, destination) {
|
||||
cmd = "uuid_transfer " + uuid + " " + destination + " XML <?=trim($_SESSION['user_context'])?>";
|
||||
return cmd;
|
||||
}
|
||||
|
||||
echo "function get_originate_cmd(source, destination) {\n";
|
||||
echo " cmd = \"bgapi originate {sip_auto_answer=true,origination_caller_id_number=\"+destination+\",sip_h_Call-Info=_undef_}user/\"+source+\" \"+destination+\" XML ".trim($_SESSION['user_context'])."\";\n";
|
||||
echo " return cmd;\n";
|
||||
echo "}\n";
|
||||
function get_originate_cmd(source, destination) {
|
||||
cmd = "bgapi originate {sip_auto_answer=true,origination_caller_id_number=" + destination + ",sip_h_Call-Info=_undef_}user/" + source + " " + destination + " XML <?=trim($_SESSION['user_context'])?>";
|
||||
return cmd;
|
||||
}
|
||||
|
||||
echo "function get_eavesdrop_cmd(ext, chan_uuid) {\n";
|
||||
echo " cmd = \"bgapi originate {origination_caller_id_name=".$text['label-eavesdrop'].",origination_caller_id_number=\"+ext+\"}user/".$_SESSION['user']['extensions'][0]."@".$_SESSION['domain_name']." &eavesdrop(\"+chan_uuid+\")\";";
|
||||
echo " return cmd;\n";
|
||||
echo "}\n";
|
||||
function get_eavesdrop_cmd(ext, chan_uuid) {
|
||||
cmd = "bgapi originate {origination_caller_id_name=<?=$text['label-eavesdrop']?>,origination_caller_id_number=" + ext + "}user/<?=$_SESSION['user']['extensions'][0]?>@<?=$_SESSION['domain_name']?> &eavesdrop(" + chan_uuid + ")";
|
||||
return cmd;
|
||||
}
|
||||
|
||||
echo "function get_record_cmd(uuid) {\n";
|
||||
echo " cmd = \"uuid_record \"+uuid+\" start ".$_SESSION['switch']['recordings']['dir']."/archive/".date("Y")."/".date("M")."/".date("d")."/\"+uuid+\".wav\";\n";
|
||||
echo " return cmd;\n";
|
||||
echo "}\n";
|
||||
?>
|
||||
function get_record_cmd(uuid) {
|
||||
cmd = "uuid_record " + uuid + " start <?=$_SESSION['switch']['recordings']['dir']?>/archive/<?=date('Y')?>/<?=date('M')?>/<?=date('d')?>/" + uuid + ".wav";
|
||||
return cmd;
|
||||
}
|
||||
|
||||
//virtual functions
|
||||
function virtual_drag(call_id, ext) {
|
||||
|
|
@ -357,138 +355,25 @@ require_once "resources/header.php";
|
|||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
DIV.ext {
|
||||
float: left;
|
||||
width: 235px;
|
||||
margin: 0px 8px 8px 0px;
|
||||
padding: 0px;
|
||||
border-style: solid;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 0 3px #e5e9f0;
|
||||
-moz-box-shadow: 0 0 3px #e5e9f0;
|
||||
box-shadow: 0 0 3px #e5e9f0;
|
||||
border-width: 1px 3px;
|
||||
border-color: #b9c5d8 #c5d1e5;
|
||||
background-color: #e5eaf5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
DIV.state_active {
|
||||
background-color: #baf4bb;
|
||||
border-width: 1px 3px;
|
||||
border-color: #77d779;
|
||||
}
|
||||
|
||||
DIV.state_ringing {
|
||||
background-color: #a8dbf0;
|
||||
border-width: 1px 3px;
|
||||
border-color: #41b9eb;
|
||||
}
|
||||
|
||||
TABLE {
|
||||
border-spacing: 0px;
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
}
|
||||
|
||||
TABLE.ext {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #e5eaf5;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
TD.ext_icon {
|
||||
vertical-align: middle;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
IMG.ext_icon {
|
||||
cursor: move;
|
||||
width: 39px;
|
||||
height: 42px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
TD.ext_info {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
padding: 3px 5px 3px 7px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #f0f2f6;
|
||||
}
|
||||
|
||||
TD.state_ringing {
|
||||
background-color: #d1f1ff;
|
||||
}
|
||||
|
||||
TD.state_active {
|
||||
background-color: #e1ffe2;
|
||||
}
|
||||
|
||||
TABLE.state_ringing {
|
||||
background-color: #a8dbf0;
|
||||
}
|
||||
|
||||
TABLE.state_active {
|
||||
background-color: #baf4bb;
|
||||
}
|
||||
|
||||
.user_info {
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.user_info strong {
|
||||
color: #3164AD;
|
||||
}
|
||||
|
||||
.caller_info {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.call_info {
|
||||
display: inline-block;
|
||||
padding: 0px;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<?php
|
||||
|
||||
//create simple array of users own extensions
|
||||
unset($_SESSION['user']['extensions']);
|
||||
foreach ($_SESSION['user']['extension'] as $assigned_extensions) {
|
||||
$_SESSION['user']['extensions'][] = $assigned_extensions['user'];
|
||||
}
|
||||
?>
|
||||
|
||||
echo "<div id='ajax_reponse'>";
|
||||
// include("index_inc.php");
|
||||
echo "</div>\n";
|
||||
echo "<div id='cmd_reponse' style='display: none;'></div>";
|
||||
echo "<br><br>";
|
||||
|
||||
<div id='ajax_reponse'></div>
|
||||
<div id='cmd_reponse' style='display: none;'></div>
|
||||
<br><br>
|
||||
|
||||
<?php
|
||||
require_once "resources/footer.php";
|
||||
?>
|
||||
|
|
@ -59,7 +59,7 @@ foreach ($activity as $extension => $fields) {
|
|||
$groups = array_unique($groups);
|
||||
sort($groups);
|
||||
|
||||
echo "<table cellpadding='0' cellspacing='0' border='0' width='100%'>";
|
||||
echo "<table width='100%'>";
|
||||
echo " <tr>";
|
||||
echo " <td valign='top' align='left' width='50%' nowrap>";
|
||||
echo " <b>".$text['title-operator_panel']."</b>";
|
||||
|
|
@ -67,15 +67,24 @@ echo " </td>";
|
|||
echo " <td valign='top' align='center' nowrap>";
|
||||
|
||||
if (sizeof($_SESSION['user']['extensions']) > 0) {
|
||||
$status_options = Array(
|
||||
"Available" => $text['label-status_available'],
|
||||
"Available (On Demand)" => $text['label-status_on_demand'],
|
||||
"On Break" => $text['label-status_on_break'],
|
||||
"Do Not Disturb" => $text['label-status_do_not_disturb'],
|
||||
"Logged Out" => $text['label-status_logged_out']
|
||||
);
|
||||
foreach ($status_options as $status_value => $status_label) {
|
||||
echo " <input type='button' class='btn' value=\"".$status_label."\" onclick=\"send_cmd('index.php?status='+escape('".$status_value."'));\">";
|
||||
$status_options[1]['status'] = "Available";
|
||||
$status_options[1]['label'] = $text['label-status_available'];
|
||||
$status_options[1]['style'] = "op_btn_status_available";
|
||||
$status_options[2]['status'] = "Available (On Demand)";
|
||||
$status_options[2]['label'] = $text['label-status_on_demand'];
|
||||
$status_options[2]['style'] = "op_btn_status_available_on_demand";
|
||||
$status_options[3]['status'] = "On Break";
|
||||
$status_options[3]['label'] = $text['label-status_on_break'];
|
||||
$status_options[3]['style'] = "op_btn_status_on_break";
|
||||
$status_options[4]['status'] = "Do Not Disturb";
|
||||
$status_options[4]['label'] = $text['label-status_do_not_disturb'];
|
||||
$status_options[4]['style'] = "op_btn_status_do_not_disturb";
|
||||
$status_options[5]['status'] = "Logged Out";
|
||||
$status_options[5]['label'] = $text['label-status_logged_out'];
|
||||
$status_options[5]['style'] = "op_btn_status_logged_out";
|
||||
|
||||
foreach ($status_options as $status_option) {
|
||||
echo " <input type='button' id='".$status_option['style']."' class='btn' value=\"".$status_option['label']."\" onclick=\"send_cmd('index.php?status='+escape('".$status_option['status']."'));\">\n";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +166,7 @@ foreach ($activity as $extension => $ext) {
|
|||
}
|
||||
|
||||
//determine block style by state (if any)
|
||||
$style = ($ext_state != '') ? "state_".$ext_state : null;
|
||||
$style = ($ext_state != '') ? "op_state_".$ext_state : null;
|
||||
|
||||
//determine the call identifier passed on drop
|
||||
if ($ext['uuid'] == $ext['call_uuid'] && $ext['variable_bridge_uuid'] == '') { // transfer an outbound internal call
|
||||
|
|
@ -237,19 +246,19 @@ foreach ($activity as $extension => $ext) {
|
|||
$status_hover = $text['label-status_logged_out_or_unknown'];
|
||||
}
|
||||
|
||||
$block .= "<div id='".$extension."' class='ext ".$style."' ".(($_GET['vd_ext_from'] == $extension || $_GET['vd_ext_to'] == $extension) ? "style='border-style: dotted;'" : null)." ".(($ext_state != 'active' && $ext_state != 'ringing') ? "ondrop='drop(event, this.id);' ondragover='allowDrop(event, this.id);' ondragleave='discardDrop(event, this.id);'" : null).">"; // DRAG TO
|
||||
$block .= "<table class='ext ".$style."'>";
|
||||
$block .= "<div id='".$extension."' class='op_ext ".$style."' ".(($_GET['vd_ext_from'] == $extension || $_GET['vd_ext_to'] == $extension) ? "style='border-style: dotted;'" : null)." ".(($ext_state != 'active' && $ext_state != 'ringing') ? "ondrop='drop(event, this.id);' ondragover='allowDrop(event, this.id);' ondragleave='discardDrop(event, this.id);'" : null).">"; // DRAG TO
|
||||
$block .= "<table class='op_ext ".$style."'>";
|
||||
$block .= " <tr>";
|
||||
$block .= " <td class='ext_icon'>";
|
||||
$block .= " <td class='op_ext_icon'>";
|
||||
$block .= " <span name='".$extension."'>"; // DRAG FROM
|
||||
$block .= "<img id='".$call_identifier."' class='ext_icon' src='resources/images/status_".$status_icon.".png' title='".$status_hover."' ".(($draggable) ? "draggable='true' ondragstart=\"drag(event, this.parentNode.getAttribute('name'));\" onclick=\"virtual_drag('".$call_identifier."', '".$extension."');\"" : "onfocus='this.blur();' draggable='false' style='cursor: not-allowed;'").">";
|
||||
$block .= "<img id='".$call_identifier."' class='op_ext_icon' src='resources/images/status_".$status_icon.".png' title='".$status_hover."' ".(($draggable) ? "draggable='true' ondragstart=\"drag(event, this.parentNode.getAttribute('name'));\" onclick=\"virtual_drag('".$call_identifier."', '".$extension."');\"" : "onfocus='this.blur();' draggable='false' style='cursor: not-allowed;'").">";
|
||||
$block .= "</span>";
|
||||
$block .= " </td>";
|
||||
$block .= " <td class='ext_info ".$style."'>";
|
||||
$block .= " <td class='op_ext_info ".$style."'>";
|
||||
if ($dir_icon != '') {
|
||||
$block .= " <img src='resources/images/".$dir_icon.".png' align='right' style='margin-top: 3px; margin-right: 1px; width: 12px; height: 12px;' draggable='false'>";
|
||||
}
|
||||
$block .= " <span class='user_info'>";
|
||||
$block .= " <span class='op_user_info'>";
|
||||
if ($ext['effective_caller_id_name'] != '' && $ext['effective_caller_id_name'] != $extension) {
|
||||
$block .= " <strong class='strong'>".$ext['effective_caller_id_name']."</strong> (".$extension.")";
|
||||
}
|
||||
|
|
@ -258,9 +267,9 @@ foreach ($activity as $extension => $ext) {
|
|||
}
|
||||
$block .= " </span><br>";
|
||||
if ($ext_state != '') {
|
||||
$block .= " <span class='caller_info'>";
|
||||
$block .= " <span class='op_caller_info'>";
|
||||
$block .= " <table align='right'><tr><td style='text-align: right;'>";
|
||||
$block .= " <span class='call_info'>".$ext['call_length']."</span><br>";
|
||||
$block .= " <span class='op_call_info'>".$ext['call_length']."</span><br>";
|
||||
//record
|
||||
if (permission_exists('operator_panel_record') && $ext_state == 'active') {
|
||||
$call_identifier_record = $ext['call_uuid'];
|
||||
|
|
|
|||
|
|
@ -249,6 +249,7 @@ input.btn, input.button {
|
|||
background-color: #000;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
|
||||
opacity: 0.9;
|
||||
-moz-opacity: 0.9;
|
||||
}
|
||||
|
|
@ -954,6 +955,155 @@ legend {
|
|||
padding: 20px;
|
||||
}
|
||||
|
||||
/* operator panel styles begin */
|
||||
|
||||
DIV.op_ext {
|
||||
float: left;
|
||||
width: 235px;
|
||||
margin: 0px 8px 8px 0px;
|
||||
padding: 0px;
|
||||
border-style: solid;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 0 3px #e5e9f0;
|
||||
-moz-box-shadow: 0 0 3px #e5e9f0;
|
||||
box-shadow: 0 0 3px #e5e9f0;
|
||||
border-width: 1px 3px;
|
||||
border-color: #b9c5d8 #c5d1e5;
|
||||
background-color: #e5eaf5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
DIV.op_state_active {
|
||||
background-color: #baf4bb;
|
||||
border-width: 1px 3px;
|
||||
border-color: #77d779;
|
||||
}
|
||||
|
||||
DIV.op_state_ringing {
|
||||
background-color: #a8dbf0;
|
||||
border-width: 1px 3px;
|
||||
border-color: #41b9eb;
|
||||
}
|
||||
|
||||
TABLE.op_ext {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #e5eaf5;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
TD.op_ext_icon {
|
||||
vertical-align: middle;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
IMG.op_ext_icon {
|
||||
cursor: move;
|
||||
width: 39px;
|
||||
height: 42px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
TD.op_ext_info {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
padding: 3px 5px 3px 7px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #f0f2f6;
|
||||
}
|
||||
|
||||
TD.op_state_ringing {
|
||||
background-color: #d1f1ff;
|
||||
}
|
||||
|
||||
TD.op_state_active {
|
||||
background-color: #e1ffe2;
|
||||
}
|
||||
|
||||
TABLE.op_state_ringing {
|
||||
background-color: #a8dbf0;
|
||||
}
|
||||
|
||||
TABLE.op_state_active {
|
||||
background-color: #baf4bb;
|
||||
}
|
||||
|
||||
.op_user_info {
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.op_user_info strong {
|
||||
color: #3164AD;
|
||||
}
|
||||
|
||||
.op_caller_info {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.op_call_info {
|
||||
display: inline-block;
|
||||
padding: 0px;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#op_btn_status_available {
|
||||
background-image: -moz-linear-gradient(top, #8ec989 25%, #2d9c38 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #8ec989), color-stop(0.64, #2d9c38));
|
||||
background-color: #2d9c38;
|
||||
border: 1px solid #006200;
|
||||
}
|
||||
|
||||
#op_btn_status_available_on_demand {
|
||||
background-image: -moz-linear-gradient(top, #abd0aa 25%, #629d62 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #abd0aa), color-stop(0.64, #629d62));
|
||||
background-color: #629d62;
|
||||
border: 1px solid #619c61;
|
||||
}
|
||||
|
||||
#op_btn_status_on_break {
|
||||
background-image: -moz-linear-gradient(top, #ddc38b 25%, #be8e2c 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #ddc38b), color-stop(0.64, #be8e2c));
|
||||
background-color: #be8e2c;
|
||||
border: 1px solid #7d1b00;
|
||||
}
|
||||
|
||||
#op_btn_status_do_not_disturb {
|
||||
background-image: -moz-linear-gradient(top, #cc8984 25%, #960d10 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cc8984), color-stop(0.64, #960d10));
|
||||
background-color: #960d10;
|
||||
border: 1px solid #5b0000;
|
||||
}
|
||||
|
||||
#op_btn_status_logged_out {
|
||||
background-image: -moz-linear-gradient(top, #cacac9 25%, #8d8d8b 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cacac9), color-stop(0.64, #8d8d8b));
|
||||
background-color: #8d8d8b;
|
||||
border: 1px solid #5d5f5a;
|
||||
}
|
||||
|
||||
/* operator panel styles end */
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
|
|
@ -249,6 +249,7 @@ input.btn, input.button {
|
|||
background-color: #000;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.85);
|
||||
opacity: 0.9;
|
||||
-moz-opacity: 0.9;
|
||||
}
|
||||
|
|
@ -949,6 +950,155 @@ legend {
|
|||
padding: 20px;
|
||||
}
|
||||
|
||||
/* operator panel styles begin */
|
||||
|
||||
DIV.op_ext {
|
||||
float: left;
|
||||
width: 235px;
|
||||
margin: 0px 8px 8px 0px;
|
||||
padding: 0px;
|
||||
border-style: solid;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 0 3px #e5e9f0;
|
||||
-moz-box-shadow: 0 0 3px #e5e9f0;
|
||||
box-shadow: 0 0 3px #e5e9f0;
|
||||
border-width: 1px 3px;
|
||||
border-color: #b9c5d8 #c5d1e5;
|
||||
background-color: #e5eaf5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
DIV.op_state_active {
|
||||
background-color: #baf4bb;
|
||||
border-width: 1px 3px;
|
||||
border-color: #77d779;
|
||||
}
|
||||
|
||||
DIV.op_state_ringing {
|
||||
background-color: #a8dbf0;
|
||||
border-width: 1px 3px;
|
||||
border-color: #41b9eb;
|
||||
}
|
||||
|
||||
TABLE.op_ext {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #e5eaf5;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
TD.op_ext_icon {
|
||||
vertical-align: middle;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
IMG.op_ext_icon {
|
||||
cursor: move;
|
||||
width: 39px;
|
||||
height: 42px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
TD.op_ext_info {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
padding: 3px 5px 3px 7px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: #f0f2f6;
|
||||
}
|
||||
|
||||
TD.op_state_ringing {
|
||||
background-color: #d1f1ff;
|
||||
}
|
||||
|
||||
TD.op_state_active {
|
||||
background-color: #e1ffe2;
|
||||
}
|
||||
|
||||
TABLE.op_state_ringing {
|
||||
background-color: #a8dbf0;
|
||||
}
|
||||
|
||||
TABLE.op_state_active {
|
||||
background-color: #baf4bb;
|
||||
}
|
||||
|
||||
.op_user_info {
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.op_user_info strong {
|
||||
color: #3164AD;
|
||||
}
|
||||
|
||||
.op_caller_info {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.op_call_info {
|
||||
display: inline-block;
|
||||
padding: 0px;
|
||||
font-family: arial;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#op_btn_status_available {
|
||||
background-image: -moz-linear-gradient(top, #8ec989 25%, #2d9c38 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #8ec989), color-stop(0.64, #2d9c38));
|
||||
background-color: #2d9c38;
|
||||
border: 1px solid #006200;
|
||||
}
|
||||
|
||||
#op_btn_status_available_on_demand {
|
||||
background-image: -moz-linear-gradient(top, #abd0aa 25%, #629d62 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #abd0aa), color-stop(0.64, #629d62));
|
||||
background-color: #629d62;
|
||||
border: 1px solid #619c61;
|
||||
}
|
||||
|
||||
#op_btn_status_on_break {
|
||||
background-image: -moz-linear-gradient(top, #ddc38b 25%, #be8e2c 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #ddc38b), color-stop(0.64, #be8e2c));
|
||||
background-color: #be8e2c;
|
||||
border: 1px solid #7d1b00;
|
||||
}
|
||||
|
||||
#op_btn_status_do_not_disturb {
|
||||
background-image: -moz-linear-gradient(top, #cc8984 25%, #960d10 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cc8984), color-stop(0.64, #960d10));
|
||||
background-color: #960d10;
|
||||
border: 1px solid #5b0000;
|
||||
}
|
||||
|
||||
#op_btn_status_logged_out {
|
||||
background-image: -moz-linear-gradient(top, #cacac9 25%, #8d8d8b 64%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #cacac9), color-stop(0.64, #8d8d8b));
|
||||
background-color: #8d8d8b;
|
||||
border: 1px solid #5d5f5a;
|
||||
}
|
||||
|
||||
/* operator panel styles end */
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
Loading…
Reference in New Issue