Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Connected:f83eeeb03b04d634529a44fa9bc741007e6f9703
Branches Tags
Connected:main
Connected:features/rewrite/statemanagement
Connected:features/rewrite/gridfix
Connected:features/rewrite/main
Connected:features/rewrite/styles
Connected:features/rewrite/fix_14032023
Connected:features/rewrite/nuberstepper
Connected:features/rewrite/modals
Connected:features/rewrite/grid1
Connected:features/rewrite/timepicker
Connected:features/rewrite/fixes
Connected:reviews/1
Connected:features/rewrite/toggleinput
Connected:features/rewrite/checkbox
Connected:features/new
Connected:features/refactor
Connected:features/nuget_autobuild
Connected:develop
..
compare: Connected:04309b15148e1ac82f56f20e8807831ea8c45e87
Branches Tags
Connected:features/rewrite/statemanagement
Connected:features/rewrite/gridfix
Connected:features/rewrite/main
Connected:features/rewrite/styles
Connected:features/rewrite/fix_14032023
Connected:features/rewrite/nuberstepper
Connected:features/rewrite/modals
Connected:features/rewrite/grid1
Connected:features/rewrite/timepicker
Connected:features/rewrite/fixes
Connected:reviews/1
Connected:features/rewrite/toggleinput
Connected:features/rewrite/checkbox
Connected:features/new
Connected:features/refactor
Connected:features/nuget_autobuild
Connected:develop
Connected:main

No commits in common. "f83eeeb03b04d634529a44fa9bc741007e6f9703" and "04309b15148e1ac82f56f20e8807831ea8c45e87" have entirely different histories.
f83eeeb03b ... 04309b1514

7 changed files with 43 additions and 217 deletions
Show Stats Expand all files Collapse all files

23
src/Connected.Components.Showcase.Runner/Pages/Index.razor
View File

@ -4,11 +4,30 @@
<h1 style="text-align:center;">Component Sandbox</h1>
<DatePicker @bind-SelectedDate=date>
<FormWizard Id="Wizard1">
<FormWizardStep Name="Step1">
Step1
</FormWizardStep>
<FormWizardStep Name="Step2">
Step2
</FormWizardStep>
<FormWizardStep Name="Step3">
Step3
</FormWizardStep>
<FormWizardStep Name="Step4">
Step4
</FormWizardStep>
</FormWizard>
<DatePicker
CloseOnDateSelect=true
@bind-SelectedDate=@date>
</DatePicker>
<p>Izbran datum je: @date</p>
<TextInput @bind-Value="@value"></TextInput>
<p>Selected date is @date.ToString()</p>
@value
@code {
DateTime date = DateTime.Today;

56
src/Connected.Components/Components/DatePicker.razor
View File

@ -21,21 +21,16 @@
{
case Selecting.Years:
{
<div class="@NavBarClass" style="@NavBarStyle">
<div class="chip-group-content d-inline-flex">
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
</div>
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
<!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
<div class="chip-group-content d-inline-flex">
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
</div>
<div class="@NavBarClass">
<div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
</div>
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
{
int y = i;
<a href="#" @onclick="@(()=>SetYear(y))">
<div class="chip-group-content d-inline-flex bg-core @YearChipClass(y) m-1 b-1 b-r-3 text-light" style="width:30%;">
<div class="chip-group-content d-inline-flex bg-core m-1 b-1 b-r-3 text-light" style="width:30%;">
<div class="chip-leading-icon"></div>
<div class="chip-label">@i.ToString()</div>
<div class="chip-cta-icon"></div>
@ -51,22 +46,15 @@
}
case Selecting.Months:
{
<div class="@NavBarClass" style="@NavBarStyle">
<div class="chip-group-content d-inline-flex">
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
</div>
<div class="@NavBarClass">
<div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
<!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
<div class="chip-group-content d-inline-flex">
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
</div>
<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
</div>
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
{
int m = i;
<a href="#" @onclick="@(()=>SetMonth(m))" @ont>
<a href="#" @onclick="@(()=>SetMonth(m))">
<div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
<div class="chip-leading-icon"></div>
@ -84,17 +72,10 @@
}
case (Selecting.Days):
{
<div class="@NavBarClass" style="@NavBarStyle">
<div class="chip-group-content d-inline-flex">
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
</div>
<div class="@NavBarClass">
<div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
<!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
<div class="chip-group-content d-inline-flex">
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
</div>
<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
</div>
@for (int i = 0; i < 7; i++)
@ -112,19 +93,16 @@
{
<br />
}
CalendarStart = CalendarStart.AddDays(1);
}
break;
}
}
@if (ShowBottomBar)
{
<!-- Bottom bar -->
<div class="p-2" style="@NavBarStyle">
<Button Class="btn-sm" OnClick="(()=>Shown=!Shown)">X</Button>
<Button Class="btn-sm" OnClick="(async () => await SetDate(SelectedDate, true))">OK</Button>
</div>
}
</div>
<!-- Bottom bar -->
<div>
</div>
}
</div>

53
src/Connected.Components/Components/DatePicker.razor.cs
View File

@ -32,9 +32,6 @@ public partial class DatePicker
[Parameter]
public bool UseDateRange { get; set; } = false;
[Parameter]
public bool ShowBottomBar { get; set; } = false;
[Parameter]
public string Format { get; set; } = "dd.MM.yyyy";
@ -53,14 +50,13 @@ public partial class DatePicker
}
private bool Shown { get; set; } = false;
public async Task SetDate(DateTime Date, bool HideOnSet=false)
public async Task SetDate(DateTime Date)
{
SelectedDate = Date;
SetStartStop();
if (CloseOnDateSelect)
Shown = false;
await SelectedDateChanged.InvokeAsync(SelectedDate);
if (HideOnSet) Shown = false;
StateHasChanged();
}
@ -172,17 +168,17 @@ public partial class DatePicker
public string MonthChipClass(int month)
{
if (month.CompareTo(SelectedDate.Month) == 0)
return "bg-info text-white";
return "bg-info text-light";
else
return "bg-core text-light";
return "bg-core text-dark";
}
public string YearChipClass(int year)
{
if (year.CompareTo(SelectedDate.Year) == 0)
return "bg-info text-white";
return "bg-info text-light";
else
return "bg-core text-light";
return "bg-core text-dark";
}
protected override async Task OnInitializedAsync()
@ -200,51 +196,12 @@ public partial class DatePicker
return new CssBuilder("text-justify")
.AddClass("text-md-justify")
//.AddClass("bg-warning")
.AddClass("p-2")
.AddClass("text-small")
.AddClass("text-dark")
.Build();
}
}
private string NavBarStyle
{
get
{
return new StyleBuilder("display","flex")
.AddStyle("flex-direction","row")
.AddStyle("flex-wrap","nowrap")
.AddStyle("justify-content","space-between")
.Build();
}
}
private async Task NavBarClick(bool forward = true)
{
int multiplier = 1;
if (!forward) multiplier = -1;
switch (Selecting)
{
case Selecting.Years:
{
SelectedDate=SelectedDate.AddYears(8 * multiplier);
break;
}
case Selecting.Months:
{
SelectedDate = SelectedDate.AddYears(1 * multiplier);
break;
}
case Selecting.Days:
{
SelectedDate = SelectedDate.AddMonths(1*multiplier);
break;
}
}
SetStartStop();
await InvokeAsync(StateHasChanged);
}
}
public enum Selecting

10
src/Connected.Components/Components/TimePicker.razor
View File

@ -1,10 +0,0 @@
<div>
<span>
<input id="hour" type="number" min="0" max="59" step="1" @bind-value="@Hour" />
<label for="hour">hrs</label>
<input id="minute" type="number" min="0" max="59" step="1" @bind-value="@Minute" />
<label for="minute">min</label>
<input id="minute" type="number" min="0" max="59" step="1" @bind-value="@Second" />
<label for="minute">sec</label>
</span>
</div>

20
src/Connected.Components/Components/TimePicker.razor.cs
View File

@ -1,20 +0,0 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class TimePicker: ComponentBase
{
[Parameter]
public TimeOnly Time { get; set; } = TimeOnly.FromDateTime(DateTime.Now);
private int Hour = 0;
private int Minute = 0;
private int Second = 0;
protected override async Task OnParametersSetAsync()
{
Hour = Time.Hour;
Minute = Time.Minute;
Second = Time.Second;
await base.OnInitializedAsync();
}
}

22
src/Connected.Components/Enums/TouchGesture.cs
View File

@ -1,22 +0,0 @@
using System.ComponentModel;
namespace Connected.Enums;
public enum TouchGesture
{
[Description("swipeleft")]
SwipeLeft,
[Description("swiperight")]
SwipeRight,
[Description("swipeup")]
SwipeUp,
[Description("swipedown")]
SwipeDown,
[Description("pinch")]
Pinch,
[Description("zoom")]
Zoom,
[Description("tap")]
Tap,
[Description("none")]
None,
}

76
src/Connected.Components/Utilities/TouchGestures.cs
View File

@ -1,76 +0,0 @@
using Connected.Enums;
using Microsoft.AspNetCore.Components.Web;
using System.Reflection.Metadata.Ecma335;
namespace Connected.Utilities;
public static class TouchGestures
{
public static TouchGesture GetTouchGesture(TouchPoint[] TouchPoints, DateTime GestureStart)
{
try
{
if (TouchPoints is not null)
{
/* handling tap
* TouchPoints --> array with one point inside suggesting user tapped the screen
*/
if (TouchPoints.Length == 1)
{
var point = TouchPoints[0];
return TouchGesture.Tap;
}
/* handling swipe with one finger
* TouchPoints --> array of exactly two points start and end point, suggesting one finger was used and dragged across the screen
*/
if (TouchPoints.Length == 2)
{
var startPoint = TouchPoints[0];
var endPoint = TouchPoints[1];
const double swipeThreshold = 0.8;
var diffX = startPoint.ClientX - endPoint.ClientX;
var diffY = startPoint.ClientY - endPoint.ClientY;
var diffTime = DateTime.Now - GestureStart;
var velocityX = Math.Abs(diffX / diffTime.Milliseconds);
var velocityY = Math.Abs(diffY / diffTime.Milliseconds);
//dismiss touch gestures if user slowly touched the screen, preventing accidental or unwanted touches
if (velocityX < swipeThreshold && velocityY < swipeThreshold)
return TouchGesture.None;
//preventing false gesture detection if the swipe is too diagonal
if (Math.Abs(velocityX - velocityY) < 0.5)
return TouchGesture.None;
if (velocityX >= swipeThreshold)
{
if (diffX < 0)
return TouchGesture.SwipeRight;
else
return TouchGesture.SwipeLeft;
}
if (velocityY >= swipeThreshold)
{
if (diffX < 0)
return TouchGesture.SwipeUp;
else
return TouchGesture.SwipeDown;
}
}
/* handling zoom, pinch, mutifinger swipe
* TouchPoints --> array of more than 2 points, suggesting two or more fingers were used to make a gesture
*/
if (TouchPoints.Length > 2)
{
//TODO
}
}
return TouchGesture.None;
}
catch
{
return TouchGesture.None;
}
}
}