From 563d5637deb5d7708ecba3bca5c8bb7bffac0a6e Mon Sep 17 00:00:00 2001 From: capdiem Date: Tue, 6 Aug 2024 15:20:56 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=86=95=20feat(Slider):=20fix=20the=20?= =?UTF-8?q?issue=20of=20losing=20focus=20state=20and=20add=20support=20for?= =?UTF-8?q?=20customizing=20the=20size=20of=20track?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Input/MInput.razor.cs | 4 +-- .../Components/Slider/MSliderBase.razor | 12 ++++---- .../Components/Slider/MSliderBase.razor.cs | 13 ++++----- src/Masa.Blazor/wwwroot/css/masa-blazor.css | 28 +++++++++++-------- .../wwwroot/css/masa-blazor.extend.css | 12 +++++++- 5 files changed, 43 insertions(+), 26 deletions(-) diff --git a/src/Masa.Blazor/Components/Input/MInput.razor.cs b/src/Masa.Blazor/Components/Input/MInput.razor.cs index be633fa372..3fbf5b2ea8 100644 --- a/src/Masa.Blazor/Components/Input/MInput.razor.cs +++ b/src/Masa.Blazor/Components/Input/MInput.razor.cs @@ -11,7 +11,7 @@ public partial class MInput : MasaComponentBase, IThemeable, IFilterInpu [CascadingParameter(Name = "AppIsDark")] protected bool AppIsDark { get; set; } - [Parameter] public string? Color { get; set; } + [Parameter] public virtual string? Color { get; set; } [Parameter] public string? BackgroundColor { get; set; } @@ -224,7 +224,7 @@ public void StateHasChangedForJsInvokable() #endregion - public virtual string ComputedColor => IsDisabled ? "" : Color ?? (IsDark && !AppIsDark ? "white" : "primary"); + public virtual string? ComputedColor => IsDisabled ? null : Color ?? (IsDark && !AppIsDark ? "white" : "black"); public virtual bool HasColor => false; diff --git a/src/Masa.Blazor/Components/Slider/MSliderBase.razor b/src/Masa.Blazor/Components/Slider/MSliderBase.razor index 1cfcfe4730..b0e6ab9b05 100644 --- a/src/Masa.Blazor/Components/Slider/MSliderBase.razor +++ b/src/Masa.Blazor/Components/Slider/MSliderBase.razor @@ -57,7 +57,9 @@ private RenderFragment GenTrackContainer() => __builder => { -
+
@GenTrackContainerChild()
}; @@ -108,10 +110,10 @@ protected RenderFragment GenThumbContainerCore(int index, ElementReferenceWrapper elRefWrapper) => __builder => { var active = IsThumbActive(index); - var focus = IsThumbFocus(index); + var focused = IsThumbFocus(index); var showLabel = ShowThumbLabel; -
__builder => { -
+
}; diff --git a/src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs b/src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs index de7f739380..c51b721e8a 100644 --- a/src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs +++ b/src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs @@ -28,10 +28,14 @@ public partial class MSliderBase : MInput, IOutsideCli [Parameter] [MasaApiParameter(false)] public StringBoolean Ticks { get; set; } = false; + [Parameter] [MasaApiParameter("primary")] public override string? Color { get; set; } = "primary"; + [Parameter] public string? TrackColor { get; set; } [Parameter] public string? TrackFillColor { get; set; } + [Parameter] [MasaApiParameter(2)] public double TrackSize { get; set; } = 2; + [Parameter] [MasaApiParameter(2)] public double TickSize { get; set; } = 2; [Parameter] public StringBoolean? ThumbLabel { get; set; } @@ -157,12 +161,7 @@ public string? ComputedTrackColor return TrackColor; } - if (IsDark) - { - return ValidationState; - } - - return string.IsNullOrEmpty(ValidationState) ? "primary lighten-3" : ValidationState; + return ValidationState ?? ComputedColor; } } @@ -180,7 +179,7 @@ public string? ComputedTrackFillColor return TrackFillColor; } - return string.IsNullOrEmpty(ValidationState) ? ComputedColor : ValidationState; + return ValidationState ?? ComputedColor; } } diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.css index 2edcaffca4..835a847794 100644 --- a/src/Masa.Blazor/wwwroot/css/masa-blazor.css +++ b/src/Masa.Blazor/wwwroot/css/masa-blazor.css @@ -23186,14 +23186,12 @@ html.overflow-y-hidden { margin-bottom: 24px; } .theme--light.m-slider .m-slider__track-background, -.theme--light.m-slider .m-slider__track-fill, -.theme--light.m-slider .m-slider__thumb { +.theme--light.m-slider .m-slider__track-fill { background: rgba(0, 0, 0, 0.26); } .theme--dark.m-slider .m-slider__track-background, -.theme--dark.m-slider .m-slider__track-fill, -.theme--dark.m-slider .m-slider__thumb { +.theme--dark.m-slider .m-slider__track-fill { background: rgba(255, 255, 255, 0.2); } @@ -23248,6 +23246,7 @@ html.overflow-y-hidden { -moz-user-select: none; -ms-user-select: none; user-select: none; + background-color: currentColor; } .m-slider__thumb:before { transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); @@ -23256,7 +23255,7 @@ html.overflow-y-hidden { width: 36px; height: 36px; border-radius: 50%; - /*background: currentColor;*/ + background: currentColor; opacity: 0.3; position: absolute; left: -12px; @@ -23343,13 +23342,16 @@ html.overflow-y-hidden { } .m-slider--horizontal .m-slider__track-container { width: 100%; - height: 2px; + height: var(--m-slider-track-size); left: 0; top: 50%; transform: translateY(-50%); } -.m-slider--horizontal .m-slider__track-background, .m-slider--horizontal .m-slider__track-fill { - height: 100%; +.m-slider--horizontal .m-slider__track-background { + height: inherit; +} +.m-slider--horizontal .m-slider__track-fill { + height: calc(var(--m-slider-track-size) + 1px); } .m-slider--horizontal .m-slider__ticks-container { left: 0; @@ -23391,13 +23393,17 @@ html.overflow-y-hidden { } .m-slider--vertical .m-slider__track-container { height: 100%; - width: 2px; + width: var(--m-slider-track-size); left: 50%; top: 0; transform: translateX(-50%); } -.m-slider--vertical .m-slider__track-background, .m-slider--vertical .m-slider__track-fill { - width: 100%; +.m-slider--vertical .m-slider__track-background { + width: inherit; +} +.m-slider--vertical .m-slider__track-fill { + width: calc(var(--m-slider-track-size) + 1px); + transform: translateX(-0.5px); } .m-slider--vertical .m-slider__thumb-container { left: 50%; diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css index c82c594b73..05979cd226 100644 --- a/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css +++ b/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css @@ -1686,4 +1686,14 @@ html.m-overlay-scroll-blocked { .m-input--switch--text.m-input--is-dirty .m-input--switch__right { color: #fff -} \ No newline at end of file +} + +/* slider */ + +.m-slider__track-background { + opacity: 0.38; +} + +.m-slider__track-background, .m-slider__track-fill { + border-radius: 6px; +} From 2567fa63e18b8d1481c41ac34fd7139e433ae035 Mon Sep 17 00:00:00 2001 From: capdiem Date: Tue, 6 Aug 2024 15:29:18 +0800 Subject: [PATCH 2/2] add releaseOn for new parameter --- src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs b/src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs index c51b721e8a..8dcac798fc 100644 --- a/src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs +++ b/src/Masa.Blazor/Components/Slider/MSliderBase.razor.cs @@ -34,7 +34,7 @@ public partial class MSliderBase : MInput, IOutsideCli [Parameter] public string? TrackFillColor { get; set; } - [Parameter] [MasaApiParameter(2)] public double TrackSize { get; set; } = 2; + [Parameter] [MasaApiParameter(2, ReleasedOn = "v1.7.0")] public double TrackSize { get; set; } = 2; [Parameter] [MasaApiParameter(2)] public double TickSize { get; set; } = 2;