1
0
mirror of https://github.com/Radarr/Radarr.git synced 2024-11-05 10:32:35 +01:00

Font-Awesomed Series/Details

New: Replaced icons with Font-Awesome SVG icons
This commit is contained in:
Mark McDowall 2012-10-10 19:02:17 -07:00
parent 008bb9626c
commit f643c5e3fb
9 changed files with 77 additions and 34 deletions

View File

@ -1,4 +1,4 @@
.gridImage, .gridAction
.gridImage, .gridAction, .grid-icon
{
width: 18px;
height: 18px;
@ -6,6 +6,10 @@
margin: 0px;
vertical-align: middle;
border: none;
display: inline !important;
text-decoration: none !important;
color: #000000;
font-size: 20px;
}
.gridAction:hover
@ -112,3 +116,8 @@ table.dataTable thead th.sorting_desc, table.dataTable thead th.sorting_asc, tab
{
opacity: 1;
}
/* Icon color when ignored */
.ignored {
color: gray !important;
}

View File

@ -238,11 +238,8 @@ button span, input[type="button"] span, input[type="submit"] span, input[type="r
padding-top: 15px;
}
/* Font-Awesome */
i[class*="icon-"]:not(.gridAction):hover {
cursor: default;
}
table i[class*="icon-"] {
color: #000000;
font-size: 18px;
}

View File

@ -40,5 +40,25 @@ public static MvcHtmlString ImageActionLink(this HtmlHelper helper, string image
var link = helper.ActionLink("[replaceme]", actionName, controllerName, routeValues, htmlAttributes).ToHtmlString();
return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString(TagRenderMode.SelfClosing)));
}
public static MvcHtmlString IconActionLink(this AjaxHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, AjaxOptions ajaxOptions, object htmlAttributes)
{
var linkText = String.IsNullOrWhiteSpace(text) ? "" : " " + text;
var builder = new TagBuilder("i");
builder.MergeAttribute("class", icon);
var link = helper.ActionLink("[replaceme]" + linkText, actionName, controllerName, routeValues, ajaxOptions, htmlAttributes).ToHtmlString();
return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));
}
public static MvcHtmlString IconActionLink(this HtmlHelper helper, string icon, string text, string actionName, string controllerName, object routeValues, object htmlAttributes)
{
var linkText = String.IsNullOrWhiteSpace(text) ? "" : " " + text;
var builder = new TagBuilder("i");
builder.MergeAttribute("class", icon);
var link = helper.ActionLink("[replaceme]" + linkText, actionName, controllerName, routeValues, htmlAttributes).ToHtmlString();
return new MvcHtmlString(link.Replace("[replaceme]", builder.ToString()));
}
}
}

View File

@ -53,4 +53,32 @@
dateFormat: "yy-mm-dd"
});
});
$('[data-status]').livequery(function () {
var status = $(this).attr('data-status');
$(this).removeClass(function (index, css) {
return (css.match(/\bicon-\S+/g) || []).join(' ');
});
if (status == 'Downloading') {
$(this).addClass('icon-download-alt');
}
if (status == 'Ready') {
$(this).addClass('icon-play');
}
if (status == 'AirsToday') {
$(this).addClass('icon-time');
}
if (status == 'NotAired') {
$(this).addClass('icon-calendar');
}
if (status == 'Missing') {
$(this).addClass('icon-sign-blank');
}
});
});

View File

@ -1,10 +1,4 @@
var notIgnoredImage = '../../Content/Images/notIgnored.png';
var ignoredImage = '../../Content/Images/ignored.png';
var notAiredImage = '../../Content/Images/NotAired.png';
var readyImage = '../../Content/Images/Ready.png';
var downloadingImage = '../../Content/Images/Downloading.png';
var seriesId = 0;
var seriesId = 0;
var saveSeasonIgnoreUrl = '../Command/SaveSeasonIgnore';
var saveEpisodeIgnoreUrl = '../Command/SaveEpisodeIgnore';
@ -20,13 +14,11 @@ $(".ignoreEpisode").live("click", function () {
if (ignored) {
toggle.removeClass('ignored');
toggle.attr('src', notIgnoredImage);
toggleCellColour(toggle, false);
}
else {
toggle.addClass('ignored');
toggle.attr('src', ignoredImage);
toggleCellColour(toggle, true);
}
@ -51,12 +43,11 @@ $(".ignoreEpisode").live("click", function () {
});
function toggleChildren(seasonNumber, ignored) {
var ignoreEpisodes = $('[data-season="' + seasonNumber + '"]');
var ignoreEpisodes = $('[data-season="' + seasonNumber + '"]:not(table)');
if (ignored) {
ignoreEpisodes.each(function (index) {
$(this).addClass('ignored');
$(this).attr('src', ignoredImage);
toggleCellColour($(this), true);
});
}
@ -64,7 +55,6 @@ function toggleChildren(seasonNumber, ignored) {
else {
ignoreEpisodes.each(function (index) {
$(this).removeClass('ignored');
$(this).attr('src', notIgnoredImage);
toggleCellColour($(this), false);
});
@ -78,14 +68,12 @@ function toggleMasters(seasonNumber, ignored) {
if (ignored) {
masters.each(function (index) {
$(this).addClass('ignored');
$(this).attr('src', ignoredImage);
});
}
else {
masters.each(function (index) {
$(this).removeClass('ignored');
$(this).attr('src', notIgnoredImage);
});
}
}

View File

@ -29,6 +29,7 @@
margin-left: 5px;
color: black;
text-decoration: none;
vertical-align: middle;
}
.seasonToggleLabel:hover {
@ -88,10 +89,10 @@
@foreach (var season in Model.Seasons.OrderBy(s => s.SeasonNumber))
{
<div class="seasonToggleTop">
<img src="../../Content/Images/@(season.Ignored ? "ignored" : "notIgnored").png"
class="ignoredEpisodesMaster ignoreEpisode @(season.Ignored ? " ignored" : " ") gridAction"
<i
class="icon-eye-open ignoredEpisodesMaster ignoreEpisode @(season.Ignored ? " ignored" : " ") gridAction"
title="Click to toggle season ignore status"
data-season="@season.SeasonNumber"/>
data-season="@season.SeasonNumber"></i>
<a href="@string.Format("#SeasonSection_{0}", season.SeasonNumber)" class="seasonToggleLabel">@(season.SeasonNumber == 0 ? "Specials" : "Season " + season.SeasonNumber)</a>
</div>
}

View File

@ -23,10 +23,10 @@
@*Commands Column*@
<td class="@cellColourClass">
<img src='../../Content/Images/@(Model.Ignored ? "ignored" : "notIgnored").png' class="ignoreEpisode @(Model.Ignored ? " ignored" : " ") gridAction" title="Click to toggle episode ignore status" data-season="@Model.SeasonNumber" data-episode-id="@Model.EpisodeId" />
@Ajax.ImageActionLink("../../Content/Images/Search.png", new { Alt = "Search", Title = "Search for episode", @class = "gridAction" }, "Search", "Episode", new { episodeId = Model.EpisodeId }, null, null)
<img src="../../Content/Images/changequality.png" class="changeQuality gridAction" title="Click to change the quality of the episode file" data-changetype="episode"/>
<img src="../../Content/Images/@(Model.Status).png" alt="@Model.Status" title="@Model.Status" class="gridImage statusImage" data-status="@Model.Status" />
<i class="icon-eye-open ignoreEpisode @(Model.Ignored ? " ignored" : " ") gridAction" title="Click to toggle episode ignore status" data-season="@Model.SeasonNumber" data-episode-id="@Model.EpisodeId" ></i>
@Ajax.IconActionLink("icon-search gridAction", "", "Search", "Episode", new { SeriesId = Model.EpisodeId }, null, new { title = "Search for episode" })
<i class="icon-tag changeQuality gridAction" title="Click to change the quality of the episode file" data-changetype="episode"></i>
<i class="gridImage statusImage" title="@Model.Status" data-status="@Model.Status" ></i>
</td>
</tr>
<tr class="detail-row@(ViewData["AltRow"] == null || !(bool)ViewData["AltRow"] ? "" : " alt-row")">

View File

@ -100,9 +100,9 @@
<script type="text/javascript">
var pauseImage = '<i class="icon-pause" title="Not Monitored"></i>';
var stopImage = '<i class="icon-stop" title="Ended"></i>';
var playImage = '<i class="icon-play" title="Continuing"></i>';
var pauseImage = '<i class="icon-pause grid-icon" title="Not Monitored"></i>';
var stopImage = '<i class="icon-stop grid-icon" title="Ended"></i>';
var playImage = '<i class="icon-play grid-icon" title="Continuing"></i>';
$(document).ready(function () {
$('#seriesGrid').removeClass('hidden-grid');

View File

@ -22,10 +22,10 @@
@*Commands Column*@
<th>
<img src="../../Content/Images/@(Model.Ignored ? "ignored" : "notIgnored").png" class="ignoredEpisodesMaster ignoreEpisode @(Model.Ignored ? " ignored" : " ") gridAction" title="Click to toggle season ignore status" data-season="@Model.SeasonNumber"/>
@Ajax.ImageActionLink("../../Content/Images/Search.png", new { Alt = "Search", Title = "Search for all episodes in this season", @class = "gridAction" }, "SearchSeason", "Episode", new { SeriesId = Model.SeriesId, SeasonNumber = Model.SeasonNumber }, null, null)
<img src="../../Content/Images/changequality.png" class="changeQuality gridAction" title="Click to change the quality of all episode files in this season" data-changetype="season"/>
@Ajax.ImageActionLink("../../Content/Images/Rename.png", new { Alt = "Rename", Title = "Rename all episodes in this season", @class = "gridAction" }, "RenameSeason", "Episode", new { SeriesId = Model.SeriesId, SeasonNumber = Model.SeasonNumber }, null, null)
<i class="icon-eye-open ignoredEpisodesMaster ignoreEpisode @(Model.Ignored ? " ignored" : " ") gridAction" title="Click to toggle season ignore status" data-season="@Model.SeasonNumber"></i>
@Ajax.IconActionLink("icon-search gridAction", "", "SearchSeason", "Episode", new { SeriesId = Model.SeriesId, SeasonNumber = Model.SeasonNumber }, null, new { title = "Search for all episodes in this season" })
<i class="icon-tag changeQuality gridAction" title="Click to change the quality of all episode files in this season" data-changetype="season"></i>
@Ajax.IconActionLink("icon-pencil gridAction", "", "RenameSeason", "Episode", new { SeriesId = Model.SeriesId, SeasonNumber = Model.SeasonNumber }, null, new { Title = "Rename all episodes in this season" })
</th>
</tr>
</thead>