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> </button>
<!-- Modal --> <!-- Modal -->
<<<<<<< HEAD
<div class="modal fade @ModalShown" tabindex="-1">
=======
<div class="modal fade " tabindex="-1"> <!--@NavClosed--> <div class="modal fade " tabindex="-1"> <!--@NavClosed-->
>>>>>>> features/rewrite/styles
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered"> <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">

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

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

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

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

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

@ -18,6 +18,8 @@ public partial class DatePicker
[Parameter] [Parameter]
public DateTime SelectedDate { get; set; } = DateTime.Today; public DateTime SelectedDate { get; set; } = DateTime.Today;
private DateTime _InitialDate { get; set; }
[Parameter] [Parameter]
public DateTime? SelectedEndDate { get; set; } = null; public DateTime? SelectedEndDate { get; set; } = null;
@ -53,14 +55,13 @@ public partial class DatePicker
} }
private bool Shown { get; set; } = false; private bool Shown { get; set; } = false;
public async Task SetDate(DateTime Date, bool HideOnSet=false) public async Task SetDate(DateTime Date)
{ {
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();
} }
@ -82,48 +83,6 @@ public partial class DatePicker
StateHasChanged(); 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() public void SetStartStop()
{ {
CalendarStart = SelectedDate; CalendarStart = SelectedDate;
@ -154,7 +113,7 @@ public partial class DatePicker
} }
} }
public string DateChipStyle(DateTime date) public string DateChipClass(DateTime date)
{ {
string result = ""; string result = "";
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "d-none"; 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() protected override async Task OnInitializedAsync()
{ {
SelectedDate = DateTime.Today; SelectedDate = DateTime.Today;
_InitialDate=SelectedDate;
SetStartStop(); SetStartStop();
loaded = true; loaded = true;
await base.OnInitializedAsync(); 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) private async Task NavBarClick(bool forward = true)
{ {
int multiplier = 1; int multiplier = 1;

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

@ -6,7 +6,7 @@
</div> </div>
<div class="btn-box text-right my-5 d-flex justify-space-between"> <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> <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="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> <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