-implemented UI changes for playlist/block/webstream builder

airtime_mvc/application/forms/SmartBlockCriteria.php

@@ -244,7 +244,7 @@ class Application_Form_SmartBlockCriteria extends Zend_Form_SubForm
         }
 
         $generate = new Zend_Form_Element_Button('generate_button');
-        $generate->setAttrib('class', 'ui-button ui-state-default sp-button');
+        $generate->setAttrib('class', 'btn btn-small');
         $generate->setAttrib('title', 'Generate playlist content and save criteria');
         $generate->setIgnore(true);
         $generate->setLabel('Generate');
@@ -252,7 +252,7 @@ class Application_Form_SmartBlockCriteria extends Zend_Form_SubForm
         $this->addElement($generate);
 
         $shuffle = new Zend_Form_Element_Button('shuffle_button');
-        $shuffle->setAttrib('class', 'ui-button ui-state-default sp-button');
+        $shuffle->setAttrib('class', 'btn btn-small');
         $shuffle->setAttrib('title', 'Shuffle playlist content');
         $shuffle->setIgnore(true);
         $shuffle->setLabel('Shuffle');

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

@@ -1,7 +1,15 @@
 <form id="smart-block-form" method="post" action="">
 <fieldset class='toggle <?php echo $this->openOption ? "" : "closed"?>' id='smart_block_options'>
 <legend style='cursor: pointer;'><span class='ui-icon ui-icon-triangle-2-n-s'></span>Smart Block Options</legend>
-    <dl class='zend_form'>
+    <dl class='zend_form search-criteria'>
+        <div class='btn-toolbar clearfix'>
+            <div class='btn-group pull-right'>
+                <?php echo $this->element->getElement('generate_button') ?>
+            </div>
+            <div class='btn-group pull-right'>
+                <?php echo $this->element->getElement('shuffle_button') ?>
+            </div>
+        </div>
         <div id='sp-success' class='success' style='display:none'></div>
         <dd id='sp_type-element'>
             <label class='sp-label'>
@@ -17,28 +25,25 @@
                   </label>
             <?php $i = $i + 1; ?>
             <?php endforeach; ?>
-            
-            <?php echo $this->element->getElement('generate_button') ?>
-            <?php echo $this->element->getElement('shuffle_button') ?>
         </dd>
         
-        <dd id='sp_criteria-element'>
+        <dd id='sp_criteria-element' class='criteria-element'>
         <?php for ($i = 0; $i < $this->criteriasLength; $i++) {?>
         <?php for ($j = 0; $j < $this->modRowMap[$i]; $j++) {?>
             <div <?php if (($i > 0) && ($this->element->getElement("sp_criteria_field_".$i."_".$j)->getAttrib('disabled') == 'disabled')) {
                            echo 'style=display:none';
                        } ?>>
                 <?php echo $this->element->getElement("sp_criteria_field_".$i."_".$j) ?>
-                <a class='ui-button sp-ui-button-icon-only sp_no_margins' id='modifier_add_<?php echo $i ?>'>
-                    <span class='ui-icon ui-icon-plusthick'></span>
+                <a class='btn btn-small' id='modifier_add_<?php echo $i ?>'>
+                    <i class='icon-white icon-plus'></i>
                 </a>
                 <?php echo $this->element->getElement("sp_criteria_modifier_".$i."_".$j) ?>
                 <?php echo $this->element->getElement("sp_criteria_value_".$i."_".$j) ?>
                 <span class='sp_text_font' id="extra_criteria" <?php echo $this->element->getElement("sp_criteria_extra_".$i."_".$j)->getAttrib("disabled") == "disabled"?'style="display:none;"':""?>> to <?php echo $this->element->getElement('sp_criteria_extra_'.$i."_".$j) ?></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 class='btn btn-small btn-danger' id='criteria_remove_<?php echo $i ?>'>
+                    <i class='icon-white icon-remove'></i>
                 </a>
-                <br />
                 <?php if($this->element->getElement("sp_criteria_field_".$i."_".$j)->hasErrors()) : ?>
                     <?php foreach($this->element->getElement("sp_criteria_field_".$i."_".$j)->getMessages() as $error): ?>
                     <span class='errors sp-errors'>

airtime_mvc/application/views/scripts/library/index.phtml

@@ -2,7 +2,7 @@
     <?php echo $this->render('library/library.phtml') ?>
 </div>
 
-<div id="side_playlist" class="pl-content ui-widget ui-widget-content block-shadow omega-block padded">
+<div id="side_playlist" class="pl-content ui-widget ui-widget-content block-shadow omega-block padded" style="height:697px; width:720px !important;">
     <?php if ($this->type == 'block') {
             echo $this->render('playlist/smart-block.phtml');
         } else if ($this->type == 'playlist') {

airtime_mvc/application/views/scripts/playlist/playlist.phtml

@@ -4,16 +4,33 @@ if (isset($this->obj)) {
     $count = count($contents);
 }
 ?>
-<button id="spl_new" class="ui-button ui-widget ui-state-default" role="button" aria-disabled="false">New</button>
+<div class="btn-toolbar clearfix">
+    <div class="btn-group pull-left">
+        <button id="spl_new" class="btn dropdown-toggle" data-toggle="dropdown" aria-disabled="false">
+            New <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li id='lib-new-pl'><a href="#">New Playlist</a></li>
+            <li id='lib-new-bl'><a href="#">New Smart Block</a></li>
+            <li id='lib-new-ws'><a href="#">New Webstream</a></li>
+        </ul>
+    </div>
 <?php if (isset($this->obj)) : ?>
-    <button id="spl_delete" class="ui-button ui-widget ui-state-default" role="button" aria-disabled="false">Delete</button>
-    <a href="#" id="spl_crossfade" class="ui-button ui-button-icon-only ui-widget ui-state-default crossfade-main-button" style="display:<?php echo $count > 0 ?"block;":"none;"?>">
-        <span class="ui-icon crossfade-main-icon"></span><span class="ui-button-text">Playlist crossfade</span>
-    </a>
+    <div class='btn-group pull-right'>
+        <button class="btn btn-inverse" title='Save playlist' type="button" id="save_button">Save</button>
+    </div>
+    <div class='btn-group pull-right'>
+        <button id="spl_delete" class="btn" role="button" aria-disabled="false">Delete</button>
+    </div>
+    <div class='btn-group pull-right'>
+        <a href="#" id="spl_crossfade" class="btn crossfade-main-button" style="display:<?php echo $count > 0 ?"block;":"none;"?>">
+            <i class='crossfade-main-icon'></i><span class="ui-button-text">Playlist crossfade</span>
+        </a>
+    </div>
 <?php endif; ?>
+</div>
 
 <?php if (isset($this->obj)) : ?>
-    <button class="ui-button ui-state-default sp-save" title='Save playlist' type="button" id="save_button">Save</button>
     <input id="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"></input>
     <input id="obj_lastMod" type="hidden" value="<?php echo $this->obj->getLastModified('U'); ?>"></input>
     <input id='obj_type' type='hidden' value='playlist'></input>

airtime_mvc/application/views/scripts/playlist/smart-block.phtml

@@ -4,14 +4,31 @@ if (isset($this->obj)) {
     $count = count($contents);
 }
 ?>
-<button id="spl_new" class="ui-button ui-widget ui-state-default" role="button" aria-disabled="false">New</button>
+<div class="btn-toolbar clearfix">
+    <div class="btn-group pull-left">
+        <button id="spl_new" class="btn dropdown-toggle" data-toggle='dropdown' aria-disabled="false">
+            New <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li id='lib-new-pl'><a href="#">New Playlist</a></li>
+            <li id='lib-new-bl'><a href="#">New Smart Block</a></li>
+            <li id='lib-new-ws'><a href="#">New Webstream</a></li>
+        </ul>
+    </div>
 <?php if (isset($this->obj)) : ?>
-    <button id="spl_delete" class="ui-button ui-widget ui-state-default" role="button" aria-disabled="false">Delete</button>
-    <a href="#" id="spl_crossfade" class="ui-button ui-button-icon-only ui-widget ui-state-default crossfade-main-button" style="display:<?php echo ($this->obj->isStatic() && $count > 0) ?"block;":"none;"?>">
-        <span class="ui-icon crossfade-main-icon"></span><span class="ui-button-text">Playlist crossfade</span>
-    </a>
-    <button class="ui-button ui-state-default sp-save" title='Save smart block&#39s title, description, and criteria' type="button" id="save_button">Save</button>
+    <div class='btn-group pull-right'>
+        <button class="btn btn-inverse" title='Save smart block&#39s title, description, and criteria' type="button" id="save_button">Save</button>
+    </div>
+    <div class='btn-group pull-right'>
+        <button id="spl_delete" class="btn" role="button" aria-disabled="false">Delete</button>
+    </div>
+    <div class='btn-group pull-right'>
+        <a href="#" id="spl_crossfade" class="btn crossfade-main-button" style="display:<?php echo ($this->obj->isStatic() && $count > 0) ?"block;":"none;"?>">
+            <i class='crossfade-main-icon'></i><span class="ui-button-text">Playlist crossfade</span>
+        </a>
+    </div>
 <?php endif; ?>
+</div>
 
 <?php if (isset($this->obj)) : ?>
     <input id="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"></input>

airtime_mvc/application/views/scripts/webstream/webstream.phtml

@@ -1,7 +1,20 @@
-<button id="ws_new" class="ui-button ui-widget ui-state-default" role="button" aria-disabled="false">New</button>
+<div class="btn-toolbar clearfix">
+    <div class="btn-group pull-left">
+        <button id="ws_new" class="btn dropdown-toggle" data-toggle="dropdown" aria-disabled="false">
+            New <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li id='lib-new-pl'><a href="#">New Playlist</a></li>
+            <li id='lib-new-bl'><a href="#">New Smart Block</a></li>
+            <li id='lib-new-ws'><a href="#">New Webstream</a></li>
+        </ul>
+    </div>
 <?php if (isset($this->obj)) : ?>
-<button id="ws_delete" class="ui-button ui-widget ui-state-default" <?php if ($this->action == "new"): ?>style="display:none;"<?php endif; ?> role="button" aria-disabled="false">Delete</button>
+<div class="btn-group pull-right">
+    <button id="ws_delete" class="btn" <?php if ($this->action == "new"): ?>style="display:none;"<?php endif; ?>aria-disabled="false">Delete</button>
+</div>
 <?php endif; ?>
+</div>
 
 <?php if (isset($this->obj)) : ?>
     <input id="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"></input>
@@ -36,7 +49,7 @@
          <input type="text" value="<?php echo $this->obj->getDefaultLength() ?>"/>
          </dd>        
          <dd id="submit-element" class="buttons">
-            <input class="ui-button ui-state-default" type="submit" value="Save" id="webstream_save" name="submit">
+            <input class="btn btn-inverse" type="submit" value="Save" id="webstream_save" name="submit">
         </dd>
        </dl>
     </fieldset>

airtime_mvc/public/js/airtime/library/events/library_playlistbuilder.js

@@ -16,9 +16,9 @@ var AIRTIME = (function(AIRTIME) {
         }
 
         if (check === true) {
-            AIRTIME.button.enableButton("icon-plus", true);
+            AIRTIME.button.enableButton("btn-group #library-plus", true);
         } else {
-            AIRTIME.button.disableButton("icon-plus", true);
+            AIRTIME.button.disableButton("btn-group #library-plus", true);
         }
     };
 
@@ -109,7 +109,7 @@ var AIRTIME = (function(AIRTIME) {
             .find('.icon-plus').parent()
             .click(function() {
 
-                if (AIRTIME.button.isDisabled('icon-plus') === true) {
+                if (AIRTIME.button.isDisabled('btn-group #library-plus') === true) {
                     return;
                 }
 

airtime_mvc/public/js/airtime/library/events/library_showbuilder.js

@@ -16,9 +16,9 @@ var AIRTIME = (function(AIRTIME) {
         }
 
         if (check === true) {
-            AIRTIME.button.enableButton("icon-plus", true);
+            AIRTIME.button.enableButton("btn-group #library-plus", true);
         } else {
-            AIRTIME.button.disableButton("icon-plus", true);
+            AIRTIME.button.disableButton("btn-group #library-plus", true);
         }
     };
 
@@ -121,7 +121,7 @@ var AIRTIME = (function(AIRTIME) {
             .click(
                     function() {
 
-                        if (AIRTIME.button.isDisabled('icon-plus') === true) {
+                        if (AIRTIME.button.isDisabled('btn-group #library-plus') === true) {
                             return;
                         }
     

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

@@ -110,7 +110,7 @@ var AIRTIME = (function(AIRTIME) {
                         "</ul>" +
                     "</div>")
             .append("<div class='btn-group'>" +
-                        "<button class='btn btn-small'>" +
+                        "<button class='btn btn-small' id='library-plus'>" +
                             "<i class='icon-white icon-plus'></i> Add to current playlist" +
                         "</button>" +
                     "</div>")

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

@@ -943,6 +943,7 @@ var AIRTIME = (function(AIRTIME){
 	};
 	
 	mod.init = function() {
+	    /*
 	    $.contextMenu({
             selector: '#spl_new, #ws_new',
             trigger: "left",
@@ -953,6 +954,10 @@ var AIRTIME = (function(AIRTIME){
                 "ws": {name: "New Webstream", callback: AIRTIME.playlist.fnWsNew}
             }
         });
+        */
+	    $('#lib-new-pl').live('click', function(){AIRTIME.playlist.fnNew();});
+        $('#lib-new-bl').live('click', function(){AIRTIME.playlist.fnNewBlock();});
+        $('#lib-new-ws').live('click', function(){AIRTIME.playlist.fnWsNew();});
 	    /*
 		$pl.delegate("#spl_new", 
 	    		{"click": AIRTIME.playlist.fnNew});*/

airtime_mvc/public/js/airtime/playlist/smart_blockbuilder.js

@@ -6,7 +6,7 @@ function setSmartBlockEvents() {
     var form = $('#smart-block-form');
     
     /********** ADD CRITERIA ROW **********/
-    form.find('.criteria_add').live('click', function(){
+    form.find('#criteria_add').live('click', function(){
         
         var div = $('dd[id="sp_criteria-element"]').children('div:visible:last').next();
         
@@ -52,7 +52,7 @@ function setSmartBlockEvents() {
         sizeTextBoxes(newRowVal, 'sp_extra_input_text', 'sp_input_text');
         
         //remove the 'criteria add' button from new modifier row
-        newRow.find('.criteria_add').remove();
+        newRow.find('#criteria_add').remove();
         
         $(this).parent().after(newRow);
         reindexElements();
@@ -490,12 +490,12 @@ function removeSuccessMsg() {
 }
 
 function appendAddButton() {
-    var add_button = "<a class='ui-button sp-ui-button-icon-only criteria_add'>" +
-                     "<span class='ui-icon ui-icon-plusthick'></span></a>";
+    var add_button = "<a class='btn btn-small' id='criteria_add'>" +
+                     "<i class='icon-white icon-plus'></i></a>";
     var rows = $('#smart_block_options'),
         enabled = rows.find('select[name^="sp_criteria_field"]:enabled');
 
-    rows.find('.criteria_add').remove();
+    rows.find('#criteria_add').remove();
     
     if (enabled.length > 1) {
         rows.find('select[name^="sp_criteria_field"]:enabled:last')