SAAS-999 - Change Advanced Search Options to dropdown
This commit is contained in:
Duncan Sommerville
parent
f138dc6b47
commit
4200f56265
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<legend style="cursor: pointer;">
|
||||
<span class="ui-icon ui-icon-triangle-2-n-s"></span>
|
||||
<?php echo _("Advanced Search Options") ?>
|
||||
</legend>
|
||||
<div id="advanced_search" class="advanced_search form-horizontal"></div>
|
||||
</fieldset>
|
||||
<!-- <fieldset class="toggle closed" id="filter_options">-->
|
||||
<!-- <legend style="cursor: pointer;">-->
|
||||
<!-- <span class="ui-icon ui-icon-triangle-2-n-s"></span>-->
|
||||
<!-- --><?php //echo _("Advanced Search Options") ?>
|
||||
<!-- </legend>-->
|
||||
<!-- </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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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') ||
|
||||
$(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 = " <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')) {
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue