Public/stable-diffusion-webui-ux
1
0
Fork 0
mirror of https://github.com/anapnoe/stable-diffusion-webui-ux.git synced 2026-09-19 17:25:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

clean nav menu code, fix prompt overflow , added contain scale-down hook in settings,

Browse Source
This commit is contained in:
anapnoe
2023-02-20 11:31:01 +02:00
parent 3d947f6ecd
commit c7095047f3
6 changed files with 42 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extensions-builtin/sd_theme_editor/javascript/ui_theme.js
+1
View File
@@ -205,6 +205,7 @@ function updateTheme(vars){
if(val.indexOf("hsl") != -1){
let hsl = toHSLArray(val);
let hex = hslToHex(hsl[0], hsl[1], hsl[2]);
elem.value = hex;
}else{
elem.value = val.split("px")[0];
}
extensions-builtin/sd_theme_editor/themes/default_cyan.css
+1
View File
@@ -0,0 +1 @@
--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(199deg 60% 60%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:0px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(199deg 60% 60%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(357deg 50% 57%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(210deg 4% 80%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);
extensions-builtin/sd_theme_editor/themes/default_orange.css
+1
View File
@@ -0,0 +1 @@
--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(16deg 77% 60%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:8px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(16deg 77% 60%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(193deg 54% 55%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(210deg 4% 80%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);
javascript/ui.js
+34 -46
View File
@@ -379,18 +379,33 @@ onUiUpdate(function(){
})
// menu
function disableScroll() {
scrollTop = 0;//window.pageYOffset || document.documentElement.scrollTop;
scrollLeft = 0;//window.pageXOffset || document.documentElement.scrollLeft,
window.onscroll = function() {
window.scrollTo(scrollLeft, scrollTop);
};
}
scrollTop = 0;//window.pageYOffset || document.documentElement.scrollTop;
scrollLeft = 0;//window.pageXOffset || document.documentElement.scrollLeft,
window.onscroll = function() {
window.scrollTo(scrollLeft, scrollTop);
};
}
function enableScroll() {
window.onscroll = function() {};
}
function toggleMenu(isopen, icon, panel, close, owner) {
if(isopen){
panel.classList.add("open");
icon.classList.add("fixed");
close.addEventListener('click', owner);
disableScroll();
}else{
panel.classList.remove("open");
icon.classList.remove("fixed");
close.removeEventListener('click', owner);
enableScroll();
}
}
// mobile nav menu
const tabs_menu = gradioApp().querySelector('#tabs > div:first-child');
const nav_menu = gradioApp().querySelector('#nav_menu');
@@ -398,59 +413,28 @@ onUiUpdate(function(){
let menu_open = false;
function toggleNavMenu(e) {
menu_open = !menu_open;
e.preventDefault();
e.stopPropagation();
if(menu_open){
tabs_menu.classList.add("open");
nav_menu.classList.add("fixed");
gcontainer.addEventListener('click', toggleNavMenu);
disableScroll();
}else{
tabs_menu.classList.remove("open");
nav_menu.classList.remove("fixed");
gcontainer.removeEventListener('click', toggleNavMenu);
enableScroll();
}
menu_open = !menu_open;
toggleMenu(menu_open, nav_menu, tabs_menu, gcontainer, toggleNavMenu);
}
nav_menu.addEventListener('click', toggleNavMenu);
// quicksettings nav menu
let quick_menu_open = false;
const quicksettings_overflow = gradioApp().querySelector('#quicksettings_overflow');
const quick_menu = gradioApp().querySelector('#quick_menu');
const qparent = gradioApp().querySelector('#tabs');
let quick_menu_open = false;
function toggleQuickMenu(e) {
quick_menu_open = !quick_menu_open;
function toggleQuickMenu(e) {
e.preventDefault();
e.stopPropagation();
if(quick_menu_open){
quicksettings_overflow.classList.add("open");
quick_menu.classList.add("fixed");
disableScroll();
qparent.addEventListener('click', toggleQuickMenu);
}else{
quicksettings_overflow.classList.remove("open");
quick_menu.classList.remove("fixed");
enableScroll();
qparent.removeEventListener('click', toggleQuickMenu);
}
}
quick_menu_open = !quick_menu_open;
toggleMenu(quick_menu_open, quick_menu, quicksettings_overflow, qparent, toggleQuickMenu);
}
quick_menu.addEventListener('click', toggleQuickMenu);
})
@@ -492,6 +476,10 @@ function update_token_counter(button_id) {
}
function restart_reload(){
//document.html.innerHTML +='<style id="cool">body{background-color:#550000!important;}</style> ';
document.body.style.backgroundColor = "#1a1a1a";
document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
setTimeout(function(){location.reload()},2000)
modules/shared.py
+2 -1
View File
@@ -472,7 +472,8 @@ options_templates.update(options_section(('ui', "Live previews"), {
"show_progress_every_n_steps": OptionInfo(10, "Show new live preview image every N sampling steps. Set to -1 to show after completion of batch.", gr.Slider, {"minimum": -1, "maximum": 32, "step": 1}),
"show_progress_type": OptionInfo("Approx NN", "Image creation progress preview mode", gr.Radio, {"choices": ["Full", "Approx NN", "Approx cheap"]}),
"live_preview_content": OptionInfo("Prompt", "Live preview subject", gr.Radio, {"choices": ["Combined", "Prompt", "Negative prompt"]}),
"live_preview_refresh_period": OptionInfo(1000, "Progressbar/preview update period, in milliseconds")
"live_preview_refresh_period": OptionInfo(1000, "Progressbar/preview update period, in milliseconds"),
"live_preview_image_fit": OptionInfo("Scale-down", "Live preview image fit method", gr.Radio, {"choices": ["Scale-down", "Contain"]})
}))
options_templates.update(options_section(('sampler-params', "Sampler parameters"), {
style.css
+3 -1
View File
@@ -1,4 +1,4 @@
:host{--main-bg-color:#1a1a1a;--primary-color:#03d0a8;--input-bg-color:#202124;--input-border-color:#494c50;--panel-bg-color:#292a2d;--panel-border-color:#494c50;--panel-border-radius:0px;--subgroup-bg-color:#1a1a1a;--subgroup-input-bg-color:#202124;--subgroup-input-border-color:#494c50;--subpanel-bg-color:#222325;--subpanel-border-color:#494c50;--subpanel-border-radius:8px;--textarea-focus-color:#5a5d60;--input-focus-color:#03d0a8;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:#ef4444;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:#caccce;--icon-hover-color:#1a1a1a;--icon-size:22px;--nav-bg-color:#202124;--icon-color:#caccce;--icon-hover-color:#1a1a1a;--icon-size:22px;--nav-bg-color:#0a0a0a;--nav-color:#caccce;--nav-hover-color:#0a0a0a;--input-color:#caccce;--label-color:#caccce;--subgroup-input-color:#000000;--subgroup-label-color:#000000;--placeholder-color:#494c50;--text-color:#caccce;}/*BREAKPOINT_CSS_CONTENT*/
:host{--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(16deg 77% 60%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:8px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(16deg 77% 60%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(193deg 54% 55%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(210deg 4% 80%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);}/*BREAKPOINT_CSS_CONTENT*/
/*
Theme Name: DarkUX
@@ -1137,6 +1137,7 @@ dark .gr-button-secondary:hover {
padding:0!important;
border-radius:0!important;
background-color:transparent!important;
overflow: visible !important;
}
@@ -1588,6 +1589,7 @@ canvas[key=mask] {
width: 100%;
height: 100%;
object-fit: scale-down;
/*object-fit: contain;*/
}