Frontend tweaks

This commit is contained in:
Duncan Sommerville 2015-09-21 15:37:57 -04:00
parent 77a53491b0
commit 4115f4939e
5 changed files with 43 additions and 29 deletions

View file

@ -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>

View file

@ -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 {

View file

@ -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;

View file

@ -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%;
}

View file

@ -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') {