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

features/rewrite/grid #13

Merged
koma merged 14 commits from features/rewrite/grid into features/rewrite/main 2023-03-10 09:13:32 +00:00
Conversation 0 Commits 14 Files Changed 42 +87 -22
2 changed files with 87 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fa33cc5189 - Show all commits

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

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

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

@ -32,6 +32,9 @@ public partial class DatePicker
[Parameter] [Parameter]
public bool UseDateRange { get; set; } = false; public bool UseDateRange { get; set; } = false;
[Parameter]
public bool ShowBottomBar { get; set; } = false;
[Parameter] [Parameter]
public string Format { get; set; } = "dd.MM.yyyy"; public string Format { get; set; } = "dd.MM.yyyy";
@ -50,13 +53,14 @@ public partial class DatePicker
} }
private bool Shown { get; set; } = false; private bool Shown { get; set; } = false;
public async Task SetDate(DateTime Date) public async Task SetDate(DateTime Date, bool HideOnSet=false)
{ {
SelectedDate = Date; SelectedDate = Date;
SetStartStop(); SetStartStop();
if (CloseOnDateSelect) if (CloseOnDateSelect)
Shown = false; Shown = false;
await SelectedDateChanged.InvokeAsync(SelectedDate); await SelectedDateChanged.InvokeAsync(SelectedDate);
if (HideOnSet) Shown = false;
StateHasChanged(); StateHasChanged();
} }
@ -168,17 +172,17 @@ public partial class DatePicker
public string MonthChipClass(int month) public string MonthChipClass(int month)
{ {
if (month.CompareTo(SelectedDate.Month) == 0) if (month.CompareTo(SelectedDate.Month) == 0)
return "bg-info text-light"; return "bg-info text-white";
else else
return "bg-core text-dark"; return "bg-core text-light";
} }
public string YearChipClass(int year) public string YearChipClass(int year)
{ {
if (year.CompareTo(SelectedDate.Year) == 0) if (year.CompareTo(SelectedDate.Year) == 0)
return "bg-info text-light"; return "bg-info text-white";
else else
return "bg-core text-dark"; return "bg-core text-light";
} }
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
@ -196,12 +200,51 @@ public partial class DatePicker
return new CssBuilder("text-justify") return new CssBuilder("text-justify")
.AddClass("text-md-justify") .AddClass("text-md-justify")
//.AddClass("bg-warning") //.AddClass("bg-warning")
.AddClass("p-2")
.AddClass("text-small") .AddClass("text-small")
.AddClass("text-dark") .AddClass("text-dark")
.Build(); .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 public enum Selecting