jason/ThunderAI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

the element to show and search for a prompt is correctly showed and hidden. see #130

Browse source
This commit is contained in:
mic 2024-09-14 15:53:20 +02:00
parent c97ab5fb14
commit 65b6af80ef
3 changed files with 38 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_locales/en/messages.json
View file

@ -542,5 +542,9 @@
"StorageSpace": { "StorageSpace": {
"message": "Total storage space occupied", "message": "Total storage space occupied",
"description": "" "description": ""
},
"SearchPrompt": {
"message": "Search a prompt",
"description": ""
} }
} }

18
css/mzta-compose-styles.css
View file

@ -13,15 +13,27 @@
align-items: center; align-items: center;
} }
.mzta_autocomplete-items { #mzta_search_icon{
position: absolute;
left: 0.7em;
}
#mzta_search_input{
width: 12em;
}
#mzta_autocomplete-items {
position: absolute; position: absolute;
top: 2em;
left: 2em;
border: 1px solid #ccc; border: 1px solid #ccc;
border-top: none; border-top: none;
z-index: 1001; z-index: 1001;
background-color: #fff; background-color: #fff;
max-height: 150px; max-height: 150px;
overflow-y: auto; overflow-y: auto;
width: 300px; width: 12em;
max-height: 30em;
} }
.mzta_autocomplete-item { .mzta_autocomplete-item {
@ -46,7 +58,7 @@
color:#ffffff; color:#ffffff;
} }
.mzta_autocomplete-items { #mzta_autocomplete-items {
border: 1px solid #555; border: 1px solid #555;
background-color: #2c2c2c; background-color: #2c2c2c;
} }

26
js/mzta-compose-script.js
View file

@ -112,14 +112,22 @@ function searchPrompt(){
const banner = document.createElement('div'); const banner = document.createElement('div');
banner.id = 'mzta_search_banner'; banner.id = 'mzta_search_banner';
const img = document.createElement('img');
img.src = browser.runtime.getURL('images/icon-16px.png');
img.id="mzta_search_icon";
img.title = "ThunderAI";
img.width = 16;
img.height = 16;
banner.appendChild(img);
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'text'; input.type = 'text';
input.id = 'mzta_search_input'; input.id = 'mzta_search_input';
input.placeholder = 'Search a prompt...'; input.placeholder = browser.i18n.getMessage('SearchPrompt');
banner.appendChild(input); banner.appendChild(input);
const autocompleteList = document.createElement('div'); const autocompleteList = document.createElement('div');
autocompleteList.classList.add('mzta_autocomplete-items'); autocompleteList.id = 'mzta_autocomplete-items';
autocompleteList.style.display = 'none'; autocompleteList.style.display = 'none';
banner.appendChild(autocompleteList); banner.appendChild(autocompleteList);
@ -128,10 +136,11 @@ function searchPrompt(){
const query = this.value.trim().toLowerCase(); const query = this.value.trim().toLowerCase();
autocompleteList.innerHTML = ''; // Clear previous suggestions autocompleteList.innerHTML = ''; // Clear previous suggestions
if (query === '') { // commented out to show all the prompts when the input is empty
autocompleteList.style.display = 'none'; // if (query === '') {
return; // autocompleteList.style.display = 'none';
} // return;
// }
// Filter data based on the query // Filter data based on the query
const filteredData = autocompleteData.filter(item => item.toLowerCase().startsWith(query)); const filteredData = autocompleteData.filter(item => item.toLowerCase().startsWith(query));
@ -169,5 +178,8 @@ function searchPrompt(){
}); });
document.body.insertBefore(banner, document.body.firstChild); document.body.insertBefore(banner, document.body.firstChild);
input.focus(); setTimeout(() => {
input.focus();
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
}, 100);
} }