UI - Phase 1 (#160)

src/10-Core/Wtq/ServiceCollectionExtensions.cs

@@ -42,6 +42,7 @@ public static IServiceCollection AddWtqCore(this IServiceCollection services)
 			.AddSingleton<IWtqAppToggleService, WtqAppToggleService>()
 			.AddSingleton<IWtqBus, WtqBus>()
 			.AddSingleton<IWtqWindowResolver, WtqWindowResolver>()
+			.AddSingleton<WtqOptionsSaveService>()
 
 			.AddHostedService<WtqFocusTracker>()
 			.AddHostedService<WtqHotkeyService>()

src/10-Core/Wtq/Services/WtqOptionsSaveService.cs

@@ -0,0 +1,6 @@
+namespace Wtq.Services;
+
+public class WtqOptionsSaveService
+{
+	public Task SaveAsync(WtqOptions options) => Task.CompletedTask;
+}

src/20-Services/Wtq.Services.UI/Components/Descr.razor

@@ -0,0 +1,6 @@
+@code {
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+}
+
+<p class="rz-color-base-400 rz-m-0 rz-my-4">@ChildContent</p>

src/20-Services/Wtq.Services.UI/Components/Emph.razor

@@ -0,0 +1,6 @@
+@code {
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+}
+
+<strong class="rz-color-base-200">@ChildContent</strong>

src/20-Services/Wtq.Services.UI/Components/Hotkey.razor

@@ -0,0 +1,59 @@
+@code {
+
+	[EditorRequired]
+	[Parameter]
+	public HotkeyOptions Options { get; set; } = new();
+
+	[EditorRequired]
+	[Parameter]
+	public Action OnRemove { get; set; }
+
+}
+
+<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="8">
+
+	<!-- Alt -->
+	<RadzenToggleButton
+		Text="Alt"
+		@bind-Value="Options.IsAlt"
+		Size="ButtonSize.Medium"
+		ButtonStyle="ButtonStyle.Light"
+		ToggleButtonStyle="ButtonStyle.Primary"
+		Style="width: 8em;"
+	/>
+
+	<!-- Ctrl -->
+	<RadzenToggleButton
+		Text="Ctrl"
+		@bind-Value="Options.IsCtrl"
+		Size="ButtonSize.Medium"
+		ButtonStyle="ButtonStyle.Light"
+		ToggleButtonStyle="ButtonStyle.Primary"
+		Style="width: 8em;"
+	/>
+
+	<!-- Shift -->
+	<RadzenToggleButton
+		Text="Shift"
+		@bind-Value="Options.IsShift"
+		Size="ButtonSize.Medium"
+		ButtonStyle="ButtonStyle.Light"
+		ToggleButtonStyle="ButtonStyle.Primary"
+		Style="width: 8em;"
+	/>
+
+	<!-- Key -->
+	<RadzenDropDown
+		@bind-Value="Options.Key"
+		Data="@(WtqConstants.CommonKeys)"
+		Style="width: 100%; max-width: 400px;"
+		Name="AnimationTypeToggleOn1"
+	/>
+
+	<!-- Remove button -->
+	<RadzenButton
+		Icon="delete"
+		Size="ButtonSize.Medium"
+		Click="@(() => OnRemove())"
+	/>
+</RadzenStack>

src/20-Services/Wtq.Services.UI/Components/PageHead.razor

@@ -0,0 +1,16 @@
+@code {
+
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+
+	[EditorRequired]
+	[NotNull]
+	[Parameter]
+	public string? Icon { get; set; }
+
+}
+
+<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween">
+	<h1>@ChildContent</h1>
+	<h1><RadzenIcon Icon="@Icon" /></h1>
+</RadzenStack>

src/20-Services/Wtq.Services.UI/Components/ProcessArg.razor

@@ -0,0 +1,20 @@
+<RadzenStack
+	Orientation="Orientation.Horizontal"
+	AlignItems="AlignItems.Center"
+	Gap="8"
+>
+
+	<!-- Argument -->
+	<RadzenTextBox
+		@bind-Value="Argument.Argument"
+		Style="width: 100%;"
+	/>
+
+	<!-- Remove button -->
+	<RadzenButton
+		Icon="delete"
+		Size="ButtonSize.Medium"
+		Click="@(() => OnRemove())"
+	/>
+
+</RadzenStack>

src/20-Services/Wtq.Services.UI/Components/ProcessArg.razor.cs

@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Components;
+using Wtq.Configuration;
+
+namespace Wtq.Services.UI.Components;
+
+public partial class ProcessArg : ComponentBase
+{
+	[EditorRequired]
+	[Parameter]
+	public ProcessArgument Argument { get; set; } = null!;
+
+	[EditorRequired]
+	[Parameter]
+	public Action OnRemove { get; set; } = null!;
+}

src/20-Services/Wtq.Services.UI/Components/SettingGlobal.razor

@@ -0,0 +1,46 @@
+@inject TooltipService TooltipService
+
+@code {
+
+	[CascadingParameter]
+	public Notifier Notifier { get; set; }
+
+	[Parameter]
+	public bool HasGlobalSetting { get; set; }
+
+	[Parameter]
+	public bool IsOverridden { get; set; }
+
+	[Parameter]
+	public Action? Reset { get; set; }
+
+	void ShowTooltip(ElementReference elementReference, TooltipOptions options)
+		=> TooltipService.Open(
+			elementReference,
+			IsOverridden ? "Revert to global setting" : "Uses global setting",
+			options);
+
+	void ResetN()
+	{
+		Reset?.Invoke();
+
+		Notifier.Notify();
+	}
+}
+
+<RadzenColumn Size="1" class="rz-text-end" style="text-align: right;">
+
+	@if (HasGlobalSetting)
+	{
+		<RadzenToggleButton
+			Disabled="@(!IsOverridden)"
+			Icon="public"
+			Size="ButtonSize.Small"
+			ButtonStyle="ButtonStyle.Light"
+			ToggleButtonStyle="ButtonStyle.Primary"
+			MouseEnter="@(args => ShowTooltip(args, new TooltipOptions() { Position = TooltipPosition.Left, }))"
+			Value="IsOverridden"
+			Click="ResetN"
+		/>
+	}
+</RadzenColumn>

src/20-Services/Wtq.Services.UI/Components/SettingLabel.razor

@@ -0,0 +1,22 @@
+@code {
+
+	[Parameter]
+	public string? Text { get; set; }
+
+	[Parameter]
+	public string? Subtext { get; set; }
+
+	[Parameter]
+	public string? Component { get; set; }
+}
+
+<RadzenColumn Size="4">
+	<RadzenStack Orientation="Orientation.Vertical" Gap="2">
+		<RadzenLabel Text="@Text" Component="@Component"/>
+
+		@if (Subtext != null)
+		{
+			<p class="rz-color-base-500 rz-m-0">@Subtext</p>
+		}
+	</RadzenStack>
+</RadzenColumn>

src/20-Services/Wtq.Services.UI/Components/Slider.razor

@@ -0,0 +1,7 @@
+@code {
+	[Parameter]
+	public int Value { get; set; }
+}
+
+<RadzenNumeric @bind-Value="Value" Name="Opacity" class="rz-mr-4" style="width: 80px;"/>
+<RadzenSlider @bind-Value="Value" TValue="int"/>

src/20-Services/Wtq.Services.UI/Extensions/BlazorExtensions.cs

@@ -0,0 +1,137 @@
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Extensions.Logging;
+using Wtq.Configuration;
+
+namespace Wtq.Services.UI.Extensions;
+
+public static class BlazorExtensions
+{
+	private static readonly ILogger _log = Log.For(typeof(BlazorExtensions));
+
+	public static void ToModifiersAndKey(this KeyboardEventArgs ev, out KeyModifiers mod, out Keys key)
+	{
+		Guard.Against.Null(ev);
+
+		mod = ToKeyModifiers(ev);
+		key = ToKeys(ev.Code);
+	}
+
+	private static KeyModifiers ToKeyModifiers(KeyboardEventArgs ev)
+	{
+		var mod = KeyModifiers.None;
+
+		if (ev.AltKey)
+		{
+			mod |= KeyModifiers.Alt;
+		}
+
+		if (ev.CtrlKey)
+		{
+			mod |= KeyModifiers.Control;
+		}
+
+		if (ev.ShiftKey)
+		{
+			mod |= KeyModifiers.Shift;
+		}
+
+		// TODO: Super?
+
+		return mod;
+	}
+
+	/// <summary>
+	/// https://www.toptal.com/developers/keycode/table
+	/// </summary>
+	private static Keys ToKeys(string code)
+	{
+		switch (code.ToLowerInvariant())
+		{
+			case "pause": return Keys.Pause;
+			case "backspace": return Keys.Back;
+			case "tab": return Keys.Tab;
+			case "numlock": return Keys.NumLock;
+			case "enter": return Keys.Enter;
+			case "capslock": return Keys.CapsLock;
+			case "escape": return Keys.Escape;
+
+			case "digit0": return Keys.D0;
+			case "digit1": return Keys.D1;
+			case "digit2": return Keys.D2;
+			case "digit3": return Keys.D3;
+			case "digit4": return Keys.D4;
+			case "digit5": return Keys.D5;
+			case "digit6": return Keys.D6;
+			case "digit7": return Keys.D7;
+			case "digit8": return Keys.D8;
+			case "digit9": return Keys.D9;
+
+			case "f1": return Keys.F1;
+			case "f2": return Keys.F2;
+			case "f3": return Keys.F3;
+			case "f4": return Keys.F4;
+			case "f5": return Keys.F5;
+			case "f6": return Keys.F6;
+			case "f7": return Keys.F7;
+			case "f8": return Keys.F8;
+			case "f9": return Keys.F9;
+			case "f10": return Keys.F10;
+			case "f11": return Keys.F11;
+			case "f12": return Keys.F12;
+			case "f13": return Keys.F13;
+			case "f14": return Keys.F14;
+			case "f15": return Keys.F15;
+			case "f16": return Keys.F16;
+			case "f17": return Keys.F17;
+			case "f18": return Keys.F18;
+			case "f19": return Keys.F19;
+			case "f20": return Keys.F20;
+			case "f21": return Keys.F21;
+			case "f22": return Keys.F22;
+			case "f23": return Keys.F23;
+			case "f24": return Keys.F24;
+
+			case "keya": return Keys.A;
+			case "keyb": return Keys.B;
+			case "keyc": return Keys.C;
+			case "keyd": return Keys.D;
+			case "keye": return Keys.E;
+			case "keyf": return Keys.F;
+			case "keyg": return Keys.G;
+			case "keyh": return Keys.H;
+			case "keyi": return Keys.I;
+			case "keyj": return Keys.J;
+			case "keyk": return Keys.K;
+			case "keyl": return Keys.L;
+			case "keym": return Keys.M;
+			case "keyn": return Keys.N;
+			case "keyo": return Keys.O;
+			case "keyp": return Keys.P;
+			case "keyq": return Keys.Q;
+			case "keyr": return Keys.R;
+			case "keys": return Keys.S;
+			case "keyt": return Keys.T;
+			case "keyu": return Keys.U;
+			case "keyv": return Keys.V;
+			case "keyw": return Keys.W;
+			case "keyx": return Keys.X;
+			case "keyy": return Keys.Y;
+			case "keyz": return Keys.Z;
+
+			case "numpad0": return Keys.NumPad0;
+			case "numpad1": return Keys.NumPad1;
+			case "numpad2": return Keys.NumPad2;
+			case "numpad3": return Keys.NumPad3;
+			case "numpad4": return Keys.NumPad4;
+			case "numpad5": return Keys.NumPad5;
+			case "numpad6": return Keys.NumPad6;
+			case "numpad7": return Keys.NumPad7;
+			case "numpad8": return Keys.NumPad8;
+			case "numpad9": return Keys.NumPad9;
+		}
+
+		_log.LogWarning("Unknown key code '{Code}'", code);
+
+		return Keys.None;
+	}
+}