From 4200f56265581055b350a5a2418463925a93b47c Mon Sep 17 00:00:00 2001 From: Duncan Sommerville Date: Tue, 4 Aug 2015 15:38:48 -0400 Subject: [PATCH] SAAS-999 - Change Advanced Search Options to dropdown --- .../controllers/ShowBuilderController.php | 1 + .../views/scripts/show-builder/index.phtml | 19 ++- airtime_mvc/public/css/_showbuilder.css | 99 +++++++++++--- .../public/js/airtime/library/_library.js | 53 +++++--- .../library/events/_library_showbuilder.js | 1 + .../public/js/airtime/showbuilder/builder.js | 124 +++++++++--------- 6 files changed, 191 insertions(+), 106 deletions(-) diff --git a/airtime_mvc/application/controllers/ShowBuilderController.php b/airtime_mvc/application/controllers/ShowBuilderController.php index a5dfdc3a5..1c16e762d 100644 --- a/airtime_mvc/application/controllers/ShowBuilderController.php +++ b/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'); diff --git a/airtime_mvc/application/views/scripts/show-builder/index.phtml b/airtime_mvc/application/views/scripts/show-builder/index.phtml index 0308b1cf0..331d40d09 100644 --- a/airtime_mvc/application/views/scripts/show-builder/index.phtml +++ b/airtime_mvc/application/views/scripts/show-builder/index.phtml @@ -30,13 +30,18 @@
-
- - - - - -
+ + + + + + +
+ + +
diff --git a/airtime_mvc/public/css/_showbuilder.css b/airtime_mvc/public/css/_showbuilder.css index d42272c12..a743d81ca 100644 --- a/airtime_mvc/public/css/_showbuilder.css +++ b/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 */ - top: 38px; + bottom: 39px; /* 38 px is the size of the header/footer + 1px because there's no internal border */ + 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; diff --git a/airtime_mvc/public/js/airtime/library/_library.js b/airtime_mvc/public/js/airtime/library/_library.js index a8a484e51..776aac9b0 100644 --- a/airtime_mvc/public/js/airtime/library/_library.js +++ b/airtime_mvc/public/js/airtime/library/_library.js @@ -148,6 +148,13 @@ var AIRTIME = (function(AIRTIME) { "
"); }; + 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( "
" + - "" + + "" + "
" + "
"); } 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') || - $(field).closest('div').children(':last-child').hasClass('not-available-icon')) { - $(field).closest('div').children(':last-child').remove(); + if ($(field).closest('div').prev().hasClass('checked-icon') || + $(field).closest('div').prev().hasClass('not-available-icon')) { + $(field).closest('div').prev().remove(); } } @@ -1119,24 +1126,30 @@ function addRemoveValidationIcons(valid, field, searchTermType) { invalidIndicator = " "; 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')) { - field.closest('div').children(':last-child').remove(); + if (field.closest('div').prev().hasClass('not-available-icon')) { + 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')) { - field.closest('div').children(':last-child').remove(); + if (field.closest('div').prev().hasClass('checked-icon')) { + 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(); + }); }); diff --git a/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js b/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js index 2cd1b10a3..f2196f811 100644 --- a/airtime_mvc/public/js/airtime/library/events/_library_showbuilder.js +++ b/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 diff --git a/airtime_mvc/public/js/airtime/showbuilder/builder.js b/airtime_mvc/public/js/airtime/showbuilder/builder.js index 3d85b071a..8c1ff1dfe 100644 --- a/airtime_mvc/public/js/airtime/showbuilder/builder.js +++ b/airtime_mvc/public/js/airtime/showbuilder/builder.js @@ -434,7 +434,7 @@ var AIRTIME = (function(AIRTIME){ /* fade out */ {"mDataProp": "fadeout", "sTitle": $.i18n._("Fade Out"), "bVisible": false, "sClass": "sb-fade-out"}, /* Mime */ {"mDataProp" : "mime", "sTitle" : $.i18n._("Mime"), "bVisible": false, "sClass": "sb-mime"} ], - + "bJQueryUI": true, "bSort": false, "bFilter": false, @@ -443,7 +443,7 @@ var AIRTIME = (function(AIRTIME){ "bInfo": false, "bAutoWidth": false, "bDeferRender": true, - + "bStateSave": true, "fnStateSaveParams": function (oSettings, oData) { //remove oData components we don't want to save. @@ -451,7 +451,7 @@ var AIRTIME = (function(AIRTIME){ delete oData.aoSearchCols; }, "fnStateSave": function fnStateSave(oSettings, oData) { - + localStorage.setItem('datatables-timeline', JSON.stringify(oData)); /* @@ -464,19 +464,19 @@ var AIRTIME = (function(AIRTIME){ }, "fnStateLoad": function fnBuilderStateLoad(oSettings) { var settings = localStorage.getItem('datatables-timeline'); - + if (settings !== "") { return JSON.parse(settings); - } + } }, "fnStateLoadParams": function (oSettings, oData) { var i, length, a = oData.abVisCols; - + //putting serialized data back into the correct js type to make //sure everything works properly. - for (i = 0, length = a.length; i < length; i++) { + for (i = 0, length = a.length; i < length; i++) { if (typeof(a[i]) === "string") { a[i] = (a[i] === "true") ? true : false; } @@ -491,10 +491,10 @@ var AIRTIME = (function(AIRTIME){ } } }*/ - + oData.iCreate = parseInt(oData.iCreate, 10); }, - + "fnServerData": mod.fnServerData, "fnRowCallback": function fnRowCallback( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { var i, length, @@ -523,19 +523,19 @@ var AIRTIME = (function(AIRTIME){ $node.html(""); $node.attr("style", "display : none"); } - + $nRow.addClass(sClass); }; - + if (aData.header === true) { //remove the column classes from all tds. $nRow.find('td').removeClass(); - + $node = $(nRow.children[0]); $node.html(""); cl = 'sb-header'; - + if (aData.record === true) { $div = $("
", { "class": "small-icon " + headerIcon @@ -548,15 +548,15 @@ var AIRTIME = (function(AIRTIME){ }); $node.append($div); } - + sSeparatorHTML = ''+aData.title+''; - + if (aData.rebroadcast === true) { sSeparatorHTML += ''+aData.rebroadcast_title+''; } - + sSeparatorHTML += ''; - + if (aData.startDate === aData.endDate) { sSeparatorHTML += ''+aData.startDate+''+aData.startTime+''; sSeparatorHTML +='-'+aData.endTime+''; @@ -565,18 +565,18 @@ var AIRTIME = (function(AIRTIME){ sSeparatorHTML += ''+aData.startDate+''+aData.startTime+''; sSeparatorHTML +='-'+aData.endDate+''+aData.endTime+''; } - + sSeparatorHTML += ''; - + fnPrepareSeparatorRow(sSeparatorHTML, cl, 1); } else if (aData.footer === true) { //remove the column classes from all tds. $nRow.find('td').removeClass(); - + $node = $(nRow.children[0]); cl = 'sb-footer'; - + //check the show's content status. if (aData.runtime >= 0) { $node.html(''); @@ -586,37 +586,37 @@ var AIRTIME = (function(AIRTIME){ $node.html(''); cl = cl + ' ui-state-error'; } - + sSeparatorHTML = ''+aData.fRuntime+''; fnPrepareSeparatorRow(sSeparatorHTML, cl, 1); } else if (aData.empty === true) { //remove the column classes from all tds. $nRow.find('td').removeClass(); - + $node = $(nRow.children[0]); if ($node) { $node.empty(); } - + sSeparatorHTML = ''+$.i18n._("Show Empty")+''; cl = cl + " sb-empty odd"; - + fnPrepareSeparatorRow(sSeparatorHTML, cl, 1); } else if (aData.record === true) { //remove the column classes from all tds. $nRow.find('td').removeClass(); - + $node = $(nRow.children[0]); $node.html(''); - + sSeparatorHTML = ''+$.i18n._("Recording From Line In")+''; cl = cl + " sb-record odd"; fnPrepareSeparatorRow(sSeparatorHTML, cl, 1); } else { - + //add the play function if the file exists on disk. $image = $nRow.find('td.sb-image'); $image.empty(); @@ -663,10 +663,10 @@ var AIRTIME = (function(AIRTIME){ $node.empty(); } } - + //add the show colour to the leftmost td if (aData.footer !== true) { - + if ($nRow.hasClass('sb-header')) { a = 1; } @@ -676,15 +676,15 @@ var AIRTIME = (function(AIRTIME){ else if ($nRow.hasClass('even')) { a = 0.4; } - + //convert from hex to rgb. r = parseInt((aData.backgroundColor).substring(0,2), 16); g = parseInt((aData.backgroundColor).substring(2,4), 16); b = parseInt((aData.backgroundColor).substring(4,6), 16); - + $nRow.find('td:first').css('background', 'rgba('+r+', '+g+', '+b+', '+a+')'); } - + //save some info for reordering purposes. $nRow.data({"aData": aData}); @@ -697,7 +697,7 @@ var AIRTIME = (function(AIRTIME){ else { $nRow.addClass("sb-future"); } - + if (aData.allowed !== true || aData.linked_allowed === false) { $nRow.addClass("sb-not-allowed"); } @@ -706,7 +706,7 @@ var AIRTIME = (function(AIRTIME){ $nRow.attr("id", aData.id); $nRow.attr("si_id", aData.instance); } - + //status used to colour tracks. if (aData.status === 2) { $nRow.addClass("sb-boundry"); @@ -714,22 +714,22 @@ var AIRTIME = (function(AIRTIME){ else if (aData.status === 0) { $nRow.addClass("sb-over"); } - + if (aData.currentShow === true) { $nRow.addClass("sb-current-show"); } - + //call the context menu so we can prevent the event from propagating. $nRow.find('td:gt(1)').click(function(e){ - + $(this).contextMenu({x: e.pageX, y: e.pageY}); - + return false; }); }, //remove any selected nodes before the draw. "fnPreDrawCallback": function( oSettings ) { - + //make sure any dragging helpers are removed or else they'll be stranded on the screen. $("#draggingContainer").remove(); }, @@ -756,7 +756,7 @@ var AIRTIME = (function(AIRTIME){ $tr, //use this array to cache DOM heights then we can detach the table to manipulate it to increase speed. heights = []; - + clearTimeout(mod.timeout); /* @@ -764,24 +764,24 @@ var AIRTIME = (function(AIRTIME){ if ($lib.length > 0 && $lib.filter(":visible").length > 0) { $cursorRows = $sbTable.find("tbody tr.sb-future.sb-allowed:not(.sb-header, .sb-empty)"); - + //need to get heights of tds while elements are still in the DOM. for (i = 0, length = $cursorRows.length; i < length; i++) { $td = $($cursorRows.get(i)).find("td:first"); heights.push($td.height()); } - + //detach the table to increase speed. $table.detach(); - + for (i = 0, length = $cursorRows.length; i < length; i++) { - + $td = $($cursorRows.get(i)).find("td:first"); if ($td.hasClass("dataTables_empty")) { $parent.append($table); return false; } - + wrapperDiv = $("
", { "class": "innerWrapper", "css": { @@ -791,11 +791,11 @@ var AIRTIME = (function(AIRTIME){ markerDiv = $("
", { "class": "marker" }); - + $td.append(markerDiv).wrapInner(wrapperDiv); - + } - + //re-highlight selected cursors before draw took place for (i = 0; i < cursorIds.length; i++) { if (headerFooter[i] == "f") { @@ -803,7 +803,7 @@ var AIRTIME = (function(AIRTIME){ } else { $tr = $table.find("tr[id="+cursorIds[i]+"][si_id="+showInstanceIds[i]+"]"); } - + //If the currently playing track's cursor is selected, //and that track is deleted, the cursor position becomes //unavailble. We have to check the position is available @@ -811,16 +811,16 @@ var AIRTIME = (function(AIRTIME){ // if ($tr.find(".sb-checkbox").children().hasClass("innerWrapper")) { mod.selectCursor($tr); - + // If the selected cursor is the footer row we need to //explicitly select it because that row does not have // innerWrapper class // } else if ($tr.hasClass("sb-footer")) { - mod.selectCursor($tr); + mod.selectCursor($tr); } } - + //if there is only 1 cursor on the page highlight it by default. if ($cursorRows.length === 1) { $td = $cursorRows.find("td:first"); @@ -828,7 +828,7 @@ var AIRTIME = (function(AIRTIME){ $cursorRows.addClass("cursor-selected-row"); } } - + $parent.append($table); } @@ -838,11 +838,11 @@ var AIRTIME = (function(AIRTIME){ $sbTable.find("tr."+NOW_PLAYING_CLASS), $sbTable.find("tbody").find("tr.sb-future.sb-footer, tr.sb-future.sb-header").filter(":first") ]; - + //check which element we should set a timeout relative to. for (i = 0, length = elements.length; i < length; i++) { temp = elements[i]; - + if (temp.length > 0) { aData = temp.data("aData"); // max time interval @@ -857,25 +857,25 @@ var AIRTIME = (function(AIRTIME){ } } - + mod.checkToolBarIcons(); }, - + // R = ColReorder, C = ColVis "sDom": 'R<"dt-process-rel"r><"sb-padded"<"H"C>><"dataTables_scrolling sb-padded"t>', - + "oColVis": { "aiExclude": [ 0, 1 ], "buttonText": $.i18n._("Show / hide columns"), }, - + "oColReorder": { "iFixedColumns": 2 }, - + "sAjaxDataProp": "schedule", "oLanguage": datatables_dict, - "sAjaxSource": baseUrl+"showbuilder/builder-feed" + "sAjaxSource": baseUrl+"showbuilder/builder-feed" }); $sbTable.find("tbody").on("click", "input:checkbox", function(ev) {