Mirrors/catask
1
0
Fork 0
mirror of https://codeberg.org/catask-org/catask.git synced 2025-04-20 05:43:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

switches + new config option

Browse source
This commit is contained in:
mst 2024-11-26 15:23:31 +03:00
parent 86fb42c6f6
commit 475de66cec
1 changed files with 66 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
templates/admin/categories/customize.html
View file

@ -44,25 +44,52 @@
<p class="form-text">Default: <b>#202020</b></p> <p class="form-text">Default: <b>#202020</b></p>
</div> </div>
#} #}
<div class="form-check mb-3"> <div class="form-check form-switch mb-2">
<input <input
class="form-check-input" class="form-check-input"
type="checkbox" type="checkbox"
name="_style.tintColors" name="_style.tintColors"
id="_style.tintColors" id="_style.tintColors"
value="{{ cfg.style.tintColors }}" value="{{ cfg.style.tintColors }}"
role="switch"
{% if cfg.style.tintColors == true %}checked{% endif %}> {% if cfg.style.tintColors == true %}checked{% endif %}>
<input type="hidden" id="style.tintColors" name="style.tintColors" value="{{ cfg.style.tintColors }}"> <input type="hidden" id="style.tintColors" name="style.tintColors" value="{{ cfg.style.tintColors }}">
<label for="_style.tintColors" class="form-check-label">Tint all colors with accent color</label> <label for="_style.tintColors" class="form-check-label">Tint all colors with accent color</label>
</div> </div>
<div class="form-check form-switch mb-1">
<input
class="form-check-input nav-icons-checkbox"
type="checkbox"
name="_style.navIcons"
id="_style.navIcons"
value="{{ cfg.style.navIcons }}"
role="switch"
{% if cfg.style.navIcons == true %}checked{% endif %}>
<input type="hidden" id="style.navIcons" name="style.navIcons" value="{{ cfg.style.navIcons }}">
<label for="_style.navIcons" class="form-check-label">Include icons in nav links</label>
</div>
<p class="form-text mb-2"><b>Note:</b> on mobile screens text will always be hidden if this option is enabled</p>
<div class="form-check form-switch mb-4 ms-3">
<input
class="form-check-input nav-icons-only-checkbox"
type="checkbox"
name="_style.navIconsOnly"
id="_style.navIconsOnly"
value="{{ cfg.style.navIconsOnly }}"
role="switch"
{% if cfg.style.navIconsOnly == true %}checked{% endif %}>
<input type="hidden" id="style.navIconsOnly" name="style.navIconsOnly" value="{{ cfg.style.navIconsOnly }}">
<label for="_style.navIconsOnly" class="form-check-label">Include <b>only</b> icons in nav links</label>
</div>
{# {#
<div class="form-check mb-3"> <div class="form-check form-switch mb-3">
<input <input
class="form-check-input" class="form-check-input"
type="checkbox" type="checkbox"
name="_style.tintBackground" name="_style.tintBackground"
id="_style.tintBackground" id="_style.tintBackground"
value="{{ cfg.style.tintBackground }}" value="{{ cfg.style.tintBackground }}"
role="switch"
{% if cfg.style.tintBackground == true %}checked{% endif %}> {% if cfg.style.tintBackground == true %}checked{% endif %}>
<input type="hidden" id="style.tintBackground" name="style.tintBackground" value="{{ cfg.style.tintBackground }}"> <input type="hidden" id="style.tintBackground" name="style.tintBackground" value="{{ cfg.style.tintBackground }}">
<label for="_style.tintBackground" class="form-check-label">Tint background with accent color</label> <label for="_style.tintBackground" class="form-check-label">Tint background with accent color</label>
@ -117,6 +144,42 @@
</form> </form>
{% endblock %} {% endblock %}
{% block _scripts %} {% block _scripts %}
<script>
document.addEventListener("DOMContentLoaded", function () {
// fix handling checkboxes
document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
});
});
// Get the first checkbox and the second checkbox
const navIconsCheckbox = document.querySelector(".nav-icons-checkbox");
const navIconsOnlyCheckbox = document.querySelector(".nav-icons-only-checkbox");
// Define a function to update the second checkbox
function updateNavIconsOnlyCheckbox() {
if (!navIconsCheckbox.checked) {
// Disable the second checkbox and uncheck it
navIconsOnlyCheckbox.checked = false;
navIconsOnlyCheckbox.disabled = true;
// Update the hidden input for the second checkbox
navIconsOnlyCheckbox.nextElementSibling.value = "False";
} else {
// Enable the second checkbox
navIconsOnlyCheckbox.disabled = false;
}
}
// Perform the check on page load
updateNavIconsOnlyCheckbox();
// Add an event listener to the first checkbox to handle changes
navIconsCheckbox.addEventListener("change", updateNavIconsOnlyCheckbox);
});
</script>
<script src="{{ url_for('static', filename='js/coloris.min.js') }}"></script> <script src="{{ url_for('static', filename='js/coloris.min.js') }}"></script>
<script> <script>
Coloris({ Coloris({
@ -138,12 +201,4 @@
], ],
}); });
</script> </script>
<script>
// fix handling checkboxes
document.querySelectorAll('.form-check-input[type=checkbox]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
checkbox.nextElementSibling.value = this.checked ? 'True' : 'False';
});
});
</script>
{% endblock %} {% endblock %}