Frontend tweaks
This commit is contained in:
parent
77a53491b0
commit
4115f4939e
5 changed files with 43 additions and 29 deletions
|
@ -4,6 +4,7 @@
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="inner_editor_wrapper">
|
<div class="inner_editor_wrapper">
|
||||||
|
<form class="podcast-metadata">
|
||||||
<input ng-value="podcast.id" class="obj_id" type="hidden"/>
|
<input ng-value="podcast.id" class="obj_id" type="hidden"/>
|
||||||
<label>
|
<label>
|
||||||
<?php echo _("Podcast Name") ?>
|
<?php echo _("Podcast Name") ?>
|
||||||
|
@ -13,6 +14,7 @@
|
||||||
<?php echo _("Podcast URL") ?>
|
<?php echo _("Podcast URL") ?>
|
||||||
<input disabled ng-model="podcast.url" type="text"/>
|
<input disabled ng-model="podcast.url" type="text"/>
|
||||||
</label>
|
</label>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="podcast_episodes" class="datatable" cellpadding="0" cellspacing="0"></table>
|
<table id="podcast_episodes" class="datatable" cellpadding="0" cellspacing="0"></table>
|
||||||
|
|
|
@ -86,14 +86,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#library_content .dataTables_filter input[type="text"], #library_content .dataTables_filter select {
|
#library_content .dataTables_filter input[type="text"], #library_content .dataTables_filter select {
|
||||||
height: 26px;
|
|
||||||
/*margin: 0;*/
|
/*margin: 0;*/
|
||||||
/* Quick fix, kind of ugly */
|
/* Quick fix, kind of ugly */
|
||||||
margin: -30px 0 0;
|
margin: -30px 0 0;
|
||||||
border: 0;
|
/*border: 0;*/
|
||||||
float: left;
|
/*float: left;*/
|
||||||
position: absolute;
|
/*position: absolute;*/
|
||||||
width: 100%;
|
/*width: 100%;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
#library_content label {
|
#library_content label {
|
||||||
|
|
|
@ -200,8 +200,12 @@ tr.lib-selected > td > div.library_actions_btn:hover {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
/*width:60%;*/
|
||||||
height: 26px;
|
height: 26px;
|
||||||
width:60%;
|
border: 0;
|
||||||
|
float: left;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.dataTables_filter label {
|
.dataTables_filter label {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
|
|
|
@ -3934,3 +3934,7 @@ li .ui-state-hover {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.podcast-metadata input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -9,19 +9,24 @@ var AIRTIME = (function(AIRTIME) {
|
||||||
AIRTIME.widgets = {};
|
AIRTIME.widgets = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
var HUGE_INT = Math.pow(2, 53) - 1;
|
|
||||||
|
|
||||||
//Table widget constructor
|
//Table widget constructor
|
||||||
var Table = function(wrapperDOMNode, bItemSelection, toolbarButtons, dataTablesOptions) {
|
var Table = function(wrapperDOMNode, bItemSelection, toolbarButtons, dataTablesOptions) {
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
self.HUGE_INT = Math.pow(2, 53) - 1;
|
||||||
|
|
||||||
//Constants and enumerations
|
//Constants and enumerations
|
||||||
self.SELECTION_MODE = {
|
self.SELECTION_MODE = {
|
||||||
SINGLE : 0,
|
SINGLE : 0,
|
||||||
MULTI_SHIFT : 1,
|
MULTI_SHIFT : 1,
|
||||||
MULTI_CTRL : 2
|
MULTI_CTRL : 2
|
||||||
}
|
};
|
||||||
|
|
||||||
|
// Internal enum for repeated jQuery selectors
|
||||||
|
self._SELECTORS = Object.freeze({
|
||||||
|
SELECTION_CHECKBOX: ".airtime_table_checkbox"
|
||||||
|
});
|
||||||
|
|
||||||
//Member variables
|
//Member variables
|
||||||
self._datatable = null;
|
self._datatable = null;
|
||||||
|
@ -44,7 +49,7 @@ var AIRTIME = (function(AIRTIME) {
|
||||||
// If selection is enabled, add in the checkbox column.
|
// If selection is enabled, add in the checkbox column.
|
||||||
if (bItemSelection) {
|
if (bItemSelection) {
|
||||||
dataTablesOptions["aoColumns"].unshift(
|
dataTablesOptions["aoColumns"].unshift(
|
||||||
/* Checkbox */ { "sTitle" : "", "mData" : self._datatablesCheckboxDataDelegate, "bSortable" : false , "bSearchable" : false , "sWidth" : "16px" , "sClass" : "library_checkbox" }
|
/* Checkbox */ { "sTitle" : "", "mData" : self._datatablesCheckboxDataDelegate, "bSortable" : false , "bSearchable" : false , "sWidth" : "16px" , "sClass" : "airtime_table_checkbox" }
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -127,16 +132,16 @@ var AIRTIME = (function(AIRTIME) {
|
||||||
self.selectRow(nRow, aData, selectionMode, iDisplayIndex);
|
self.selectRow(nRow, aData, selectionMode, iDisplayIndex);
|
||||||
});
|
});
|
||||||
|
|
||||||
$(self._datatable, 'tbody tr').on('click', 'input.airtime_table_checkbox', function(e) {
|
$(self._datatable, 'tbody tr').on('click', self._SELECTORS.SELECTION_CHECKBOX, function(e) {
|
||||||
$this = $(this);
|
$this = $(this);
|
||||||
|
|
||||||
var iVisualRowIdx = $this.parent().parent().index();
|
var iVisualRowIdx = $this.parent().index();
|
||||||
var aData = self._datatable.fnGetData(iVisualRowIdx);
|
var aData = self._datatable.fnGetData(iVisualRowIdx);
|
||||||
var selectionMode = self.SELECTION_MODE.MULTI_CTRL; //Behaviour for checkboxes.
|
var selectionMode = self.SELECTION_MODE.MULTI_CTRL; //Behaviour for checkboxes.
|
||||||
if (e.shiftKey) {
|
if (e.shiftKey) {
|
||||||
selectionMode = self.SELECTION_MODE.MULTI_SHIFT;
|
selectionMode = self.SELECTION_MODE.MULTI_SHIFT;
|
||||||
}
|
}
|
||||||
self.selectRow($this.parent().parent(), aData, selectionMode, iVisualRowIdx); //Always multiselect for checkboxes
|
self.selectRow($this.parent(), aData, selectionMode, iVisualRowIdx); //Always multiselect for checkboxes
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
@ -214,7 +219,7 @@ var AIRTIME = (function(AIRTIME) {
|
||||||
this._selectedRowVisualIdxMin = self.HUGE_INT;
|
this._selectedRowVisualIdxMin = self.HUGE_INT;
|
||||||
this._selectedRowVisualIdxMax = -1;
|
this._selectedRowVisualIdxMax = -1;
|
||||||
this._$wrapperDOMNode.find('.selected').removeClass('selected');
|
this._$wrapperDOMNode.find('.selected').removeClass('selected');
|
||||||
this._$wrapperDOMNode.find('input.airtime_table_checkbox').attr('checked', false);
|
this._$wrapperDOMNode.find(this._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', false);
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @param nRow is a tr DOM node (non-jQuery)
|
/** @param nRow is a tr DOM node (non-jQuery)
|
||||||
|
@ -245,12 +250,12 @@ var AIRTIME = (function(AIRTIME) {
|
||||||
//self._selectedRowVisualIdxMap[iVisualRowIdx] = aData;
|
//self._selectedRowVisualIdxMap[iVisualRowIdx] = aData;
|
||||||
|
|
||||||
$nRow.addClass('selected');
|
$nRow.addClass('selected');
|
||||||
$nRow.find('input.airtime_table_checkbox').attr('checked', true);
|
$nRow.find(self._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', true);
|
||||||
}
|
}
|
||||||
//Ctrl-click multi row selection mode
|
//Ctrl-click multi row selection mode
|
||||||
else if (selectionMode == self.SELECTION_MODE.MULTI_CTRL) {
|
else if (selectionMode == self.SELECTION_MODE.MULTI_CTRL) {
|
||||||
|
|
||||||
var foundAtIdx = $.inArray(aData, self._selectedRows)
|
var foundAtIdx = $.inArray(aData, self._selectedRows);
|
||||||
|
|
||||||
console.log('checkbox mouse', iVisualRowIdx, foundAtIdx);
|
console.log('checkbox mouse', iVisualRowIdx, foundAtIdx);
|
||||||
//XXX: Debugging -- Bug here-ish
|
//XXX: Debugging -- Bug here-ish
|
||||||
|
@ -264,7 +269,7 @@ var AIRTIME = (function(AIRTIME) {
|
||||||
if (foundAtIdx >= 0 && self._selectedRows.length >= 1) {
|
if (foundAtIdx >= 0 && self._selectedRows.length >= 1) {
|
||||||
self._selectedRows.splice(foundAtIdx, 1);
|
self._selectedRows.splice(foundAtIdx, 1);
|
||||||
$nRow.removeClass('selected');
|
$nRow.removeClass('selected');
|
||||||
$nRow.find('input.airtime_table_checkbox').attr('checked', false);
|
$nRow.find(self._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', false);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
self._selectedRows.push(aData);
|
self._selectedRows.push(aData);
|
||||||
|
@ -273,7 +278,7 @@ var AIRTIME = (function(AIRTIME) {
|
||||||
self._selectedRowVisualIdxMax = iVisualRowIdx;
|
self._selectedRowVisualIdxMax = iVisualRowIdx;
|
||||||
|
|
||||||
$nRow.addClass('selected');
|
$nRow.addClass('selected');
|
||||||
$nRow.find('input.airtime_table_checkbox').attr('checked', true);
|
$nRow.find(self._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//Shift-click multi row selection mode
|
//Shift-click multi row selection mode
|
||||||
|
@ -304,7 +309,7 @@ var AIRTIME = (function(AIRTIME) {
|
||||||
self._selectedRows.push(allRows[i]);
|
self._selectedRows.push(allRows[i]);
|
||||||
$row = $($nRow.parent().children()[i]);
|
$row = $($nRow.parent().children()[i]);
|
||||||
$row.addClass('selected');
|
$row.addClass('selected');
|
||||||
$row.find('input.airtime_table_checkbox').attr('checked', true);
|
$row.find(self._SELECTORS.SELECTION_CHECKBOX).find('input').attr('checked', true);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -396,7 +401,7 @@ var AIRTIME = (function(AIRTIME) {
|
||||||
//Supposed to return the raw data for the type here.
|
//Supposed to return the raw data for the type here.
|
||||||
return null;
|
return null;
|
||||||
} else if (callType == 'display') {
|
} else if (callType == 'display') {
|
||||||
return "<input type='checkbox' class='airtime_table_checkbox'>";
|
return "<input type='checkbox'>";
|
||||||
} else if (callType == 'sort') {
|
} else if (callType == 'sort') {
|
||||||
return null;
|
return null;
|
||||||
} else if (callType == 'type') {
|
} else if (callType == 'type') {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue