finish custom accent color feature

This commit is contained in:
RaidMax 2019-07-27 15:23:45 -05:00
parent 3b9b99a07e
commit 92e71ae2f4
11 changed files with 78 additions and 52 deletions

View File

@ -10,7 +10,7 @@ namespace SharedLibraryCore.Configuration
{
[LocalizedDisplayName("SETUP_ENABLE_WEBFRONT")]
[ConfigurationLinked("WebfrontBindUrl", "ManualWebfrontUrl", "WebfrontPrimaryColor", "WebfrontSecondaryColor")]
[ConfigurationLinked("WebfrontBindUrl", "ManualWebfrontUrl", "WebfrontPrimaryColor", "WebfrontSecondaryColor", "WebfrontCustomBranding")]
public bool EnableWebFront { get; set; }
[LocalizedDisplayName("WEBFRONT_CONFIGURATION_BIND_URL")]
public string WebfrontBindUrl { get; set; }
@ -18,9 +18,14 @@ namespace SharedLibraryCore.Configuration
[LocalizedDisplayName("WEBFRONT_CONFIGURATION_MANUAL_URL")]
public string ManualWebfrontUrl { get; set; }
[ConfigurationOptional]
[LocalizedDisplayName("WEBFRONT_CONFIGURATION_PRIMARY_COLOR")]
public string WebfrontPrimaryColor { get; set; }
[ConfigurationOptional]
[LocalizedDisplayName("WEBFRONT_CONFIGURATION_SECONDARY_COLOR")]
public string WebfrontSecondaryColor { get; set; }
[ConfigurationOptional]
[LocalizedDisplayName("WEBFRONT_CONFIGURATION_CUSTOM_BRANDING")]
public string WebfrontCustomBranding { get; set; }
[LocalizedDisplayName("SETUP_ENABLE_MULTIOWN")]
public bool EnableMultipleOwners { get; set; }

View File

@ -672,6 +672,7 @@ namespace SharedLibraryCore
cmdProcess.WaitForExit();
string[] cmdLine = cmdProcess.StandardOutput.ReadToEnd().Split("\r\n", StringSplitOptions.RemoveEmptyEntries);
cmdProcess.Dispose();
return cmdLine.Length > 1 ? cmdLine[1] : cmdLine[0];
}

View File

@ -107,6 +107,7 @@ namespace WebfrontCore.Controllers
ViewBag.SocialTitle = SocialTitle;
ViewBag.Pages = Pages;
ViewBag.Localization = Utilities.CurrentLocalization.LocalizationIndex;
ViewBag.CustomBranding = Manager.GetApplicationSettings().Configuration().WebfrontCustomBranding ?? "IW4MAdmin";
base.OnActionExecuting(context);
}

View File

@ -10,76 +10,90 @@ namespace WebfrontCore.Middleware
{
public class CustomCssAccentMiddlewareAction : IMiddlewareAction<string>
{
private readonly Color _primaryColor;
private readonly Color _secondaryColor;
private readonly Color _originalPrimaryColor;
private readonly Color _originalSecondaryColor;
private readonly List<ColorMap> ColorReplacements = new List<ColorMap>();
private class ColorMap
{
public Color Original { get; set; }
public Color Replacement { get; set; }
}
public CustomCssAccentMiddlewareAction(string originalPrimaryColor, string originalSecondaryColor, string primaryColor, string secondaryColor)
{
_originalPrimaryColor = Color.FromArgb(Convert.ToInt32(originalPrimaryColor.Substring(1).ToString(), 16));
_originalSecondaryColor = Color.FromArgb(Convert.ToInt32(originalSecondaryColor.Substring(1).ToString(), 16));
_primaryColor = string.IsNullOrEmpty(primaryColor) ? _originalPrimaryColor : Color.FromArgb(Convert.ToInt32(primaryColor.Substring(1).ToString(), 16));
_secondaryColor = string.IsNullOrEmpty(secondaryColor) ? _originalSecondaryColor : Color.FromArgb(Convert.ToInt32(secondaryColor.Substring(1).ToString(), 16));
primaryColor = string.IsNullOrWhiteSpace(primaryColor) ? originalPrimaryColor : primaryColor;
secondaryColor = string.IsNullOrWhiteSpace(secondaryColor) ? originalSecondaryColor : secondaryColor;
try
{
ColorReplacements.AddRange(new[]
{
new ColorMap()
{
Original = Color.FromArgb(Convert.ToInt32(originalPrimaryColor.Substring(1).ToString(), 16)),
Replacement = Color.FromArgb(Convert.ToInt32(primaryColor.Substring(1).ToString(), 16))
},
new ColorMap()
{
Original = Color.FromArgb(Convert.ToInt32(originalSecondaryColor.Substring(1).ToString(), 16)),
Replacement = Color.FromArgb(Convert.ToInt32(secondaryColor.Substring(1).ToString(), 16))
}
});
}
catch (FormatException)
{
}
}
public async Task<string> Invoke(string original)
{
string originalPrimaryHex = ColorToHex(_originalPrimaryColor);
string originalPrimaryDec = ColorToDec(_originalPrimaryColor);
string originalSecondaryHex = ColorToHex(_originalSecondaryColor);
string originalSecondaryDec = ColorToDec(_originalSecondaryColor);
foreach (var color in ColorReplacements)
{
foreach (var shade in new[] { 0, -19, -25 })
{
original = original
.Replace(ColorToHex(LightenDarkenColor(color.Original, shade)), ColorToHex(LightenDarkenColor(color.Replacement, shade)), StringComparison.OrdinalIgnoreCase)
.Replace(ColorToDec(LightenDarkenColor(color.Original, shade)), ColorToDec(LightenDarkenColor(color.Replacement, shade)), StringComparison.OrdinalIgnoreCase);
}
}
string primaryHex = ColorToHex(_primaryColor);
string primaryDec = ColorToDec(_primaryColor);
string secondaryHex = ColorToHex(_secondaryColor);
string secondaryDec = ColorToDec(_secondaryColor);
string originalPrimaryDarkenHex = ColorToHex(LightenDarkenColor(_originalPrimaryColor, -10));
string originalPrimaryDarkenDec = ColorToDec(LightenDarkenColor(_originalPrimaryColor, -10));
string originalSecondaryDarkenHex = ColorToHex(LightenDarkenColor(_originalSecondaryColor, -10));
string originalSecondaryDarkenDec = ColorToDec(LightenDarkenColor(_originalSecondaryColor, -10));
string primaryDarkenHex = ColorToHex(LightenDarkenColor(_primaryColor, -10));
string primaryDarkenDec = ColorToDec(LightenDarkenColor(_primaryColor, -10));
string secondaryDarkenHex = ColorToHex(LightenDarkenColor(_secondaryColor, -10));
string secondaryDarkenDec = ColorToDec(LightenDarkenColor(_secondaryColor, -10));
return original
.Replace(originalPrimaryHex, primaryHex, StringComparison.OrdinalIgnoreCase)
.Replace(originalPrimaryDec, primaryDec, StringComparison.OrdinalIgnoreCase)
.Replace(originalSecondaryHex, secondaryHex, StringComparison.OrdinalIgnoreCase)
.Replace(originalSecondaryDec, secondaryDec, StringComparison.OrdinalIgnoreCase)
.Replace(originalPrimaryDarkenHex, primaryDarkenHex, StringComparison.OrdinalIgnoreCase)
.Replace(originalPrimaryDarkenDec, primaryDarkenDec, StringComparison.OrdinalIgnoreCase)
.Replace(originalSecondaryDarkenHex, secondaryDarkenHex, StringComparison.OrdinalIgnoreCase)
.Replace(originalSecondaryDarkenDec, secondaryDarkenDec, StringComparison.OrdinalIgnoreCase);
return original;
}
/// <summary>
/// converts color to the hex string representation
/// </summary>
/// <param name="color"></param>
/// <returns></returns>
private string ColorToHex(Color color) => $"#{color.R.ToString("X2")}{color.G.ToString("X2")}{color.B.ToString("X2")}";
/// <summary>
/// converts color to the rgb tuples representation
/// </summary>
/// <param name="color"></param>
/// <returns></returns>
private string ColorToDec(Color color) => $"{(int)color.R}, {(int)color.G}, {(int)color.B}";
/// <summary>
/// Adapted from https://css-tricks.com/snippets/javascript/lighten-darken-color/
/// lightens or darkens a color on the given amount
/// Based off SASS darken/lighten function
/// </summary>
/// <param name="col"></param>
/// <param name="amt"></param>
/// <param name="color"></param>
/// <param name="amount"></param>
/// <returns></returns>
private Color LightenDarkenColor(Color col, float amt)
private Color LightenDarkenColor(Color color, float amount)
{
var num = col.ToArgb();
int r = (num >> 16) + (int)(amt * (num >> 16));
int r = color.R + (int)((amount / 100.0f) * color.R);
if (r > 255) r = 255;
else if (r < 0) r = 0;
int g = ((num >> 8) & 0x00FF) + (int)(amt * ((num >> 8) & 0x00FF));
int g = color.G + (int)((amount / 100.0f) * color.G);
if (g > 255) g = 255;
else if (g < 0) g = 0;
int b = (num & 0x0000FF) + (int)(amt * (num & 0x0000FF));
int b = color.B + (int)((amount / 100.0f) * color.B);
if (b > 255) b = 255;
else if (b < 0) b = 0;

View File

@ -28,7 +28,7 @@
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
@Html.ActionLink("IW4MAdmin", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
@Html.ActionLink((string)ViewBag.CustomBranding, "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

View File

@ -60,6 +60,7 @@
<None Include="wwwroot\js\global.min.js" CopyToPublishDirectory="Always" />
<None Include="wwwroot\images\icon.png" CopyToPublishDirectory="Always" />
<None Include="wwwroot\images\icons\**\*.png" CopyToPublishDirectory="Always" />
<_ContentIncludedByDefault Remove="wwwroot\css\main.min.css" />
<None Include="wwwroot\lib\open-iconic\font\fonts\open-iconic.ttf" CopyToPublishDirectory="Always" />
<None Include="wwwroot\lib\open-iconic\font\fonts\open-iconic.woff" CopyToPublishDirectory="Always" />
<None Include="wwwroot\lib\open-iconic\font\fonts\open-iconic.otf" CopyToPublishDirectory="Always" />

View File

@ -233,7 +233,7 @@ form *, select {
}
.nav-tabs .nav-link.active:hover {
opacity: 0.75;
background-color: darken($primary, 10%);
}
.nav-tabs .nav-item {

View File

@ -77,7 +77,7 @@
}
.level-bgcolor-owner, .level-bgcolor-6 {
background-color: rgb(0, 122, 204);
background-color: $primary;
}
.level-color-8 {
@ -140,10 +140,13 @@
}
#profile_aliases_btn:hover {
opacity: 0.75;
cursor: pointer;
}
.oi:hover {
color: darken($primary, 10%) !important;
}
#profile_aliases {
position: relative;
display: none;

View File

@ -55,7 +55,7 @@ $('.server-history-row').each(function (index, element) {
let clientHistory = $(this).data('clienthistory');
let serverId = $(this).data('serverid');
let maxClients = parseInt($('#server_header_' + serverId + ' .server-maxclients').text());
let primaryColor = document.documentElement.style.getPropertyValue('--primary');
let primaryColor = window.getComputedStyle(document.body).getPropertyValue('--primary').trim();
let color = $(this).data('online') === 'True' ? primaryColor.endsWith('80') ? primaryColor : primaryColor + '80' : '#ff6060';
let width = $('.server-header').first().width();
let historyChart = getPlayerHistoryChart(clientHistory, serverId, width, color, maxClients);

View File

@ -20,7 +20,7 @@
if (interval < 1)
interval = 1;
let primaryColor = document.documentElement.style.getPropertyValue('--primary');
let primaryColor = window.getComputedStyle(document.body).getPropertyValue('--primary').trim();
return new CanvasJS.Chart(id, {
backgroundColor: 'transparent',

View File

@ -3,6 +3,7 @@ Version 2.4:
-added chat message to server on server list view
-added recently connected players dropdown option on webfront
-added "dashboard" to home view with quick stats
-added ability to customize accent color and branding on webfront
-hid flagged status of users on webfront unless logged in
Version 2.3: