fix: #10042, use bootstrap 5 classes for colour context if privilege is added or removed, prior to saving

This commit is contained in:
Julian Lam
2022-11-15 14:22:17 -05:00
parent 1099de7702
commit e92fd00bca
4 changed files with 27 additions and 21 deletions

View File

@@ -15,22 +15,5 @@
td:first-child {
white-space: nowrap;
}
td[data-delta="true"] > input {
&:after {
border-color: $success;
background-color: $success;
}
}
td[data-delta="false"] > input {
&:after {
border-color: $danger;
}
&:indeterminate:after {
background-color: $danger;
}
}
}
}

View File

@@ -45,8 +45,9 @@ define('admin/manage/privileges', [
Privileges.setupPrivilegeTable = function () {
$('.privilege-table-container').on('change', 'input[type="checkbox"]:not(.checkbox-helper)', function () {
const checkboxEl = this;
const $checkboxEl = $(this);
const $wrapperEl = $checkboxEl.parent();
const $wrapperEl = $checkboxEl.parents('[data-privilege]');
const columnNo = $wrapperEl.index() + 1;
const privilege = $wrapperEl.attr('data-privilege');
const state = $checkboxEl.prop('checked');
@@ -63,6 +64,7 @@ define('admin/manage/privileges', [
bootbox.confirm('[[admin/manage/privileges:alert.confirm-moderate]]', function (confirm) {
if (confirm) {
$wrapperEl.attr('data-delta', delta);
Privileges.applyDeltaState(checkboxEl, delta);
Privileges.exposeSingleAssumedPriv(columnNo, sourceGroupName);
} else {
$checkboxEl.prop('checked', !$checkboxEl.prop('checked'));
@@ -72,6 +74,7 @@ define('admin/manage/privileges', [
bootbox.confirm('[[admin/manage/privileges:alert.confirm-admins-mods]]', function (confirm) {
if (confirm) {
$wrapperEl.attr('data-delta', delta);
Privileges.applyDeltaState(checkboxEl, delta);
Privileges.exposeSingleAssumedPriv(columnNo, sourceGroupName);
} else {
$checkboxEl.prop('checked', !$checkboxEl.prop('checked'));
@@ -79,6 +82,7 @@ define('admin/manage/privileges', [
});
} else {
$wrapperEl.attr('data-delta', delta);
Privileges.applyDeltaState(checkboxEl, delta);
Privileges.exposeSingleAssumedPriv(columnNo, sourceGroupName);
}
checkboxRowSelector.updateState($checkboxEl);
@@ -92,6 +96,15 @@ define('admin/manage/privileges', [
Privileges.addEvents(); // events with confirmation modals
};
Privileges.applyDeltaState = (checkboxEl, delta) => {
['bg-success', 'bg-opacity-75', 'border-success'].forEach((className) => {
checkboxEl.classList.toggle(className, delta === true);
});
['bg-danger', 'bg-opacity-50', 'border-danger'].forEach((className) => {
checkboxEl.classList.toggle(className, delta === false);
});
};
Privileges.addEvents = function () {
document.getElementById('save').addEventListener('click', function () {
throwConfirmModal('save', Privileges.commit);
@@ -332,7 +345,7 @@ define('admin/manage/privileges', [
function getPrivilegesFromRow(sourceGroupName) {
const privs = [];
$(`.privilege-table tr[data-group-name="${sourceGroupName}"] td input[type="checkbox"]:not(.checkbox-helper)`)
.parent()
.parents('[data-privilege]')
.each(function (idx, el) {
if ($(el).find('input').prop('checked')) {
privs.push(el.getAttribute('data-privilege'));

View File

@@ -171,7 +171,13 @@ module.exports = function (utils, Benchpress, relative_path) {
(member === 'spiders' && !spidersEnabled.includes(priv.name)) ||
(member === 'Global Moderators' && globalModDisabled.includes(priv.name));
return '<td class="text-center" data-privilege="' + priv.name + '" data-value="' + priv.state + '"><input autocomplete="off" type="checkbox"' + (priv.state ? ' checked' : '') + (disabled ? ' disabled="disabled"' : '') + ' /></td>';
return `
<td data-privilege="${priv.name}" data-value="${priv.state}">
<div class="form-check text-center">
<input class="form-check-input float-none" autocomplete="off" type="checkbox"${(priv.state ? ' checked' : '')}${(disabled ? ' disabled="disabled"' : '')} />
</div>
</td>
`;
}).join('');
}

View File

@@ -48,7 +48,11 @@
</ul>
</div>
</td>
<td class="text-center"><input autocomplete="off" type="checkbox" class="checkbox-helper"></td>
<td class="">
<div class="form-check text-center">
<input autocomplete="off" type="checkbox" class="form-check-input float-none checkbox-helper">
</div>
</td>
{function.spawnPrivilegeStates, privileges.groups.name, ../privileges}
</tr>
<!-- END privileges.groups -->