Update design
This commit is contained in:
Родитель
563e12c728
Коммит
f137d8fcc3
|
@ -2,6 +2,25 @@
|
||||||
<TokenEditor Style="width: 500px; height: calc(100vh - 170px); overflow-y: auto; overflow-x: hidden;" />
|
<TokenEditor Style="width: 500px; height: calc(100vh - 170px); overflow-y: auto; overflow-x: hidden;" />
|
||||||
<div>
|
<div>
|
||||||
<h3>Preview:</h3>
|
<h3>Preview:</h3>
|
||||||
<fluent-button appearance="primary">Primary</fluent-button>
|
<div style="display: flex">
|
||||||
|
<fluent-button appearance="primary">Primary</fluent-button>
|
||||||
|
<fluent-button appearance="outline">Outline</fluent-button>
|
||||||
|
<fluent-button appearance="subtle">Subtle</fluent-button>
|
||||||
|
<fluent-button appearance="transparent">Transparent</fluent-button>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<fluent-menu>
|
||||||
|
<fluent-menu-button aria-label="Toggle Menu" appearance="primary" slot="trigger" tabindex="0" aria-haspopup="true" aria-expanded="false">Toggle Menu</fluent-menu-button>
|
||||||
|
<fluent-menu-list popover="">
|
||||||
|
<fluent-menu-item role="menuitem" tabindex="0" data-indent="0">Menu item 1</fluent-menu-item>
|
||||||
|
<fluent-menu-item role="menuitem" tabindex="-1" data-indent="0">Menu item 2</fluent-menu-item>
|
||||||
|
<fluent-menu-item role="menuitem" tabindex="-1" data-indent="0">Menu item 3</fluent-menu-item>
|
||||||
|
<fluent-menu-item role="menuitem" tabindex="-1" data-indent="0">Menu item 4</fluent-menu-item>
|
||||||
|
</fluent-menu-list>
|
||||||
|
</fluent-menu>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,16 +2,16 @@
|
||||||
|
|
||||||
<div style="@Style" class="theme-token-editor">
|
<div style="@Style" class="theme-token-editor">
|
||||||
|
|
||||||
@foreach (var mainSection in Tokens.Select(i => i.Value.MainSection).Distinct())
|
@foreach (var mainSection in Tokens.Select(i => i.Value.MainSection).Distinct().Order())
|
||||||
{
|
{
|
||||||
<details>
|
<details>
|
||||||
<summary>
|
<summary>
|
||||||
@mainSection
|
@mainSection
|
||||||
</summary>
|
</summary>
|
||||||
|
|
||||||
@foreach (var subSection in Tokens.Where(i => i.Value.MainSection == mainSection).Select(i => i.Value.SubSection).Distinct())
|
@foreach (var subSection in Tokens.Where(i => i.Value.MainSection == mainSection).Select(i => i.Value.SubSection).Distinct().Order())
|
||||||
{
|
{
|
||||||
<details style="margin-left: 24px;">
|
<details>
|
||||||
<summary>
|
<summary>
|
||||||
@subSection
|
@subSection
|
||||||
</summary>
|
</summary>
|
||||||
|
|
|
@ -58,7 +58,7 @@ public partial class TokenEditor
|
||||||
return "number";
|
return "number";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (token.MainSection == "color")
|
if (token.MainSection == "Color")
|
||||||
{
|
{
|
||||||
return "color";
|
return "color";
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,20 @@
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-token-editor ::deep input[type='color'] {
|
.theme-token-editor ::deep input[type='color'] {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-token-editor ::deep details,
|
||||||
|
.theme-token-editor ::deep table {
|
||||||
|
margin-left: 16px
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-token-editor ::deep summary {
|
||||||
|
list-style: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-token-editor ::deep > details > summary {
|
||||||
|
list-style: square;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,7 @@ namespace FluentUI.Demo.Client.Documentation.Theme;
|
||||||
|
|
||||||
internal class TokenItem
|
internal class TokenItem
|
||||||
{
|
{
|
||||||
|
private const string DEFAULT_SECTION = "Default";
|
||||||
private string? _mainSection;
|
private string? _mainSection;
|
||||||
private string? _subSection;
|
private string? _subSection;
|
||||||
|
|
||||||
|
@ -32,7 +33,9 @@ internal class TokenItem
|
||||||
var pattern = @"^[a-z]+";
|
var pattern = @"^[a-z]+";
|
||||||
var match = Regex.Match(value, pattern);
|
var match = Regex.Match(value, pattern);
|
||||||
|
|
||||||
return match.Success ? match.Value : string.Empty;
|
return match.Success
|
||||||
|
? CapitalizeFirstLetter(match.Value)
|
||||||
|
: DEFAULT_SECTION;
|
||||||
}
|
}
|
||||||
|
|
||||||
private static string GetSubSectionName(string value)
|
private static string GetSubSectionName(string value)
|
||||||
|
@ -41,7 +44,20 @@ internal class TokenItem
|
||||||
var match = Regex.Match(value, pattern);
|
var match = Regex.Match(value, pattern);
|
||||||
|
|
||||||
return match.Success && match.Groups.Count > 1
|
return match.Success && match.Groups.Count > 1
|
||||||
? match.Groups[1].Value
|
? CapitalizeFirstLetter(match.Groups[1].Value)
|
||||||
: string.Empty;
|
: DEFAULT_SECTION;
|
||||||
|
}
|
||||||
|
|
||||||
|
public static string CapitalizeFirstLetter(string input)
|
||||||
|
{
|
||||||
|
if (string.IsNullOrEmpty(input))
|
||||||
|
{
|
||||||
|
return input;
|
||||||
|
}
|
||||||
|
|
||||||
|
var firstChar = char.ToUpper(input[0]);
|
||||||
|
var restOfString = input.Substring(1);
|
||||||
|
|
||||||
|
return firstChar + restOfString;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Загрузка…
Ссылка в новой задаче