gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-26 12:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(extension): implement accordion mutual exclusion behavior for settings details categories

Browse Source
This commit is contained in:
KoalaDev
2026-07-12 06:31:24 +02:00
parent 9cd3fc1ee2
commit bd33ea4804
5 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/popup.html
+4 -4
View File
@@ -813,7 +813,7 @@
<!-- Settings Tab -->
<div id="tab-settings" class="tab-content">
<details class="form-group" open>
<details class="form-group" name="settings-accordion" open>
<summary title="Change your username, theme, and language." data-i18n="LABEL_SETTINGS_GROUP_PROFILE" data-i18n-title="LABEL_SETTINGS_GROUP_PROFILE_TOOLTIP">👤 Profile & Theme</summary>
<div class="details-content">
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
@@ -851,7 +851,7 @@
</div>
</details>
<details class="form-group">
<details class="form-group" name="settings-accordion">
<summary title="Choose which titles are sent to the room." data-i18n="LABEL_PRIVACY_SETTINGS" data-i18n-title="LABEL_PRIVACY_SETTINGS_TOOLTIP">🔒 Privacy Settings</summary>
<div class="details-content">
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
@@ -872,7 +872,7 @@
</div>
</details>
<details class="form-group">
<details class="form-group" name="settings-accordion">
<summary title="Customize playback, notifications, and audio preferences." data-i18n="LABEL_SETTINGS_GROUP_SYNC" data-i18n-title="LABEL_SETTINGS_GROUP_SYNC_TOOLTIP">⚡ Playback & Sync</summary>
<div class="details-content">
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px;">
@@ -910,7 +910,7 @@
</div>
</details>
<details class="form-group">
<details class="form-group" name="settings-accordion">
<summary title="Tools for fixing connection issues." data-i18n="LABEL_TROUBLESHOOTING" data-i18n-title="LABEL_TROUBLESHOOTING_TOOLTIP">🔧 Troubleshooting</summary>
<div class="details-content" style="gap: 8px;">
<button id="restartTourBtn" class="secondary" style="width: 100%; font-size: 11px;" title="Restart the onboarding tutorial" data-i18n="BTN_RESTART_TOUR" data-i18n-title="BTN_RESTART_TOUR_TOOLTIP">Restart Tutorial</button>
extension/popup.js
+13
View File
@@ -1375,6 +1375,19 @@ if (elements.langSelector) {
});
}
// Accordion behavior for settings details categories (collapses others when one opens)
document.querySelectorAll('#tab-settings details.form-group').forEach(det => {
det.addEventListener('toggle', () => {
if (det.open) {
document.querySelectorAll('#tab-settings details.form-group').forEach(other => {
if (other !== det && other.open) {
other.removeAttribute('open');
}
});
}
});
});
elements.serverUrl.addEventListener('change', () => {
let url = elements.serverUrl.value.trim();
if (url && !url.includes('://')) {