SAAS-999 - Change Advanced Search Options to dropdown

airtime_mvc/application/controllers/ShowBuilderController.php

@@ -18,6 +18,7 @@ class ShowBuilderController extends Zend_Controller_Action {
         $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.pluginAPI.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.fnSetFilteringDelay.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.ColVis.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
+        $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.ColReorder.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.FixedColumns.js?'.$CC_CONFIG['airtime_version'],'text/javascript');
         $this->view->headScript()->appendFile($baseUrl.'js/datatables/plugin/dataTables.columnFilter.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
 

airtime_mvc/application/views/scripts/show-builder/index.phtml

@@ -30,13 +30,18 @@
 
 <div id="library_content" class="lib-content tabs content-pane wide-panel">
     <div class="panel-header">
-        <fieldset class="toggle closed" id="filter_options">
+<!--        <fieldset class="toggle closed" id="filter_options">-->
-            <legend style="cursor: pointer;">
+<!--            <legend style="cursor: pointer;">-->
-                <span class="ui-icon ui-icon-triangle-2-n-s"></span>
+<!--                <span class="ui-icon ui-icon-triangle-2-n-s"></span>-->
-                <?php echo _("Advanced Search Options") ?>
+<!--                --><?php //echo _("Advanced Search Options") ?>
-            </legend>
+<!--            </legend>-->
-            <div id="advanced_search" class="advanced_search form-horizontal"></div>
+<!--        </fieldset>-->
-        </fieldset>
+        <div id="advanced-options" class="btn-group">
+            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
+                <span class="caret"></span>
+            </button>
+            <div id="advanced_search" class="advanced_search form-horizontal dropdown-menu"></div>
+        </div>
     </div>
     <div class="outer-datatable-wrapper">
         <table id="library_display" cellpadding="0" cellspacing="0" class="datatable"></table>

airtime_mvc/public/css/_showbuilder.css

@@ -43,15 +43,19 @@ div.ColVis_collectionBackground {
 
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    border-radius: 10px;
+    /*border-radius: 10px;*/
 }
 
 ::-webkit-scrollbar-thumb {
     background-color: #ff5d1a;
-    border-radius: 10px;
+    /*border-radius: 10px;*/
     -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.75);
 }
 
+::-webkit-scrollbar-corner {
+    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.75);
+}
+
 /* Show Builder*/
 
 .content-pane {
@@ -91,15 +95,6 @@ div.ColVis_collectionBackground {
     flex: 1;
 }
 
-@media screen and (max-height: 650px) {
-    #master-panel {
-        display: none;
-    }
-    .wrapper {
-        top: 40px !important;
-    }
-}
-
 @media screen and (max-width: 1475px) {
     .wrapper {
         -webkit-flex-flow: column !important;
@@ -168,10 +163,13 @@ div.ColVis_collectionBackground {
 }
 
 #library_content .dataTables_filter input[type="text"], #library_content .dataTables_filter select {
-    margin-top: 6px;
-    width: 20%;
-    float: right;
     height: 26px;
+    margin: 0;
+
+    border: 0;
+    float: left;
+    position: absolute;
+    width: 100%;
 }
 
 #library_content label {
@@ -194,7 +192,7 @@ div.ColVis_collectionBackground {
     font-size: 14px;
 }
 
-#library_content legend, #library_content span, #library_content label {
+#library_content legend, #library_content span {
     font-weight: normal;
     color: #efefef;
 }
@@ -206,9 +204,13 @@ div.ColVis_collectionBackground {
     bottom: 0;
 }
 
+#library_display_processing {
+    z-index: 1;
+}
+
 #library_display_wrapper, #show_builder_table_wrapper {
     position: absolute;
-    top: 4px;
+    top: 34px;
     bottom: 4px;
     right: 4px;
     left: 4px;
@@ -216,12 +218,18 @@ div.ColVis_collectionBackground {
 
 .dataTables_scrolling {
     position: absolute;
-    bottom: 38px; /* 38 px is the size of the header/footer */
+    bottom: 39px; /* 38 px is the size of the header/footer + 1px because there's no internal border */
-    top: 38px;
+    top: 39px;
     left: 1px; /* Border */
     right: 0;
 }
 
+#library_display {
+    border: none;
+}
+
+/* Library Search */
+
 #filter_options {
     text-align: center;
     padding: 15px 0 15px 15px;
@@ -230,12 +238,60 @@ div.ColVis_collectionBackground {
 }
 
 #advanced_search {
-    margin-top: 15px;
+    position: absolute;
+    left: -500px;
+    padding: 5px;
+    margin-top: -2px;
+}
+
+#advanced_search label, #advanced_search span {
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 24px;
+    color: #242424;
+}
+
+#advanced_search .controls {
+    text-align: right;
+}
+
+#advanced_search .control-group {
+    padding: 5px;
+    margin-bottom: 0;
+}
+
+#advanced_search .sp-checked-icon {
+    position: absolute;
+    margin-top: 4px;
+}
+
+#advanced-options {
+    float: right;
+    z-index: 1;
+}
+
+#advanced-options > button {
+    background: transparent none;
+    color: transparent;
+    border: none;
+    padding: 4px 8px 4px 4px;
+    box-shadow: none;
+}
+
+#advanced-options > button:focus {
+    outline-width: 0;
+}
+
+#advanced-options > button > span {
+    border-top: 4px solid #242424;
 }
 
 .panel-header {
-    position: relative;
+    position: absolute;
     top: 4px;
+    right: 4px;
+    left: 4px;
+    z-index: 1; /* Display above the content wrapper */
 }
 
 /* Timeline */
@@ -281,7 +337,7 @@ div.ColVis_collectionBackground {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     padding: 0;
-    margin: 0 4px 0;
+    margin: 0;
 }
 
 .nav-tabs a {
@@ -313,6 +369,7 @@ div.ColVis_collectionBackground {
 /* Media editors */
 
 #side_playlist {
+    margin-top: 34px;
     width: 100%; /* Override because we're using flexbox */
 
     overflow-x: hidden;

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

@@ -148,6 +148,13 @@ var AIRTIME = (function(AIRTIME) {
                     "</div>");
     };
 
+    mod.moveSearchBarToHeader = function() {
+        $("#library_display_filter").appendTo("#library_content > .panel-header");
+        $("#advanced_search").click(function(e) {
+            e.stopPropagation();
+        });
+    };
+
     mod.createToolbarDropDown = function() {
         $('#sb-select-page').click(function(){mod.selectCurrentPage();});
         $('#sb-dselect-page').click(function(){mod.deselectCurrentPage();});
@@ -449,7 +456,7 @@ var AIRTIME = (function(AIRTIME) {
                     if (ele.bVisible) {
                         advanceSearchDiv.append(
                             "<div id='advanced_search_col_"+currentColId+"' class='control-group'>" +
-                            "<label class='control-label'"+labelStyle+">"+ele.sTitle+" : </label>" +
+                            "<label class='control-label'"+labelStyle+">"+ele.sTitle+"</label>" +
                             "<div id='"+ele.mDataProp+"' class='controls "+inputClass+"'></div>" +
                             "</div>");
                     } else {
@@ -501,7 +508,7 @@ var AIRTIME = (function(AIRTIME) {
             "aoColumns": [
                 /* ftype */           { "sTitle" : ""                             , "mDataProp" : "ftype"        , "bSearchable" : false                 , "bVisible"    : false                   }          ,
                 /* Type */            { "sTitle" : ""                             , "mDataProp" : "image"        , "bSearchable" : false                 , "sWidth"      : "16px"                  , "sClass" : "library_type" , "iDataSort" : 0                  }  ,
-                ///* Is Scheduled */    { "sTitle" : $.i18n._("Scheduled")          , "mDataProp" : "is_scheduled" , "bVisible"    : false                 , "bSearchable" : false                 , "sWidth"      : "90px"                  , "sClass" : "library_is_scheduled"}  ,
+                /* Is Scheduled */    { "sTitle" : $.i18n._("Scheduled")          , "mDataProp" : "is_scheduled" , "bVisible"    : false                 , "bSearchable" : false                 , "sWidth"      : "90px"                  , "sClass" : "library_is_scheduled"}  ,
                 /* Is Playlist */     { "sTitle" : $.i18n._("Playlist / Block")   , "mDataProp" : "is_playlist"  , "bSearchable" : false                 , "sWidth"      : "110px"                  , "sClass" : "library_is_playlist"}  ,
                 /* Title */           { "sTitle" : $.i18n._("Title")              , "mDataProp" : "track_title"  , "sClass"      : "library_title"       , "sWidth"      : "170px"                 }          ,
                 /* Creator */         { "sTitle" : $.i18n._("Creator")            , "mDataProp" : "artist_name"  , "sClass"      : "library_creator"     , "sWidth"      : "160px"                 }          ,
@@ -575,7 +582,7 @@ var AIRTIME = (function(AIRTIME) {
                     // sure everything works properly.
                     for (i = 0, length = a.length; i < length; i++) {
                         if (typeof(a[i]) === "string") {
-                            a[i] = (a[i] === "true") ? true : false;
+                            a[i] = (a[i] === "true");
                         }
                     }
                 }
@@ -685,7 +692,7 @@ var AIRTIME = (function(AIRTIME) {
             "oLanguage": datatables_dict,
 
             // R = ColReorder, C = ColVis
-            "sDom": 'R<"dt-process-rel"r><"H"<"library_toolbar"Cf>><"dataTables_scrolling"t><"F"ilp>>',
+            "sDom": 'Rf<"dt-process-rel"r><"H"<"library_toolbar"C>><"dataTables_scrolling"t><"F"ilp>>',
 
             "oColVis": {
                 "sAlign": "right",
@@ -1044,7 +1051,7 @@ function validateAdvancedSearch(divs) {
     searchTerm[0] = "";
     searchTerm[1] = "";
     $.each(divs, function(i, div){
-        fieldName = $(div).children(':nth-child(2)').attr('id');
+        fieldName = $(div).children('div').attr('id');
         fields = $(div).children().find('input');
         searchTermType = validationTypes[fieldName];
         valid = true;
@@ -1088,9 +1095,9 @@ function validateAdvancedSearch(divs) {
                  */
             } else if (searchTerm[0] === "" && searchTerm[1] !== "" ||
                 searchTerm[0] === "" && searchTerm[1] === ""){
-                if ($(field).closest('div').children(':last-child').hasClass('checked-icon') ||
+                if ($(field).closest('div').prev().hasClass('checked-icon') ||
-                    $(field).closest('div').children(':last-child').hasClass('not-available-icon')) {
+                    $(field).closest('div').prev().hasClass('not-available-icon')) {
-                    $(field).closest('div').children(':last-child').remove();
+                    $(field).closest('div').prev().remove();
                 }
             }
 
@@ -1119,24 +1126,30 @@ function addRemoveValidationIcons(valid, field, searchTermType) {
         invalidIndicator = " <span title='"+title+"' class='not-available-icon sp-checked-icon'></span>";
 
     if (valid) {
-        if (!field.closest('div').children(':last-child').hasClass('checked-icon')) {
+        if (!field.closest('div').prev().hasClass('checked-icon')) {
             // remove invalid icon before adding valid icon
-            if (field.closest('div').children(':last-child').hasClass('not-available-icon')) {
+            if (field.closest('div').prev().hasClass('not-available-icon')) {
-                field.closest('div').children(':last-child').remove();
+                field.closest('div').prev().remove();
             }
-            field.closest('div').append(validIndicator);
+            field.closest('div').before(validIndicator);
         }
     } else {
-        if (!field.closest('div').children(':last-child').hasClass('not-available-icon')) {
+        if (!field.closest('div').prev().hasClass('not-available-icon')) {
             // remove valid icon before adding invalid icon
-            if (field.closest('div').children(':last-child').hasClass('checked-icon')) {
+            if (field.closest('div').prev().hasClass('checked-icon')) {
-                field.closest('div').children(':last-child').remove();
+                field.closest('div').prev().remove();
             }
-            field.closest('div').append(invalidIndicator);
+            field.closest('div').before(invalidIndicator);
         }
     }
 }
 
+function resizeAdvancedSearch() {
+    var s = $("#advanced_search");
+    s.css("max-height", $(window).height() / 4);
+    s.css("overflow", "auto");
+}
+
 /*
  * Validation types: s => string i => integer n => numeric (positive/negative,
  * whole/decimals) t => timestamp l => length
@@ -1212,5 +1225,13 @@ $(document).ready(function() {
             oTable.fnDraw();
         }
     });
+
+    $("#advanced-options").on("click", function() {
+        resizeAdvancedSearch();
+    });
+
+    $(window).resize(function() {
+        resizeAdvancedSearch();
+    });
 });
 

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

@@ -224,6 +224,7 @@ var AIRTIME = (function(AIRTIME) {
         var $toolbar = $(".lib-content .fg-toolbar:first");
 
         mod.createToolbarButtons();
+        mod.moveSearchBarToHeader();
         
         $toolbar.append($menu);
         // add to timeline button