From 83bb86de06162af9f10c3016515c18892bfd07b1 Mon Sep 17 00:00:00 2001
From: "Jamie.Rees" <Jamie.Rees>
Date: Mon, 13 Mar 2017 09:05:33 +0000
Subject: [PATCH] Tooltips

---
 Ombi.UI/Helpers/BaseUrlHelper.cs              |  8 ++++
 Ombi.UI/Helpers/CustomHtmlHelper.cs           |  5 +-
 Ombi.UI/Views/Admin/Authentication.cshtml     | 46 +++++--------------
 Ombi.UI/Views/Admin/Emby.cshtml               |  4 +-
 Ombi.UI/Views/Admin/NewsletterSettings.cshtml | 19 ++++----
 Ombi.UI/Views/Admin/Settings.cshtml           | 37 ++++-----------
 .../Views/Customization/Customization.cshtml  |  8 +++-
 Ombi.UI/Views/Shared/Partial/_Sidebar.cshtml  |  4 ++
 Ombi.UI/Views/SystemStatus/Status.cshtml      | 17 ++++---
 9 files changed, 61 insertions(+), 87 deletions(-)

diff --git a/Ombi.UI/Helpers/BaseUrlHelper.cs b/Ombi.UI/Helpers/BaseUrlHelper.cs
index 5badfad5b..232cab766 100644
--- a/Ombi.UI/Helpers/BaseUrlHelper.cs
+++ b/Ombi.UI/Helpers/BaseUrlHelper.cs
@@ -363,6 +363,14 @@ namespace Ombi.UI.Helpers
             return helper.Raw(returnString);
         }
 
+        public static IHtmlString ToolTip(this HtmlHelpers helper, string tooltipText)
+        {
+            //< span class="customTooltip" title="It also requires users to have the Newsletter feature"><i class="fa fa-info-circle"></i></span>
+            return
+                helper.Raw(
+                    $"<span class=\"customTooltip\" title=\"{tooltipText}\"><i class=\"fa fa-info-circle\"></i></span>");
+        }
+
         public static IHtmlString GetBaseUrl(this HtmlHelpers helper)
         {
             return helper.Raw(GetBaseUrl());
diff --git a/Ombi.UI/Helpers/CustomHtmlHelper.cs b/Ombi.UI/Helpers/CustomHtmlHelper.cs
index 1f76cd371..14f401169 100644
--- a/Ombi.UI/Helpers/CustomHtmlHelper.cs
+++ b/Ombi.UI/Helpers/CustomHtmlHelper.cs
@@ -41,13 +41,14 @@ namespace Ombi.UI.Helpers
             return helper.Raw(htmlString);
         }
 
-        public static IHtmlString Checkbox(this HtmlHelpers helper, bool check, string name, string display)
+        public static IHtmlString Checkbox(this HtmlHelpers helper, bool check, string name, string display, string tooltipText = null)
         {
             var sb = new StringBuilder();
 
             sb.AppendLine("<div class=\"form-group\">");
             sb.AppendLine("<div class=\"checkbox\">");
-            sb.AppendFormat("<input type=\"checkbox\" id=\"{0}\" name=\"{0}\" {2}><label for=\"{0}\">{1}</label>", name, display, check ? "checked=\"checked\"" : string.Empty);
+            sb.AppendFormat("<input type=\"checkbox\" id=\"{0}\" name=\"{0}\" {2}><label for=\"{0}\">{1}  {3}</label>", name, display, check ? "checked=\"checked\"" : string.Empty, 
+                string.IsNullOrEmpty(tooltipText) ? string.Empty : helper.ToolTip(tooltipText).ToHtmlString());
             sb.AppendLine("</div>");
             sb.AppendLine("</div>");
             return helper.Raw(sb.ToString());
diff --git a/Ombi.UI/Views/Admin/Authentication.cshtml b/Ombi.UI/Views/Admin/Authentication.cshtml
index 5c0a2dda2..c4654c56b 100644
--- a/Ombi.UI/Views/Admin/Authentication.cshtml
+++ b/Ombi.UI/Views/Admin/Authentication.cshtml
@@ -1,4 +1,5 @@
 @using Ombi.UI.Helpers
+@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<Ombi.Core.SettingModels.AuthenticationSettings>
 @Html.Partial("Shared/Partial/_Sidebar")
 
 @{
@@ -17,40 +18,11 @@
     <form class="form-horizontal" method="POST" action="@formAction" id="mainForm">
         <fieldset>
             <legend>Authentication Settings</legend>
-
-            <div class="form-group">
-                <div class="checkbox">
-             
-                        @if (Model.UserAuthentication)
-                        {
-                            <input type="checkbox" id="userAuth" name="UserAuthentication" checked="checked">
-                            <label for="userAuth">Enable User Authentication</label>
-                        }
-                        else
-                        {
-                            <input type="checkbox" id="userAuth" name="UserAuthentication">
-                            <label for="userAuth">Enable User Authentication</label>
-                        }
-          
-                </div>
-            </div>
-
-            <div class="form-group">
-                <div class="checkbox">
-       
-                        @if (Model.UsePassword)
-                        {
-                            <input type="checkbox" id="UsePassword" name="UsePassword" checked="checked">
-                            <label id="passLabel" for="UsePassword">Require users to login with their passwords</label>
-                        }
-                        else
-                        {
-                            <input type="checkbox" id="UsePassword" name="UsePassword">
-                            <label id="passLabel" for="UsePassword">Require users to login with their passwords</label>
-                        }
             
-                </div>
-            </div>
+                        @Html.Checkbox(Model.UserAuthentication, "UserAuthentication", "Enable User Authentication", "If enabled we will check the login name against a user in your local users list or Plex/Emby users.")
+            
+            
+            @Html.Checkbox(Model.UsePassword, "UsePassword", "Require users to login with their passwords", "If enabled, users must provide a valid password to log into Ombi")
 
 
             <br />
@@ -59,7 +31,9 @@
             <br />
             
 
-            <p class="form-group">A comma separated list of users that you do not want to login.</p>
+            <p class="form-group">A comma separated list of users that you do not want to login.
+            @Html.ToolTip("This is a 'blacklist', if you have users that you do not want to log in, enter them here!")</p>
+            
             <div class="form-group">
                 <label for="DeniedUsers" class="control-label">Denied Users</label>
                 <div >
@@ -83,7 +57,9 @@
     $(function () {
 
         var base = '@Html.GetBaseUrl()';
-
+        $('.customTooltip').tooltipster({
+            contentCloning: true
+        });
 
 
         changeDisabledStatus($('#UsePassword'), @Model.UserAuthentication.ToString().ToLower(), $('#passLabel'));
diff --git a/Ombi.UI/Views/Admin/Emby.cshtml b/Ombi.UI/Views/Admin/Emby.cshtml
index 7ebceaf14..3cdaf33a1 100644
--- a/Ombi.UI/Views/Admin/Emby.cshtml
+++ b/Ombi.UI/Views/Admin/Emby.cshtml
@@ -47,7 +47,8 @@
                 </div>
             </div>
 
-			@Html.Checkbox(Model.EnableEpisodeSearching, "EnableEpisodeSearching", "Enable Episode Searching")
+            @Html.Checkbox(Model.EnableEpisodeSearching, "EnableEpisodeSearching", "Enable Episode Searching") 
+            @Html.ToolTip("This will allow Ombi to search through all of the episodes stored on Emby")
 
             <div class="form-group">
                 <label for="SubDir" class="control-label">Emby Base Url</label>
@@ -81,6 +82,7 @@
 
 <script>
     $(function () {
+
         var base = '@Html.GetBaseUrl()';
 
         $('#testEmby').click(function (e) {
diff --git a/Ombi.UI/Views/Admin/NewsletterSettings.cshtml b/Ombi.UI/Views/Admin/NewsletterSettings.cshtml
index a28c27c30..2802e68d6 100644
--- a/Ombi.UI/Views/Admin/NewsletterSettings.cshtml
+++ b/Ombi.UI/Views/Admin/NewsletterSettings.cshtml
@@ -13,18 +13,11 @@
                 <div class="form-group">
                     <div class="checkbox">
 
-                        <small>Note: This will require you to setup your email notifications</small>
+                        <small>Note: This will require you to setup your email notifications 
+                        </small><span class="customTooltip" title="It also requires users to have the Newsletter feature"><i class="fa fa-info-circle"></i></span>
                         <br />
-                        @if (Model.SendRecentlyAddedEmail)
-                        {
-                            <input type="checkbox" id="SendRecentlyAddedEmail" name="SendRecentlyAddedEmail" checked="checked"><label for="SendRecentlyAddedEmail">Enable newsletter</label>
-                        }
-                        else
-                        {
-                            <input type="checkbox" id="SendRecentlyAddedEmail" name="SendRecentlyAddedEmail"><label for="SendRecentlyAddedEmail">Enable newsletter</label>
-                        }
-
-
+                        <br />
+                        @Html.Checkbox(Model.SendRecentlyAddedEmail, "SendRecentlyAddedEmail", "Enable newsletter")
                     </div>
                 </div>
                 <div class="form-group">
@@ -59,6 +52,10 @@
 
 <script>
     $(function () {
+        $('.customTooltip').tooltipster({
+            contentCloning: true
+        });
+
         var base = '@Html.GetBaseUrl()';
         $('#save').click(function (e) {
             e.preventDefault();
diff --git a/Ombi.UI/Views/Admin/Settings.cshtml b/Ombi.UI/Views/Admin/Settings.cshtml
index 9a6010964..0dbf77ba6 100644
--- a/Ombi.UI/Views/Admin/Settings.cshtml
+++ b/Ombi.UI/Views/Admin/Settings.cshtml
@@ -34,13 +34,14 @@
             <small class="control-label">You will have to restart after changing the port.</small>
 
             <div class="form-group">
-                <label for="BaseUrl" class="control-label">Base Url</label>
+                <label for="BaseUrl" class="control-label">Base Url @Html.ToolTip("This will make Ombi run with a base url, usually used in reverse proxy scenarios")</label>
 
                 <div>
                     <input type="text" class="form-control form-control-custom " id="BaseUrl" name="BaseUrl" placeholder="Base Url" value="@Model.BaseUrl">
+
                 </div>
             </div>
-            <small class="control-label">You will have to restart after changing the url base.</small>
+            <small class="control-label">You will have to restart after changing the base url.</small>
 
             <div class="form-group">
                 <label for="ApiKey" class="control-label">Api Key</label>
@@ -62,34 +63,10 @@
 
             @Html.Checkbox(Model.SearchForActors,"SearchForActors","Search for Movies by Actor")
 
-            <div class="form-group">
-                <div class="checkbox">
+            @Html.Checkbox(Model.SearchForTvShows, "SearchForTvShows", "Search for TV Shows")
 
-                    @if (Model.SearchForTvShows)
-                    {
-                        <input type="checkbox" id="SearchForTvShows" name="SearchForTvShows" checked="checked"><label for="SearchForTvShows">Search for TV Shows</label>
-                    }
-                    else
-                    {
-                        <input type="checkbox" id="SearchForTvShows" name="SearchForTvShows"><label for="SearchForTvShows">Search for TV Shows</label>
-                    }
+            @Html.Checkbox(Model.SearchForMusic, "SearchForMusic", "Search for Music")
 
-                </div>
-            </div>
-            <div class="form-group">
-                <div class="checkbox">
-
-                    @if (Model.SearchForMusic)
-                    {
-                        <input type="checkbox" id="SearchForMusic" name="SearchForMusic" checked="checked"><label for="SearchForMusic">Search for Music</label>
-                    }
-                    else
-                    {
-                        <input type="checkbox" id="SearchForMusic" name="SearchForMusic"><label for="SearchForMusic">Search for Music</label>
-                    }
-
-                </div>
-            </div>
 
             <div class="form-group">
                 <div class="checkbox">
@@ -219,7 +196,9 @@
 <script>
     $(function () {
 
-
+        $('.customTooltip').tooltipster({
+            contentCloning: true
+        });
         new Clipboard('.fa-clipboard');
 
 
diff --git a/Ombi.UI/Views/Customization/Customization.cshtml b/Ombi.UI/Views/Customization/Customization.cshtml
index 083cc63c7..39fecbfc3 100644
--- a/Ombi.UI/Views/Customization/Customization.cshtml
+++ b/Ombi.UI/Views/Customization/Customization.cshtml
@@ -23,7 +23,7 @@
 
 
             <div class="form-group">
-                <label for="ApplicationName" class="control-label">Application Name</label>
+                <label for="ApplicationName" class="control-label">Application Name @Html.ToolTip("Change the name of the application :( I quite like the name Ombi...")</label>
 
                 <div>
                     <input type="text" class="form-control form-control-custom " id="ApplicationName" name="ApplicationName" placeholder="Application Name" value="@Model.Settings.ApplicationName">
@@ -120,7 +120,11 @@
 
 <script>
 
-    $(function() {
+    $(function () {
+
+        $('.customTooltip').tooltipster({
+            contentCloning: true
+        });
         
         $('#save').click(function (e) {
             e.preventDefault();
diff --git a/Ombi.UI/Views/Shared/Partial/_Sidebar.cshtml b/Ombi.UI/Views/Shared/Partial/_Sidebar.cshtml
index f9f16c866..a93a452d3 100644
--- a/Ombi.UI/Views/Shared/Partial/_Sidebar.cshtml
+++ b/Ombi.UI/Views/Shared/Partial/_Sidebar.cshtml
@@ -49,8 +49,12 @@
 </div>
 
 <script>
+
     $('#sidebar > a').on('click', function (e) {
         e.preventDefault();
+        $('.customTooltip').tooltipster({
+            contentCloning: true
+        });
 
         if (!$(this).hasClass("active")) {
             var lastActive = $(this).closest("#sidebar").children(".active");
diff --git a/Ombi.UI/Views/SystemStatus/Status.cshtml b/Ombi.UI/Views/SystemStatus/Status.cshtml
index 8be76882a..4ef61a2e6 100644
--- a/Ombi.UI/Views/SystemStatus/Status.cshtml
+++ b/Ombi.UI/Views/SystemStatus/Status.cshtml
@@ -19,7 +19,7 @@
                 <label class="control-label">@Model.Status.NewVersion</label>
             </div>
         }
-
+        <hr/>
         <form id="mainForm" method="post" action="save">
 
             <div class="form-group">
@@ -42,15 +42,16 @@
             </div>
             <button id="saveSettings" class="btn btn-success-outline">Save</button>
         </form>
-
-
+        <hr/>
         <div class="form-group">
             <label class="control-label">Update Available: </label>
             @if (Model.Status.UpdateAvailable)
             {
-                <label class="control-label"><a href="@Model.Status.UpdateUri" target="_blank"><i class="fa fa-check"></i></a></label>
+                <label class="control-label"><a href="@Model.Status.UpdateUri" target="_blank"><i class="fa fa-check"></i></a> @Html.ToolTip("Click the 'tick' to manually go to the page")</label>
+                <br />
                 <br />
-                <input id="args" class="form-control form-control-custom " placeholder="optional launch arguments e.g. /etc/mono /opt/PlexRequests.exe">
+                <label class="control-label">Launch Arguments</label> @Html.ToolTip("This is if you run Ombi outside of a regular install e.g. you are launching with a custom port. This field will be used after we have updated to launch the application.")
+                <input id="args" class="form-control form-control-custom " placeholder="/etc/mono /opt/Ombi.exe">
                 <br/>
                 <button id="autoUpdate" class="btn btn-success-outline">Automatic Update (beta) <i class="fa fa-download"></i></button>
             }
@@ -60,7 +61,7 @@
             }
 
         </div>
-
+        <hr/>
         @if (Model.Status.UpdateAvailable)
         {
             <h2>
@@ -76,7 +77,9 @@
 </div>
 
 <script>
-
+    $('.customTooltip').tooltipster({
+        contentCloning: true
+    });
     var base = '@Html.GetBaseUrl()';
     $('#autoUpdate')
         .click(function (e) {