extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-06-20 09:57:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

Bring back the old style panels for image settings and modifiers

Browse Source
This commit is contained in:
cmdr2 2022-11-09 13:43:43 +05:30
parent 166eb996a9
commit 1bebaf933d
4 changed files with 29 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/index.html
View File

@ -6,8 +6,8 @@
<link rel="icon" type="image/png" href="/media/images/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/media/images/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
<link rel="stylesheet" href="/media/css/fonts.css?v=1"> <link rel="stylesheet" href="/media/css/fonts.css?v=1">
<link rel="stylesheet" href="/media/css/themes.css?v=1"> <link rel="stylesheet" href="/media/css/themes.css?v=2">
<link rel="stylesheet" href="/media/css/main.css?v=7"> <link rel="stylesheet" href="/media/css/main.css?v=8">
<link rel="stylesheet" href="/media/css/auto-save.css?v=5"> <link rel="stylesheet" href="/media/css/auto-save.css?v=5">
<link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=4"> <link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=4">
<link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1"> <link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1">
@ -89,7 +89,7 @@
<span class="line-separator"></span> <span class="line-separator"></span>
<div id="editor-settings" class="settings-box"> <div id="editor-settings" class="settings-box panel-box">
<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">
@ -201,11 +201,9 @@
</div> </div>
</div> </div>
<span class="line-separator"></span> <div id="editor-modifiers" class="panel-box">
<div id="editor-modifiers">
<h4 class="collapsible"> <h4 class="collapsible">
Image Modifiers Image Modifiers (art styles, tags etc)
<i id="modifier-settings-btn" class="fa-solid fa-gear section-button"> <i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
<span class="simple-tooltip left"> <span class="simple-tooltip left">
Add Custom Modifiers Add Custom Modifiers
@ -299,7 +297,7 @@
<script src="media/js/auto-save.js?v=6"></script> <script src="media/js/auto-save.js?v=6"></script>
<script src="media/js/main.js?v=9"></script> <script src="media/js/main.js?v=9"></script>
<script src="media/js/themes.js?v=4"></script> <script src="media/js/themes.js?v=4"></script>
<script src="media/js/dnd.js?v=6"></script> <script src="media/js/dnd.js?v=7"></script>
<script> <script>
async function init() { async function init() {
await initSettings() await initSettings()

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

@ -10,7 +10,7 @@ html {
body { body {
margin: 0; margin: 0;
font-size: 11pt; font-size: 11pt;
background-color: var(--background-color2); background-color: var(--background-color1);
color: var(--text-color); color: var(--text-color);
} }
a { a {
@ -27,6 +27,7 @@ label {
height: 65pt; height: 65pt;
font-size: 13px; font-size: 13px;
margin-bottom: 6px; margin-bottom: 6px;
margin-top: 5px;
} }
.image_preview_container { .image_preview_container {
margin-top: 10pt; margin-top: 10pt;
@ -73,7 +74,7 @@ label {
font-size: 8pt; font-size: 8pt;
} }
#footer-spacer { #footer-spacer {
flex: 1 flex: 0.7
} }
.imgSeedLabel { .imgSeedLabel {
font-size: 0.8em; font-size: 0.8em;
@ -117,7 +118,7 @@ label {
font-size: 11pt; font-size: 11pt;
} }
#editor { #editor {
background: var(--background-color2); background: var(--background-color1);
padding: 16px; padding: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -220,7 +221,7 @@ img {
} }
.line-separator { .line-separator {
background: var(--background-color3); background: var(--background-color3);
height: 8px; height: 1pt;
margin: 16px 0px; margin: 16px 0px;
} }
#editor-inputs-tags-container { #editor-inputs-tags-container {
@ -360,7 +361,7 @@ img {
} }
.imageTaskContainer { .imageTaskContainer {
border: 1px solid var(--background-color2); border: 1px solid var(--background-color1);
margin-bottom: 10pt; margin-bottom: 10pt;
padding: 5pt; padding: 5pt;
border-radius: 5pt; border-radius: 5pt;
@ -617,7 +618,7 @@ input::file-selector-button {
@media (min-width: 700px) { @media (min-width: 700px) {
#editor { #editor {
max-width: 500px; max-width: 480px;
} }
} }
@ -633,20 +634,9 @@ input::file-selector-button {
position: relative; position: relative;
transform: translateY(-13%); transform: translateY(-13%);
} }
#copy-image-settings {
position: relative;
cursor: pointer;
padding: 8px;
opacity: 1;
transition: opacity 0.2;
}
.collapsible:not(.active) #copy-image-settings { .collapsible:not(.active) #copy-image-settings {
display: none; display: none;
} }
#copy-image-settings.hidden {
opacity: 0;
pointer-events: none;
}
.section-button { .section-button {
cursor: pointer; cursor: pointer;
@ -772,7 +762,7 @@ input::file-selector-button {
} }
.popup { .popup {
position: fixed; position: absolute;
background: rgba(32, 33, 36, 50%); background: rgba(32, 33, 36, 50%);
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -822,7 +812,7 @@ input::file-selector-button {
border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px;
margin-left: 8px; margin-left: 8px;
cursor: pointer; cursor: pointer;
background: var(--background-color2); background: var(--background-color1);
opacity: 50%; opacity: 50%;
transition: opacity 0.25s; transition: opacity 0.25s;
} }
@ -840,7 +830,7 @@ input::file-selector-button {
} }
#tab-content-wrapper { #tab-content-wrapper {
border-top: 8px solid var(--background-color2); border-top: 8px solid var(--background-color1);
} }
.tab-content-inner { .tab-content-inner {
@ -850,4 +840,11 @@ input::file-selector-button {
padding: 20px 10px; padding: 20px 10px;
} }
.panel-box {
background: var(--background-color2);
border: 1px solid var(--background-color3);
border-radius: 7px;
padding: 7px;
margin-bottom: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
}

6
ui/media/css/themes.css
View File

@ -28,7 +28,7 @@
.theme-light { .theme-light {
--background-color1: white; --background-color1: white;
--background-color2: #dddddd; --background-color2: #ececec;
--background-color3: #e7e9eb; --background-color3: #e7e9eb;
--background-color4: #cccccc; --background-color4: #cccccc;
@ -61,7 +61,7 @@
.theme-cool-blue { .theme-cool-blue {
--main-hue: 222; --main-hue: 222;
--main-saturation: 18%; --main-saturation: 18%;
--value-base: 19%; --value-base: 18%;
--value-step: 3%; --value-step: 3%;
--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base)); --background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step)))); --background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
@ -110,7 +110,7 @@
--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base)); --background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step)))); --background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1 * var(--value-step))));
--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step)))); --background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (2 * var(--value-step))));
--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (3 * var(--value-step)))); --background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) + (1.4 * var(--value-step))));
--make-image-border: none; --make-image-border: none;

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

@ -393,8 +393,8 @@ function checkWriteToClipboardPermission (result) {
if (result.state == "granted" || result.state == "prompt") { if (result.state == "granted" || result.state == "prompt") {
const resetSettings = document.getElementById('reset-image-settings') const resetSettings = document.getElementById('reset-image-settings')
const copyIcon = document.createElement('i') const copyIcon = document.createElement('i')
copyIcon.id = 'copy-image-settings' // copyIcon.id = 'copy-image-settings'
copyIcon.className = 'fa-solid fa-clipboard' 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 right">Copy Image Settings</span>`
copyIcon.addEventListener('click', (event) => { copyIcon.addEventListener('click', (event) => {
event.stopPropagation() event.stopPropagation()