Restyle regex script toggles

This commit is contained in:
Cohee 2023-11-05 23:40:43 +02:00
parent 5e88edf22d
commit 4af6955588
3 changed files with 48 additions and 14 deletions

View File

@ -77,12 +77,15 @@ async function loadRegexScripts() {
scriptHtml.attr('id', uuidv4());
scriptHtml.find('.regex_script_name').text(script.scriptName);
scriptHtml.find('.disable_regex').prop("checked", script.disabled ?? false)
.each(function() {
$(this).closest('.checkbox').find('span').toggle(this.checked);
})
.on('click', function() {
script.disabled = !script.disabled;
$(this).closest('.checkbox').find('span').toggle(this.checked);
.on('input', function () {
script.disabled = !!$(this).prop("checked");
saveSettingsDebounced();
});
scriptHtml.find('.regex-toggle-on').on('click', function () {
scriptHtml.find('.disable_regex').prop("checked", true).trigger('input');
});
scriptHtml.find('.regex-toggle-off').on('click', function () {
scriptHtml.find('.disable_regex').prop("checked", false).trigger('input');
});
scriptHtml.find('.edit_existing_regex').on('click', async function () {
await onRegexEditorOpenClick(scriptHtml.attr("id"));

View File

@ -2,9 +2,10 @@
<span class="drag-handle menu-handle">&#9776;</span>
<div class="regex_script_name flexGrow overflow-hidden"></div>
<div class="flex-container flexnowrap">
<label class="checkbox flex-container">
<span data-i18n="Disabled">Disabled</span>
<input id="disabled" type="checkbox" name="disabled" class="disable_regex" />
<label class="checkbox flex-container" for="regex_disable">
<input type="checkbox" name="regex_disable" class="disable_regex" />
<span class="regex-toggle-on fa-solid fa-toggle-on" title="Disable script"></span>
<span class="regex-toggle-off fa-solid fa-toggle-off" title="Enable script"></span>
</label>
<div class="edit_existing_regex menu_button">
<i class="fa-solid fa-pencil"></i>

View File

@ -22,3 +22,33 @@
margin-top: 1px;
margin-bottom: 1px;
}
input.disable_regex {
display: none !important;
}
.regex-toggle-off {
cursor: pointer;
opacity: 0.5;
filter: grayscale(0.5);
}
.regex-toggle-on {
cursor: pointer;
}
.disable_regex:checked ~ .regex-toggle-off {
display: block;
}
.disable_regex:checked ~ .regex-toggle-on {
display: none;
}
.disable_regex:not(:checked) ~ .regex-toggle-off {
display: none;
}
.disable_regex:not(:checked) ~ .regex-toggle-on {
display: block;
}