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;

164
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">
@ -33,9 +26,7 @@
<!-- 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> *@
<div class="picker-header-label">Select date</div> <div class="picker-header-label">Select date</div>
<div class="picker-header-title"> <div class="picker-header-title">
@SelectedDate.ToString("ddd, " + Format) @SelectedDate.ToString("ddd, " + Format)
@ -48,211 +39,82 @@
{ {
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"> <div class="picker-menu">
<button class="btn btn-icon-alt "> <button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" /> <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
</button> </button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div> <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
<button class="btn btn-icon-alt "> <button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" /> <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
</button> </button>
</div> </div>
<div class="picker-grid-col-3 gap-3"> <div class="picker-grid-col-3 gap-3">
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++) @for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
{ {
int y = i; int y = i;
@* <a href="#" @onclick="@(()=>SetYear(y))"> <button @onclick="@(()=>SetYear(y))" type="button" class="item @YearChipClass(y)">@i.ToString()</button>
<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> </div>
break; break;
} }
case Selecting.Months: 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 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>
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
{
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"> <div class="picker-menu">
<button class="btn btn-icon-alt "> <button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" /> <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
</button> </button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div> <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt "> <button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" /> <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
</button> </button>
</div> </div>
<div class="picker-grid-col-3 gap-3"> <div class="picker-grid-col-3 gap-3">
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++) @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
{ {
int m = i; int m = i;
@* <a href="#" @onclick="@(()=>SetMonth(m))"> <button @onclick="@(()=>SetMonth(m))" type="button" class="item @MonthChipClass(i)">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
<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> </div>
break; break;
} }
case (Selecting.Days): 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 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="picker-menu"> <div class="picker-menu">
<button class="btn btn-icon-alt "> <button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" /> <Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
</button> </button>
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div> <div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
<button class="btn btn-icon-alt "> <button class="btn btn-icon-alt ">
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" /> <Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
</button> </button>
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
</div> </div>
<div class="picker-grid-col-7 gap-3"> <div class="picker-grid-col-7 gap-3">
@for (int i = 0; i < 7; i++) @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> <div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
} }
<<<<<<< HEAD
CalendarStart = CalendarStart.AddDays(1);
}
=======
@foreach (var Date in ShowingDates) @foreach (var Date in ShowingDates)
{ {
<button class="item @DateChipStyle(Date)" @onclick="@(()=>SetDate(Date))"> <button class="item @DateChipClass(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() @Date.Day.ToString()
</button> </button>
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
{
@* <br /> *@
}
CalendarStart = CalendarStart.AddDays(1); CalendarStart = CalendarStart.AddDays(1);
} }
</div> </div>
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
break; 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> </div>
<!-- Bottom bar --> <!-- Bottom bar -->
<div class="btn-content justify-flex-end my-0"> <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-secondary" @onclick="(()=>ClosePicker())">Cancel</button>
<button type="button" class="btn btn-sm btn-core">OK</button> <button type="button" class="btn btn-sm btn-core" @onclick="(()=>ClosePicker(false))">OK</button>
</div> </div>
<div> <div>
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
</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