Show icons next to the model folder and files in the dropdown, styling tweaks to increase padding

This commit is contained in:
cmdr2 2023-02-23 22:11:53 +05:30
parent c49ac6880d
commit 45a2c9f7ef
4 changed files with 19 additions and 9 deletions

View File

@ -291,7 +291,7 @@
<div class="dropdown display-settings">
<button class="dropbtn primaryButton">
<i class="fa-solid fa-bars"></i>
Preview options
Preview settings
<i class="fa-solid fa-angle-down"></i>
</button>
<div class="dropdown-content">

View File

@ -623,7 +623,6 @@ div.img-preview img {
}
#editor-settings-entries ul {
margin: 0px;
padding: 0px;
}

View File

@ -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;

View File

@ -517,7 +517,7 @@ class ModelDropdown
* @param {Array<string>} 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]