extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-12-24 16:08:55 +01: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-32x32.png" sizes="32x32">
<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/main.css?v=7">
<link rel="stylesheet" href="/media/css/themes.css?v=2">
<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/modifier-thumbnails.css?v=4">
<link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1">
@ -89,7 +89,7 @@
<span class="line-separator"></span>
<div id="editor-settings" class="settings-box">
<div id="editor-settings" class="settings-box panel-box">
<h4 class="collapsible">
Image Settings
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
@ -201,11 +201,9 @@
</div>
</div>
<span class="line-separator"></span>
<div id="editor-modifiers">
<div id="editor-modifiers" class="panel-box">
<h4 class="collapsible">
Image Modifiers
Image Modifiers (art styles, tags etc)
<i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
<span class="simple-tooltip left">
Add Custom Modifiers
@ -299,7 +297,7 @@
<script src="media/js/auto-save.js?v=6"></script>
<script src="media/js/main.js?v=9"></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>
async function init() {
await initSettings()

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

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

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

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