Diplomarbeit-Absolventenverein/oqtane.framework
6
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects Releases Wiki Activity

Label component for field level help

Browse Source
This commit is contained in:
Shaun Walker
2020-03-16 15:06:59 -04:00
parent dc2c46e878
commit 8bc694fe63
8 changed files with 196 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
Oqtane.Client/Modules/Admin/Roles/Edit.razor
View File

@ -6,26 +6,26 @@
<table class="table table-borderless">
<tr>
<td>
<label class="control-label">Name: </label>
<Label For="_name" Class="control-label" HelpText="Name Of The Role">Name: </Label>
</td>
<td>
<input class="form-control" @bind="@_name" />
<input id="_name" class="form-control" @bind="@_name" />
</td>
</tr>
<tr>
<td>
<label class="control-label">Description: </label>
<Label For="_description" Class="control-label" HelpText="A Short Description Of The Role Which Describes Its Purpose">Description: </Label>
</td>
<td>
<textarea class="form-control" @bind="@_description" rows="5"></textarea>
<textarea id="_description" class="form-control" @bind="@_description" rows="5"></textarea>
</td>
</tr>
<tr>
<td>
<label class="control-label">Auto Assigned? </label>
<Label For="_isautoassigned" Class="control-label" HelpText="Indicates Whether Or Not New Users Are Automatically Assigned To This Role">Auto Assigned? </Label>
</td>
<td>
<select class="form-control" @bind="@_isautoassigned">
<select id="_isautoassigned" class="form-control" @bind="@_isautoassigned">
<option value="True">Yes</option>
<option value="False">No</option>
</select>
@ -33,10 +33,10 @@
</tr>
<tr>
<td>
<label class="control-label">System Role? </label>
<Label For="_issystem" Class="control-label" HelpText="Indicates Whether Or Not This Is A System Role. System Roles Are Protected And Cannot Be Deleted.">System Role? </Label>
</td>
<td>
<select class="form-control" @bind="@_issystem">
<select id="_issystem" class="form-control" @bind="@_issystem">
<option value="True">Yes</option>
<option value="False">No</option>
</select>

42
Oqtane.Client/Modules/Controls/Label.razor Normal file
View File

@ -0,0 +1,42 @@
@namespace Oqtane.Modules.Controls
@inherits ModuleBase
@if (!string.IsNullOrEmpty(HelpText))
{
<span class="app-tooltip" data-tip="@((MarkupString)HelpText)">@((MarkupString)_openLabel)@ChildContent@((MarkupString)_closeLabel) <img src="images/help.png" /></span>
}
else
{
@((MarkupString)_openLabel)@ChildContent@((MarkupString)_closeLabel)
}
@code {
string _openLabel = "";
string _closeLabel = "</label>";
[Parameter]
public RenderFragment ChildContent { get; set; } // required - the title of the label
[Parameter]
public string For { get; set; } // optional - the id of the associated input control for accessibility
[Parameter]
public string Class { get; set; } // optional - the class for the label ( ie. control-label )
[Parameter]
public string HelpText { get; set; } // optional - tooltip for this label
protected override void OnParametersSet()
{
_openLabel = "<label";
if (!string.IsNullOrEmpty(For))
{
_openLabel += " for=\"" + For + "\"";
}
if (!string.IsNullOrEmpty(Class))
{
_openLabel += " class=\"" + Class + "\"";
}
_openLabel += ">";
}
}

65
Oqtane.Client/wwwroot/css/app.css
View File

@ -110,3 +110,68 @@ app {
padding: inherit;
vertical-align: inherit;
}
/* Tooltips */
.app-tooltip {
cursor: help;
position: relative;
}
.app-tooltip::before,
.app-tooltip::after {
left: 50%;
opacity: 0;
position: absolute;
z-index: -100;
}
.app-tooltip:hover::before,
.app-tooltip:focus::before,
.app-tooltip:hover::after,
.app-tooltip:focus::after {
opacity: 1;
transform: scale(1) translateY(0);
z-index: 100;
}
.app-tooltip::before {
border-style: solid;
border-width: 1em 0.75em 0 0.75em;
border-color: #3E474F transparent transparent transparent;
bottom: 100%;
content: "";
margin-left: -0.5em;
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
transform: scale(.6) translateY(-90%);
}
.app-tooltip:hover::before,
.app-tooltip:focus::before {
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
}
.app-tooltip::after {
background: #3E474F;
border-radius: .25em;
bottom: 180%;
color: #EDEFF0;
content: attr(data-tip);
margin-left: -8.75em;
padding: 1em;
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
transform: scale(.6) translateY(50%);
width: 17.5em;
}
.app-tooltip:hover::after,
.app-tooltip:focus::after {
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
}
@media (max-width: 760px) {
.app-tooltip::after {
font-size: .75em;
margin-left: -5em;
width: 10em;
}
}

BIN
Oqtane.Client/wwwroot/images/help.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 801 B

16
Oqtane.Server/Infrastructure/InstallationManager.cs
View File

@ -8,6 +8,7 @@ using Oqtane.Shared;
using System;
using System.Diagnostics;
using Oqtane.Infrastructure.Interfaces;
using Microsoft.Extensions.Caching.Memory;
namespace Oqtane.Infrastructure
{
@ -15,11 +16,13 @@ namespace Oqtane.Infrastructure
{
private readonly IHostApplicationLifetime _hostApplicationLifetime;
private readonly IWebHostEnvironment _environment;
private readonly IMemoryCache _cache;
public InstallationManager(IHostApplicationLifetime hostApplicationLifetime, IWebHostEnvironment environment)
public InstallationManager(IHostApplicationLifetime hostApplicationLifetime, IWebHostEnvironment environment, IMemoryCache cache)
{
_hostApplicationLifetime = hostApplicationLifetime;
_environment = environment;
_cache = cache;
}
public void InstallPackages(string folders, bool restart)
@ -107,8 +110,15 @@ namespace Oqtane.Infrastructure
if (install && restart)
{
// restart application
RestartApplication();
if (restart)
{
RestartApplication();
}
else
{
_cache.Remove("moduledefinitions");
_cache.Remove("jobs");
}
}
}

3
Oqtane.Server/Repository/JobRepository.cs
View File

@ -31,6 +31,7 @@ namespace Oqtane.Repository
{
_db.Job.Add(job);
_db.SaveChanges();
_cache.Remove("jobs");
return job;
}
@ -38,6 +39,7 @@ namespace Oqtane.Repository
{
_db.Entry(job).State = EntityState.Modified;
_db.SaveChanges();
_cache.Remove("jobs");
return job;
}
@ -51,6 +53,7 @@ namespace Oqtane.Repository
Job job = _db.Job.Find(jobId);
_db.Job.Remove(job);
_db.SaveChanges();
_cache.Remove("jobs");
}
}
}

65
Oqtane.Server/wwwroot/css/app.css
View File

@ -110,3 +110,68 @@ app {
padding: inherit;
vertical-align: inherit;
}
/* Tooltips */
.app-tooltip {
cursor: help;
position: relative;
}
.app-tooltip::before,
.app-tooltip::after {
left: 50%;
opacity: 0;
position: absolute;
z-index: -100;
}
.app-tooltip:hover::before,
.app-tooltip:focus::before,
.app-tooltip:hover::after,
.app-tooltip:focus::after {
opacity: 1;
transform: scale(1) translateY(0);
z-index: 100;
}
.app-tooltip::before {
border-style: solid;
border-width: 1em 0.75em 0 0.75em;
border-color: #3E474F transparent transparent transparent;
bottom: 100%;
content: "";
margin-left: -0.5em;
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
transform: scale(.6) translateY(-90%);
}
.app-tooltip:hover::before,
.app-tooltip:focus::before {
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
}
.app-tooltip::after {
background: #3E474F;
border-radius: .25em;
bottom: 180%;
color: #EDEFF0;
content: attr(data-tip);
margin-left: -8.75em;
padding: 1em;
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
transform: scale(.6) translateY(50%);
width: 17.5em;
}
.app-tooltip:hover::after,
.app-tooltip:focus::after {
transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
}
@media (max-width: 760px) {
.app-tooltip::after {
font-size: .75em;
margin-left: -5em;
width: 10em;
}
}

BIN
Oqtane.Server/wwwroot/images/help.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 801 B