modifications for Bootstrap 5

This commit is contained in:
Shaun Walker 2021-07-09 11:43:37 -04:00
parent d1c2abf7e3
commit 0ce81169a6
3 changed files with 38 additions and 52 deletions

View File

@ -6,35 +6,28 @@
@inject IStringLocalizer<SharedResources> SharedLocalizer @inject IStringLocalizer<SharedResources> SharedLocalizer
<form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate> <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
<table class="table table-borderless"> <div class="row mb-1 align-items-center">
<tr> <Label Class="col-sm-3" For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
<td width="30%"> <div class="col-sm-9">
<Label For="name" HelpText="Name Of The Role" ResourceKey="Name">Name:</Label>
</td>
<td>
<input id="name" class="form-control" @bind="@_name" maxlength="256" required /> <input id="name" class="form-control" @bind="@_name" maxlength="256" required />
</td> </div>
</tr> </div>
<tr> <div class="row mb-1 align-items-center">
<td> <Label Class="col-sm-3" For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label>
<Label For="description" HelpText="A Short Description Of The Role Which Describes Its Purpose" ResourceKey="Description">Description:</Label> <div class="col-sm-9">
</td>
<td>
<textarea id="description" class="form-control" @bind="@_description" rows="5" maxlength="256" required></textarea> <textarea id="description" class="form-control" @bind="@_description" rows="5" maxlength="256" required></textarea>
</td> </div>
</tr> </div>
<tr> <div class="row mb-1 align-items-center">
<td> <Label Class="col-sm-3" For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label>
<Label For="isautoassigned" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role" ResourceKey="AutoAssigned">Auto Assigned?</Label> <div class="col-sm-9">
</td>
<td>
<select id="isautoassigned" class="form-select" @bind="@_isautoassigned"> <select id="isautoassigned" class="form-select" @bind="@_isautoassigned">
<option value="True">@SharedLocalizer["Yes"]</option> <option value="True">@SharedLocalizer["Yes"]</option>
<option value="False">@SharedLocalizer["No"]</option> <option value="False">@SharedLocalizer["No"]</option>
</select> </select>
</td> </div>
</tr> </div>
</table> <br /><br />
<button type="button" class="btn btn-success" @onclick="SaveRole">@SharedLocalizer["Save"]</button> <button type="button" class="btn btn-success" @onclick="SaveRole">@SharedLocalizer["Save"]</button>
<NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink> <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
</form> </form>

View File

@ -3,17 +3,16 @@
@if (!string.IsNullOrEmpty(HelpText)) @if (!string.IsNullOrEmpty(HelpText))
{ {
<span class="app-tooltip" data-tip="@((MarkupString)HelpText)">@((MarkupString)_openLabel)@ChildContent@((MarkupString)_closeLabel) <img src="images/help.png" /></span> <span class="@_spanclass" data-tip="@((MarkupString)@_helptext)">
<label for="@For" class="@_labelclass">@ChildContent</label> <img src="images/help.png" />
</span>
} }
else else
{ {
@((MarkupString)_openLabel)@ChildContent@((MarkupString)_closeLabel) <label for="@For" class="@_labelclass">@ChildContent</label>
} }
@code { @code {
private string _openLabel = string.Empty;
private string _closeLabel = "</label>";
[Parameter] [Parameter]
public RenderFragment ChildContent { get; set; } public RenderFragment ChildContent { get; set; }
@ -21,39 +20,33 @@ else
public string For { get; set; } // optional - the id of the associated input control for accessibility public string For { get; set; } // optional - the id of the associated input control for accessibility
[Parameter] [Parameter]
public string Class { get; set; } // optional - the class for the label ( ie. control-label ) public string Class { get; set; } // optional - CSS classes
[Parameter] [Parameter]
public string HelpText { get; set; } // optional - tooltip for this label public string HelpText { get; set; } // optional - tooltip for this label
private string _spanclass = "app-tooltip";
private string _labelclass = "form-label";
private string _helptext = string.Empty;
protected override void OnParametersSet() protected override void OnParametersSet()
{ {
base.OnParametersSet(); base.OnParametersSet();
if (string.IsNullOrEmpty(Class)) if (!string.IsNullOrEmpty(HelpText))
{ {
Class = "form-label"; _helptext = Localize(nameof(HelpText), HelpText);
_spanclass += (!string.IsNullOrEmpty(Class)) ? " " + Class : "";
} }
else
_openLabel = "<label";
if (!string.IsNullOrEmpty(For))
{ {
_openLabel += " for=\"" + For + "\""; _labelclass += (!string.IsNullOrEmpty(Class)) ? " " + Class : "";
} }
if (!string.IsNullOrEmpty(Class))
{
_openLabel += " class=\"" + Class + "\"";
}
_openLabel += ">";
var text = Localize("Text", String.Empty); var text = Localize("Text", String.Empty);
if (text != String.Empty) if (!string.IsNullOrEmpty(text))
{ {
ChildContent =@<text>@text</text>; ChildContent =@<text>@text</text>;
} }
HelpText = Localize(nameof(HelpText), HelpText);
} }
} }

View File

@ -152,7 +152,7 @@ app {
.app-tooltip::before, .app-tooltip::before,
.app-tooltip::after { .app-tooltip::after {
left: 50%; left: 25%;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
z-index: -100; z-index: -100;