Added support for dark theme

dhcp-server
Pat Hartl 2023-09-05 19:41:11 -05:00
parent 2d3c3c7407
commit f474f4fee2
11 changed files with 115 additions and 57 deletions

View File

@ -1,4 +1,6 @@
@page
@using LANCommander.Models;
@using LANCommander.Services;
@model FirstTimeSetupModel
@{
Layout = "/Views/Shared/_LayoutBasic.cshtml";
@ -11,7 +13,16 @@
<div class="ant-col ant-col-xs-24 ant-col-md-10">
<div style="text-align: center; margin-bottom: 24px;">
<img src="~/static/logo.svg" />
@switch (SettingService.GetSettings().Theme)
{
case LANCommanderTheme.Light:
<img src="~/static/logo.svg" />
break;
case LANCommanderTheme.Dark:
<img src="~/static/logo-dark.svg" />
break;
}
</div>
<div class="ant-card ant-card-bordered">

View File

@ -1,4 +1,6 @@
@page
@using LANCommander.Models;
@using LANCommander.Services;
@model LoginModel
@{ Layout = "/Views/Shared/_LayoutBasic.cshtml"; }
@ -10,7 +12,16 @@
<div class="ant-col ant-col-xs-24 ant-col-md-10">
<div style="text-align: center; margin-bottom: 24px;">
<img src="~/static/logo.svg" />
@switch (SettingService.GetSettings().Theme)
{
case LANCommanderTheme.Light:
<img src="~/static/logo.svg" />
break;
case LANCommanderTheme.Dark:
<img src="~/static/logo-dark.svg" />
break;
}
</div>
@foreach (var error in ModelState.SelectMany(x => x.Value.Errors))

View File

@ -1,4 +1,6 @@
@page
@using LANCommander.Models;
@using LANCommander.Services;
@model RegisterModel
@{ Layout = "/Views/Shared/_LayoutBasic.cshtml"; }
@{
@ -9,7 +11,16 @@
<div class="ant-col ant-col-xs-24 ant-col-md-10">
<div style="text-align: center; margin-bottom: 24px;">
<img src="~/static/logo.svg" />
@switch (SettingService.GetSettings().Theme)
{
case LANCommanderTheme.Light:
<img src="~/static/logo.svg" />
break;
case LANCommanderTheme.Dark:
<img src="~/static/logo-dark.svg" />
break;
}
</div>
<div class="ant-card ant-card-bordered">

View File

@ -1,5 +1,11 @@
namespace LANCommander.Models
{
public enum LANCommanderTheme
{
Light,
Dark
}
public class LANCommanderSettings
{
public int Port { get; set; } = 1337;
@ -7,6 +13,7 @@
public string DatabaseConnectionString { get; set; } = "";
public string IGDBClientId { get; set; } = "";
public string IGDBClientSecret { get; set; } = "";
public LANCommanderTheme Theme { get; set; }
public LANCommanderAuthenticationSettings Authentication { get; set; } = new LANCommanderAuthenticationSettings();
}

View File

@ -15,8 +15,8 @@
@inject NavigationManager NavigationManager
@inject ModalService ModalService
<Layout Class="site-layout-background" Style="padding: 24px 0;">
<Sider Class="site-layout-background" Width="200">
<Layout Class="panel-layout" Style="padding: 24px 0;">
<Sider Width="200">
<Menu Mode="@MenuMode.Inline" Style="height: 100%;">
<MenuItem RouterLink="@($"/Games/{Game.Id}/General")">General</MenuItem>
@ -53,7 +53,7 @@
</PageHeaderExtra>
</PageHeader>
<div class="site-layout-content">
<div class="panel-layout-content">
<div data-panel="General">
<Form Model="@Game" Layout="@FormLayout.Vertical">
<FormItem Label="Title">
@ -132,28 +132,10 @@
</Content>
</Layout>
<style>
.site-layout-background {
background: #fff;
}
.site-layout-content {
padding: 0 24px;
}
.ant-layout-content > .ant-page-header-heading {
padding-top: 0;
}
[data-panel] {
display: none;
}
</style>
@if (!String.IsNullOrWhiteSpace(Panel))
{
<style>
[data-panel="@Panel"] {
.panel-layout [data-panel="@Panel"] {
display: block;
}
</style>
@ -161,7 +143,7 @@
else
{
<style>
[data-panel="General"] {
.panel-layout [data-panel="General"] {
display: block;
}
</style>

View File

@ -9,8 +9,8 @@
@inject IMessageService MessageService
@inject NavigationManager NavigationManager
<Layout Class="site-layout-background" Style="padding: 24px 0;">
<Sider Class="site-layout-background" Width="200">
<Layout Class="panel-layout" Style="padding: 24px 0;">
<Sider Width="200">
<Menu Mode="@MenuMode.Inline" Style="height: 100%;">
<MenuItem RouterLink="@($"/Servers/{Server.Id}/General")">General</MenuItem>
@ -48,7 +48,7 @@
</PageHeader>
<div class="site-layout-content">
<div class="panel-layout-content">
@if (Panel == "General" || String.IsNullOrWhiteSpace(Panel))
{
<Form Model="@Server" Layout="@FormLayout.Vertical">
@ -140,20 +140,6 @@
</Content>
</Layout>
<style>
.site-layout-background {
background: #fff;
}
.site-layout-content {
padding: 0 24px;
}
.ant-layout-content > .ant-page-header-heading {
padding-top: 0;
}
</style>
@code {
[Parameter] public Guid Id { get; set; }
[Parameter] public string Panel { get; set; }

View File

@ -1,6 +1,7 @@
@page "/Settings"
@page "/Settings/General"
@using LANCommander.Models;
@using LANCommander.Extensions;
@layout SettingsLayout
@inject SettingService SettingService
@inject IGDBService IGDBService
@ -17,6 +18,13 @@
<Text Type="@TextElementType.Secondary">Enabling the beacon will allow clients on the same network to auto-discover the LANCommander address.</Text>
<FormItem Label="Theme">
<Select @bind-Value="context.Theme" TItem="LANCommanderTheme" TItemValue="LANCommanderTheme" DataSource="Enum.GetValues<LANCommanderTheme>()">
<LabelTemplate Context="Value">@Value.GetDisplayName()</LabelTemplate>
<ItemTemplate Context="Value">@Value.GetDisplayName()</ItemTemplate>
</Select>
</FormItem>
<Divider Text="IGDB Credentials" />
<Text Type="@TextElementType.Secondary">In order to use IGDB metadata, you need a Twitch developer account. <a href="https://api-docs.igdb.com/#account-creation" target="_blank">Click here</a> for more details.</Text>

View File

@ -2,8 +2,8 @@
@layout MainLayout
@attribute [Authorize(Roles = "Administrator")]
<Layout Class="site-layout-background" Style="padding: 24px 0;">
<Sider Class="site-layout-background" Width="200">
<Layout Class="panel-layout" Style="padding: 24px 0;">
<Sider Width="200">
<Menu Mode=@MenuMode.Inline Style="height: 100%">
<MenuItem RouterLink="/Settings/General">General</MenuItem>
<MenuItem RouterLink="/Settings/Users">Users</MenuItem>
@ -16,9 +16,3 @@
@Body
</Content>
</Layout>
<style>
.site-layout-background {
background: #fff;
}
</style>

View File

@ -1,7 +1,9 @@
@using Microsoft.AspNetCore.Components.Web
@using LANCommander.Services;
@using Microsoft.AspNetCore.Components.Web
@using LANCommander.Components
@namespace LANCommander.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@inject SettingService SettingService
<!DOCTYPE html>
<html lang="en">
@ -9,11 +11,23 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
@switch (SettingService.GetSettings().Theme)
{
case Models.LANCommanderTheme.Light:
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
break;
case Models.LANCommanderTheme.Dark:
<link href="_content/AntDesign/css/ant-design-blazor.dark.css" rel="stylesheet" />
break;
}
<link href="_content/XtermBlazor/XtermBlazor.css" rel="stylesheet" />
<link href="~/css/site.css" rel="stylesheet" />
</head>
<body>
<body data-theme="@SettingService.GetSettings().Theme">
<div class="page-wrapper">

View File

@ -1,11 +1,25 @@
<!DOCTYPE html>
@using LANCommander.Services;
@using LANCommander.Models;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - LANCommander</title>
<base href="~/" />
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
@switch (SettingService.GetSettings().Theme)
{
case LANCommanderTheme.Light:
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
break;
case LANCommanderTheme.Dark:
<link href="_content/AntDesign/css/ant-design-blazor.dark.css" rel="stylesheet" />
break;
}
<link href="~/css/site.css" rel="stylesheet" />
</head>
<body>

View File

@ -1,3 +1,23 @@
.panel-layout {
background: #fff;
}
.panel-layout-content {
padding: 0 24px;
}
.panel-layout .ant-layout-content > .ant-page-header-heading {
padding-top: 0;
}
.panel-layout [data-panel] {
display: none;
}
[data-theme="Dark"] .panel-layout {
background: #141414;
}
.ant-select-selector {
line-height: 30px;
}