mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2024-11-23 00:33:28 +01:00
Show icons next to the model folder and files in the dropdown, styling tweaks to increase padding
This commit is contained in:
parent
c49ac6880d
commit
45a2c9f7ef
@ -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">
|
||||
|
@ -623,7 +623,6 @@ div.img-preview img {
|
||||
}
|
||||
|
||||
#editor-settings-entries ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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]
|
||||
|
Loading…
Reference in New Issue
Block a user