This commit is contained in:
zaccaria.majid
2023-04-14 09:34:51 +02:00
6 changed files with 92 additions and 23 deletions
@@ -1,5 +1,38 @@
<div class="d-flex justify-content-between">
<div class="btn @doorCSS w-100" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Door)">Door</div>
<div class="btn @hwCSS w-100" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Hardware)">Hardware</div>
<div class="btn @reportCSS w-100" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Report)">Report</div>
<div class="row bg-secondary text-light">
<div class="col-4 p-0 fs-3 d-flex justify-content-between" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Door)">
@if (DoorDefStep == Core.Enum.DoorDefStep.Door)
{
<div class="tail-left"></div>
<div class="@doorCSS flex-fill text-center">Door</div>
<div class="arrow-right"></div>
}
else
{
<div class="@doorCSS flex-fill text-center">Door</div>
}
</div>
<div class="col-4 p-0 fs-3 d-flex justify-content-between" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Hardware)">
@if (DoorDefStep == Core.Enum.DoorDefStep.Hardware)
{
<div class="tail-left"></div>
<div class="@hwCSS flex-fill text-center">Hardware</div>
<div class="arrow-right"></div>
}
else
{
<div class="@hwCSS flex-fill text-center">Hardware</div>
}
</div>
<div class="col-4 p-0 fs-3 d-flex justify-content-between" @onclick="()=>doChangeStep(Core.Enum.DoorDefStep.Report)">
@if (DoorDefStep == Core.Enum.DoorDefStep.Report)
{
<div class="tail-left"></div>
<div class=" @reportCSS flex-fill text-center">Report</div>
<div class="arrow-right"></div>
}
else
{
<div class=" @reportCSS flex-fill text-center">Report</div>
}
</div>
</div>
@@ -10,30 +10,23 @@ namespace WebDoorCreator.UI.Components.DoorDef
[Parameter]
public EventCallback<Core.Enum.DoorDefStep> E_StepChanged { get; set; }
protected string doorCSS { get; set; } = "btn-secondary";
protected string hwCSS { get; set; } = "btn-secondary";
protected string reportCSS { get; set; } = "btn-secondary";
protected string doorCSS
{
get => DoorDefStep == Core.Enum.DoorDefStep.Door ? "bg-success" : "bg-secondary";
}
protected string hwCSS
{
get => DoorDefStep == Core.Enum.DoorDefStep.Hardware ? "bg-success" : "bg-secondary";
}
protected string reportCSS
{
get => DoorDefStep == Core.Enum.DoorDefStep.Report ? "bg-success" : "bg-secondary";
}
protected override async Task OnParametersSetAsync()
{
await Task.Delay(1);
if(DoorDefStep == Core.Enum.DoorDefStep.Door)
{
doorCSS = "btn-success";
}
else if (DoorDefStep == Core.Enum.DoorDefStep.Hardware)
{
doorCSS = "btn-success";
hwCSS = "btn-success";
}
else if(DoorDefStep == Core.Enum.DoorDefStep.Report)
{
doorCSS = "btn-success";
hwCSS = "btn-success";
reportCSS = "btn-success";
}
}
protected async Task doChangeStep(Core.Enum.DoorDefStep actDoorDefStep)
@@ -0,0 +1,17 @@
/*.arrowItem {
transform: skewX(20deg);
}*/
.arrow-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 30px solid #198754;
border-bottom: 25px solid transparent;
}
.tail-left {
width: 0;
height: 0;
border-top: 25px solid #198754;
border-left: 30px solid transparent;
border-bottom: 25px solid #198754;
}
@@ -0,0 +1,21 @@
@bordL: 25px;
@bordH: 30px;
@itemColor: #198754;
/*.arrowItem {
transform: skewX(20deg);
}*/
.arrow-right {
width: 0;
height: 0;
border-top: @bordL solid transparent;
border-left: @bordH solid @itemColor;
border-bottom: @bordL solid transparent;
}
.tail-left {
width: 0;
height: 0;
border-top: @bordL solid @itemColor;
border-left: @bordH solid transparent;
border-bottom: @bordL solid @itemColor;
}
@@ -0,0 +1 @@
.arrow-right{width:0;height:0;border-top:25px solid transparent;border-left:30px solid #198754;border-bottom:25px solid transparent;}.tail-left{width:0;height:0;border-top:25px solid #198754;border-left:30px solid transparent;border-bottom:25px solid #198754;}
+4
View File
@@ -30,5 +30,9 @@
{
"outputFile": "Components/Hardware/HwSingleInstance.razor.css",
"inputFile": "Components/Hardware/HwSingleInstance.razor.less"
},
{
"outputFile": "Components/DoorDef/StepsList.razor.css",
"inputFile": "Components/DoorDef/StepsList.razor.less"
}
]