Skip to content

Commit 6d38329

Browse files
mckaragozmckaragoz
committed
Advanced Transitions
1 parent e57d43b commit 6d38329

File tree

6 files changed

+106
-5
lines changed

6 files changed

+106
-5
lines changed

‎BCSS.Test/CoreTests/ConverterTests.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,16 @@ public void AdvancedConvertTest()
4545

4646
}
4747

48+
[Test]
49+
public void SpacedResultTest()
50+
{
51+
BcssService service = new BcssService();
52+
BlazorCssConverter.Convert("transition-color-1-ease-in-out").Replace('*', ' ').Replace('+', '-').Should().Be("transition:ease-in-out color 1s");
53+
BlazorCssConverter.Convert("transition-color-1s-ease-in").Replace('*', ' ').Replace('+', '-').Should().Be("transition:ease-in color 1s");
54+
//Wrong example
55+
BlazorCssConverter.Convert("transition-color-1-easein-out").Replace('*', ' ').Replace('+', '-').Should().Be("transition:color 1s easein out");
56+
}
57+
4858
[Test]
4959
public void UnitMeasurementTest()
5060
{

‎BCSS/Services/BlazorCssConverter.cs‎

Lines changed: 76 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -846,8 +846,82 @@ public static string SpacedResult(string? value, string? name = null)
846846
{
847847
return string.Empty;
848848
}
849-
string subString = GetCustomValue(value);
850-
return $"{(string.IsNullOrEmpty(name) ? null : name + ":")}{value.Replace("["+subString+"]", CustomValueResult(subString)).Replace('-', '*')}";
849+
850+
List<string> partialValues = new();
851+
852+
if (value.Contains("ease-in-out"))
853+
{
854+
partialValues.Add("ease+in+out");
855+
value = value.Replace("ease-in-out", "");
856+
}
857+
if (value.Contains("ease-in"))
858+
{
859+
partialValues.Add("ease+in");
860+
value = value.Replace("ease-in", "");
861+
}
862+
if (value.Contains("ease-out"))
863+
{
864+
partialValues.Add("ease+out");
865+
value = value.Replace("ease-out", "");
866+
}
867+
if (value.Contains("background-color"))
868+
{
869+
partialValues.Add("background+color");
870+
value = value.Replace("background-color", "");
871+
}
872+
if (value.Contains("border-color"))
873+
{
874+
partialValues.Add("border+color");
875+
value = value.Replace("border-color", "");
876+
}
877+
if (value.Contains("box-shadow"))
878+
{
879+
partialValues.Add("box+shadow");
880+
value = value.Replace("box-shadow", "");
881+
}
882+
if (value.Contains("backdrop-filter"))
883+
{
884+
partialValues.Add("backdrop+filter");
885+
value = value.Replace("backdrop-filter", "");
886+
}
887+
888+
string[] splittedValue = value.Split('-');
889+
890+
891+
foreach (var val in splittedValue)
892+
{
893+
if (string.IsNullOrEmpty(val))
894+
{
895+
continue;
896+
}
897+
if (name == null)
898+
{
899+
partialValues.Add(val);
900+
continue;
901+
}
902+
if (name == "transition" || name == "animation")
903+
{
904+
if (double.TryParse(val, out double result))
905+
{
906+
partialValues.Add(result.ToString().Replace(',', '.') + "s");
907+
continue;
908+
}
909+
}
910+
911+
if (name.Contains("border"))
912+
{
913+
if (double.TryParse(val, out double result))
914+
{
915+
partialValues.Add(result.ToString().Replace(',', '.') + "px");
916+
continue;
917+
}
918+
}
919+
920+
partialValues.Add(val);
921+
}
922+
string unifiedValue = string.Join("-", partialValues);
923+
string subString = GetCustomValue(unifiedValue);
924+
return $"{(string.IsNullOrEmpty(name) ? null : name + ":")}{unifiedValue.Replace("["+subString+"]", CustomValueResult(subString)).Replace('-', '*')}";
851925
}
852926

853927
public static string CustomValueResult(string? val)

‎BCSSViewer.Docs/Pages/SpecialContent/TransformPage.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@
1212
<CodeBlock Title="Origin" Code="@("origin-center\norigin-top origin-bottom origin-left origin-right\norigin-top-left origin-top-right origin-bottom-left origin-bottom-right")" />
1313
</MudStack>
1414

15-
<PageBottomRouting PreviousHref="/contentspecial/flexbox" PreviousText="Flexbox" NextHref="/contentspecial/transform" NextText="Transforms" />
15+
<PageBottomRouting PreviousHref="/contentspecial/flexbox" PreviousText="Flexbox" NextHref="/contentspecial/transition" NextText="Transitions" />
1616
</MudContainer>

‎BCSSViewer.Docs/Pages/SpecialContent/TransitionPage.razor‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@page "/contentspecial/transition"
2+
@namespace BCSSViewer.Docs.Pages
3+
4+
<MudContainer>
5+
<MudText Class="mb-4" Typo="Typo.h4">Transitions</MudText>
6+
7+
<MudStack Class="mt-4" Spacing="4">
8+
<CodeBlock Description="Set related property, delay, duration and timing function." Code="@("transition-color-1s-2s-ease")" />
9+
<MudAlert Severity="Severity.Info">Transition values have no order. However, the first number value represents delay, and other one represents duration.</MudAlert>
10+
<CodeBlock Title="Shorten BCSS Usage" Description="Don't need to add 's' suffix to number values. Keep property empty to affect all properties." Code="@("transition-all-1-2-ease\ntransition-1-2-ease\t//Affect all properties.")" />
11+
<CodeBlock Title="Multiple Transition Definitions" Description="For multiple transitions, use full name of property and numbers with 's' suffix. Seperate with comma." Code="@("transition-background-color-2 transition-color-2\t//Wrong, only color transition works.\ntransition-background-color-2s,color-2s\t\t//Both properties work.")" />
12+
<CodeBlock Title="Advanced" Description="If your transition (with basic syntax) doesn't work, try with advanced syntax. ('+' instead of '-' and '*' instead of ' '). This example shows basic and advanced syntax." Code="@("transition-backdrop-filter-2-ease-in-out\t//Basic syntax.\ntransition-backdrop+filter-2s-ease+in+out\t//Advanced syntax.")" />
13+
</MudStack>
14+
15+
<PageBottomRouting PreviousHref="/contentspecial/transform" PreviousText="Transforms" NextHref="/contentspecial/transition" NextText="Transitions" />
16+
</MudContainer>

‎BCSSViewer.Docs/Pages/Syntax/AdvancedSyntaxPage.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<MudText>Normally BCSS classes can be created with dash (-) character. But in advanced scenarios '*' and '+' character are also allowed.</MudText>
77

88
<MudStack Class="mt-4" Spacing="4">
9-
<CodeBlock Description="'*' character is used instead of a space and '+' character instead of '-'" Code="@("transition-color-2s-ease+in+out\ntransition-color*2s*ease+in+out\ntransition--color-2s-ease+in+out\ntransition--color*2s*ease+in+out\n//transition: color 2s ease-in-out")" />
10-
<MudAlert Severity="Severity.Info">With advanced syntax, all CSS statements can be transform into BCSS.</MudAlert>
9+
<CodeBlock Description="Advanced syntax has two more special characters. '*' character is used instead of a space and '+' character instead of '-'" Code="@("transition-color-2s-ease-in-out\ntransition-color*2s*ease+in+out\ntransition--color-2s-ease+in+out\ntransition--color*2s*ease+in+out\n//transition: color 2s ease-in-out")" />
10+
<MudAlert Severity="Severity.Info">With advanced syntax, all CSS statements can be transform into BCSS. If your basic syntax doesn't work, try with advanced syntax.</MudAlert>
1111
</MudStack>
1212

1313
<PageBottomRouting PreviousHref="/syntax/doubledash" PreviousText="Dash and DoubleDash" NextHref="/syntax/unitmeasurement" NextText="Unit Measurement" />

‎BCSSViewer.Docs/Shared/MainLayout.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
<MudNavLink Match="NavLinkMatch.All" Href="/contentspecial/flexbox">Flexbox</MudNavLink>
5151
<MudNavLink Match="NavLinkMatch.All" Href="/contentspecial/shadow">Shadow</MudNavLink>
5252
<MudNavLink Match="NavLinkMatch.All" Href="/contentspecial/transform">Transforms</MudNavLink>
53+
<MudNavLink Match="NavLinkMatch.All" Href="/contentspecial/transition">Transitions</MudNavLink>
5354
</MudNavGroup>
5455
<MudNavGroup Title="Dev Tools" Icon="@Icons.Material.Filled.DeveloperBoard" IconColor="Color.Primary">
5556
<MudNavLink Match="NavLinkMatch.All" Href="/devtools/quickdebug">QuickDebug</MudNavLink>

0 commit comments

Comments
 (0)