From 6bc83310b966420ecc66ab017309fd84afb76c9d Mon Sep 17 00:00:00 2001
From: LogMANOriginal <LogMANOriginal@users.noreply.github.com>
Date: Thu, 31 Oct 2019 21:09:44 +0100
Subject: [PATCH] core: Add info button for input fields with title (#1173)

The current solution for titles on input boxes is not obvious to the
user as support varies between bridges. This commit adds an button to
all input boxes with titles in order to make it clear to the user that
additional information is available.
---
 lib/BridgeCard.php |  8 +++++---
 static/style.css   | 27 ++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/lib/BridgeCard.php b/lib/BridgeCard.php
index c6f38221..4353f643 100644
--- a/lib/BridgeCard.php
+++ b/lib/BridgeCard.php
@@ -122,6 +122,11 @@ This bridge is not fetching its content through a secure connection</div>';
 				} elseif($inputEntry['type'] === 'checkbox') {
 					$form .= self::getCheckboxInput($inputEntry, $idArg, $id);
 				}
+
+				if(isset($inputEntry['title']))
+					$form .= '<i class="info" title="' . filter_var($inputEntry['title'], FILTER_SANITIZE_STRING) . '">i</i>';
+				else
+					$form .= '<i></i>';
 			}
 
 			$form .= '</div>';
@@ -152,9 +157,6 @@ This bridge is not fetching its content through a secure connection</div>';
 		if(isset($entry['pattern']))
 			$retVal .= ' pattern="' . $entry['pattern'] . '"';
 
-		if(isset($entry['title']))
-			$retVal .= ' title="' . filter_var($entry['title'], FILTER_SANITIZE_STRING) . '"';
-
 		return $retVal;
 	}
 
diff --git a/static/style.css b/static/style.css
index 974aa78b..5df2c517 100644
--- a/static/style.css
+++ b/static/style.css
@@ -184,12 +184,33 @@ form {
 	content: ' :';
 }
 
+.info {
+	cursor: help;
+	opacity: 0.5;
+	width: 24px;
+	height: 24px;
+	font-size: 16px;
+	font-weight: bold;
+	font-style: italic;
+	line-height: 22px;
+	text-align: center;
+	color: #fff;
+	background-image: radial-gradient(#49afff, #1182DB);
+	-webkit-border-radius: 16px;
+	-moz-border-radius: 16px;
+	border-radius: 16px;
+}
+
+.info:hover {
+	opacity: 1;
+}
+
 @supports (display: grid) {
 
 	.parameters {
 		display: grid;
 		padding: 12px 0;
-		grid-template-columns: 40% max-content;
+		grid-template-columns: 40% max-content 24px;
 		grid-column-gap: 10px;
 		grid-row-gap: 5px;
 	}
@@ -339,6 +360,10 @@ h5 {
 		margin: 3px auto 0;
 	}
 
+	.info {
+		display: none;
+	}
+
 	@supports (display: grid) {
 
 		.parameters {