CC-84: Smart Playlists

- ui cleanup

airtime_mvc/application/forms/SmartPlaylistCriteria.php

@@ -209,21 +209,24 @@ class Application_Form_SmartPlaylistCriteria extends Zend_Form_SubForm
         }
         
         $save = new Zend_Form_Element_Button('save_button');
-        $save->setAttrib('class', 'ui-button ui-state-default right-floated');
+        $save->setAttrib('class', 'ui-button ui-state-default sp-button');
+        $save->setAttrib('title', 'Save criteria only');
         $save->setIgnore(true);
         $save->setLabel('Save');
         $save->setDecorators(array('viewHelper'));
         $this->addElement($save);
         
         $generate = new Zend_Form_Element_Button('generate_button');
-        $generate->setAttrib('class', 'ui-button ui-state-default right-floated');
+        $generate->setAttrib('class', 'ui-button ui-state-default sp-button');
+        $generate->setAttrib('title', 'Save criteria and generate playlist content');
         $generate->setIgnore(true);
         $generate->setLabel('Generate');
         $generate->setDecorators(array('viewHelper'));
         $this->addElement($generate);
         
         $shuffle = new Zend_Form_Element_Button('shuffle_button');
-        $shuffle->setAttrib('class', 'ui-button ui-state-default right-floated');
+        $shuffle->setAttrib('class', 'ui-button ui-state-default sp-button');
+        $shuffle->setAttrib('title', 'Shuffle playlist content');
         $shuffle->setIgnore(true);
         $shuffle->setLabel('Shuffle');
         $shuffle->setDecorators(array('viewHelper'));

airtime_mvc/application/views/scripts/form/smart-playlist-criteria.phtml

@@ -1,11 +1,12 @@
 <form id="smart-playlist-form" method="post" action="">
-<fieldset class='toggle <?php echo $this->openOption ? "" : "closed"?>' id='smart_playlist_options' style='overflow-x:auto; width:781px'>
+<fieldset class='toggle <?php echo $this->openOption ? "" : "closed"?>' id='smart_playlist_options'>
 <legend style='cursor: pointer;'><span class='ui-icon ui-icon-triangle-2-n-s'></span>Smart Playlist Options</legend>
     <dl class='zend_form'>
         <div id='sp-success' class='success' style='display:none'></div>
         <dd id='sp_type-element' class='radio-inline-list'>
         <label for='sp_type'>
             <?php echo $this->element->getElement('sp_type')->getLabel() ?>
+            <span class='playlist_type_help_icon'></span>
             <?php $i=0;
                   $value = $this->element->getElement('sp_type')->getValue();
                   foreach ($this->element->getElement('sp_type')->getMultiOptions() as $radio) : ?>
@@ -14,6 +15,9 @@
                       </input>
             <?php $i = $i + 1; ?>
             <?php endforeach; ?>
+            <?php echo $this->element->getElement('save_button') ?>
+            <?php echo $this->element->getElement('generate_button') ?>
+            <?php echo $this->element->getElement('shuffle_button') ?>
         </label>
         </dd>
         
@@ -26,7 +30,7 @@
                 <?php echo $this->element->getElement('sp_criteria_field_'.$i) ?>
                 <?php echo $this->element->getElement('sp_criteria_modifier_'.$i) ?>
                 <?php echo $this->element->getElement('sp_criteria_value_'.$i) ?>
-                    <span id="extra_criteria" <?php echo $this->element->getElement('sp_criteria_extra_'.$i)->getAttrib("disabled") == "disabled"?'style="display:none;"':""?>> to <?php echo $this->element->getElement('sp_criteria_extra_'.$i) ?></span> 
+                    <span class='sp_text_font' id="extra_criteria" <?php echo $this->element->getElement('sp_criteria_extra_'.$i)->getAttrib("disabled") == "disabled"?'style="display:none;"':""?>> to <?php echo $this->element->getElement('sp_criteria_extra_'.$i) ?></span> 
                 <a class='ui-button sp-ui-button-icon-only' id='criteria_remove_<?php echo $i ?>'>
                     <span class='ui-icon ui-icon-closethick'></span>
                 </a>
@@ -38,17 +42,10 @@
         </dd>
         
         <dd id='sp_limit-element'>
-            <label>
+            <span class='sp_text_font'><?php echo $this->element->getElement('sp_limit_value')->getLabel() ?></span>
-                <?php echo $this->element->getElement('sp_limit_value')->getLabel() ?>
+            <?php echo $this->element->getElement('sp_limit_value')?>
-                <?php echo $this->element->getElement('sp_limit_value')?>
+            <?php echo $this->element->getElement('sp_limit_options') ?>
-                <?php echo $this->element->getElement('sp_limit_options') ?>
-            </label>
         </dd>
-       <dd id='action_buttons'> 
-           <?php echo $this->element->getElement('save_button') ?>
-           <?php echo $this->element->getElement('generate_button') ?>
-           <?php echo $this->element->getElement('shuffle_button') ?>
-       </dd>
         
 </dl>
 </fieldset>

airtime_mvc/public/css/styles.css

@@ -93,7 +93,7 @@ select {
 }
 /* Version Notification Ends*/
 
-.override_help_icon, .icecast_metadata_help_icon  {
+.override_help_icon, .icecast_metadata_help_icon {
         cursor: help;
         position: relative;
         
@@ -104,7 +104,7 @@ select {
         line-height:16px !important;
 }
 
-.airtime_auth_help_icon, .custom_auth_help_icon, .stream_username_help_icon {
+.airtime_auth_help_icon, .custom_auth_help_icon, .stream_username_help_icon, .playlist_type_help_icon {
         cursor: help;
         position: relative;
         display:inline-block; zoom:1;
@@ -416,6 +416,8 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus, .input_t
     padding: 2px 2px 2px 0;
     vertical-align: top;
 }
+
+/***** SMART PLAYLIST SPECIFIC STYLES BEGIN *****/
 .sp_input_select{
     width: 130px;
 }
@@ -429,24 +431,35 @@ input.input_text.sp_input_text{
 }
 
 input.input_text.sp_extra_input_text{
-    width: 85px !important;
+    width: 87px !important;
 }
 
-.sp-ui-button-icon-only .ui-icon{
+.sp_text_font{
-	position: absolute;
+    font-size:13px;
-	top: 50%;
+    font-family:Helvetica, Arial, sans-serif;
+    color: #5B5B5B;
+}
+
+.sp-ui-button-icon-only {
+	position: relative;
+	top: 5px;
 	margin-top: -10px;
-	left: 50%;
+	margin-left: 5px;
-}
-
-.sp-add.sp-ui-button-icon-only .ui-icon{
-    margin-left: 20px !important;
 }
 
 .sp-ui-button-icon-only .ui-icon-closethick:hover, .sp-ui-button-icon-only .ui-icon-plusthick:hover {
     background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png)
 }
 
+.sp-button{
+    float: right !important;
+    width: 60px;
+    height: 24px !important;
+    margin-right: 0px !important;
+    margin-left: 10px !important;
+}
+/***** SMART PLAYLIST SPECIFIC STYLES END *****/
+
 label {
 	font-size:13px;
 	color:#5b5b5b;

airtime_mvc/public/js/airtime/playlist/smart_playlistbuilder.js

@@ -1,5 +1,29 @@
 $(document).ready(function() {
     setSmartPlaylistEvents();
+    
+    $(".playlist_type_help_icon").qtip({
+        content: {
+            text: "A static playlist will save the criteria and generate the playlist content immediately." +
+                  "This allows you to edit and view it in the Playlist Builder before adding it to a show.<br /><br />" +
+                  "A dynamic playlist will only save the criteria. The playlist content will get generated upon " +
+                  "adding it to a show. You will not be able to view and edit it in the Playlist Builder."
+        },
+        hide: {
+            delay: 500,
+            fixed: true
+        },
+        style: {
+            border: {
+                width: 0,
+                radius: 4
+            },
+            classes: "ui-tooltip-dark ui-tooltip-rounded"
+        },
+        position: {
+            my: "left bottom",
+            at: "right center"
+        },
+    })
 });
 
 function setSmartPlaylistEvents() {
@@ -262,53 +286,19 @@ function callback(data, type) {
             form.find('.success').text('Criteria saved');
             form.find('.success').show();
         }
+        setTimeout('removeSuccessMsg()', 5000);
     }
 }
 
-/*function generateCallback(data) {
+function removeSuccessMsg() {
-    var form = $('#smart-playlist-form'),
+    var form = $('#smart-playlist-form');
-        json = $.parseJSON(data);
+    form.find('.success').text('');
-    
+    form.find('.success').hide();
-    form.find('span[class="errors sp-errors"]').remove();
-    
-    if (json.result == "1") {
-        form.find('.success').hide();
-        $.each(json.errors, function(index, error){
-            $.each(error.msg, function(index, message){
-                $('#'+error.element).parent().append("<span class='errors sp-errors'>"+message+"</span>");
-            });
-        });
-    } else {
-        AIRTIME.playlist.fnOpenPlaylist(json);
-        form = $('#smart-playlist-form')
-        form.find('.success').text('Smart playlist generated');
-        form.find('.success').show();
-        form.find('#smart_playlist_options').removeClass("closed");
-    }
 }
 
-function saveCallback(json) {
-	var form = $('#smart-playlist-form'),
-	    json = $.parseJSON(json);
-
-	form.find('span[class="errors sp-errors"]').remove();
-	
-	if (json.result == "1") {
-		form.find('.success').hide();
-        $.each(json.errors, function(index, error){
-            $.each(error.msg, function(index, message){
-                $('#'+error.element).parent().append("<span class='errors sp-errors'>"+message+"</span>");
-            });
-        });
-    } else {
-    	form.find('.success').text('Criteria saved');
-        form.find('.success').show();
-    }
-}*/
-
 function appendAddButton() {
     var rows = $('#smart-playlist-form');
-    var add_button = "<a class='ui-button sp-add sp-ui-button-icon-only criteria_add'>" +
+    var add_button = "<a class='ui-button sp-ui-button-icon-only criteria_add'>" +
                      "<span class='ui-icon ui-icon-plusthick'></span></a>";
 
     rows.find('.criteria_add').remove();