CC-5765 : Fixing up history page to match UI/UX
removing bootstrap datetimepicker, with better jQuery datetimepicker that matches UI.
This commit is contained in:
Naomi
parent
059c0d8507
commit
5a17294811
|
|
@ -91,14 +91,11 @@ class PlayouthistoryController extends Zend_Controller_Action
|
|||
$this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/TableTools-2.1.5/js/TableTools.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
|
||||
|
||||
$this->view->headScript()->appendFile($baseUrl.'js/timepicker/jquery.ui.timepicker.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
|
||||
$this->view->headScript()->appendFile($baseUrl.'js/bootstrap-datetime/bootstrap-datetimepicker.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
|
||||
$this->view->headScript()->appendFile($baseUrl.'js/airtime/buttons/buttons.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
|
||||
$this->view->headScript()->appendFile($baseUrl.'js/airtime/utilities/utilities.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
|
||||
$this->view->headScript()->appendFile($baseUrl.'js/airtime/playouthistory/historytable.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
|
||||
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/bootstrap-datetimepicker.min.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'js/datatables/plugin/TableTools-2.1.5/css/TableTools.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/jquery.ui.timepicker.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/playouthistory.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/history_styles.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/jquery.contextMenu.css?'.$CC_CONFIG['airtime_version']);
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@
|
|||
class Application_Form_EditHistory extends Zend_Form
|
||||
{
|
||||
const VALIDATE_DATETIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
|
||||
//this is used by the javascript widget, unfortunately h/H is opposite from Zend.
|
||||
const TIMEPICKER_DATETIME_FORMAT = 'yyyy-MM-dd hh:mm:ss';
|
||||
|
||||
const VALIDATE_DATE_FORMAT = 'yyyy-MM-dd';
|
||||
const VALIDATE_TIME_FORMAT = 'HH:mm:ss';
|
||||
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ class Application_Form_EditHistoryItem extends Application_Form_EditHistory
|
|||
$starts->setValidators(array(
|
||||
new Zend_Validate_Date(self::VALIDATE_DATETIME_FORMAT)
|
||||
));
|
||||
$starts->setAttrib('class', self::TEXT_INPUT_CLASS." datepicker");
|
||||
$starts->setAttrib('data-format', self::TIMEPICKER_DATETIME_FORMAT);
|
||||
$starts->setAttrib('class', self::TEXT_INPUT_CLASS);
|
||||
//$starts->setAttrib('data-format', self::TIMEPICKER_DATETIME_FORMAT);
|
||||
$starts->addFilter('StringTrim');
|
||||
$starts->setLabel(_('Start Time'));
|
||||
$starts->setDecorators(array('ViewHelper'));
|
||||
|
|
@ -38,8 +38,8 @@ class Application_Form_EditHistoryItem extends Application_Form_EditHistory
|
|||
$ends->setValidators(array(
|
||||
new Zend_Validate_Date(self::VALIDATE_DATETIME_FORMAT)
|
||||
));
|
||||
$ends->setAttrib('class', self::TEXT_INPUT_CLASS." datepicker");
|
||||
$ends->setAttrib('data-format', self::TIMEPICKER_DATETIME_FORMAT);
|
||||
$ends->setAttrib('class', self::TEXT_INPUT_CLASS);
|
||||
//$ends->setAttrib('data-format', self::TIMEPICKER_DATETIME_FORMAT);
|
||||
$ends->addFilter('StringTrim');
|
||||
$ends->setLabel(_('End Time'));
|
||||
$ends->setDecorators(array('ViewHelper'));
|
||||
|
|
|
|||
|
|
@ -22,14 +22,7 @@
|
|||
<label for="<?php echo $name;?>"><?php echo $form->getElement($name)->getLabel() ?></label>
|
||||
</dt>
|
||||
<dd id="<?php echo $name;?>-element">
|
||||
<div class="well">
|
||||
<div id="<?php echo $name;?>_datetimepicker" class="input-append date">
|
||||
<?php echo $form->getElement($name) ?>
|
||||
<span class="add-on">
|
||||
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<?php echo $form->getElement($name) ?>
|
||||
<?php if ($form->getElement($name)->hasErrors()) : ?>
|
||||
<ul class='errors'>
|
||||
<?php foreach ($form->getElement($name)->getMessages() as $error): ?>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,72 +0,0 @@
|
|||
/*
|
||||
* Timepicker stylesheet
|
||||
* Highly inspired from datepicker
|
||||
* FG - Nov 2010 - Web3R
|
||||
*
|
||||
* version 0.0.3 : Fixed some settings, more dynamic
|
||||
* version 0.0.4 : Removed width:100% on tables
|
||||
* version 0.1.1 : set width 0 on tables to fix an ie6 bug
|
||||
*/
|
||||
|
||||
.ui-timepicker-inline { display: inline; }
|
||||
|
||||
#ui-timepicker-div {
|
||||
padding: 0.2em;
|
||||
z-index: 1000;
|
||||
}
|
||||
.ui-timepicker-table { display: inline-table; width: 0; }
|
||||
.ui-timepicker-table table { margin:0.15em 0 0 0; border-collapse: collapse; }
|
||||
|
||||
.ui-timepicker-hours, .ui-timepicker-minutes { padding: 0.2em; }
|
||||
|
||||
.ui-timepicker-table .ui-timepicker-title { line-height: 1.8em; text-align: center; }
|
||||
.ui-timepicker-table td { padding: 0.1em; width: 2.2em; }
|
||||
.ui-timepicker-table th.periods { padding: 0.1em; width: 2.2em; }
|
||||
|
||||
/* span for disabled cells */
|
||||
.ui-timepicker-table td span {
|
||||
display:block;
|
||||
padding:0.2em 0.3em 0.2em 0.5em;
|
||||
width: 1.2em;
|
||||
|
||||
text-align:right;
|
||||
text-decoration:none;
|
||||
}
|
||||
/* anchors for clickable cells */
|
||||
.ui-timepicker-table td a {
|
||||
display:block;
|
||||
padding:0.2em 0.3em 0.2em 0.5em;
|
||||
width: 1.2em;
|
||||
cursor: pointer;
|
||||
text-align:right;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
|
||||
/* buttons and button pane styling */
|
||||
.ui-timepicker .ui-timepicker-buttonpane {
|
||||
background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0;
|
||||
}
|
||||
.ui-timepicker .ui-timepicker-buttonpane button { margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
|
||||
/* The close button */
|
||||
.ui-timepicker .ui-timepicker-close { float: right }
|
||||
|
||||
/* the now button */
|
||||
.ui-timepicker .ui-timepicker-now { float: left; }
|
||||
|
||||
/* the deselect button */
|
||||
.ui-timepicker .ui-timepicker-deselect { float: left; }
|
||||
|
||||
|
||||
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
|
||||
.ui-timepicker-cover {
|
||||
display: none; /*sorry for IE5*/
|
||||
display/**/: block; /*sorry for IE5*/
|
||||
position: absolute; /*must have*/
|
||||
z-index: -1; /*must have*/
|
||||
filter: mask(); /*must have*/
|
||||
top: -4px; /*must have*/
|
||||
left: -4px; /*must have*/
|
||||
width: 200px; /*must have*/
|
||||
height: 200px; /*must have*/
|
||||
}
|
||||
|
|
@ -8,8 +8,8 @@ var AIRTIME = (function(AIRTIME) {
|
|||
|
||||
var $historyContentDiv;
|
||||
|
||||
var historyStartsDatetimeId = "his_item_HISTORY_ITEM_STARTS_datetimepicker";
|
||||
var historyEndsDatetimeId = "his_item_HISTORY_ITEM_ENDS_datetimepicker";
|
||||
var historyStartsDatetimeId = "his_item_HISTORY_ITEM_STARTS";
|
||||
var historyEndsDatetimeId = "his_item_HISTORY_ITEM_ENDS";
|
||||
|
||||
var oTableTools = {
|
||||
"sSwfPath": baseUrl+"js/datatables/plugin/TableTools-2.1.5/swf/copy_csv_xls_pdf.swf",
|
||||
|
|
@ -285,7 +285,6 @@ var AIRTIME = (function(AIRTIME) {
|
|||
createShowTable($div);
|
||||
selectedLogItems = {};
|
||||
}
|
||||
//changestart: function( event, ui ) {}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -353,7 +352,6 @@ var AIRTIME = (function(AIRTIME) {
|
|||
"sDom": sDom,
|
||||
"oTableTools": oTableTools
|
||||
});
|
||||
oTable.fnSetFilteringDelay(350);
|
||||
|
||||
return oTable;
|
||||
}
|
||||
|
|
@ -420,7 +418,6 @@ var AIRTIME = (function(AIRTIME) {
|
|||
"sDom": sDom,
|
||||
"oTableTools": oTableTools
|
||||
});
|
||||
oTable.fnSetFilteringDelay(350);
|
||||
|
||||
$toolbar = $historyTableDiv.parents(".dataTables_wrapper").find(".fg-toolbar:first");
|
||||
createToolbarButtons($toolbar);
|
||||
|
|
@ -494,14 +491,6 @@ var AIRTIME = (function(AIRTIME) {
|
|||
}
|
||||
];
|
||||
|
||||
//set the locale names for the bootstrap calendar.
|
||||
$.fn.datetimepicker.dates = {
|
||||
daysMin: i18n_days_short,
|
||||
months: i18n_months,
|
||||
monthsShort: i18n_months_short
|
||||
};
|
||||
|
||||
|
||||
$historyContentDiv = $("#history_content");
|
||||
|
||||
function redrawTables() {
|
||||
|
|
@ -519,15 +508,21 @@ var AIRTIME = (function(AIRTIME) {
|
|||
var $startPicker = $hisDialogEl.find('#'+historyStartsDatetimeId),
|
||||
$endPicker = $hisDialogEl.find('#'+historyEndsDatetimeId);
|
||||
|
||||
$startPicker.datetimepicker();
|
||||
|
||||
$endPicker.datetimepicker({
|
||||
showTimeFirst: true
|
||||
$startPicker.datetimepicker({
|
||||
onSelect: function (selectedDateTime){
|
||||
$endPicker.datetimepicker('option', 'minDate', $startPicker.datetimepicker('getDate') );
|
||||
$endPicker.val(selectedDateTime);
|
||||
}
|
||||
});
|
||||
|
||||
$startPicker.on('changeDate', function(e) {
|
||||
$endPicker.data('datetimepicker').setLocalDate(e.localDate);
|
||||
});
|
||||
$endPicker.datetimepicker({
|
||||
onSelect: function (selectedDateTime){
|
||||
$startPicker.datetimepicker('option', 'maxDate', $endPicker.datetimepicker('getDate') );
|
||||
}
|
||||
});
|
||||
|
||||
//problem with date picker opening if it's already focused on opening.
|
||||
$startPicker.blur();
|
||||
}
|
||||
|
||||
function processDialogHtml($el) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue