honestly not sure if hacky

refresh button on right-hand side of model selector is definitely better
GUARANTEE css is distressingly hacky
This commit is contained in:
tim h 2023-01-15 10:31:27 -06:00
parent f5210b29b6
commit bea3c0fbe4
7 changed files with 48 additions and 9 deletions

View file

@ -650,3 +650,8 @@ select > .style-select-option:active {
.thirdwidth { .thirdwidth {
max-width: 33%; max-width: 33%;
} }
.refreshbutton {
max-width: 50%;
max-height: 50%;
}

View file

@ -212,6 +212,10 @@ div.autocomplete > .autocomplete-text {
width: 100%; width: 100%;
} }
div.autocomplete > .refreshable {
width: 82% !important;
}
div.autocomplete > .autocomplete-list { div.autocomplete > .autocomplete-list {
position: absolute; position: absolute;

View file

@ -7,10 +7,10 @@
<link href="css/colors.css?v=3f81e80" rel="stylesheet" /> <link href="css/colors.css?v=3f81e80" rel="stylesheet" />
<link href="css/icons.css?v=9ae0466" rel="stylesheet" /> <link href="css/icons.css?v=9ae0466" rel="stylesheet" />
<link href="css/index.css?v=5b8d4d6" rel="stylesheet" /> <link href="css/index.css?v=7db2c83" rel="stylesheet" />
<link href="css/layers.css?v=92c0352" rel="stylesheet" /> <link href="css/layers.css?v=92c0352" rel="stylesheet" />
<link href="css/ui/generic.css?v=802bd41" rel="stylesheet" /> <link href="css/ui/generic.css?v=93a0450" rel="stylesheet" />
<link href="css/ui/history.css?v=0b03861" rel="stylesheet" /> <link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
<link href="css/ui/layers.css?v=ae472cd" rel="stylesheet" /> <link href="css/ui/layers.css?v=ae472cd" rel="stylesheet" />
@ -83,9 +83,15 @@
Stable Diffusion settings Stable Diffusion settings
</button> </button>
<div class="content"> <div class="content">
<button id="refreshModelsBtn" onclick="getModels(true)">🔄</button>
<label>Model:</label> <label>Model:</label>
<div id="models-ac-select"></div> <div id="models-ac-select"></div>
<button id="refreshModelsBtn" onclick="getModels(true)">
<img
class="refreshbutton"
src="./res/icons/refresh-cw.svg"
alt="refresh models"
title="refresh models" />
</button>
<label>Sampler:</label> <label>Sampler:</label>
<div id="sampler-ac-select"></div> <div id="sampler-ac-select"></div>
<label for="seed">Seed (-1 for random):</label> <label for="seed">Seed (-1 for random):</label>
@ -349,7 +355,7 @@
<script src="js/lib/commands.js?v=bf23c83" type="text/javascript"></script> <script src="js/lib/commands.js?v=bf23c83" type="text/javascript"></script>
<script src="js/lib/toolbar.js?v=306d637" type="text/javascript"></script> <script src="js/lib/toolbar.js?v=306d637" type="text/javascript"></script>
<script src="js/lib/ui.js?v=8172f3d" type="text/javascript"></script> <script src="js/lib/ui.js?v=fe9b702" type="text/javascript"></script>
<script <script
src="js/initalize/layers.populate.js?v=39785ac" src="js/initalize/layers.populate.js?v=39785ac"
@ -360,7 +366,7 @@
<!-- Content --> <!-- Content -->
<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script> <script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
<script src="js/index.js?v=77f3c91" type="text/javascript"></script> <script src="js/index.js?v=dc296e8" type="text/javascript"></script>
<script <script
src="js/ui/floating/history.js?v=fc92d14" src="js/ui/floating/history.js?v=fc92d14"

View file

@ -591,7 +591,10 @@ const makeSlider = (
let modelAutoComplete = createAutoComplete( let modelAutoComplete = createAutoComplete(
"Model", "Model",
document.getElementById("models-ac-select") document.getElementById("models-ac-select"),
{},
document.getElementById("refreshModelsBtn"),
"refreshable"
); );
modelAutoComplete.onchange.on(({value}) => { modelAutoComplete.onchange.on(({value}) => {
if (value.toLowerCase().includes("inpainting")) if (value.toLowerCase().includes("inpainting"))

View file

@ -207,9 +207,17 @@ function createSlider(name, wrapper, options = {}) {
* @param {object} options Extra options * @param {object} options Extra options
* @param {boolean} options.multiple Whether multiple options can be selected * @param {boolean} options.multiple Whether multiple options can be selected
* @param {{name: string, value: string, optionelcb: (el: HTMLOptionElement) => void}[]} options.options Options to add to the selector * @param {{name: string, value: string, optionelcb: (el: HTMLOptionElement) => void}[]} options.options Options to add to the selector
* @param {object} extraEl Additional element to include in wrapper div (e.g. model refresh button)
* @param {string} extraClass Additional class to attach to the autocomplete input element
* @returns {AutoCompleteElement} * @returns {AutoCompleteElement}
*/ */
function createAutoComplete(name, wrapper, options = {}) { function createAutoComplete(
name,
wrapper,
options = {},
extraEl = null,
extraClass = null
) {
defaultOpt(options, { defaultOpt(options, {
multiple: false, multiple: false,
options: [], options: [],
@ -220,6 +228,9 @@ function createAutoComplete(name, wrapper, options = {}) {
const inputEl = document.createElement("input"); const inputEl = document.createElement("input");
inputEl.type = "text"; inputEl.type = "text";
inputEl.classList.add("autocomplete-text"); inputEl.classList.add("autocomplete-text");
if (extraClass != null) {
inputEl.classList.add(extraClass);
}
const autocompleteEl = document.createElement("div"); const autocompleteEl = document.createElement("div");
autocompleteEl.classList.add("autocomplete-list", "display-none"); autocompleteEl.classList.add("autocomplete-list", "display-none");
@ -230,6 +241,9 @@ function createAutoComplete(name, wrapper, options = {}) {
wrapper.appendChild(inputEl); wrapper.appendChild(inputEl);
wrapper.appendChild(autocompleteEl); wrapper.appendChild(autocompleteEl);
if (extraEl != null) {
wrapper.appendChild(extraEl);
}
const acobj = { const acobj = {
name, name,

View file

@ -7,10 +7,10 @@
<link href="../css/colors.css?v=3f81e80" rel="stylesheet" /> <link href="../css/colors.css?v=3f81e80" rel="stylesheet" />
<link href="../css/icons.css?v=9ae0466" rel="stylesheet" /> <link href="../css/icons.css?v=9ae0466" rel="stylesheet" />
<link href="../css/index.css?v=5b8d4d6" rel="stylesheet" /> <link href="../css/index.css?v=7db2c83" rel="stylesheet" />
<link href="../css/layers.css?v=92c0352" rel="stylesheet" /> <link href="../css/layers.css?v=92c0352" rel="stylesheet" />
<link href="../css/ui/generic.css?v=802bd41" rel="stylesheet" /> <link href="../css/ui/generic.css?v=93a0450" rel="stylesheet" />
<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" /> <link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
<link href="../css/ui/layers.css?v=ae472cd" rel="stylesheet" /> <link href="../css/ui/layers.css?v=ae472cd" rel="stylesheet" />

7
res/icons/refresh-cw.svg Normal file
View file

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 2v6h-6"></path>
<path d="M3 12a9 9 0 0 1 15-6.7L21 8"></path>
<path d="M3 22v-6h6"></path>
<path d="M21 12a9 9 0 0 1-15 6.7L3 16"></path>
</svg>

After

Width:  |  Height:  |  Size: 348 B