[NIFI-2941] allow users to click checkbox labels to toggle the checkbox. This closes #1538

This commit is contained in:
Scott Aslan 2017-02-27 09:44:30 -05:00 committed by Matt Gilman
parent a76641b252
commit d98426cc3d
No known key found for this signature in database
GPG Key ID: DF61EC19432AEE37
12 changed files with 23 additions and 14 deletions

View File

@ -24,7 +24,7 @@
<input type="text" id="port-name"/>
<div class="port-enabled-container">
<div id="port-enabled" class="port-enabled nf-checkbox checkbox-unchecked"></div>
<span> Enabled</span>
<span class="nf-checkbox-label"> Enabled</span>
</div>
</div>
</div>

View File

@ -27,7 +27,7 @@
<input type="text" id="processor-name" name="processor-name"/>
<div class="processor-enabled-container">
<div id="processor-enabled" class="nf-checkbox checkbox-unchecked"></div>
<span> Enabled</span>
<span class="nf-checkbox-label"> Enabled</span>
</div>
</div>
</div>

View File

@ -34,7 +34,7 @@
<input id="remote-port-concurrent-tasks" type="text"/>
<div id="remote-port-use-compression-container">
<div id="remote-port-use-compression" class="nf-checkbox"></div>
<span>Compressed</span>
<span class="nf-checkbox-label">Compressed</span>
</div>
</div>
</div>

View File

@ -27,7 +27,7 @@
<input type="text" id="reporting-task-name" name="reporting-task-name"/>
<div class="reporting-task-enabled-container">
<div id="reporting-task-enabled" class="nf-checkbox checkbox-unchecked"></div>
<span> Enabled</span>
<span class="nf-checkbox-label"> Enabled</span>
</div>
</div>
<div class="reporting-task-read-only setting-field hidden">

View File

@ -95,7 +95,7 @@
<div id="attributes-header" class="event-header">Attribute Values</div>
<div id="modified-attribute-toggle-container">
<div id="modified-attribute-toggle" class="nf-checkbox checkbox-unchecked"></div>
<div id="modified-attribute-toggle-label">Show modified attributes only</div>
<div id="modified-attribute-toggle-label" class="nf-checkbox-label">Show modified attributes only</div>
<div class="clear"></div>
</div>
<div class="clear"></div>

View File

@ -253,13 +253,17 @@ ul.property-info li {
}
div.nf-checkbox {
cursor: default;
cursor: pointer;
width: 12px;
height: 12px;
float: left;
margin-right: 4px;
}
.nf-checkbox-label {
cursor: pointer;
}
div.checkbox-unchecked {
background: transparent url(../images/inputCheckbox.png) no-repeat scroll top left;
}

View File

@ -139,7 +139,7 @@
// build the custom checkbox
isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
$('<span class="string-check-label">&nbsp;Set empty string</span>').appendTo(stringCheckPanel);
$('<span class="string-check-label nf-checkbox-label">&nbsp;Set empty string</span>').appendTo(stringCheckPanel);
var ok = $('<div class="button">Ok</div>').css({
'color': '#fff',
@ -369,7 +369,7 @@
// build the custom checkbox
isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
$('<span class="string-check-label">&nbsp;Set empty string</span>').appendTo(stringCheckPanel);
$('<span class="string-check-label nf-checkbox-label">&nbsp;Set empty string</span>').appendTo(stringCheckPanel);
var ok = $('<div class="button">Ok</div>').css({
'color': '#fff',

View File

@ -753,7 +753,7 @@
* @argument {string} name The relationship name
*/
var createRelationshipOption = function (name) {
var relationshipLabel = $('<div class="relationship-name ellipsis"></div>').text(name);
var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(name);
var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(name);
return $('<div class="available-relationship-container"><div class="available-relationship nf-checkbox checkbox-unchecked"></div>' +
'</div>').append(relationshipLabel).append(relationshipValue).appendTo('#relationship-names');

View File

@ -170,7 +170,7 @@
* @argument {object} relationship The relationship
*/
var createRelationshipOption = function (relationship) {
var relationshipLabel = $('<div class="relationship-name ellipsis"></div>').text(relationship.name);
var relationshipLabel = $('<div class="relationship-name nf-checkbox-label ellipsis"></div>').text(relationship.name);
var relationshipValue = $('<span class="relationship-name-value hidden"></span>').text(relationship.name);
// build the relationship checkbox element

View File

@ -63,6 +63,11 @@
}
});
// setup click areas for custom checkboxes
$(document).on('click', '.nf-checkbox-label', function (e) {
$(e.target).parent().find('.nf-checkbox').click();
});
// show the loading icon when appropriate
$(document).ajaxStart(function () {
// show the loading indicator

View File

@ -836,7 +836,7 @@
// adds a legend entry for the specified instance
var addLegendEntry = function (legend, instance) {
// create the label and the checkbox
var instanceLabelElement = $('<div></div>').addClass('legend-label').css('color', color(instance.label)).text(instance.label).ellipsis();
var instanceLabelElement = $('<div></div>').addClass('legend-label nf-checkbox-label').css('color', color(instance.label)).text(instance.label).ellipsis();
var instanceCheckboxElement = $('<div class="nf-checkbox"></div>').on('click', function () {
// get the line and the control points for this instance (select all for the line to update control and main charts)
var chartLine = d3.selectAll('path.chart-line-' + instance.id);

View File

@ -1075,7 +1075,7 @@
var userId = $('<span class="user-id hidden"></span>').text(user.id);
// identity
var identity = $('<div class="available-identities"></div>').text(user.component.identity);
var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(user.component.identity);
// clear
var clear = $('<div class="clear"></div>');
@ -1108,10 +1108,10 @@
var groupId = $('<span class="group-id hidden"></span>').text(group.id);
// icon
var groupIcon = $('<div class="fa fa-users" style="margin-top: 6px;"></div>');
var groupIcon = $('<div class="fa fa-users nf-checkbox-label" style="margin-top: 6px;"></div>');
// identity
var identity = $('<div class="available-identities"></div>').text(group.component.identity);
var identity = $('<div class="available-identities nf-checkbox-label"></div>').text(group.component.identity);
// clear
var clear = $('<div class="clear"></div>');