Skip to content

Commit 499ff5a

Browse files
QinyouzengQinyouzeng
authored
feat: update datetime color (#784)
* feat: restore themes color * feat: set datepicker color is primary; upgrade masa.blazor to 1.10.4
1 parent 30c9761 commit 499ff5a

File tree

7 files changed

+211
-11
lines changed

7 files changed

+211
-11
lines changed

‎src/Masa.Stack.Components.Standalone/Masa.Stack.Components.Standalone.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</ItemGroup>
1313

1414
<ItemGroup>
15-
<PackageReference Include="Masa.Blazor" Version="1.9.3" />
15+
<PackageReference Include="Masa.Blazor" Version="1.10.4" />
1616
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="$(MicrosoftPackageVersion)" />
1717
</ItemGroup>
1818

‎src/Masa.Stack.Components/Extensions/ServiceCollectionExtensions.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ private static void AddMasaStackComponentsService(IServiceCollection services, M
109109
theme.Themes.Light.Warning = "#FF5252";
110110
theme.Themes.Light.Info = "#37A7FF";
111111
theme.Themes.Light.Surface = "#F0F3FA";
112-
// theme.Themes.Light.UserDefined["reminder"] = "#FF7D00";
112+
//theme.Themes.Light.UserDefined["reminder"] = "#FF7D00";
113113
});
114114
options.Defaults = new Dictionary<string, IDictionary<string, object?>?>
115115
{

‎src/Masa.Stack.Components/Shared/IntegrationComponents/DateTime/SDateRangePicker.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
</MButton>
1515
</ActivatorContent>
1616
<ChildContent>
17-
<SDatePicker Value=StartTime Max=EndTime ValueChanged=UpdateStartTimeAsync TValue="DateOnly?" OnInput="() => StartTimeVisible = false"/>
17+
<SDatePicker Value=StartTime Max=EndTime ValueChanged=UpdateStartTimeAsync TValue="DateOnly?" OnInput="() => StartTimeVisible = false" Color="primary" />
1818
</ChildContent>
1919
</MMenu>
20-
<MDivider Vertical Class="mx-2" Style="align-self: auto; height: 14px;"/>
20+
<MDivider Vertical Class="mx-2" Style="align-self: auto; height: 14px;" />
2121
<MMenu @bind-Value="EndTimeVisible" CloseOnContentClick="false" OffsetY Transition="scale-transition" MaxWidth="290" Attach="Attach">
2222
<ActivatorContent>
2323
<MButton Text Small Class="@_datetimeEndTextCss"
@@ -27,7 +27,7 @@
2727
</MButton>
2828
</ActivatorContent>
2929
<ChildContent>
30-
<SDatePicker Value=EndTime Min=StartTime ValueChanged=UpdateEndTimeAsync TValue="DateOnly?" OnInput="() => EndTimeVisible = false"/>
30+
<SDatePicker Value=EndTime Min=StartTime ValueChanged=UpdateEndTimeAsync TValue="DateOnly?" OnInput="() => EndTimeVisible = false" Color="primary" />
3131
</ChildContent>
3232
</MMenu>
3333
</div>

‎src/Masa.Stack.Components/Shared/IntegrationComponents/DateTime/SDateTimePicker.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
ValueChanged="DateChangedAsync"
66
TValue="DateOnly?"
77
NoTitle="NoTitle"
8+
Color="primary"
89
Max="@GetMaxDateOnly()"
910
Min="@GetMinDateOnly()">
1011
<MRow Dense Align="AlignTypes.Center" Style="width: min-content; padding: 0 12px;">

‎src/Masa.Stack.Components/Shared/IntegrationComponents/DateTime/SDateTimeRangePicker.razor‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
<ChildContent>
3232
<div class="date-time-offset-picker__content mb-4 d-flex">
3333
<MDatePicker Value="@_internalStartDate"
34+
Color="primary"
3435
TValue="DateOnly?"
3536
ValueChanged="InternalStartDateChanged"
3637
NoTitle FullWidth
@@ -39,6 +40,7 @@
3940
<STimeSelector Value="@_internalStartTime" ValueChanged="InternalStartTimeChanged"></STimeSelector>
4041
</MDatePicker>
4142
<MDatePicker Value="@_internalEndDate"
43+
Color="primary"
4244
ValueChanged="InternalEndDateChanged"
4345
TValue="DateOnly?"
4446
NoTitle

‎src/Masa.Stack.Components/Shared/Layouts/Components/Notification.razor‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,7 @@
3131
</ActivatorContent>
3232
<ChildContent>
3333
<MCard Width="400">
34-
<MToolbar Color="primary"
35-
Dark Style="box-shadow: none;">
34+
<MToolbar Color="primary" Style="box-shadow: none;">
3635
<MButton Icon Class="ml-0" Small>
3736
<MIcon>mdi-bell-outline</MIcon>
3837
</MButton>

‎tests/MasaWasmApp/Pages/Users.razor‎

Lines changed: 202 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
@page "/users"
1+
@inject MasaBlazor MasaBlazor
2+
@inject IJSRuntime JSRuntime
3+
@page "/users"
24

35
<ul>
46
<li><a href="/users/1?a=1">User 1</a></li>
@@ -8,9 +10,205 @@
810
<li><a href="/users/5">User 5</a></li>
911
</ul>
1012

13+
14+
<SDateTimeRangeToolbar />
15+
16+
17+
<MButtonGroup @bind-Value="@_themeName" @bind-Value:after="OnThemeChanged" Mandatory Color="primary" Class="mb-4">
18+
@foreach (var item in themes)
19+
{
20+
<MButton Value="@item" Class="text-none">@item</MButton>
21+
}
22+
</MButtonGroup>
23+
24+
<MThemeProvider Theme="@_themeName.ToString()" WithBackground>
25+
<MRow Dense Class="pa-4 ma-0" Style="background:rgba(var(--m-theme-primary), 0.3)">
26+
<MCol Cols="3">
27+
<MCard Tile Elevation="0">
28+
@GenBg("primary",
29+
_currentThemeOptions?.Primary,
30+
"--m-theme-primary",
31+
"primary")
32+
@GenText("primary", _currentThemeOptions?.OnPrimary, "--m-theme-on-primary", "primary--text")
33+
</MCard>
34+
</MCol>
35+
<MCol Cols="3">
36+
<MCard Tile Elevation="0">
37+
@GenBg("secondary", _currentThemeOptions?.Secondary,
38+
"--m-theme-secondary",
39+
"secondary")
40+
@GenText("secondary", _currentThemeOptions?.OnSecondary,
41+
"--m-theme-on-secondary",
42+
"secondary--text")
43+
</MCard>
44+
</MCol>
45+
<MCol Cols="3">
46+
<MCard Tile Elevation="0">
47+
@GenBg("accent", _currentThemeOptions?.Accent,
48+
"--m-theme-accent",
49+
"accent")
50+
@GenText("accent", _currentThemeOptions?.OnAccent,
51+
"--m-theme-on-accent",
52+
"accent--text")
53+
</MCard>
54+
</MCol>
55+
<MCol Cols="3">
56+
<MCard Tile Elevation="0">
57+
@GenBg("error", _currentThemeOptions?.Error,
58+
"--m-theme-error",
59+
"error")
60+
@GenText("error", _currentThemeOptions?.OnError,
61+
"--m-theme-on-error",
62+
"error--text")
63+
</MCard>
64+
</MCol>
65+
<MCol Cols="9">
66+
<MRow Dense>
67+
<MCol Cols="4">
68+
<MCard Tile Elevation="0">
69+
@GenBg("surface-dim", default!,
70+
"--m-theme-surface-dim",
71+
"surface-dim")
72+
</MCard>
73+
</MCol>
74+
<MCol Cols="4">
75+
<MCard Tile Elevation="0">
76+
@GenBg("surface", _currentThemeOptions?.Surface,
77+
"--m-theme-surface",
78+
"surface")
79+
</MCard>
80+
</MCol>
81+
<MCol Cols="4">
82+
<MCard Tile Elevation="0">
83+
@GenBg("surface-bright", default,
84+
"--m-theme-surface-bright",
85+
"surface-bright")
86+
</MCard>
87+
</MCol>
88+
<MCol Cols="12">
89+
<MCard Tile Elevation="0" Class="d-flex">
90+
@GenBg("surface-container-lowest", default,
91+
"--m-theme-surface-container-lowest",
92+
"surface-container-lowest")
93+
@GenBg("surface-container-low",default,
94+
"--m-theme-surface-container-low",
95+
"surface-container-low")
96+
@GenBg("surface-container", _currentThemeOptions?.SurfaceContainer,
97+
"--m-theme-surface-container",
98+
"surface-container")
99+
@GenBg("surface-container-high", default,
100+
"--m-theme-surface-container-high",
101+
"surface-container-high")
102+
@GenBg("surface-container-highest", default,
103+
"--m-theme-surface-container-highest",
104+
"surface-container-highest")
105+
</MCard>
106+
</MCol>
107+
<MCol Cols="12">
108+
<MCard Tile Elevation="0" Class="d-flex">
109+
@GenBase(css: null, style: "background: rgba(var(--m-theme-on-surface)); color: rgba(var(--m-theme-surface));", "On Surface", 40, _currentThemeOptions?.OnSurface,
110+
variableToCopy: "--m-theme-on-surface",
111+
cssToCopy: null)
112+
@GenStyle("outline", color: null, "--m-theme-outline", "outline")
113+
@GenStyle("outline-variant", color: null, "--m-theme-outline-variant", "outline-variant")
114+
</MCard>
115+
</MCol>
116+
</MRow>
117+
</MCol>
118+
<MCol Cols="3" Align="AlignTypes.End">
119+
<MRow Dense>
120+
<MCol Cols="12">
121+
<MCard Tile Elevation="0">
122+
@GenBase(css: "inverse-surface", style: null, text: "Inverse Surface", height: 40, color: _currentThemeOptions?.InverseSurface,
123+
"--m-theme-inverse-surface",
124+
cssToCopy: "inverse-surface")
125+
@GenStyle("inverse-on-surface", _currentThemeOptions?.InverseOnSurface, "--m-theme-inverse-on-surface", "inverse-on-surface")
126+
@GenStyle("inverse-primary", _currentThemeOptions?.InversePrimary, "--m-theme-inverse-primary", null)
127+
</MCard>
128+
</MCol>
129+
</MRow>
130+
</MCol>
131+
</MRow>
132+
</MThemeProvider>
133+
11134
@code {
12135

13-
[Parameter]
14-
public string Id { get; set; }
136+
private StringNumber _themeName = "light";
137+
private ThemeOptions? _currentThemeOptions;
138+
private (string Role, string Color)? _currentColorRole;
139+
140+
string[] themes = new[] { "light", "dadada" };
141+
142+
protected override void OnInitialized()
143+
{
144+
base.OnInitialized();
145+
_currentThemeOptions = MasaBlazor.Theme.CurrentTheme;
146+
}
147+
148+
private void OnThemeChanged()
149+
{
150+
_currentThemeOptions = _themeName == "light" ? MasaBlazor.Theme.Themes.Light : MasaBlazor.Theme.Themes.Dark;
151+
}
152+
153+
private RenderFragment GenBg(string role, string? color, string variableToCopy, string cssToCopy) => GenBase(
154+
css: role,
155+
style: null,
156+
text: role,
157+
height: 78,
158+
color,
159+
variableToCopy,
160+
cssToCopy);
161+
162+
private RenderFragment GenText(string role, string? color, string variableToCopy, string cssToCopy) => GenBase(
163+
css: null,
164+
style: $"background: rgba(var(--m-theme-on-{role})); color: rgba(var(--m-theme-{role}-text));",
165+
text: "on " + role,
166+
height: 40,
167+
color,
168+
variableToCopy,
169+
cssToCopy);
170+
171+
private RenderFragment GenStyle(string role, string? color, string variableToCopy, string? cssToCopy) => GenBase(
172+
css: null,
173+
style: $"background: rgba(var(--m-theme-{role})); color: rgba(var(--m-theme-{role}-text));",
174+
text: role,
175+
height: 40,
176+
color,
177+
variableToCopy,
178+
cssToCopy);
179+
180+
private RenderFragment GenBase(string? css, string? style, string text, int height, string? color, string? variableToCopy = null, string? cssToCopy = null) => __builder =>
181+
{
182+
<div class="px-4 pt-2 text-capitalize flex-grow-1 rounded-0 text-body-2 @css"
183+
style="@style position: relative; height: @($"{height}px")">
184+
@text.Replace("-", " ")
185+
<div style="position: absolute; right: 6px; bottom: 6px; left: 0;"
186+
class="d-flex align-center justify-end">
187+
@GenBtn("mdi-eyedropper", color)
188+
189+
@if (variableToCopy is not null)
190+
{
191+
@GenBtn("mdi-variable", $"rgba(var({variableToCopy}))")
192+
}
193+
194+
@GenBtn("$css", cssToCopy)
195+
</div>
196+
</div>
197+
};
198+
199+
private RenderFragment GenBtn(string icon, string? copyText) => __builder =>
200+
{
201+
@if (copyText is not null)
202+
{
203+
<MButton IconName="@icon" Small OnClick="@CopyText">
204+
<MTooltip Activator="parent" Text="@copyText"></MTooltip>
205+
</MButton>
206+
}
207+
208+
void CopyText()
209+
{
210+
JSRuntime.InvokeVoidAsync(JsInteropConstants.CopyText, copyText).ConfigureAwait(false);
211+
}
212+
};
15213

16-
}
214+
}

0 commit comments

Comments
 (0)