CC-3845 : General UI cleanup

airtime_mvc/application/controllers/PlayouthistoryController.php

@@ -48,15 +48,14 @@ class PlayoutHistoryController extends Zend_Controller_Action
 		
 		$offset = date("Z") * -1;
 		$this->view->headScript()->appendScript("var serverTimezoneOffset = {$offset}; //in seconds");
-		$this->view->headScript()->appendFile($baseUrl.'/js/timepicker/jquery.ui.timepicker.js','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/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.'/js/datatables/plugin/TableTools/css/TableTools.css?'.$CC_CONFIG['airtime_version']);
+		$this->view->headLink()->appendStylesheet($baseUrl.'/js/datatables/plugin/TableTools/css/TableTools.css?'.$CC_CONFIG['airtime_version']);
-		//$this->view->headLink()->appendStylesheet($baseUrl.'/js/datatables/plugin/TableTools/css/TableTools_JUI.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/jquery.ui.timepicker.css');
 	}
 	
 	public function playoutHistoryFeedAction()

airtime_mvc/application/views/scripts/form/daterange.phtml

@@ -3,5 +3,7 @@
     <?php echo $this->element->getElement('his_time_start') ?>
     <?php echo $this->element->getElement('his_date_end') ?>
     <?php echo $this->element->getElement('his_time_end') ?>
-    <input type="button" id="his_submit" class="ui-button ui-state-default" value="GO"></input>
+    <div id="his_submit" class="ui-button ui-state-default">
+        <span class="ui-icon ui-icon-search"></span>
+    </div>
 </div>

airtime_mvc/application/views/scripts/form/showbuilder.phtml

@@ -3,7 +3,9 @@
     <?php echo $this->element->getElement('sb_time_start') ?>
     <?php echo $this->element->getElement('sb_date_end') ?>
     <?php echo $this->element->getElement('sb_time_end') ?>
-    <input type="button" id="sb_submit" class="ui-button ui-state-default" value="GO"></input>
+    <div id="sb_submit" class="ui-button ui-state-default">
+        <span class="ui-icon ui-icon-search"></span>
+    </div>
 </div>
 <div class="sb-advanced-options">
     <fieldset class="padded display_field push-down-8 closed">

airtime_mvc/public/css/media_library.css

@@ -31,7 +31,7 @@
 }
 
 #library_display th {
-        text-align: left;
+    text-align: left;
 }
 
 #library_content #library_display {
@@ -53,14 +53,6 @@
 	padding-top:16px;
 }
 
-.lib-content table th.ui-state-default {
-    background: -moz-linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b2b2b2), color-stop(100%, #a2a2a2));
-    background: linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
-    border: 1px solid #8F8F8F;
-    color: #363636;
-}
-
 .paginationControl {
 	font-size: 12px;
 	background-color: #9a9a9a;

airtime_mvc/public/css/playouthistory.css

@@ -0,0 +1,25 @@
+@CHARSET "UTF-8";
+
+.dataTables_filter input {
+	width: 30%;
+}
+
+#history_content input.input_text.hasDatepicker {
+    width: 95px;
+}
+
+#history_content input.input_text.hasTimepicker {
+    width: 60px;
+}
+
+div.his-timerange {
+    position: relative;
+    margin-bottom: 5px;
+}
+
+div.his-timerange div {
+    position: absolute;
+    bottom: 0px;
+    padding: 3px;
+    margin-left: 5px;
+}

airtime_mvc/public/css/showbuilder.css

@@ -95,6 +95,17 @@
     width:60px;
 }
 
+div.sb-timerange {
+    position: relative;
+}
+
+div.sb-timerange div {
+	position: absolute;
+	bottom: 0px;
+	padding: 3px;
+	margin-left: 5px;
+}
+
 .sb-starts,
 .sb-ends {
 	text-align: center;
@@ -174,6 +185,17 @@ table.datatable tr.cursor-selected-row td, table.datatable tr.cursor-selected-ro
 	padding: 8px 8px 8px 16px;
 }
 
+table.dataTable tr.sb-past, 
+table.dataTable tr.sb-header,
+table.dataTable tr.sb-footer,
+table.dataTable tr.sb-not-allowed {
+    cursor: default;
+}
+
+table.dataTable td.sb-image {
+	cursor: pointer;
+}
+
 table.datatable tr.sb-header.odd td, table.datatable tr.sb-header.even td,
 table.datatable tr.sb-header.odd:hover td, table.datatable tr.sb-header.even:hover td{
     background: -moz-linear-gradient(top, #a4a4a4 0, #bcbcbc 100%);
@@ -191,14 +213,6 @@ table.datatable tr.sb-header.odd:hover td, table.datatable tr.sb-header.even:hov
 	float: left;
 }
 
-.sb-content table th.ui-state-default {
-    background: -moz-linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b2b2b2), color-stop(100%, #a2a2a2));
-	background: linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
-    border: 1px solid #8F8F8F;
-    color: #363636;
-}
-
 .sb-content input.ui-button {
     padding: 3px 1em;
 }	

airtime_mvc/public/css/styles.css

@@ -654,14 +654,19 @@ dl.inline-list dd {
     padding: 2px 2px 2px 0;
     vertical-align: top;
 }
-#library_display thead th, #library_display tbody td {
+table.dataTable tbody tr, 
+table.dataTable span.DataTables_sort_icon {
     cursor: pointer;
 }
-#library_display thead th.library_checkbox,
+
-#library_display thead th.library_id,
+table.dataTable th.ui-state-default {
-#library_display thead th.library_title {
+    background: -moz-linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
-    cursor: default;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b2b2b2), color-stop(100%, #a2a2a2));
+    background: linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
+    border: 1px solid #8F8F8F;
+    color: #363636;
 }
+
 .ColVis.TableTools .ui-button {
     height: 21px;
 }
@@ -2607,12 +2612,12 @@ dd .stream-status {
 	overflow: hidden;
 	margin: 3px 0 0 10px;
 	}
-	.close-round:hover {
+.close-round:hover {
-		background-position:0 -18px;
+	background-position:0 -36px;
-		}
+}
-	.close-round:active {
+.close-round:active {
-		background-position:0 -36px;
+	background-position:0 -36px;
-		}
+}
 
 
 /*---////////////////////    NEW BUTTONS    ////////////////////---*/		

airtime_mvc/public/js/airtime/library/library.js

@@ -217,6 +217,25 @@ var AIRTIME = (function(AIRTIME) {
     libraryInit = function() {
     	
         $libContent = $("#library_content");
+        
+        /*
+         * Icon hover states in the toolbar.
+         */
+        $libContent.on("mouseenter", ".fg-toolbar ul li", function(ev) {
+        	$el = $(this);
+        	
+        	if (!$el.hasClass("ui-state-disabled")) {
+        		$el.addClass("ui-state-hover");
+        	}     	
+        });
+        $libContent.on("mouseleave", ".fg-toolbar ul li", function(ev) {
+        	$el = $(this);
+        	
+        	if (!$el.hasClass("ui-state-disabled")) {
+        		$el.removeClass("ui-state-hover");
+        	} 
+        });
+              
         $libTable = $libContent.find("table");
         
         var tableHeight = $libContent.height() - 130;

airtime_mvc/public/js/airtime/playouthistory/historytable.js

@@ -93,6 +93,16 @@ $(document).ready(function(){
 		dateEndId = "#his_date_end",
 		timeEndId = "#his_time_end";
 	
+	/*
+     * Icon hover states for search.
+     */
+	history_content.on("mouseenter", ".his-timerange .ui-button", function(ev) {
+    	$(this).addClass("ui-state-hover"); 	
+    });
+	history_content.on("mouseleave", ".his-timerange .ui-button", function(ev) {
+    	$(this).removeClass("ui-state-hover");
+    });
+	
 	history_content
 		.height(widgetHeight)
 		.width(screenWidth);

airtime_mvc/public/js/airtime/showbuilder/builder.js

@@ -257,6 +257,24 @@ var AIRTIME = (function(AIRTIME){
 		$lib = $("#library_content"),
 		$sbTable = $sbContent.find('table');
 		
+		/*
+         * Icon hover states in the toolbar.
+         */
+		$sbContent.on("mouseenter", ".fg-toolbar ul li", function(ev) {
+        	$el = $(this);
+        	
+        	if (!$el.hasClass("ui-state-disabled")) {
+        		$el.addClass("ui-state-hover");
+        	}     	
+        });
+		$sbContent.on("mouseleave", ".fg-toolbar ul li", function(ev) {
+        	$el = $(this);
+        	
+        	if (!$el.hasClass("ui-state-disabled")) {
+        		$el.removeClass("ui-state-hover");
+        	} 
+        });
+		
 		oSchedTable = $sbTable.dataTable( {
 			"aoColumns": [
 		    /* checkbox */ {"mDataProp": "allowed", "sTitle": "", "sWidth": "15px", "sClass": "sb-checkbox"},

airtime_mvc/public/js/airtime/showbuilder/main_builder.js

@@ -87,6 +87,16 @@ AIRTIME = (function(AIRTIME) {
 		$builder = $("#show_builder");
 		$fs = $builder.find('fieldset');
 		
+		/*
+	     * Icon hover states for search.
+	     */
+		$builder.on("mouseenter", ".sb-timerange .ui-button", function(ev) {
+	    	$(this).addClass("ui-state-hover"); 	
+	    });
+		$builder.on("mouseleave", ".sb-timerange .ui-button", function(ev) {
+	    	$(this).removeClass("ui-state-hover");
+	    });
+		
 		$builder.find(dateStartId).datepicker(oBaseDatePickerSettings);
 		$builder.find(timeStartId).timepicker(oBaseTimePickerSettings);
 		$builder.find(dateEndId).datepicker(oBaseDatePickerSettings);

airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css

@@ -190,7 +190,7 @@ div.jp-audio div.jp-type-single a.jp-unmute {
 
 div.jp-volume-block {
 	position: absolute;
-	top: 35px;
+	top: 33px;
     left: 350px;
     width: 120px;
 }