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

DatePicker - new style, left, right arrow click handling, FormWizard - cancel click Event, Democomp - updatet to latest version

Browse Source
pull/13/head
markosteger 2 years ago
parent 7811ba9c6c
commit f9ba559480
5 changed files with 101 additions and 270 deletions
Show Stats Download Patch File Download Diff File

4
src/Connected.Components.Showcase.Runner/Pages/Democomp.razor
Unescape View File

@ -949,11 +949,7 @@
</button>
<!-- Modal -->
<<<<<<< HEAD
<div class="modal fade @ModalShown" tabindex="-1">
=======
<div class="modal fade " tabindex="-1"> <!--@NavClosed-->
>>>>>>> features/rewrite/styles
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">

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

@ -21,7 +21,7 @@
</Grid>
<p>Izbran datum je: @date</p>
=======
<FormWizard Id="Wizard1">
<FormWizardStep Name="Step1">
Step1
@ -43,7 +43,6 @@ CloseOnDateSelect=true
</DatePicker>
<p>Selected date is @date.ToString()</p>
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
@code {
DateTime date = DateTime.Today;

290
src/Connected.Components/Components/DatePicker.razor
Unescape View File

@ -1,15 +1,8 @@
@using System.Globalization;
@if (loaded)
{
<div id="picker">
<!-- DatePicker input !can be edited manualy -->
@* <div class="inline-block"><input type="text" value="@SelectedDate.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div> *@
<div class="form-group">
<input type="text" value="@SelectedDate.ToString(Format)" required="required" /><span class="highlight"></span><span class="bar"></span>
<label class="label-animated">Select date</label>
@ -17,7 +10,7 @@
<div class="input-error-text">At least 6 characters required</div>
<span class="input-glyph-wraper">
<span class="input-glyph">
<span class="input-glyph button" @onclick="(() => Shown = !Shown)">
<span class="input-glyph button" @onclick="TogglePicker">
<Glyph SVG="@Icons.Material.Filled.CalendarMonth" class="icon-root svg-icon" />
</span>
<span class="input-glyph error">
@ -32,229 +25,98 @@
{
<!-- DatePicker header -->
<div class="picker-container">
<div id="picker-header">
@* <div class="text-medium">
@SelectedDate.Year.ToString()
</div> *@
<div class="picker-header-label">Select date</div>
<div class="picker-header-title">
@SelectedDate.ToString("ddd, " + Format)
<div id="picker-header">
<div class="picker-header-label">Select date</div>
<div class="picker-header-title">
@SelectedDate.ToString("ddd, " + Format)
</div>
</div>
</div>
<div class="picker-divider"></div>
<!-- DatePicker body -->
<div id="picker-body">
@switch (Selecting)
{
case Selecting.Years:
{
<<<<<<< HEAD
<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>
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
<div class="picker-divider"></div>
<!-- DatePicker body -->
<div id="picker-body">
@switch (Selecting)
{
case Selecting.Years:
{
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-leading-icon"></div>
<div class="chip-label">@i.ToString()</div>
<div class="chip-cta-icon"></div>
</div>
</a>
if (SelectedDate.Year - i % 3 == 0)
=======
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
</button>
</div>
<div class="picker-grid-col-3 gap-3">
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
{
int y = i;
@* <a href="#" @onclick="@(()=>SetYear(y))">
<div class="chip-group-content d-inline-flex bg-core py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
<div class="chip-leading-icon"></div>
<div class="chip-label">@i.ToString()</div>
<div class="chip-cta-icon"></div>
</div>
</a>
if (SelectedDate.Year - i % 3 == 0)
{
<br />
} *@
<button @onclick="@(()=>SetYear(y))" type="button" class="item">@i.ToString()</button>
}
</div>
break;
}
case Selecting.Months:
{
<<<<<<< HEAD
<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 class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
</button>
</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 class="picker-grid-col-3 gap-3">
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
{
int y = i;
<button @onclick="@(()=>SetYear(y))" type="button" class="item @YearChipClass(y)">@i.ToString()</button>
}
</div>
</div>
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
break;
}
case Selecting.Months:
{
int m = i;
<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-leading-icon"></div>
<div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
<div class="chip-cta-icon"></div>
</div>
</a>
if (i % 3 == 0)
=======
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
</button>
</div>
<div class="picker-grid-col-3 gap-3">
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
{
int m = i;
@* <a href="#" @onclick="@(()=>SetMonth(m))">
<div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) py-1 m-1 b-1 b-r-3 text-dark" style="width:30%;">
<div class="chip-leading-icon"></div>
<div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
<div class="chip-cta-icon"></div>
</div>
</a>
if (i % 3 == 0)
{
<br />
} *@
<button @onclick="@(()=>SetMonth(m))" type="button" class="item">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
}
</div>
break;
}
case (Selecting.Days):
{
<<<<<<< HEAD
<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 class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
</button>
</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 class="picker-grid-col-3 gap-3">
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
{
int m = i;
<button @onclick="@(()=>SetMonth(m))" type="button" class="item @MonthChipClass(i)">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
}
</div>
=======
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
</button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
</button>
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
</div>
<div class="picker-grid-col-7 gap-3">
@for (int i = 0; i < 7; i++)
{
@* <div class="@DayNamesRowClass">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div> *@
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
}
<<<<<<< HEAD
CalendarStart = CalendarStart.AddDays(1);
break;
}
=======
@foreach (var Date in ShowingDates)
{
<button class="item @DateChipStyle(Date)" @onclick="@(()=>SetDate(Date))">
@* <div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
@Date.Day.ToString()
</div> *@
@Date.Day.ToString()
case (Selecting.Days):
{
<div class="picker-menu">
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
</button>
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
</button>
</div>
<div class="picker-grid-col-7 gap-3">
@for (int i = 0; i < 7; i++)
{
@* <br /> *@
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
}
CalendarStart = CalendarStart.AddDays(1);
}
</div>
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
break;
}
@foreach (var Date in ShowingDates)
{
<button class="item @DateChipClass(Date)" @onclick="@(()=>SetDate(Date))">
@Date.Day.ToString()
</button>
CalendarStart = CalendarStart.AddDays(1);
}
</div>
break;
}
<<<<<<< HEAD
@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>
<!-- Bottom bar -->
<div class="btn-content justify-flex-end my-0">
<button type="button" class="btn btn-sm btn-secondary">Cancel</button>
<button type="button" class="btn btn-sm btn-core">OK</button>
<button type="button" class="btn btn-sm btn-secondary" @onclick="(()=>ClosePicker())">Cancel</button>
<button type="button" class="btn btn-sm btn-core" @onclick="(()=>ClosePicker(false))">OK</button>
</div>
<div>
</div>
<div>
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
</div>
</div>
}
</div>
}

64
src/Connected.Components/Components/DatePicker.razor.cs
Unescape View File

@ -18,6 +18,8 @@ public partial class DatePicker
[Parameter]
public DateTime SelectedDate { get; set; } = DateTime.Today;
private DateTime _InitialDate { get; set; }
[Parameter]
public DateTime? SelectedEndDate { get; set; } = null;
@ -53,14 +55,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();
}
@ -82,48 +83,6 @@ public partial class DatePicker
StateHasChanged();
}
private string DayNamesRowClass
{
get
{
return new CssBuilder()
.AddClass("chip-leading-icon")
.AddClass("d-inline-block")
.AddClass("m-1")
.AddClass("bg-danger")
.AddClass("text-small")
.AddClass("text-white")
.Build();
}
}
private string ChipFirstRowStyle
{
get
{
return new StyleBuilder()
.AddStyle("width", "30px")
.AddStyle("height", "30px")
.AddStyle("text-align", "center")
.Build();
}
}
/*
@for (int i=0;i<7; i++)
{
<div class="chip-leading-icon d-inline-block p-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
}
@while (calendarStart.CompareTo(calendarEnd) < 0)
{
<a href="#" @onclick="@(()=>SetDate(calendarStart))"><div class="chip-leading-icon d-inline-block p-1 @ChipStyle(calendarStart)" style="width:30px; height:30px; text-align:center">@calendarStart.Day.ToString()</div></a>
@if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
{
<br />
}
calendarStart = calendarStart.AddDays(1);
}
*/
public void SetStartStop()
{
CalendarStart = SelectedDate;
@ -154,7 +113,7 @@ public partial class DatePicker
}
}
public string DateChipStyle(DateTime date)
public string DateChipClass(DateTime date)
{
string result = "";
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "d-none";
@ -188,6 +147,7 @@ public partial class DatePicker
protected override async Task OnInitializedAsync()
{
SelectedDate = DateTime.Today;
_InitialDate=SelectedDate;
SetStartStop();
loaded = true;
await base.OnInitializedAsync();
@ -219,6 +179,20 @@ public partial class DatePicker
}
}
private async Task ClosePicker(bool resetDate=true)
{
if (resetDate)
SelectedDate=_InitialDate;
Shown = false;
await SelectedDateChanged.InvokeAsync(SelectedDate);
}
private void TogglePicker()
{
_InitialDate=SelectedDate;
Shown = !Shown;
}
private async Task NavBarClick(bool forward = true)
{
int multiplier = 1;

2
src/Connected.Components/Components/FormWizard.razor
Unescape View File

@ -6,7 +6,7 @@
</div>
<div class="btn-box text-right my-5 d-flex justify-space-between">
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished">Cancel</button>
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
<div>
<button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished"><i class='bx bx-chevron-left'></i>@PreviousBtnText</button>
<button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished">@NextBtnText<i class='bx bx-chevron-right'></i></button>

Write Preview
Loading…
Cancel
Save