Label component for field level help

Oqtane.Client/Modules/Admin/Roles/Edit.razor

@@ -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>

Oqtane.Client/Modules/Controls/Label.razor

@@ -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 += ">";
+    }
+}

Oqtane.Client/wwwroot/css/app.css

@@ -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;
+    }
+}

Oqtane.Server/Infrastructure/InstallationManager.cs

@@ -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
+                if (restart)
-                RestartApplication();
+                {
+                    RestartApplication();
+                }
+                else
+                {
+                    _cache.Remove("moduledefinitions");
+                    _cache.Remove("jobs");
+                }
             }
         }
 

Oqtane.Server/Repository/JobRepository.cs

@@ -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");
         }
     }
 }

Oqtane.Server/wwwroot/css/app.css

@@ -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;
+    }
+}