Skip to content

Commit b596ed8

Browse files
mckaragozmckaragoz
authored
MudWheel (#18)
* Initialize * Color and ToStringFunc * Docs and API
1 parent 12d7aee commit b596ed8

14 files changed

Lines changed: 453 additions & 19 deletions

File tree

‎CodeBeam.MudExtensions/Components/Toggle/MudToggle.razor.cs‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,14 @@ protected string GetStyle()
2424
{
2525
if (Toggled == false)
2626
{
27-
return Style;
27+
return $"{StyleCommon} {Style}";
2828
}
2929
else
3030
{
31-
return StyleToggled;
31+
return $"{StyleCommon} {StyleToggled}";
3232
}
3333

3434
}
35-
3635

3736
bool _toggled;
3837
[Parameter]
@@ -62,6 +61,9 @@ public bool Toggled
6261
[Parameter]
6362
public string StyleToggled { get; set; }
6463

64+
[Parameter]
65+
public string StyleCommon { get; set; }
66+
6567
[Parameter]
6668
public RenderFragment ChildContent { get; set; }
6769

‎CodeBeam.MudExtensions/Components/Wheel/MudWheel.razor‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@namespace MudExtensions
2+
@typeparam T
3+
@inherits MudBaseInput<T>
4+
@using MudExtensions.Enums
5+
@using MudExtensions.Utilities
6+
7+
8+
<MudSwipeArea Class="mud-wheel d-flex flex-column align-center justify-center relative" Style="@GetStylename()" OnSwipe="@(async(d) => await HandleOnSwipe(d))" @onwheel="HandleOnWheel" PreventDefault="true">
9+
10+
@if (true)
11+
{
12+
int index = GetIndex();
13+
for (int i = WheelLevel + 1; 0 < i; i--)
14+
{
15+
int a = i;
16+
if (0 <= index - a)
17+
{
18+
<div class="@OuterItemClassname(index - a)" @onclick="@(async() => await ChangeWheel(-a))">
19+
<MudText Typo="@(Dense ? Typo.body1 : Typo.h6)">@(ToStringFunc != null ? ToStringFunc(ItemCollection[index - a]) : Converter.Set(ItemCollection[index - a]))</MudText>
20+
</div>
21+
}
22+
else
23+
{
24+
<div class="@EmptyItemClassname" />
25+
}
26+
}
27+
28+
<span class="@BorderClassname" />
29+
30+
<div class="middle-item d-flex align-center justify-center mud-width-full">
31+
<MudText Class="@($"mud-wheel-ani-{_animateGuid} my-2)")" Typo="@(Dense ? Typo.body1 : Typo.h6)" Color="@Color" Style="font-weight: 900">@(ToStringFunc != null ? ToStringFunc(ItemCollection[index]) : Converter.Set(ItemCollection[index]))</MudText>
32+
</div>
33+
34+
<div class="@BorderClassname" />
35+
36+
for (int i = 1; i < WheelLevel + 2; i++)
37+
{
38+
int a = i;
39+
if (index + a < ItemCollection.Count)
40+
{
41+
<div class="@OuterItemClassname(index + a)" @onclick="@(async() => await ChangeWheel(a))">
42+
<MudText Typo="@(Dense ? Typo.body1 : Typo.h6)">@(ToStringFunc != null ? ToStringFunc(ItemCollection[index + a]) : Converter.Set(ItemCollection[index + a]))</MudText>
43+
</div>
44+
}
45+
else
46+
{
47+
<div class="@EmptyItemClassname" />
48+
}
49+
}
50+
}
51+
</MudSwipeArea>
52+
53+
<MudAnimate @ref="_animate" Selector="@($".mud-wheel-ani-{_animateGuid}")" AnimationType="AnimationType.SlideY" Duration="0.3" Value="0" ValueSecondary="_animateValue" AnimationTiming="AnimationTiming.Ease" />

‎CodeBeam.MudExtensions/Components/Wheel/MudWheel.razor.cs‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
using Microsoft.AspNetCore.Components;
2+
using Microsoft.AspNetCore.Components.Web;
3+
using MudBlazor;
4+
using MudBlazor.Extensions;
5+
using MudBlazor.Utilities;
6+
using System;
7+
using System.Collections.Generic;
8+
using System.Linq;
9+
using System.Text;
10+
using System.Threading.Tasks;
11+
12+
namespace MudExtensions
13+
{
14+
public partial class MudWheel<T> : MudBaseInput<T>
15+
{
16+
17+
protected string OuterItemClassname(int index) => new CssBuilder($"mud-wheel-item mud-wheel-ani-{_animateGuid}")
18+
.AddClass("wheel-item-closest", Math.Abs(ItemCollection.IndexOf(Value) - index) == 1)
19+
.AddClass("my-1", Dense == false)
20+
.Build();
21+
22+
protected string BorderClassname => new CssBuilder("mud-wheel-border mud-wheel-item mud-width-full")
23+
.AddClass($"mud-wheel-border-{Color.ToDescriptionString()}")
24+
.AddClass($"wheel-border-gradient-{Color.ToDescriptionString()}", SmoothBorders)
25+
.AddClass("my-1", Dense == false)
26+
.Build();
27+
28+
protected string EmptyItemClassname => new CssBuilder("mud-wheel-ani-{_animateGuid} mud-wheel-item wheel-item-empty")
29+
.AddClass("my-1", Dense == false)
30+
.AddClass("wheel-item-empty-dense", Dense == true)
31+
.Build();
32+
33+
MudAnimate _animate;
34+
Guid _animateGuid = Guid.NewGuid();
35+
int _animateValue = 52;
36+
37+
[Parameter]
38+
public List<T> ItemCollection { get; set; }
39+
40+
[Parameter]
41+
public int WheelLevel { get; set; } = 2;
42+
43+
[Parameter]
44+
public bool Dense { get; set; }
45+
46+
[Parameter]
47+
public bool SmoothBorders { get; set; }
48+
49+
[Parameter]
50+
public Color Color { get; set; }
51+
52+
private Func<T, string> _toStringFunc = x => x?.ToString();
53+
/// <summary>
54+
/// Defines how values are displayed in the drop-down list
55+
/// </summary>
56+
[Parameter]
57+
[Category(CategoryTypes.FormComponent.ListBehavior)]
58+
public Func<T, string> ToStringFunc
59+
{
60+
get => _toStringFunc;
61+
set
62+
{
63+
if (_toStringFunc == value)
64+
return;
65+
_toStringFunc = value;
66+
Converter = new Converter<T>
67+
{
68+
SetFunc = _toStringFunc ?? (x => x?.ToString()),
69+
};
70+
}
71+
}
72+
73+
protected string GetStylename()
74+
{
75+
return new StyleBuilder()
76+
.AddStyle("height", $"{(WheelLevel * (Dense ? 24 : 40) * 2) + (Dense ? 32 : 46)}px")
77+
.AddStyle(Style)
78+
.Build();
79+
}
80+
81+
protected async Task HandleOnWheel(WheelEventArgs args)
82+
{
83+
int index = GetIndex();
84+
if ((args.DeltaY < 0 && index == 0) || (0 < args.DeltaY && index == ItemCollection.Count - 1))
85+
{
86+
return;
87+
}
88+
89+
if (0 < args.DeltaY)
90+
{
91+
_animateValue = GetAnimateValue();
92+
}
93+
else
94+
{
95+
_animateValue = - GetAnimateValue();
96+
}
97+
await _animate.Refresh();
98+
if (args.DeltaY < 0 && index != 0)
99+
{
100+
T val = ItemCollection[index - 1];
101+
await SetValueAsync(val);
102+
}
103+
else if (0 < args.DeltaY && index != ItemCollection.Count - 1)
104+
{
105+
T val = ItemCollection[index + 1];
106+
await SetValueAsync(val);
107+
}
108+
await Task.Delay(300);
109+
}
110+
111+
protected async Task HandleOnSwipe(SwipeDirection direction)
112+
{
113+
int index = GetIndex();
114+
if ((direction == SwipeDirection.TopToBottom && index == 0) || (direction == SwipeDirection.BottomToTop && index == ItemCollection.Count - 1))
115+
{
116+
return;
117+
}
118+
if (direction == SwipeDirection.BottomToTop)
119+
{
120+
_animateValue = GetAnimateValue();
121+
}
122+
else
123+
{
124+
_animateValue = - GetAnimateValue();
125+
}
126+
await _animate.Refresh();
127+
if (direction == SwipeDirection.TopToBottom)
128+
{
129+
T val = ItemCollection[index - 1];
130+
await SetValueAsync(val);
131+
}
132+
else if (direction == SwipeDirection.BottomToTop)
133+
{
134+
T val = ItemCollection[index + 1];
135+
await SetValueAsync(val);
136+
}
137+
138+
}
139+
140+
protected async Task ChangeWheel(int changeCount)
141+
{
142+
int index = GetIndex();
143+
if (0 < changeCount)
144+
{
145+
_animateValue = GetAnimateValue();
146+
}
147+
else
148+
{
149+
_animateValue = - GetAnimateValue();
150+
}
151+
await _animate.Refresh();
152+
T val = ItemCollection[index + changeCount];
153+
await SetValueAsync(val);
154+
}
155+
156+
protected int GetIndex() => ItemCollection.IndexOf(Value) == -1 ? 0 : ItemCollection.IndexOf(Value);
157+
protected int GetAnimateValue() => Dense ? 24 : 42;
158+
}
159+
}

‎CodeBeam.MudExtensions/Styles/Components/_wheel.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
$mud-palette-colors: primary, secondary, tertiary, info, success, warning, error, dark;
2+
3+
.mud-wheel {
4+
/*height: 240px;*/
5+
overflow: hidden;
6+
min-width: 0;
7+
flex-grow: 1;
8+
}
9+
10+
.mud-wheel-item {
11+
width: 100%;
12+
display: flex;
13+
align-content: center;
14+
justify-content: center;
15+
color: var(--mud-palette-text-secondary);
16+
border-radius: var(--mud-default-borderradius);
17+
18+
&.mud-wheel-item:hover {
19+
background-color: var(--mud-palette-action-default-hover);
20+
}
21+
22+
&.wheel-item-closest {
23+
color: var(--mud-palette-text);
24+
}
25+
26+
&.wheel-item-empty {
27+
min-height: 32px !important;
28+
29+
&.wheel-item-empty-dense {
30+
min-height: 24px !important;
31+
}
32+
33+
&.wheel-item-empty:hover {
34+
background-color: unset;
35+
}
36+
}
37+
}
38+
39+
.middle-item {
40+
transform: scale(1.2);
41+
}
42+
43+
.mud-wheel-border {
44+
min-height: 2px !important;
45+
/*background-color: var(--mud-palette-primary);*/
46+
47+
&.mud-wheel-border-default {
48+
background-color: var(--mud-palette-text-primary);
49+
}
50+
51+
@each $color in $mud-palette-colors {
52+
&.mud-wheel-border-#{$color} {
53+
background-color: var(--mud-palette-#{$color});
54+
}
55+
56+
&.wheel-border-gradient-#{$color} {
57+
background-image: linear-gradient(to right, rgba(255,0,0,0), var(--mud-palette-#{$color}), rgba(255,0,0,0));
58+
background-color: unset;
59+
}
60+
}
61+
62+
&.wheel-border-gradient-default {
63+
background-image: linear-gradient(to right, rgba(255,0,0,0), var(--mud-palette-text-primary), rgba(255,0,0,0));
64+
background-color: unset;
65+
}
66+
}

‎CodeBeam.MudExtensions/Styles/MudExtensions.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,3 +188,79 @@
188188
border-color: var(--mud-palette-error); }
189189
.mud-stepper-header-dash.mud-stepper-header-dash-completed.mud-stepper-border-dark {
190190
border-color: var(--mud-palette-dark); }
191+
192+
.mud-wheel {
193+
/*height: 240px;*/
194+
overflow: hidden;
195+
min-width: 0;
196+
flex-grow: 1; }
197+
198+
.mud-wheel-item {
199+
width: 100%;
200+
display: flex;
201+
align-content: center;
202+
justify-content: center;
203+
color: var(--mud-palette-text-secondary);
204+
border-radius: var(--mud-default-borderradius); }
205+
.mud-wheel-item.mud-wheel-item:hover {
206+
background-color: var(--mud-palette-action-default-hover); }
207+
.mud-wheel-item.wheel-item-closest {
208+
color: var(--mud-palette-text); }
209+
.mud-wheel-item.wheel-item-empty {
210+
min-height: 32px !important; }
211+
.mud-wheel-item.wheel-item-empty.wheel-item-empty-dense {
212+
min-height: 24px !important; }
213+
.mud-wheel-item.wheel-item-empty.wheel-item-empty:hover {
214+
background-color: unset; }
215+
216+
.middle-item {
217+
transform: scale(1.2); }
218+
219+
.mud-wheel-border {
220+
min-height: 2px !important;
221+
/*background-color: var(--mud-palette-primary);*/ }
222+
.mud-wheel-border.mud-wheel-border-default {
223+
background-color: var(--mud-palette-text-primary); }
224+
.mud-wheel-border.mud-wheel-border-primary {
225+
background-color: var(--mud-palette-primary); }
226+
.mud-wheel-border.wheel-border-gradient-primary {
227+
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--mud-palette-primary), rgba(255, 0, 0, 0));
228+
background-color: unset; }
229+
.mud-wheel-border.mud-wheel-border-secondary {
230+
background-color: var(--mud-palette-secondary); }
231+
.mud-wheel-border.wheel-border-gradient-secondary {
232+
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--mud-palette-secondary), rgba(255, 0, 0, 0));
233+
background-color: unset; }
234+
.mud-wheel-border.mud-wheel-border-tertiary {
235+
background-color: var(--mud-palette-tertiary); }
236+
.mud-wheel-border.wheel-border-gradient-tertiary {
237+
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--mud-palette-tertiary), rgba(255, 0, 0, 0));
238+
background-color: unset; }
239+
.mud-wheel-border.mud-wheel-border-info {
240+
background-color: var(--mud-palette-info); }
241+
.mud-wheel-border.wheel-border-gradient-info {
242+
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--mud-palette-info), rgba(255, 0, 0, 0));
243+
background-color: unset; }
244+
.mud-wheel-border.mud-wheel-border-success {
245+
background-color: var(--mud-palette-success); }
246+
.mud-wheel-border.wheel-border-gradient-success {
247+
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--mud-palette-success), rgba(255, 0, 0, 0));
248+
background-color: unset; }
249+
.mud-wheel-border.mud-wheel-border-warning {
250+
background-color: var(--mud-palette-warning); }
251+
.mud-wheel-border.wheel-border-gradient-warning {
252+
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--mud-palette-warning), rgba(255, 0, 0, 0));
253+
background-color: unset; }
254+
.mud-wheel-border.mud-wheel-border-error {
255+
background-color: var(--mud-palette-error); }
256+
.mud-wheel-border.wheel-border-gradient-error {
257+
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--mud-palette-error), rgba(255, 0, 0, 0));
258+
background-color: unset; }
259+
.mud-wheel-border.mud-wheel-border-dark {
260+
background-color: var(--mud-palette-dark); }
261+
.mud-wheel-border.wheel-border-gradient-dark {
262+
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--mud-palette-dark), rgba(255, 0, 0, 0));
263+
background-color: unset; }
264+
.mud-wheel-border.wheel-border-gradient-default {
265+
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), var(--mud-palette-text-primary), rgba(255, 0, 0, 0));
266+
background-color: unset; }

0 commit comments

Comments
 (0)