microsoft
/
fast-blazor
зеркало из https://github.com/microsoft/fluentui-blazor.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Update the designer

This commit is contained in:
Denis Voituron 2024-09-12 12:33:32 +02:00
Родитель 3c933176d9
Коммит 563e12c728
4 изменённых файлов: 119 добавлений и 31 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

74
examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor
Просмотреть файл

@ -1,30 +1,54 @@
@using Microsoft.AspNetCore.Components.Forms
<div style="@Style">
<table>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody>
@foreach (var token in Tokens)
{
var name = token.Key;
var item = token.Value;
<div style="@Style" class="theme-token-editor">
<tr>
<td>
<strong>@name</strong>
</td>
<td>
<InputText type="@(item.Type == "number" ? "number" : "text")"
@bind-Value="@item.ValueAsString"
@bind-Value:after="@ApplyThemeAsync" />
</td>
</tr>
@foreach (var mainSection in Tokens.Select(i => i.Value.MainSection).Distinct())
{
<details>
<summary>
@mainSection
</summary>
@foreach (var subSection in Tokens.Where(i => i.Value.MainSection == mainSection).Select(i => i.Value.SubSection).Distinct())
{
<details style="margin-left: 24px;">
<summary>
@subSection
</summary>
<table>
<tbody>
@foreach (var token in Tokens.Where(i => i.Value.MainSection == mainSection && i.Value.SubSection == subSection))
{
var name = token.Key;
var item = token.Value;
<tr>
<td>
<strong>@name</strong>
</td>
<td style="display: flex;">
@if (GetInputType(item) == "color")
{
<InputText @bind-Value="@item.ValueAsString"
@bind-Value:after="@ApplyThemeAsync" />
<InputText type="color"
@bind-Value="@item.ValueAsString"
@bind-Value:after="@ApplyThemeAsync" />
}
else
{
<InputText type="@GetInputType(item)"
@bind-Value="@item.ValueAsString"
@bind-Value:after="@ApplyThemeAsync" />
}
</td>
</tr>
}
</tbody>
</table>
</details>
}
</tbody>
</table>
</details>
}
</div>

22
examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.cs
Просмотреть файл

@ -41,18 +41,28 @@ public partial class TokenEditor
{
var tokensJson = await JSRuntime.InvokeAsync<JsonElement>("Blazor.theme.getAllTokensValues");
Tokens = JsonSerializer.Deserialize<Dictionary<string, TokenItem>>(tokensJson.GetRawText(), JsonOptions) ?? [];
foreach (var token in Tokens)
{
token.Value.Name = token.Key;
}
StateHasChanged();
}
}
private class TokenItem
private static string GetInputType(TokenItem token)
{
public string Type { get; set; } = string.Empty;
public object Value { get; set; }= string.Empty;
public string ValueAsString
if (token.Type == "number")
{
get => Value?.ToString() ?? string.Empty;
set => Value = value;
return "number";
}
if (token.MainSection == "color")
{
return "color";
}
return "text";
}
}

7
examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenEditor.razor.css Normal file
Просмотреть файл

@ -0,0 +1,7 @@
.theme-token-editor ::deep input {
width: 100px;
}
.theme-token-editor ::deep input[type='color'] {
width: 24px;
}

47
examples/Demo/FluentUI.Demo.Client/Documentation/Theme/TokenItem.cs Normal file
Просмотреть файл

@ -0,0 +1,47 @@
// ------------------------------------------------------------------------
// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
// ------------------------------------------------------------------------
using System.Text.RegularExpressions;
namespace FluentUI.Demo.Client.Documentation.Theme;
internal class TokenItem
{
private string? _mainSection;
private string? _subSection;
public string Name { get; set; } = string.Empty;
public string Type { get; set; } = string.Empty;
public object Value { get; set; } = string.Empty;
public string ValueAsString
{
get => Value?.ToString() ?? string.Empty;
set => Value = value;
}
public string MainSection => _mainSection ??= GetMainSectionName(Name);
public string SubSection => _subSection ??= GetSubSectionName(Name);
private static string GetMainSectionName(string value)
{
var pattern = @"^[a-z]+";
var match = Regex.Match(value, pattern);
return match.Success ? match.Value : string.Empty;
}
private static string GetSubSectionName(string value)
{
var pattern = @"^[a-z]+([A-Z][a-z]+)";
var match = Regex.Match(value, pattern);
return match.Success && match.Groups.Count > 1
? match.Groups[1].Value
: string.Empty;
}
}