mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-08-06 00:33:09 +02:00
ui: Replace map filter checkboxes with clickable badges
Convert type filter checkboxes to clickable toggle badges on the Map modal (accessible from main menu). Same UX pattern as pending contacts: - Active: colored background, white text - Inactive: colored text/border, white background Updated in both base.html and contacts_base.html for consistency. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
MarekWo
@@ -846,3 +846,59 @@ main {
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Map Filter Badges
|
||||
============================================================================= */
|
||||
|
||||
/* Clickable map filter badges */
|
||||
.map-filter-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease-in-out;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.map-filter-badge[data-type="1"] {
|
||||
color: #2196F3;
|
||||
background-color: white;
|
||||
border: 2px solid #2196F3;
|
||||
}
|
||||
.map-filter-badge[data-type="1"].active {
|
||||
color: white;
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
.map-filter-badge[data-type="2"] {
|
||||
color: #4CAF50;
|
||||
background-color: white;
|
||||
border: 2px solid #4CAF50;
|
||||
}
|
||||
.map-filter-badge[data-type="2"].active {
|
||||
color: white;
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
.map-filter-badge[data-type="3"] {
|
||||
color: #9C27B0;
|
||||
background-color: white;
|
||||
border: 2px solid #9C27B0;
|
||||
}
|
||||
.map-filter-badge[data-type="3"].active {
|
||||
color: white;
|
||||
background-color: #9C27B0;
|
||||
}
|
||||
|
||||
.map-filter-badge[data-type="4"] {
|
||||
color: #FF9800;
|
||||
background-color: white;
|
||||
border: 2px solid #FF9800;
|
||||
}
|
||||
.map-filter-badge[data-type="4"].active {
|
||||
color: #212529;
|
||||
background-color: #FF9800;
|
||||
}
|
||||
|
||||
+12
-9
@@ -120,14 +120,14 @@ function showContactOnMap(name, lat, lon) {
|
||||
window.showContactOnMap = showContactOnMap;
|
||||
|
||||
/**
|
||||
* Get selected contact types from map filter checkboxes
|
||||
* Get selected contact types from map filter badges
|
||||
*/
|
||||
function getSelectedMapTypes() {
|
||||
const types = [];
|
||||
if (document.getElementById('mapFilterCLI')?.checked) types.push(1);
|
||||
if (document.getElementById('mapFilterREP')?.checked) types.push(2);
|
||||
if (document.getElementById('mapFilterROOM')?.checked) types.push(3);
|
||||
if (document.getElementById('mapFilterSENS')?.checked) types.push(4);
|
||||
if (document.getElementById('mapFilterCLI')?.classList.contains('active')) types.push(1);
|
||||
if (document.getElementById('mapFilterREP')?.classList.contains('active')) types.push(2);
|
||||
if (document.getElementById('mapFilterROOM')?.classList.contains('active')) types.push(3);
|
||||
if (document.getElementById('mapFilterSENS')?.classList.contains('active')) types.push(4);
|
||||
return types;
|
||||
}
|
||||
|
||||
@@ -208,11 +208,14 @@ async function showAllContactsOnMap() {
|
||||
modalEl.removeEventListener('shown.bs.modal', onShown);
|
||||
};
|
||||
|
||||
// Setup filter checkbox listeners
|
||||
// Setup filter badge listeners
|
||||
['mapFilterCLI', 'mapFilterREP', 'mapFilterROOM', 'mapFilterSENS'].forEach(id => {
|
||||
const checkbox = document.getElementById(id);
|
||||
if (checkbox) {
|
||||
checkbox.onchange = updateMapMarkers;
|
||||
const badge = document.getElementById(id);
|
||||
if (badge) {
|
||||
badge.onclick = () => {
|
||||
badge.classList.toggle('active');
|
||||
updateMapMarkers();
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
+5
-25
@@ -299,32 +299,12 @@
|
||||
<div class="modal-body p-0">
|
||||
<!-- Type filter (hidden for single contact view) -->
|
||||
<div id="mapTypeFilter" class="d-none px-3 py-2 border-bottom bg-light">
|
||||
<div class="d-flex flex-wrap gap-3 align-items-center">
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center">
|
||||
<span class="small text-muted me-1">Show:</span>
|
||||
<div class="form-check form-check-inline mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="mapFilterCLI" value="1" checked>
|
||||
<label class="form-check-label small" for="mapFilterCLI">
|
||||
<span class="badge" style="background-color: #2196F3;">CLI</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="mapFilterREP" value="2" checked>
|
||||
<label class="form-check-label small" for="mapFilterREP">
|
||||
<span class="badge" style="background-color: #4CAF50;">REP</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="mapFilterROOM" value="3" checked>
|
||||
<label class="form-check-label small" for="mapFilterROOM">
|
||||
<span class="badge" style="background-color: #9C27B0;">ROOM</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="mapFilterSENS" value="4" checked>
|
||||
<label class="form-check-label small" for="mapFilterSENS">
|
||||
<span class="badge" style="background-color: #FF9800;">SENS</span>
|
||||
</label>
|
||||
</div>
|
||||
<span class="map-filter-badge active" data-type="1" id="mapFilterCLI">CLI</span>
|
||||
<span class="map-filter-badge active" data-type="2" id="mapFilterREP">REP</span>
|
||||
<span class="map-filter-badge active" data-type="3" id="mapFilterROOM">ROOM</span>
|
||||
<span class="map-filter-badge active" data-type="4" id="mapFilterSENS">SENS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leafletMap" style="height: 400px; width: 100%;"></div>
|
||||
|
||||
@@ -466,32 +466,12 @@
|
||||
<div class="modal-body p-0">
|
||||
<!-- Type filter (hidden for single contact view) -->
|
||||
<div id="mapTypeFilter" class="d-none px-3 py-2 border-bottom bg-light">
|
||||
<div class="d-flex flex-wrap gap-3 align-items-center">
|
||||
<div class="d-flex flex-wrap gap-2 align-items-center">
|
||||
<span class="small text-muted me-1">Show:</span>
|
||||
<div class="form-check form-check-inline mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="mapFilterCLI" value="1" checked>
|
||||
<label class="form-check-label small" for="mapFilterCLI">
|
||||
<span class="badge" style="background-color: #2196F3;">CLI</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="mapFilterREP" value="2" checked>
|
||||
<label class="form-check-label small" for="mapFilterREP">
|
||||
<span class="badge" style="background-color: #4CAF50;">REP</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="mapFilterROOM" value="3" checked>
|
||||
<label class="form-check-label small" for="mapFilterROOM">
|
||||
<span class="badge" style="background-color: #9C27B0;">ROOM</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="mapFilterSENS" value="4" checked>
|
||||
<label class="form-check-label small" for="mapFilterSENS">
|
||||
<span class="badge" style="background-color: #FF9800;">SENS</span>
|
||||
</label>
|
||||
</div>
|
||||
<span class="map-filter-badge active" data-type="1" id="mapFilterCLI">CLI</span>
|
||||
<span class="map-filter-badge active" data-type="2" id="mapFilterREP">REP</span>
|
||||
<span class="map-filter-badge active" data-type="3" id="mapFilterROOM">ROOM</span>
|
||||
<span class="map-filter-badge active" data-type="4" id="mapFilterSENS">SENS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leafletMap" style="height: 400px; width: 100%;"></div>
|
||||
|
||||
Reference in New Issue
Block a user