extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-23 08:43:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

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

1
ui/media/css/main.css
View File

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

14
ui/media/css/searchable-models.css
View File

@ -16,11 +16,16 @@
.model-list ul { .model-list ul {
padding-right: 20px; padding-right: 20px;
padding-inline-start: 0; padding-inline-start: 0;
padding-bottom: 0px; margin-top: 6pt;
} }
.model-list li { .model-list li {
padding-bottom: 0px; padding-top: 3px;
padding-bottom: 3px;
}
.model-list .icon {
padding-right: 3pt;
} }
.model-result { .model-result {
@ -31,7 +36,7 @@
color: var(--text-color); color: var(--text-color);
list-style: none; list-style: none;
padding: 3px 6px 3px 6px; padding: 3px 6px 3px 6px;
font-size: 10pt; font-size: 9pt;
font-style: italic; font-style: italic;
display: none; display: none;
} }
@ -42,6 +47,7 @@
padding: 6px 6px 6px 6px; padding: 6px 6px 6px 6px;
font-size: 9pt; font-size: 9pt;
font-weight: bold; font-weight: bold;
border-top: 1px solid var(--background-color1);
} }
.model-list li.model-file { .model-list li.model-file {
@ -49,7 +55,7 @@
list-style: none; list-style: none;
padding-left: 12px; padding-left: 12px;
padding-right:20px; padding-right:20px;
font-size: 9pt; font-size: 10pt;
font-weight: normal; font-weight: normal;
transition: none; transition: none;
transition:property: none; transition:property: none;

11
ui/media/js/searchable-models.js
View File

@ -517,7 +517,7 @@ class ModelDropdown
* @param {Array<string>} classes * @param {Array<string>} classes
* @returns {HTMLElement} * @returns {HTMLElement}
*/ */
createElement(tagName, attributes, classes, text) { createElement(tagName, attributes, classes, text, icon) {
const element = document.createElement(tagName) const element = document.createElement(tagName)
if (attributes) { if (attributes) {
Object.entries(attributes).forEach(([key, value]) => { Object.entries(attributes).forEach(([key, value]) => {
@ -527,6 +527,11 @@ class ModelDropdown
if (classes) { if (classes) {
classes.forEach(className => element.classList.add(className)) classes.forEach(className => element.classList.add(className))
} }
if (icon) {
let iconEl = document.createElement('i')
iconEl.className = icon + ' icon'
element.appendChild(iconEl)
}
if (text) { if (text) {
element.appendChild(document.createTextNode(text)) element.appendChild(document.createTextNode(text))
} }
@ -565,7 +570,7 @@ class ModelDropdown
const fullPath = folderName ? `${folderName.substring(1)}/${model}` : model const fullPath = folderName ? `${folderName.substring(1)}/${model}` : model
modelsMap.set( modelsMap.set(
model, 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)) const modelElements = modelNames.map(name => modelsMap.get(name))
if (modelElements.length && folderName) { 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] const allModelElements = isRootFolder ? [...folderElements, ...modelElements] : [...modelElements, ...folderElements]