diegods/homelabdspbx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add clear button to searchable domain selector (#7984)

Browse Source 
* Add clear button to searchable domain selector

* Update css.php
This commit is contained in:
Alex
2026-05-22 14:37:55 -07:00
committed by GitHub
parent 1f680c90de
commit b6c8e893a8
2 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default/css.php
+18 -1
View File
@@ -4189,7 +4189,24 @@ else { //default: white
.domain-search-empty { .domain-search-empty {
padding: 8px 10px; padding: 8px 10px;
color: <?=$input_text_placeholder_color?>; color: <?=$input_text_placeholder_color?>;
}; }
.domain-search-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 14px;
color: #333;
opacity: 0.6;
padding: 0;
line-height: 1;
pointer-events: auto;
z-index: 2;
}
<?php <?php
themes/default/template.php
+23 -2
View File
@@ -19,7 +19,7 @@
<link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-tempusdominus.min.css.php'> <link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-tempusdominus.min.css.php'>
<link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-colorpicker.min.css.php'> <link rel='stylesheet' type='text/css' href='{$project_path}/resources/bootstrap/css/bootstrap-colorpicker.min.css.php'>
<link rel='stylesheet' type='text/css' href='{$project_path}/resources/fontawesome/css/all.min.css.php'> <link rel='stylesheet' type='text/css' href='{$project_path}/resources/fontawesome/css/all.min.css.php'>
<link rel='stylesheet' type='text/css' href='{$project_path}/themes/default/css.php?updated=202603110200'> <link rel='stylesheet' type='text/css' href='{$project_path}/themes/default/css.php?updated=202605220330'>
{*//link to custom css file *} {*//link to custom css file *}
{if !empty($settings.theme.custom_css)} {if !empty($settings.theme.custom_css)}
<link rel='stylesheet' type='text/css' href='{$settings.theme.custom_css}'> <link rel='stylesheet' type='text/css' href='{$settings.theme.custom_css}'>
@@ -795,7 +795,24 @@
var input = document.createElement('input'); var input = document.createElement('input');
input.type = 'text'; input.type = 'text';
input.className = 'formfld domain-search-input'; input.className = 'formfld domain-search-input';
input.placeholder = '{/literal}{$text.label_search_domains}{literal}...'; input.placeholder = '{/literal}{$text.label_search_domains}{literal}..';
var clear_button = document.createElement('button');
clear_button.type = 'button';
clear_button.className = 'domain-search-clear';
clear_button.innerHTML = '&times;';
clear_button.setAttribute('aria-label', 'Clear search');
picker.appendChild(clear_button);
clear_button.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
input.value = '';
active_index = -1;
clear_button.style.display = 'none';
render_results();
input.focus();
});
var results = document.createElement('div'); var results = document.createElement('div');
results.className = 'domain-search-results'; results.className = 'domain-search-results';
@@ -831,6 +848,7 @@
function sync_input_to_select() { function sync_input_to_select() {
input.value = get_selected_label(); input.value = get_selected_label();
clear_button.style.display = (input.value.trim() !== '') ? 'inline-flex' : 'none';
} }
// Results panel is on document.body; match .formfld / theme input typography // Results panel is on document.body; match .formfld / theme input typography
@@ -948,6 +966,9 @@
} }
results.appendChild(row); results.appendChild(row);
} }
// Toggle clear button visibility based on current input
clear_button.style.display = (input.value.trim() !== '') ? 'inline-flex' : 'none';
open_results(); open_results();
window.requestAnimationFrame(position_results_panel); window.requestAnimationFrame(position_results_panel);
} }