Skip to content

Align WinForms frontend to reference layout (left rail, top bar, compact cards) #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Align WinForms frontend to reference layout (left rail, top bar, compact cards) #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
df3dbe3
Initial plan
Copilot May 22, 2026
47e2458
feat: refresh the frontend theme
Copilot May 22, 2026
1ec5a61
fix: address frontend review feedback
Copilot May 22, 2026
3cdba52
chore: finalize frontend theme polish
Copilot May 22, 2026
d34e093
feat: align game-manager ui with reference layout
Copilot May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
150 changes: 128 additions & 22 deletions MainForm.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
using Krassheiten.SystemGameManager.Controller;
using Krassheiten.SystemGameManager.Service;
using Krassheiten.SystemGameManager.View;
using Krassheiten.SystemGameManager.View.Components;
using System.Text.Json;

namespace Krassheiten.SystemGameManager;
Expand All @@ -11,6 +12,7 @@ public class MainForm : Form
{
private readonly Button btnLoadInfo;
private readonly Label statusLabel;
private readonly TabControl tabs;
private readonly GameViewService gameViewService;
private readonly PcInfoView pcInfoView;
private readonly GameInfoView gameInfoView;
Expand All @@ -21,42 +23,109 @@ public MainForm()
{
Text = $"System & Game Manager (v{GetVersionFromReleases()})";
StartPosition = FormStartPosition.CenterScreen;
MinimumSize = new Size(980, 640);
Width = 1180;
Height = 760;
BackColor = Color.FromArgb(245, 247, 250);
MinimumSize = new Size(1280, 820);
Width = 1360;
Height = 860;
BackColor = UIHelpers.WindowBackground;
DoubleBuffered = true;
Font = new Font("Segoe UI", 9F);

gameViewService = new GameViewService();
pcInfoView = new PcInfoView();
gameInfoView = new GameInfoView(gameViewService.Artwork, OpenGameDirectory);
gameAudioView = new GameAudioView();

var root = new TableLayoutPanel()
{
Dock = DockStyle.Fill,
BackColor = UIHelpers.WindowBackground,
ColumnCount = 2,
RowCount = 1
};
root.ColumnStyles.Add(new ColumnStyle(SizeType.Absolute, 72));
root.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 100));

var sidebar = new Panel()
{
Dock = DockStyle.Fill,
BackColor = UIHelpers.SidebarBackground,
Padding = new Padding(10, 76, 10, 14)
};

var sidebarActions = new FlowLayoutPanel()
{
Dock = DockStyle.Top,
FlowDirection = FlowDirection.TopDown,
WrapContents = false,
BackColor = Color.Transparent,
AutoSize = true
};

var menuButton = CreateSidebarButton("☰");
var homeButton = CreateSidebarButton("⌗", true);
var settingsButton = CreateSidebarButton("⚙");
var infoButton = CreateSidebarButton("i");

menuButton.Margin = new Padding(0, 0, 0, 16);
homeButton.Margin = new Padding(0, 0, 0, 16);
settingsButton.Margin = new Padding(0, 0, 0, 16);
infoButton.Anchor = AnchorStyles.Left | AnchorStyles.Bottom;

sidebarActions.Controls.Add(menuButton);
sidebarActions.Controls.Add(homeButton);
sidebarActions.Controls.Add(settingsButton);
sidebar.Controls.Add(sidebarActions);

var infoHost = new Panel()
{
Dock = DockStyle.Bottom,
Height = 44
};
infoHost.Controls.Add(infoButton);
sidebar.Controls.Add(infoHost);

var shell = new TableLayoutPanel()
{
Dock = DockStyle.Fill,
BackColor = UIHelpers.WindowBackground,
ColumnCount = 1,
RowCount = 2
};
shell.RowStyles.Add(new RowStyle(SizeType.Absolute, 86));
shell.RowStyles.Add(new RowStyle(SizeType.Percent, 100));

var toolbar = new Panel()
{
Dock = DockStyle.Top,
Height = 60,
Padding = new Padding(12),
BackColor = Color.White
Height = 86,
Padding = new Padding(16, 18, 16, 10),
BackColor = UIHelpers.SurfaceBackground
};

btnLoadInfo = CreatePrimaryButton("Infos laden", 125);
btnLoadInfo = UIHelpers.CreatePrimaryButton("Infos laden", 132);
btnLoadInfo.Dock = DockStyle.Left;
btnLoadInfo.Text = "ⓘ Infos laden";

statusLabel = new Label()
{
Text = "Bereit",
Dock = DockStyle.Fill,
Padding = new Padding(14, 7, 0, 0),
Padding = new Padding(16, 7, 0, 0),
TextAlign = ContentAlignment.MiddleLeft,
ForeColor = Color.FromArgb(55, 65, 81)
ForeColor = UIHelpers.TextSecondaryColor
};

var tabs = new TabControl()
tabs = new TabControl()
{
Dock = DockStyle.Fill,
Padding = new Point(18, 8)
BackColor = UIHelpers.WindowBackground,
Padding = new Point(22, 12),
DrawMode = TabDrawMode.OwnerDrawFixed,
ItemSize = new Size(210, 42),
SizeMode = TabSizeMode.Fixed
};
tabs.DrawItem += (_, e) => DrawTab(tabs, e);
tabs.SelectedIndexChanged += (_, _) => tabs.Invalidate();

tabs.TabPages.Add(pcInfoView.CreateTab());
tabs.TabPages.Add(gameInfoView.CreateTab());
Expand All @@ -68,8 +137,13 @@ public MainForm()
toolbar.Controls.Add(statusLabel);
toolbar.Controls.Add(btnLoadInfo);

Controls.Add(tabs);
Controls.Add(toolbar);
shell.Controls.Add(toolbar, 0, 0);
shell.Controls.Add(tabs, 0, 1);

root.Controls.Add(sidebar, 0, 0);
root.Controls.Add(shell, 1, 0);

Controls.Add(root);

pcInfoView.ShowLoadingState();
gameInfoView.ShowLoadingState();
Expand Down Expand Up @@ -140,22 +214,54 @@ private MainViewData BuildViewData()
gameViewService.BuildViewData());
}

private static Button CreatePrimaryButton(string text, int width)
private static void DrawTab(TabControl tabControl, DrawItemEventArgs e)
{
var page = tabControl.TabPages[e.Index];
var bounds = e.Bounds;
bool isSelected = e.Index == tabControl.SelectedIndex;

using var backgroundBrush = new SolidBrush(UIHelpers.SurfaceBackground);
e.Graphics.FillRectangle(backgroundBrush, bounds);

var textBounds = Rectangle.Inflate(bounds, -10, -2);
using var textFont = new Font("Segoe UI", 10F, isSelected ? FontStyle.Bold : FontStyle.Regular);
TextRenderer.DrawText(
e.Graphics,
page.Text,
textFont,
textBounds,
isSelected ? UIHelpers.TextPrimaryColor : UIHelpers.TextSecondaryColor,
TextFormatFlags.HorizontalCenter | TextFormatFlags.VerticalCenter | TextFormatFlags.EndEllipsis);

using var borderPen = new Pen(UIHelpers.BorderColor);
e.Graphics.DrawLine(borderPen, bounds.Left, bounds.Bottom - 1, bounds.Right, bounds.Bottom - 1);

if (!isSelected)
{
return;
}

using var accentBrush = new SolidBrush(UIHelpers.AccentColor);
e.Graphics.FillRectangle(accentBrush, bounds.Left + 12, bounds.Bottom - 3, bounds.Width - 24, 3);
}

private static Button CreateSidebarButton(string text, bool isActive = false)
{
var button = new Button()
{
Text = text,
Width = width,
Height = 34,
Width = 50,
Height = 50,
FlatStyle = FlatStyle.Flat,
BackColor = Color.FromArgb(79, 70, 229),
ForeColor = Color.White,
BackColor = isActive ? UIHelpers.SidebarActiveBackground : Color.Transparent,
ForeColor = isActive ? UIHelpers.TextPrimaryColor : Color.FromArgb(223, 231, 210),
Font = new Font("Segoe UI Symbol", 15F, FontStyle.Regular),
Cursor = Cursors.Hand
};

button.FlatAppearance.BorderSize = 0;
button.FlatAppearance.MouseDownBackColor = Color.FromArgb(67, 56, 202);
button.FlatAppearance.MouseOverBackColor = Color.FromArgb(99, 102, 241);
button.FlatAppearance.MouseDownBackColor = UIHelpers.SidebarActiveBackground;
button.FlatAppearance.MouseOverBackColor = UIHelpers.SidebarActiveBackground;
return button;
}

Expand All @@ -182,4 +288,4 @@ private static string GetVersionFromReleases()
}

private sealed record MainViewData(string SystemText, GameViewService.GameManagerViewData GameManager);
}
}
13 changes: 7 additions & 6 deletions view/Components/GameAudioCardControl.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@ public static Panel Create(Game.Record game, out CheckBox selectionCheckBox, out
Dock = DockStyle.Top,
AutoSize = true,
Padding = new Padding(14),
BackColor = Color.White,
BackColor = UIHelpers.CardBackground,
Margin = new Padding(0, 0, 0, 12)
};
UIHelpers.SetRoundedRegion(card, 18);

var layout = new TableLayoutPanel()
{
Expand Down Expand Up @@ -48,15 +49,15 @@ public static Panel Create(Game.Record game, out CheckBox selectionCheckBox, out
Text = game.Name,
AutoSize = true,
Font = new Font("Segoe UI", 10F, FontStyle.Bold),
ForeColor = Color.FromArgb(17, 24, 39),
ForeColor = UIHelpers.TextPrimaryColor,
Margin = new Padding(0, 0, 0, 4)
};

var pathLabel = new Label()
{
Text = string.IsNullOrWhiteSpace(game.InstallFolderPath) ? "Pfad nicht verfügbar" : game.InstallFolderPath,
AutoSize = true,
ForeColor = Color.FromArgb(107, 114, 128),
ForeColor = UIHelpers.TextSecondaryColor,
Margin = new Padding(0, 0, 0, 4)
};

Expand All @@ -65,7 +66,7 @@ public static Panel Create(Game.Record game, out CheckBox selectionCheckBox, out
Text = $"Game: {game.GameVolumePercent ?? Game.GAME_VOLUME_PERCENT}% | Music: {game.MusicVolumePercent ?? Game.MUSIC_VOLUME_PERCENT}%",
AutoSize = true,
Font = new Font("Segoe UI", 9F, FontStyle.Bold),
ForeColor = Color.FromArgb(67, 56, 202),
ForeColor = UIHelpers.AccentColor,
Margin = new Padding(0, 0, 0, 0)
};

Expand All @@ -84,7 +85,7 @@ public static Panel Create(Game.Record game, out CheckBox selectionCheckBox, out
Text = "Audioausgabe:",
AutoSize = true,
Anchor = AnchorStyles.Left,
ForeColor = Color.FromArgb(55, 65, 81),
ForeColor = UIHelpers.TextMutedColor,
Margin = new Padding(0, 4, 8, 0)
};

Expand All @@ -93,7 +94,7 @@ public static Panel Create(Game.Record game, out CheckBox selectionCheckBox, out
Text = game.AudioOutputDevice ?? "(Standard-Gerät)",
AutoSize = true,
Anchor = AnchorStyles.Left,
ForeColor = Color.FromArgb(55, 65, 81),
ForeColor = UIHelpers.TextSecondaryColor,
Margin = new Padding(0, 4, 0, 0)
};

Expand Down
Loading