d4708
/
qBittorrent
mirror of https://github.com/d47081/qBittorrent.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Make torrents table scrollable horizontally

adaptive-webui-19844
buinsky 9 years ago
parent
afd4f89693
commit
7aadf644e0
5 changed files with 158 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 59
      src/webui/www/public/css/dynamicTable.css
  2. 16
      src/webui/www/public/css/style.css
  3. 10
      src/webui/www/public/properties_content.html
  4. 123
      src/webui/www/public/scripts/dynamicTable.js
  5. 25
      src/webui/www/public/transferlist.html

59
src/webui/www/public/css/dynamicTable.css
Unescape View File

@ -8,8 +8,7 @@
**************************************************************/ **************************************************************/
#properties #torrentFiles table, #properties #torrentFiles table,
#properties #trackers table, #properties #trackers table {
#transferList table {
border: 1px solid #ccc; border: 1px solid #ccc;
width: 100%; width: 100%;
} }
@ -78,18 +77,50 @@
vertical-align: middle; vertical-align: middle;
} }
#trackers th,
#trackers td,
#torrentFiles th,
#torrentFiles td,
#transferList th,
#transferList td {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 300px;
}
tr.dynamicTableHeader { tr.dynamicTableHeader {
cursor: pointer; cursor: pointer;
} }
.dynamicTable {
table-layout: fixed;
width :1%;
padding: 0;
border-spacing: 0;
}
.dynamicTable th {
padding: 5px 10px;
white-space: nowrap;
}
.dynamicTable td {
padding: 0px 3px;
white-space: nowrap;
}
.dynamicTable thead tr {
background-color: #eee;
}
.dynamicTable th,
.dynamicTable td {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 300px;
}
.dynamicTableFixedHeaderDiv {
overflow: hidden;
}
.dynamicTableDiv {
overflow: auto;
}
.dynamicTableDiv thead th {
line-height: 0px !important;
height: 0px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

16
src/webui/www/public/css/style.css
Unescape View File

@ -389,7 +389,7 @@ td.generalLabel {
margin-bottom: -3px; margin-bottom: -3px;
} }
.torrentTable { .unselectable {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -398,20 +398,6 @@ td.generalLabel {
user-select: none; user-select: none;
} }
.torrentTable th {
padding: 5px 10px;
white-space: nowrap;
}
.torrentTable td {
padding: 0px 3px;
white-space: nowrap;
}
.torrentTable thead tr {
background-color: #eee;
}
#prop_general { #prop_general {
padding: 2px; padding: 2px;
} }

10
src/webui/www/public/properties_content.html
Unescape View File

@ -49,7 +49,7 @@
<div id="prop_trackers" class="invisible"> <div id="prop_trackers" class="invisible">
<div id="trackers"> <div id="trackers">
<table class="torrentTable" cellpadding="0" cellspacing="0" style="width: 100%"> <table class="dynamicTable" style="width: 100%">
<thead> <thead>
<tr> <tr>
<th style="width: 30%;">QBT_TR(URL)QBT_TR <img src="theme/list-add" id="addTrackersPlus"/></th> <th style="width: 30%;">QBT_TR(URL)QBT_TR <img src="theme/list-add" id="addTrackersPlus"/></th>
@ -65,7 +65,7 @@
<div id="prop_peers" class="invisible"> <div id="prop_peers" class="invisible">
<div id="peers"> <div id="peers">
<table class="torrentTable" cellpadding="0" cellspacing="0" style="width: 100%"> <table class="dynamicTable" style="width: 100%">
<thead> <thead>
<tr id="torrentPeersTableHeader" class="dynamicTableHeader"> <tr id="torrentPeersTableHeader" class="dynamicTableHeader">
</tr> </tr>
@ -77,7 +77,7 @@
<div id="prop_webseeds" class="invisible"> <div id="prop_webseeds" class="invisible">
<div id="webseeds"> <div id="webseeds">
<table class="torrentTable" cellpadding="0" cellspacing="0" style="width: 100%"> <table class="dynamicTable" style="width: 100%">
<thead> <thead>
<tr> <tr>
<th>QBT_TR(URL)QBT_TR</th> <th>QBT_TR(URL)QBT_TR</th>
@ -90,7 +90,7 @@
<div id="prop_files" class="invisible"> <div id="prop_files" class="invisible">
<div id="torrentFiles"> <div id="torrentFiles">
<table class="torrentTable" cellpadding="0" cellspacing="0" style="width: 100%"> <table class="dynamicTable" style="width: 100%">
<thead> <thead>
<tr> <tr>
<th style="width: 30px; border-right: 0"><input type="checkbox" id="tristate_cb" style="display: none;" onclick="javascript:switchCBState()" /><label id="all_files_cb" class="tristate" for="tristate_cb"></label></th> <th style="width: 30px; border-right: 0"><input type="checkbox" id="tristate_cb" style="display: none;" onclick="javascript:switchCBState()" /><label id="all_files_cb" class="tristate" for="tristate_cb"></label></th>
@ -106,6 +106,6 @@
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
torrentPeersTable.setup('torrentPeersTable', 'torrentPeersTableHeader', null); //torrentPeersTable.setup('torrentPeersTable', 'torrentPeersTableHeader', null);
$(getLocalStorageItem('selected_tab', 'PropGeneralLink')).click(); $(getLocalStorageItem('selected_tab', 'PropGeneralLink')).click();
</script> </script>

123
src/webui/www/public/scripts/dynamicTable.js
Unescape View File

@ -35,19 +35,65 @@ var DynamicTable = new Class({
initialize : function () {}, initialize : function () {},
setup : function (tableId, tableHeaderId, contextMenu) { setup : function (dynamicTableDivId, dynamicTableFixedHeaderDivId, contextMenu) {
this.tableId = tableId; this.dynamicTableDivId = dynamicTableDivId;
this.tableHeaderId = tableHeaderId; this.dynamicTableFixedHeaderDivId = dynamicTableFixedHeaderDivId;
this.table = $(tableId); this.fixedTableHeader = $(dynamicTableFixedHeaderDivId).getElements('tr')[0];
this.hiddenTableHeader = $(dynamicTableDivId).getElements('tr')[0];
this.tableBody = $(dynamicTableDivId).getElements('tbody')[0];
this.rows = new Hash(); this.rows = new Hash();
this.selectedRows = new Array(); this.selectedRows = new Array();
this.columns = new Array(); this.columns = new Array();
this.contextMenu = contextMenu; this.contextMenu = contextMenu;
this.sortedColumn = getLocalStorageItem('sorted_column_' + this.tableId, 0); this.sortedColumn = getLocalStorageItem('sorted_column_' + this.dynamicTableDivId, 0);
this.reverseSort = getLocalStorageItem('reverse_sort_' + this.tableId, '0'); this.reverseSort = getLocalStorageItem('reverse_sort_' + this.dynamicTableDivId, '0');
this.initColumns(); this.initColumns();
this.loadColumnsOrder(); this.loadColumnsOrder();
this.updateHeader(); this.updateTableHeaders();
this.setupEvents();
},
setupEvents : function () {
var scrollFn = function() {
$(this.dynamicTableFixedHeaderDivId).getElements('table')[0].style.left =
-$(this.dynamicTableDivId).scrollLeft + 'px';
}.bind(this);
$(this.dynamicTableDivId).addEvent('scroll', scrollFn);
var resizeFn = function() {
var panel = $(this.dynamicTableDivId).getParent('.panel');
var h = panel.getBoundingClientRect().height - $(this.dynamicTableFixedHeaderDivId).getBoundingClientRect().height;
$(this.dynamicTableDivId).style.height = h + 'px';
// Workaround due to inaccurate calculation of elements heights by browser
var n = 2;
while (panel.clientWidth != panel.offsetWidth && n > 0) { // is panel vertical scrollbar visible ?
n--;
h -= 0.5;
$(this.dynamicTableDivId).style.height = h + 'px';
}
this.lastPanelHeight = panel.getBoundingClientRect().height;
}.bind(this);
$(this.dynamicTableDivId).getParent('.panel').addEvent('resize', resizeFn);
this.lastPanelHeight = 0;
// Workaround. Resize event is called not always (for example it isn't called when browser window changes it's size)
var checkResizeFn = function() {
var panel = $(this.dynamicTableDivId).getParent('.panel');
if (this.lastPanelHeight != panel.getBoundingClientRect().height) {
this.lastPanelHeight = panel.getBoundingClientRect().height;
panel.fireEvent('resize');
}
}.bind(this);
setInterval(checkResizeFn, 500);
}, },
initColumns : function () {}, initColumns : function () {},
@ -55,7 +101,7 @@ var DynamicTable = new Class({
newColumn : function (name, style, caption) { newColumn : function (name, style, caption) {
var column = {}; var column = {};
column['name'] = name; column['name'] = name;
column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.tableId, '1'); column['visible'] = getLocalStorageItem('column_' + name + '_visible_' + this.dynamicTableDivId, '1');
column['force_hide'] = false; column['force_hide'] = false;
column['caption'] = caption; column['caption'] = caption;
column['style'] = style; column['style'] = style;
@ -79,12 +125,13 @@ var DynamicTable = new Class({
this.columns.push(column); this.columns.push(column);
this.columns[name] = column; this.columns[name] = column;
$(this.tableHeaderId).appendChild(new Element('th')); this.hiddenTableHeader.appendChild(new Element('th'));
this.fixedTableHeader.appendChild(new Element('th'));
}, },
loadColumnsOrder : function () { loadColumnsOrder : function () {
columnsOrder = ['state_icon']; // status icon column is always the first columnsOrder = ['state_icon']; // status icon column is always the first
val = localStorage.getItem('columns_order_' + this.tableId); val = localStorage.getItem('columns_order_' + this.dynamicTableDivId);
if (val === null || val === undefined) return; if (val === null || val === undefined) return;
val.split(',').forEach(function(v) { val.split(',').forEach(function(v) {
if ((v in this.columns) && (!columnsOrder.contains(v))) if ((v in this.columns) && (!columnsOrder.contains(v)))
@ -106,11 +153,16 @@ var DynamicTable = new Class({
val += ','; val += ',';
val += this.columns[i].name; val += this.columns[i].name;
} }
localStorage.setItem('columns_order_' + this.tableId, val); localStorage.setItem('columns_order_' + this.dynamicTableDivId, val);
},
updateTableHeaders : function () {
this.updateHeader(this.hiddenTableHeader);
this.updateHeader(this.fixedTableHeader);
}, },
updateHeader : function () { updateHeader : function (header) {
var ths = $(this.tableHeaderId).getElements('th'); var ths = header.getElements('th');
for (var i = 0; i < ths.length; i++) { for (var i = 0; i < ths.length; i++) {
th = ths[i]; th = ths[i];
@ -135,17 +187,22 @@ var DynamicTable = new Class({
updateColumn : function (columnName) { updateColumn : function (columnName) {
var pos = this.getColumnPos(columnName); var pos = this.getColumnPos(columnName);
var visible = ((this.columns[pos].visible != '0') && !this.columns[pos].force_hide); var visible = ((this.columns[pos].visible != '0') && !this.columns[pos].force_hide);
var ths = $(this.tableHeaderId).getElements('th'); var ths = this.hiddenTableHeader.getElements('th');
if (visible) var fths = this.fixedTableHeader.getElements('th');
var trs = this.tableBody.getElements('tr');
if (visible) {
ths[pos].removeClass('invisible'); ths[pos].removeClass('invisible');
else fths[pos].removeClass('invisible');
ths[pos].addClass('invisible'); for (var i = 0; i < trs.length; i++)
var trs = this.table.getElements('tr');
for (var i = 0; i < trs.length; i++)
if (visible)
trs[i].getElements('td')[pos].removeClass('invisible'); trs[i].getElements('td')[pos].removeClass('invisible');
else }
else {
ths[pos].addClass('invisible');
fths[pos].addClass('invisible');
for (var i = 0; i < trs.length; i++)
trs[i].getElements('td')[pos].addClass('invisible'); trs[i].getElements('td')[pos].addClass('invisible');
}
}, },
setSortedColumn : function (column) { setSortedColumn : function (column) {
@ -157,8 +214,8 @@ var DynamicTable = new Class({
// Toggle sort order // Toggle sort order
this.reverseSort = this.reverseSort == '0' ? '1' : '0'; this.reverseSort = this.reverseSort == '0' ? '1' : '0';
} }
localStorage.setItem('sorted_column_' + this.tableId, column); localStorage.setItem('sorted_column_' + this.dynamicTableDivId, column);
localStorage.setItem('reverse_sort_' + this.tableId, this.reverseSort); localStorage.setItem('reverse_sort_' + this.dynamicTableDivId, this.reverseSort);
this.updateTable(false); this.updateTable(false);
}, },
@ -172,7 +229,7 @@ var DynamicTable = new Class({
if (!MUI.ieLegacySupport) if (!MUI.ieLegacySupport)
return; return;
var trs = this.table.getElements('tr'); var trs = this.tableBody.getElements('tr');
trs.each(function (el, i) { trs.each(function (el, i) {
if (i % 2) { if (i % 2) {
el.addClass('alt'); el.addClass('alt');
@ -185,7 +242,7 @@ var DynamicTable = new Class({
selectAll : function () { selectAll : function () {
this.selectedRows.empty(); this.selectedRows.empty();
var trs = this.table.getElements('tr'); var trs = this.tableBody.getElements('tr');
for (var i = 0; i < trs.length; i++) { for (var i = 0; i < trs.length; i++) {
var tr = trs[i]; var tr = trs[i];
this.selectedRows.push(tr.rowId); this.selectedRows.push(tr.rowId);
@ -201,7 +258,7 @@ var DynamicTable = new Class({
selectRow : function (rowId) { selectRow : function (rowId) {
this.selectedRows.empty(); this.selectedRows.empty();
this.selectedRows.push(rowId); this.selectedRows.push(rowId);
var trs = this.table.getElements('tr'); var trs = this.tableBody.getElements('tr');
for (var i = 0; i < trs.length; i++) { for (var i = 0; i < trs.length; i++) {
var tr = trs[i]; var tr = trs[i];
if (tr.rowId == rowId) { if (tr.rowId == rowId) {
@ -259,7 +316,7 @@ var DynamicTable = new Class({
}, },
getTrByRowId : function (rowId) { getTrByRowId : function (rowId) {
trs = this.table.getElements('tr'); trs = this.tableBody.getElements('tr');
for (var i = 0; i < trs.length; i++) for (var i = 0; i < trs.length; i++)
if (trs[i].rowId == rowId) if (trs[i].rowId == rowId)
return trs[i]; return trs[i];
@ -278,7 +335,7 @@ var DynamicTable = new Class({
i--; i--;
} }
var trs = this.table.getElements('tr'); var trs = this.tableBody.getElements('tr');
for (var rowPos = 0; rowPos < rows.length; rowPos++) { for (var rowPos = 0; rowPos < rows.length; rowPos++) {
var rowId = rows[rowPos]['rowId']; var rowId = rows[rowPos]['rowId'];
@ -330,7 +387,7 @@ var DynamicTable = new Class({
var first_row_id = this._this.selectedRows[0]; var first_row_id = this._this.selectedRows[0];
var last_row_id = this.rowId; var last_row_id = this.rowId;
this._this.selectedRows.empty(); this._this.selectedRows.empty();
var trs = this._this.table.getElements('tr'); var trs = this._this.tableBody.getElements('tr');
var select = false; var select = false;
for (var i = 0; i < trs.length; i++) { for (var i = 0; i < trs.length; i++) {
var tr = trs[i]; var tr = trs[i];
@ -368,7 +425,7 @@ var DynamicTable = new Class({
// Insert // Insert
if (rowPos >= trs.length) { if (rowPos >= trs.length) {
tr.inject(this.table); tr.inject(this.tableBody);
trs.push(tr); trs.push(tr);
} }
else { else {
@ -420,7 +477,7 @@ var DynamicTable = new Class({
clear : function () { clear : function () {
this.selectedRows.empty(); this.selectedRows.empty();
this.rows.empty(); this.rows.empty();
var trs = this.table.getElements('tr'); var trs = this.tableBody.getElements('tr');
while (trs.length > 0) { while (trs.length > 0) {
trs[trs.length - 1].dispose(); trs[trs.length - 1].dispose();
trs.pop(); trs.pop();
@ -442,7 +499,7 @@ var TorrentsTable = new Class({
initColumns : function () { initColumns : function () {
this.newColumn('priority', 'width: 30px', '#'); this.newColumn('priority', 'width: 30px', '#');
this.newColumn('state_icon', 'width: 16px; cursor: default', ''); this.newColumn('state_icon', 'width: 16px; cursor: default', '');
this.newColumn('name', 'min-width: 200px', 'QBT_TR(Name)QBT_TR'); this.newColumn('name', 'width: 200px', 'QBT_TR(Name)QBT_TR');
this.newColumn('size', 'width: 100px', 'QBT_TR(Size)QBT_TR'); this.newColumn('size', 'width: 100px', 'QBT_TR(Size)QBT_TR');
this.newColumn('progress', 'width: 80px', 'QBT_TR(Done)QBT_TR'); this.newColumn('progress', 'width: 80px', 'QBT_TR(Done)QBT_TR');
this.newColumn('num_seeds', 'width: 100px', 'QBT_TR(Seeds)QBT_TR'); this.newColumn('num_seeds', 'width: 100px', 'QBT_TR(Seeds)QBT_TR');
@ -763,7 +820,7 @@ var TorrentPeersTable = new Class({
this.newColumn('uploaded', 'width: 30px', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]'); this.newColumn('uploaded', 'width: 30px', 'QBT_TR(Uploaded)QBT_TR[CONTEXT=PeerListWidget]');
this.newColumn('connection', 'width: 30px', 'QBT_TR(Connection)QBT_TR'); this.newColumn('connection', 'width: 30px', 'QBT_TR(Connection)QBT_TR');
this.newColumn('flags', 'width: 30px', 'QBT_TR(Flags)QBT_TR'); this.newColumn('flags', 'width: 30px', 'QBT_TR(Flags)QBT_TR');
this.newColumn('relevance', 'min-width: 30px', 'QBT_TR(Relevance)QBT_TR'); this.newColumn('relevance', 'width: 30px', 'QBT_TR(Relevance)QBT_TR');
this.columns['country'].dataProperties.push('country_code'); this.columns['country'].dataProperties.push('country_code');
this.columns['flags'].dataProperties.push('flags_desc'); this.columns['flags'].dataProperties.push('flags_desc');

25
src/webui/www/public/transferlist.html
Unescape View File

@ -1,10 +1,19 @@
<table class="torrentTable" cellpadding="0" cellspacing="0"> <div id="torrentsTableFixedHeaderDiv" class="dynamicTableFixedHeaderDiv">
<thead> <table class="dynamicTable unselectable" style="position:relative;">
<tr id="torrentsTableHeader" class="dynamicTableHeader"> <thead>
</tr> <tr class="dynamicTableHeader"></tr>
</thead> </thead>
<tbody id="torrentsTable"></tbody> </table>
</table> </div>
<div id="torrentsTableDiv" class="dynamicTableDiv">
<table class="dynamicTable unselectable">
<thead>
<tr class="dynamicTableHeader"></tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript"> <script type="text/javascript">
@ -62,5 +71,5 @@
} }
}); });
torrentsTable.setup('torrentsTable', 'torrentsTableHeader', torrentsTableContextMenu); torrentsTable.setup('torrentsTableDiv', 'torrentsTableFixedHeaderDiv', torrentsTableContextMenu);
</script> </script>

Write Preview
Loading…
Cancel
Save