Skip to content
This repository has been archived by the owner on Nov 18, 2022. It is now read-only.

Commit

Permalink
#346: improved hover effect
Browse files Browse the repository at this point in the history 
Increased clickable area and made the carets (triangles) clickable too.
  • Loading branch information
@hugbug
hugbug committed Mar 11, 2017
1 parent 88b5e16 commit 75ec856
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 80 deletions.
58 changes: 30 additions & 28 deletions webui/downloads.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,9 @@ var Downloads = (new function($)
});

$DownloadsTable.on('click', 'a', itemClick);
$DownloadsTable.on('click', 'td:nth-child(2) div', priorityClick);
$DownloadsTable.on('click', 'td:nth-child(3) span', statusClick);
$DownloadsTable.on('click', 'td:nth-child(5) span', categoryClick);
$DownloadsTable.on('click', 'td:nth-child(2).dropdown-cell > div:not(.dropdown-disabled)', priorityClick);
$DownloadsTable.on('click', 'td:nth-child(3).dropdown-cell > div', statusClick);
$DownloadsTable.on('click', 'td:nth-child(5).dropdown-cell > div:not(.dropdown-disabled)', categoryClick);
$PriorityMenu.on('click', 'a', priorityMenuClick);
$CategoryMenu.on('click', 'a', categoryMenuClick);

Expand Down Expand Up @@ -246,11 +246,14 @@ var Downloads = (new function($)
'">health: ' + Math.floor(group.Health / 10) + '%</span> ';
}

var category = DownloadsUI.buildCategory(group);
var category = group.Category !== '' ? Util.textToHtml(group.Category) : '<span class="none-category">None</span>';
var backup = DownloadsUI.buildBackupLabel(group);

if (!UISettings.miniTheme)
{
priority = '<div data-nzbid="' + group.NZBID + '"' + (group.postprocess ? ' class="dropdown-disabled"' : '') + '>' + priority + '</div>';
status = '<div data-nzbid="' + group.NZBID + '">' + status + '</div>';
category = '<div data-nzbid="' + group.NZBID + '"' + (group.postprocess ? ' class="dropdown-disabled"' : '') + '>' + category + '</div>';
var info = name + ' ' + url + dupe + health + backup + propagation + progresslabel;
item.fields = ['<div class="check img-check"></div>', priority, status, info, category, item.data.age, progress, item.data.estimated];
}
Expand All @@ -274,11 +277,23 @@ var Downloads = (new function($)

function renderCellCallback(cell, index, item)
{
if (index == 1)
if (index === 1)
{
cell.className = 'text-center';
cell.className = 'priority-cell' + (!UISettings.miniTheme ? ' dropdown-cell' : '');
}
else if (5 <= index && index <= 8)
else if (index === 2 || index === 4)
{
cell.className = !UISettings.miniTheme ? 'dropdown-cell dropafter-cell' : '';
}
else if (index === 3)
{
cell.className = !UISettings.miniTheme ? 'dropafter-cell' : '';
}
else if (index === 5)
{
cell.className = 'text-right' + (!UISettings.miniTheme ? ' dropafter-cell' : '');
}
else if (6 <= index && index <= 8)
{
cell.className = 'text-right';
}
Expand Down Expand Up @@ -606,10 +621,9 @@ var Downloads = (new function($)
DownloadsUI.updateContextWarning($PriorityMenu, editIds);
$('i', $PriorityMenu).removeClass('icon-ok').addClass('icon-empty');
$('li[data=' + group.MaxPriority + '] i', $PriorityMenu).addClass('icon-ok');

Frontend.showPopupMenu($PriorityMenu, 'left',
{ left: $(this).offset().left - 30, top: $(this).offset().top - 3,
width: $(this).width() + 30, height: $(this).height() + 5 });
{ left: $(this).offset().left - 30, top: $(this).offset().top,
width: $(this).width() + 30, height: $(this).outerHeight() - 2});
}

function priorityMenuClick(e)
Expand All @@ -628,8 +642,8 @@ var Downloads = (new function($)
var group = findGroup($(this).attr('data-nzbid'));

DownloadsActionsMenu.showPopupMenu(group, 'left',
{ left: $(this).offset().left - 30, top: $(this).offset().top - 2,
width: $(this).width() + 30, height: $(this).height() + 5 },
{ left: $(this).offset().left - 30, top: $(this).offset().top,
width: $(this).width() + 30, height: $(this).outerHeight() - 2 },
function(_notification) { notification = _notification; },
editCompleted);
}
Expand All @@ -653,8 +667,8 @@ var Downloads = (new function($)
$('li[data="' + group.Category + '"] i', $CategoryMenu).addClass('icon-ok');

Frontend.showPopupMenu($CategoryMenu, 'left',
{ left: $(this).offset().left - 30, top: $(this).offset().top - 1,
width: $(this).width() + 30, height: $(this).height() + 4 });
{ left: $(this).offset().left - 30, top: $(this).offset().top,
width: $(this).width() + 30, height: $(this).outerHeight() - 2 });
}

function categoryMenuClick(e)
Expand Down Expand Up @@ -752,17 +766,7 @@ var DownloadsUI = (new function($)
badgeClass = 'label-important';
}

return '<span data-nzbid="' + group.NZBID + '" class="dropdown-context label label-status ' + badgeClass + '">' + statusText + '</span>';
}

this.buildCategory = function(group)
{
var category = '<span class="' + (group.postprocess ? '' : 'dropdown-context ') +
'dropdown-category'+
(group.Category === '' ? ' empty-item hover-only' : '') +
'" data-nzbid="' + group.NZBID + '">' +
Util.textToHtml(group.Category !== '' ? group.Category : '<None>') + '</span>';
return category;
return '<span class="label label-status ' + badgeClass + '">' + statusText + '</span>';
}

this.buildProgress = function(group, totalsize, remaining, estimated)
Expand Down Expand Up @@ -897,8 +901,6 @@ var DownloadsUI = (new function($)
text = text.replace('priority', 'priority (' + priority + ')');
}

text = text.replace('" title', ' dropdown-context dropdown-priority" data-nzbid="' + group.NZBID + '" title');

return text;
}

Expand Down Expand Up @@ -1048,7 +1050,7 @@ var DownloadsUI = (new function($)

widthHelper.remove();

categoryColumnWidth = (categoryColumnWidth + 3) + 'px';
categoryColumnWidth = (categoryColumnWidth + 8) + 'px';
}

return categoryColumnWidth;
Expand Down
34 changes: 23 additions & 11 deletions webui/history.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ var History = (new function($)
});

$HistoryTable.on('click', 'a', editClick);
$HistoryTable.on('click', 'td:nth-child(5) span', categoryClick);
$HistoryTable.on('click', 'td:nth-child(2) span', statusClick);
$HistoryTable.on('click', 'td:nth-child(2).dropdown-cell > div', statusClick);
$HistoryTable.on('click', 'td:nth-child(5).dropdown-cell > div:not(.dropdown-disabled)', categoryClick);
$CategoryMenu.on('click', 'a', categoryMenuClick);

HistoryActionsMenu.init();
Expand Down Expand Up @@ -196,7 +196,9 @@ var History = (new function($)
name += DownloadsUI.buildEncryptedLabel(hist.Kind === 'NZB' ? hist.Parameters : []);

var dupe = DownloadsUI.buildDupe(hist.DupeKey, hist.DupeScore, hist.DupeMode);
var category = hist.Kind !== 'DUP' ? DownloadsUI.buildCategory(hist) : '';
var category = hist.Kind !== 'DUP' ?
(hist.Category !== '' ? Util.textToHtml(hist.Category) : '<span class="none-category">None</span>')
: '';
var backup = hist.Kind === 'NZB' ? DownloadsUI.buildBackupLabel(hist) : '';

if (hist.Kind === 'URL')
Expand All @@ -210,6 +212,8 @@ var History = (new function($)

if (!UISettings.miniTheme)
{
status = '<div data-nzbid="' + hist.NZBID + '">' + status + '</div>';
category = '<div data-nzbid="' + hist.NZBID + '"' + (hist.Kind === 'DUP' ? ' class="dropdown-disabled"' : '') + '>' + category + '</div>';
item.fields = ['<div class="check img-check"></div>', status, item.data.time, name + dupe + backup, category, item.data.age, item.data.size];
}
else
Expand All @@ -230,11 +234,19 @@ var History = (new function($)

function renderCellCallback(cell, index, item)
{
if (index === 2)
if (index === 1 || index === 4)
{
cell.className = 'text-center';
cell.className = !UISettings.miniTheme ? 'dropdown-cell' : '';
}
else if (index === 5 || index === 6)
else if (index === 2)
{
cell.className = 'text-center' + (!UISettings.miniTheme ? ' dropafter-cell' : '');
}
else if (index === 5)
{
cell.className = 'text-right' + (!UISettings.miniTheme ? ' dropafter-cell' : '');
}
else if (index === 6)
{
cell.className = 'text-right';
}
Expand Down Expand Up @@ -419,8 +431,8 @@ var History = (new function($)
var hist = findHist($(this).attr('data-nzbid'));

HistoryActionsMenu.showPopupMenu(hist, 'left',
{ left: $(this).offset().left - 30, top: $(this).offset().top - 2,
width: $(this).width() + 30, height: $(this).height() + 5 },
{ left: $(this).offset().left - 30, top: $(this).offset().top,
width: $(this).width() + 30, height: $(this).outerHeight() - 2 },
function(_notification) { notification = _notification; },
editCompleted);
}
Expand All @@ -439,8 +451,8 @@ var History = (new function($)
$('li[data="' + hist.Category + '"] i', $CategoryMenu).addClass('icon-ok');

Frontend.showPopupMenu($CategoryMenu, 'bottom-left',
{ left: $(this).offset().left - 30, top: $(this).offset().top - 1,
width: $(this).width() + 30, height: $(this).height() + 4 });
{ left: $(this).offset().left - 30, top: $(this).offset().top,
width: $(this).width() + 30, height: $(this).outerHeight() - 2 });
}

function categoryMenuClick(e)
Expand Down Expand Up @@ -571,7 +583,7 @@ var HistoryUI = (new function($)
case 'WARNING':
badgeClass = 'label-warning'; break;
}
return '<span data-nzbid="' + hist.NZBID + '"class="dropdown-context label label-status ' + badgeClass + '">' + statusText + '</span>';
return '<span class="label label-status ' + badgeClass + '">' + statusText + '</span>';
}

this.deleteConfirm = function(actionCallback, hasNzb, hasDup, hasFailed, multi, selCount, pageSelCount, selPercentage)
Expand Down
18 changes: 9 additions & 9 deletions webui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,11 +294,11 @@ <h4 class="alert-heading">Unsupported browser!</h4>
<thead>
<tr>
<th><div class="check img-check"></div></th>
<th width="14px" class="text-center"><a href="#" onclick="Downloads.sort('priority', event)" title="Priority">P</a></th>
<th width="97px">Status</th>
<th id="DownloadsTable_Name"><a href="#" onclick="Downloads.sort('name', event)">Name</a></th>
<th class="priority-cell"><a href="#" onclick="Downloads.sort('priority', event)" title="Priority">P</a></th>
<th width="102px">Status</th>
<th class="dropafter-cell" id="DownloadsTable_Name"><a href="#" onclick="Downloads.sort('name', event)">Name</a></th>
<th id="DownloadsTable_Category"><a href="#" onclick="Downloads.sort('category', event)">Category</a></th>
<th width="30px" class="text-right"><a href="#" onclick="Downloads.sort('age', event)">Age</a></th>
<th class="dropafter-cell" width="30px" class="text-right"><a href="#" onclick="Downloads.sort('age', event)">Age</a></th>
<th width="120px"><div style="float:left; position:relative; width:50%; text-align:left;"><a href="#"onclick="Downloads.sort('size', event)">Size</a></div><div style="float:right; position:relative; width:50%; text-align:right;"><a href="#" onclick="Downloads.sort('left', event)">Left</a></div></th>
<th width="60px" class="text-right">Est. Time</th>
</tr>
Expand Down Expand Up @@ -386,11 +386,11 @@ <h4 class="alert-heading">Download queue is empty.</h4>
<thead>
<tr>
<th><div class="check img-check"></div></th>
<th width="75px">Status</th>
<th width="170px" class="text-center">Time</th>
<th width="78px">Status</th>
<th width="170px" class="text-center dropafter-cell">Time</th>
<th>Name</th>
<th id="HistoryTable_Category">Category</th>
<th width="30px" class="text-right">Age</th>
<th width="30px" class="text-right dropafter-cell">Age</th>
<th width="70px" class="text-right">Size</th>
</tr>
<tr>
Expand Down Expand Up @@ -1323,7 +1323,7 @@ <h3 id ="DownloadsEdit_Title">Title</h3>
<ul class="dropdown-menu" id="DownloadsCategoryMenu">
<li class="menu-header">Category</li>
<li class="dropdown-warning">XX records selected</li>
<li data=""><a href="#"><table><tr><td><i class="icon-empty"></td><td class="empty-item">&lt;None&gt;</td></tr></table></a></li>
<li data=""><a href="#"><table><tr><td><i class="icon-empty"></td><td class="empty-item">None</td></tr></table></a></li>
<li style="display: none;"><a href="#"><table><tr><td><i class="icon-empty"></td><td>$Name</td></tr></table></a></li>
</ul>

Expand Down Expand Up @@ -1712,7 +1712,7 @@ <h3 id="HistoryEdit_Title"></h3>
<ul class="dropdown-menu" id="HistoryCategoryMenu">
<li class="menu-header">Category</li>
<li class="dropdown-warning">XX records selected</li>
<li data=""><a href="#"><table><tr><td><i class="icon-empty"></td><td class="empty-item">&lt;None&gt;</td></tr></table></a></li>
<li data=""><a href="#"><table><tr><td><i class="icon-empty"></td><td class="empty-item">None</td></tr></table></a></li>
<li style="display: none;"><a href="#"><table><tr><td><i class="icon-empty"></td><td>$Name</td></tr></table></a></li>
</ul>

Expand Down
Loading

0 comments on commit 75ec856

Please sign in to comment.