Skip to content

Commit 91a5339

Browse files
fatalcoder524fatalcoder524
committed
Add Support for collapsable settings
1 parent 2597aa2 commit 91a5339

File tree

3 files changed

+103
-30
lines changed

3 files changed

+103
-30
lines changed

‎module/webroot/css/settings.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,4 +106,42 @@ input:checked + .slider:before {
106106

107107
.apply-btn:hover {
108108
opacity: 0.9;
109+
}
110+
111+
.collapsible-group {
112+
margin-bottom: 16px;
113+
}
114+
115+
.collapsible-header {
116+
display: flex;
117+
justify-content: space-between;
118+
align-items: center;
119+
cursor: pointer;
120+
padding: 8px 0;
121+
border-bottom: 1px solid #3d3d3d;
122+
}
123+
124+
.collapsible-header h4 {
125+
margin: 0;
126+
font-size: 1rem;
127+
color: var(--text);
128+
}
129+
130+
.collapsible-header .arrow {
131+
transition: transform 0.3s ease;
132+
}
133+
134+
.collapsible-header.active .arrow {
135+
transform: rotate(180deg);
136+
}
137+
138+
.collapsible-content {
139+
overflow: hidden;
140+
transition: max-height 0.3s ease-out;
141+
max-height: 200px; /* Adjust based on expected content height */
142+
margin: 12px 0;
143+
}
144+
145+
.collapsible-content.collapsed {
146+
max-height: 0;
109147
}

‎module/webroot/js/settings.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,5 +152,31 @@ export async function initSettings() {
152152
}
153153
});
154154

155+
156+
document.querySelectorAll('.collapsible-header').forEach(header => {
157+
const content = header.nextElementSibling;
158+
const arrow = header.querySelector('.arrow');
159+
160+
// Set initial state
161+
content.classList.add('collapsed');
162+
// header.classList.add('active'); // Optional: open first by default
163+
164+
header.addEventListener('click', () => {
165+
const isCollapsed = content.classList.contains('collapsed');
166+
167+
// Toggle collapsed state
168+
if (isCollapsed) {
169+
content.style.maxHeight = content.scrollHeight + "px";
170+
header.classList.add('active');
171+
} else {
172+
content.style.maxHeight = "0";
173+
header.classList.remove('active');
174+
}
175+
176+
content.classList.toggle('collapsed');
177+
arrow.classList.toggle('rotated');
178+
});
179+
});
180+
155181
router_state.isInitializing = false;
156182
}

‎module/webroot/pages/settings.html‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,49 @@
22
<div class="card-header">
33
<h3>Settings</h3>
44
</div>
5-
<div class="setting-group">
6-
<div class="setting-row">
7-
<label for="wifi-algo">TCP Congestion Algorithm (Wi-Fi)</label>
8-
<select id="wifi-algo" class="dropdown">
9-
<option value="none">Loading Options</option>
10-
</select>
11-
</div>
12-
</div>
5+
6+
<div class="collapsible-group">
7+
<div class="collapsible-header">
8+
<h4>TCP Settings</h4>
9+
<span class="arrow">▼</span>
10+
</div>
11+
<div class="collapsible-content">
12+
<div class="setting-group">
13+
<div class="setting-row">
14+
<label for="wifi-algo">TCP Congestion Algorithm (Wi-Fi)</label>
15+
<select id="wifi-algo" class="dropdown">
16+
<option value="none">Loading Options</option>
17+
</select>
18+
</div>
19+
</div>
1320

14-
<div class="setting-group">
15-
<div class="setting-row">
16-
<label for="cellular-algo">TCP Congestion Algorithm (Cellular)</label>
17-
<select id="cellular-algo" class="dropdown">
18-
<option value="none">Loading Options</option>
19-
</select>
20-
</div>
21-
</div>
21+
<div class="setting-group">
22+
<div class="setting-row">
23+
<label for="cellular-algo">TCP Congestion Algorithm (Cellular)</label>
24+
<select id="cellular-algo" class="dropdown">
25+
<option value="none">Loading Options</option>
26+
</select>
27+
</div>
28+
</div>
2229

23-
<div class="setting-group toggle-container">
24-
<label id="kill-connections-label" for="kill-connections">Kill Connections on Change</label>
25-
<label class="toggle">
26-
<input type="checkbox" id="kill-connections">
27-
<span class="slider"></span>
28-
</label>
29-
</div>
30+
<div class="setting-group toggle-container">
31+
<label id="kill-connections-label" for="kill-connections">Kill Connections on Change</label>
32+
<label class="toggle">
33+
<input type="checkbox" id="kill-connections">
34+
<span class="slider"></span>
35+
</label>
36+
</div>
3037

31-
<div class="setting-group toggle-container">
32-
<label id="initcwnd-initrwnd-label" for="initcwnd-initrwnd">Set Max initcwnd & initrwnd</label>
33-
<label class="toggle">
34-
<input type="checkbox" id="initcwnd-initrwnd">
35-
<span class="slider"></span>
36-
</label>
38+
<div class="setting-group toggle-container">
39+
<label id="initcwnd-initrwnd-label" for="initcwnd-initrwnd">Set Max initcwnd & initrwnd</label>
40+
<label class="toggle">
41+
<input type="checkbox" id="initcwnd-initrwnd">
42+
<span class="slider"></span>
43+
</label>
44+
</div>
45+
</div>
3746
</div>
38-
47+
3948
<div class="setting-group toggle-container">
4049
<button id="apply" class="apply-btn">Apply</button>
4150
</div>

0 commit comments

Comments
 (0)