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.
This commit is contained in:
LogMANOriginal 2019-10-31 21:09:44 +01:00 committed by GitHub
parent c8d5c85c76
commit 6bc83310b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 4 deletions

View file

@ -122,6 +122,11 @@ This bridge is not fetching its content through a secure connection</div>';
} elseif($inputEntry['type'] === 'checkbox') { } elseif($inputEntry['type'] === 'checkbox') {
$form .= self::getCheckboxInput($inputEntry, $idArg, $id); $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>'; $form .= '</div>';
@ -152,9 +157,6 @@ This bridge is not fetching its content through a secure connection</div>';
if(isset($entry['pattern'])) if(isset($entry['pattern']))
$retVal .= ' pattern="' . $entry['pattern'] . '"'; $retVal .= ' pattern="' . $entry['pattern'] . '"';
if(isset($entry['title']))
$retVal .= ' title="' . filter_var($entry['title'], FILTER_SANITIZE_STRING) . '"';
return $retVal; return $retVal;
} }

View file

@ -184,12 +184,33 @@ form {
content: ' :'; 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) { @supports (display: grid) {
.parameters { .parameters {
display: grid; display: grid;
padding: 12px 0; padding: 12px 0;
grid-template-columns: 40% max-content; grid-template-columns: 40% max-content 24px;
grid-column-gap: 10px; grid-column-gap: 10px;
grid-row-gap: 5px; grid-row-gap: 5px;
} }
@ -339,6 +360,10 @@ h5 {
margin: 3px auto 0; margin: 3px auto 0;
} }
.info {
display: none;
}
@supports (display: grid) { @supports (display: grid) {
.parameters { .parameters {