NIFI-10577 Fix Sensitive Checkbox rendering for Fetch Parameters (#6473)

* NIFI-10577 Fixed Sensitive Checkbox rendering for Fetch Parameters

- Corrected rendering of Sensitive status checkbox on Firefox using standard nf-checkbox

* NIFI-10577 Corrected canvas rendering in Safari

Merged #6473 in main.
This commit is contained in:
exceptionfactory 2022-10-03 15:24:36 -05:00 committed by GitHub
parent 10a5e9194c
commit 7a01e22125
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 74 deletions

View File

@ -325,14 +325,6 @@ span.parameter-provider-referencing-component-name {
width: 332px;
}
#selectable-parameters-table .slick-cell-checkboxsel {
padding: 1px 2px 5px 4px;
}
#selectable-parameters-table .slick-cell-checkboxsel.selected {
padding: 0px 2px 6px 4px;
}
#selectable-parameters-table .slick-column-name input {
margin: 5px 3px 3px 4px;
}
@ -341,60 +333,6 @@ span.parameter-provider-referencing-component-name {
overflow-x: hidden;
}
#selectable-parameters-table input[type="checkbox"] {
margin-top: 2px;
width: 0;
}
#selectable-parameters-table input[type="checkbox"]:focus {
box-shadow: none;
border: none;
}
#selectable-parameters-table .slick-column-name input[type="checkbox"] {
margin-top: 5px;
}
#selectable-parameters-table .slick-column-name input[checked="checked"]:before {
margin-top: 2px;
}
#selectable-parameters-table input[type="checkbox"]:before {
content: url(../images/inputCheckbox.png);
cursor: pointer;
clip-path: polygon(0% -16%, 50% -16%, 50% 104%, 0% 104%);
position: absolute;
margin-left: 1px;
margin-top: 3px;
}
#selectable-parameters-table input[checked="checked"]:before {
content: url(../images/inputCheckbox.png);
cursor: pointer;
clip-path: polygon(50% -16%, 100% -16%, 100% 116%, 50% 116%);
margin-left: -11px;
margin-top: 3px;
}
#selectable-parameters-table input[type="checkbox"].disabled:before {
content: url(../images/inputCheckbox.png);
opacity: .5;
cursor: not-allowed;
clip-path: polygon(0% -16%, 50% -16%, 50% 104%, 0% 104%);
position: absolute;
margin-left: 1px;
margin-top: 3px;
}
#selectable-parameters-table input[checked="checked"].disabled:before {
content: url(../images/inputCheckbox.png);
opacity: .5;
cursor: not-allowed;
clip-path: polygon(50% -16%, 100% -16%, 100% 116%, 50% 116%);
margin-left: -11px;
margin-top: 3px;
}
#parameter-groups-table .slick-pane-top .slick-viewport-top .grid-canvas-top,
#selectable-parameters-table .slick-pane-top .slick-viewport .grid-canvas-top {
width: 100% !important;
@ -408,12 +346,6 @@ span.parameter-provider-referencing-component-name {
margin-top: 5px;
}
#fetched-parameters-listing .slick-cell-checkboxsel {
background: #f0f0f0;
border-right-color: silver;
border-right-style: solid;
}
.slick-columnpicker {
border: 1px solid #718BB7;
background: #f0f0f0;
@ -494,3 +426,11 @@ button.selectable-parameters-buttons:hover {
max-width: calc(100% - 230px);
z-index: 999;
}
#selectable-parameters-table .slick-cell-checkbox.selected {
padding-top: 1px;
}
.slick-cell-checkbox .nf-checkbox {
margin-top: 5px;
}

View File

@ -2427,23 +2427,23 @@
if (dataContext) {
if (dataContext.status === 'REMOVED' || dataContext.status === 'MISSING_BUT_REFERENCED') {
// disable checkboxes
return "<input type='checkbox' class='disabled unchecked-input-disabled' disabled><label for='selector'></label>";
return '<div class="disabled nf-checkbox checkbox-unchecked"></div>';
}
if (_.isEmpty(dataContext.parameterStatus) || _.isEmpty(dataContext.parameterStatus.parameter.parameter.referencingComponents)) {
if (dataContext.sensitivity === SENSITIVE) {
return "<input type='checkbox' checked='checked' class='checked-input-enabled'><label for='selector'></label>";
return '<div class="checked-input-enabled nf-checkbox checkbox-checked"></div>';
} else {
return "<input type='checkbox' class='unchecked-input-enabled'><label for='selector'></label>";
return '<div class="unchecked-input-enabled nf-checkbox checkbox-unchecked"></div>';
}
}
if (!_.isEmpty(dataContext.parameterStatus.parameter.parameter.referencingComponents)) {
// disable checkboxes
if (dataContext.sensitivity === SENSITIVE) {
return "<input type='checkbox' checked='checked' class='disabled checked-input-disabled' disabled><label for='selector'></label>";
return '<div class="disabled nf-checkbox checkbox-checked"></div>';
} else {
return "<input type='checkbox' class='disabled unchecked-input-disabled' disabled><label for='selector'></label>";
return '<div class="disabled nf-checkbox checkbox-unchecked"></div>';
}
}
@ -2474,7 +2474,7 @@
width: 30,
resizable: false,
sortable: false,
cssClass: 'slick-cell-checkboxsel',
cssClass: 'slick-cell-checkbox slick-cell-checkboxsel',
hideSelectAllCheckbox: false,
formatter: checkboxSelectionFormatter
}