diff --git a/ui/index.html b/ui/index.html
index ba96c501..b0277517 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -291,7 +291,7 @@
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 38b31f1a..0ca28a59 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -623,7 +623,6 @@ div.img-preview img {
}
#editor-settings-entries ul {
- margin: 0px;
padding: 0px;
}
diff --git a/ui/media/css/searchable-models.css b/ui/media/css/searchable-models.css
index 8cd6c9e8..8d12d732 100644
--- a/ui/media/css/searchable-models.css
+++ b/ui/media/css/searchable-models.css
@@ -16,11 +16,16 @@
.model-list ul {
padding-right: 20px;
padding-inline-start: 0;
- padding-bottom: 0px;
+ margin-top: 6pt;
}
.model-list li {
- padding-bottom: 0px;
+ padding-top: 3px;
+ padding-bottom: 3px;
+}
+
+.model-list .icon {
+ padding-right: 3pt;
}
.model-result {
@@ -31,7 +36,7 @@
color: var(--text-color);
list-style: none;
padding: 3px 6px 3px 6px;
- font-size: 10pt;
+ font-size: 9pt;
font-style: italic;
display: none;
}
@@ -42,6 +47,7 @@
padding: 6px 6px 6px 6px;
font-size: 9pt;
font-weight: bold;
+ border-top: 1px solid var(--background-color1);
}
.model-list li.model-file {
@@ -49,7 +55,7 @@
list-style: none;
padding-left: 12px;
padding-right:20px;
- font-size: 9pt;
+ font-size: 10pt;
font-weight: normal;
transition: none;
transition:property: none;
diff --git a/ui/media/js/searchable-models.js b/ui/media/js/searchable-models.js
index 69a104f3..11ee85d7 100644
--- a/ui/media/js/searchable-models.js
+++ b/ui/media/js/searchable-models.js
@@ -517,7 +517,7 @@ class ModelDropdown
* @param {Array} classes
* @returns {HTMLElement}
*/
- createElement(tagName, attributes, classes, text) {
+ createElement(tagName, attributes, classes, text, icon) {
const element = document.createElement(tagName)
if (attributes) {
Object.entries(attributes).forEach(([key, value]) => {
@@ -527,6 +527,11 @@ class ModelDropdown
if (classes) {
classes.forEach(className => element.classList.add(className))
}
+ if (icon) {
+ let iconEl = document.createElement('i')
+ iconEl.className = icon + ' icon'
+ element.appendChild(iconEl)
+ }
if (text) {
element.appendChild(document.createTextNode(text))
}
@@ -565,7 +570,7 @@ class ModelDropdown
const fullPath = folderName ? `${folderName.substring(1)}/${model}` : model
modelsMap.set(
model,
- this.createElement('li', { 'data-path': fullPath }, classes, model),
+ this.createElement('li', { 'data-path': fullPath }, classes, model, 'fa-regular fa-file'),
)
}
})
@@ -579,7 +584,7 @@ class ModelDropdown
const modelElements = modelNames.map(name => modelsMap.get(name))
if (modelElements.length && folderName) {
- listElement.appendChild(this.createElement('li', undefined, ['model-folder'], folderName))
+ listElement.appendChild(this.createElement('li', undefined, ['model-folder'], folderName.substring(1), 'fa-solid fa-folder-open'))
}
const allModelElements = isRootFolder ? [...folderElements, ...modelElements] : [...modelElements, ...folderElements]