holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix for the tooltips being cutoff (#636)

Browse Source
This commit is contained in:
patriceac 2022-12-10 23:29:23 -08:00 committed by GitHub
parent 5b7cd11de8
commit af5c68051a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/index.html
View File

@ -55,7 +55,7 @@
<input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden --> <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
<label for="negative_prompt" class="collapsible" id="negative_prompt_handle"> <label for="negative_prompt" class="collapsible" id="negative_prompt_handle">
Negative Prompt Negative Prompt
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about Negative Prompts</span></i></a> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Writing-prompts#negative-prompts" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about Negative Prompts</span></i></a>
<small>(optional)</small> <small>(optional)</small>
</label> </label>
<div class="collapsible-content"> <div class="collapsible-content">
@ -95,7 +95,7 @@
</div> </div>
<div id="editor-inputs-tags-container" class="row"> <div id="editor-inputs-tags-container" class="row">
<label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">click an Image Modifier to remove it, use Ctrl+Mouse Wheel to adjust its weight</span></i>:</label> <label>Image Modifiers <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">click an Image Modifier to remove it, use Ctrl+Mouse Wheel to adjust its weight</span></i>:</label>
<div id="editor-inputs-tags-list"></div> <div id="editor-inputs-tags-list"></div>
</div> </div>
@ -109,7 +109,7 @@
<h4 class="collapsible"> <h4 class="collapsible">
Image Settings Image Settings
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button"> <i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
<span class="simple-tooltip right"> <span class="simple-tooltip top-left">
Reset Image Settings Reset Image Settings
</span> </span>
</i> </i>
@ -123,13 +123,13 @@
<select id="stable_diffusion_model" name="stable_diffusion_model"> <select id="stable_diffusion_model" name="stable_diffusion_model">
<!-- <option value="sd-v1-4" selected>sd-v1-4</option> --> <!-- <option value="sd-v1-4" selected>sd-v1-4</option> -->
</select> </select>
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about custom models</span></i></a> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Custom-Models" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about custom models</span></i></a>
</td></tr> </td></tr>
<tr class="pl-5"><td><label for="vae_model">Custom VAE:</i></label></td><td> <tr class="pl-5"><td><label for="vae_model">Custom VAE:</i></label></td><td>
<select id="vae_model" name="vae_model"> <select id="vae_model" name="vae_model">
<!-- <option value="" selected>None</option> --> <!-- <option value="" selected>None</option> -->
</select> </select>
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about VAEs</span></i></a> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/VAE-Variational-Auto-Encoder" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about VAEs</span></i></a>
</td></tr> </td></tr>
<tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</i></label></td><td> <tr class="pl-5"><td><label for="hypernetwork_model">Hypernetwork:</i></label></td><td>
<select id="hypernetwork_model" name="hypernetwork_model"> <select id="hypernetwork_model" name="hypernetwork_model">
@ -148,7 +148,7 @@
<option value="dpm2_a">dpm2_a</option> <option value="dpm2_a">dpm2_a</option>
<option value="lms">lms</option> <option value="lms">lms</option>
</select> </select>
<a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-to-Use#samplers" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">Click to learn more about samplers</span></i></a> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/How-to-Use#samplers" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about samplers</span></i></a>
</td></tr> </td></tr>
<tr class="pl-5"><td><label>Image Size: </label></td><td> <tr class="pl-5"><td><label>Image Size: </label></td><td>
<select id="width" name="width" value="512"> <select id="width" name="width" value="512">
@ -278,7 +278,7 @@
<tr><td><label>Compatible Graphics Cards (all):</label></td><td id="system-info-gpus-all" class="value"></td></tr> <tr><td><label>Compatible Graphics Cards (all):</label></td><td id="system-info-gpus-all" class="value"></td></tr>
<tr><td></td><td>&nbsp;</td></tr> <tr><td></td><td>&nbsp;</td></tr>
<tr><td><label>Used for rendering 🔥:</label></td><td id="system-info-rendering-devices" class="value"></td></tr> <tr><td><label>Used for rendering 🔥:</label></td><td id="system-info-rendering-devices" class="value"></td></tr>
<tr><td><label>Server Addresses <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">You can access Stable Diffusion UI from other devices using these addresses</span></i> :</label></td><td id="system-info-server-hosts" class="value"></td></tr> <tr><td><label>Server Addresses <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">You can access Stable Diffusion UI from other devices using these addresses</span></i> :</label></td><td id="system-info-server-hosts" class="value"></td></tr>
</table> </table>
</div> </div>
</div> </div>

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

@ -937,6 +937,15 @@ input::file-selector-button {
transform: translate(-50%, 100%); transform: translate(-50%, 100%);
} }
.simple-tooltip.top-left {
top: 0px;
left: 0px;
transform: translate(calc(-100% + 15%), calc(-100% + 15%));
}
:hover > .simple-tooltip.top-left {
transform: translate(-80%, -100%);
}
/* PROGRESS BAR */ /* PROGRESS BAR */
.progress-bar { .progress-bar {
background: var(--background-color3); background: var(--background-color3);

4
ui/media/js/dnd.js
View File

@ -465,7 +465,7 @@ function checkReadTextClipboardPermission (result) {
// PASTE ICON // PASTE ICON
const pasteIcon = document.createElement('i') const pasteIcon = document.createElement('i')
pasteIcon.className = 'fa-solid fa-paste section-button' pasteIcon.className = 'fa-solid fa-paste section-button'
pasteIcon.innerHTML = `<span class="simple-tooltip right">Paste Image Settings</span>` pasteIcon.innerHTML = `<span class="simple-tooltip top-left">Paste Image Settings</span>`
pasteIcon.addEventListener('click', async (event) => { pasteIcon.addEventListener('click', async (event) => {
event.stopPropagation() event.stopPropagation()
// Add css class 'active' // Add css class 'active'
@ -505,7 +505,7 @@ function checkWriteToClipboardPermission (result) {
// COPY ICON // COPY ICON
const copyIcon = document.createElement('i') const copyIcon = document.createElement('i')
copyIcon.className = 'fa-solid fa-clipboard section-button' copyIcon.className = 'fa-solid fa-clipboard section-button'
copyIcon.innerHTML = `<span class="simple-tooltip right">Copy Image Settings</span>` copyIcon.innerHTML = `<span class="simple-tooltip top-left">Copy Image Settings</span>`
copyIcon.addEventListener('click', (event) => { copyIcon.addEventListener('click', (event) => {
event.stopPropagation() event.stopPropagation()
// Add css class 'active' // Add css class 'active'