Apache/nifi
1
0
Fork 0
mirror of https://github.com/apache/nifi.git synced 2025-02-20 09:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/port-configuration.jsp
View File

@ -24,7 +24,7 @@
<input type="text" id="port-name"/> <input type="text" id="port-name"/>
<div class="port-enabled-container"> <div class="port-enabled-container">
<div id="port-enabled" class="port-enabled nf-checkbox checkbox-unchecked"></div> <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> </div>
</div> </div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/processor-configuration.jsp
View File

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

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/remote-port-configuration.jsp
View File

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

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/reporting-task-configuration.jsp
View File

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

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-event-details-dialog.jsp
View File

@ -95,7 +95,7 @@
<div id="attributes-header" class="event-header">Attribute Values</div> <div id="attributes-header" class="event-header">Attribute Values</div>
<div id="modified-attribute-toggle-container"> <div id="modified-attribute-toggle-container">
<div id="modified-attribute-toggle" class="nf-checkbox checkbox-unchecked"></div> <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 class="clear"></div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css
View File

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

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
View File

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

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
View File

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

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
View File

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

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
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 // show the loading icon when appropriate
$(document).ajaxStart(function () { $(document).ajaxStart(function () {
// show the loading indicator // show the loading indicator

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
View File

@ -836,7 +836,7 @@
// adds a legend entry for the specified instance // adds a legend entry for the specified instance
var addLegendEntry = function (legend, instance) { var addLegendEntry = function (legend, instance) {
// create the label and the checkbox // 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 () { 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) // 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); var chartLine = d3.selectAll('path.chart-line-' + instance.id);

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/users/nf-users-table.js
View File

@ -1075,7 +1075,7 @@
var userId = $('<span class="user-id hidden"></span>').text(user.id); var userId = $('<span class="user-id hidden"></span>').text(user.id);
// identity // 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 // clear
var clear = $('<div class="clear"></div>'); var clear = $('<div class="clear"></div>');
@ -1108,10 +1108,10 @@
var groupId = $('<span class="group-id hidden"></span>').text(group.id); var groupId = $('<span class="group-id hidden"></span>').text(group.id);
// icon // 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 // 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 // clear
var clear = $('<div class="clear"></div>'); var clear = $('<div class="clear"></div>');