mirror of https://github.com/apache/nifi.git
[NIFI-2941] allow users to click checkbox labels to toggle the checkbox. This closes #1538
This commit is contained in:
parent
a76641b252
commit
d98426cc3d
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -139,7 +139,7 @@
|
|||
|
||||
// build the custom checkbox
|
||||
isEmpty = $('<div class="nf-checkbox string-check"/>').appendTo(stringCheckPanel);
|
||||
$('<span class="string-check-label"> Set empty string</span>').appendTo(stringCheckPanel);
|
||||
$('<span class="string-check-label nf-checkbox-label"> 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"> Set empty string</span>').appendTo(stringCheckPanel);
|
||||
$('<span class="string-check-label nf-checkbox-label"> Set empty string</span>').appendTo(stringCheckPanel);
|
||||
|
||||
var ok = $('<div class="button">Ok</div>').css({
|
||||
'color': '#fff',
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>');
|
||||
|
|
Loading…
Reference in New Issue