CC-2030: Icon needed for Cue In/Out

-Implemented

application/views/scripts/playlist/update.phtml

@@ -10,6 +10,7 @@
 
             <div class="text-row top">
                 <span class="spl_playlength"><?php echo $item["cliplength"] ?></span>
+                <span class="spl_cue ui-state-default"></span>
                 <span class="spl_title"><?php echo $item["CcFiles"]['track_title'] ?></span>
             </div>
             <div class="text-row">

public/css/playlist_builder.css

@@ -15,7 +15,11 @@
 #spl_sortable > li, 
 #side_playlist > div,
 #spl_editor,
-.spl_artist {
+.spl_artist,
+.spl_cue_in,
+.spl_fade_in,
+.spl_cue_out,
+.spl_fade_out {
 	clear: left;
 }
 
@@ -35,8 +39,8 @@
 #spl_sortable {
 	list-style: none;
 	padding:0;
-    height: 400px;
-	overflow-y: scroll;
+	height: 300px;
+	overflow: auto;
 	width:100%;
 	margin-top:0;
 }
@@ -52,6 +56,10 @@
 	border: none;
 }
 
+#spl_name {
+
+}
+
 .ui-icon-closethick {
 	margin-top: 7px;
 }
@@ -72,6 +80,15 @@
 	font-size:12px;
 }
 
+/*#spl_editor {
+	height: 50px;
+}*/
+
+#spl_editor > div > span {
+/*	display: inline-block;
+	width: 150px;*/
+}
+
 .ui-icon-closethick,
 .ui-icon-play,
 .spl_fade_control,
@@ -239,13 +256,12 @@
     margin: 0;
 
 }
-dd.edit-error {
+.edit-error {
 	color:#b80000;
 	margin:0;
 	padding-bottom:0;
 	font-size:12px;
 	display:none;
-    clear: left;
 }
 	
 /*.edit-error:last-child {
@@ -276,3 +292,26 @@ dd.edit-error {
     top: 3px;
     z-index: 3;
 }
+
+#spl_sortable li .spl_cue {
+    background-color: transparent;
+	float:right;
+    font-size: 9px;
+    height: 15px;
+    right: 35px;
+    width: 33px;
+	margin-top:2px;
+	cursor:pointer;
+}
+#spl_sortable li .spl_cue.ui-state-default {
+	background: transparent url(images/cue_playlist.png) no-repeat 0 0;
+	border:none;
+}
+#spl_sortable li .spl_cue.ui-state-default:hover {
+	background: transparent url(images/cue_playlist.png) no-repeat 0 -15px;
+	border:none;
+}
+#spl_sortable li .spl_cue.ui-state-active, #spl_sortable li .spl_cue.ui-state-active:hover {
+	background: transparent url(images/cue_playlist.png) no-repeat 0 -30px;
+	border:none;
+}

public/js/airtime/library/spl.js

@@ -205,13 +205,15 @@ function openFadeEditor(event) {
 function openCueEditor(event) {
 	event.stopPropagation();
 
-	var pos, url, li;
+	var pos, url, li, icon;
 
 	li = $(this).parent().parent().parent();
+    icon = $(this);
     pos = li.attr("id").split("_").pop();
 
 	if(li.hasClass("ui-state-active")) {
 		li.removeClass("ui-state-active");
+        icon.attr("class", "spl_cue ui-state-default");
 
         $("#cues_"+pos)
 			.empty()
@@ -220,6 +222,7 @@ function openCueEditor(event) {
 		return;
 	}
 
+    icon.attr("class", "spl_cue ui-state-default ui-state-active");
 	url = '/Playlist/set-cue';
 
 	highlightActive(li);
@@ -253,7 +256,8 @@ function setSPLContent(json) {
 
 	$("#spl_sortable .ui-icon-closethick").click(deleteSPLItem);
 	$(".spl_fade_control").click(openFadeEditor);
-	$(".spl_playlength").click(openCueEditor);
+	//$(".spl_playlength").click(openCueEditor);
+	$(".spl_cue").click(openCueEditor);
 
 	return false;
 }
@@ -487,7 +491,8 @@ function setUpSPL() {
 
 	$("#spl_sortable .ui-icon-closethick").click(deleteSPLItem);
 	$(".spl_fade_control").click(openFadeEditor);
-	$(".spl_playlength").click(openCueEditor);
+	//$(".spl_playlength").click(openCueEditor);
+	$(".spl_cue").click(openCueEditor);
 
 	$("#spl_sortable").droppable();
 	$("#spl_sortable" ).bind( "drop", addSPLItem);