diff --git a/extensions-builtin/sd_theme_editor/themes/ogxBGreen.css b/extensions-builtin/sd_theme_editor/themes/ogxBGreen.css new file mode 100644 index 00000000..09c5aa82 --- /dev/null +++ b/extensions-builtin/sd_theme_editor/themes/ogxBGreen.css @@ -0,0 +1 @@ +--main-bg-color:hsl(195deg 22% 8%);--primary-color:hsl(159deg 96% 55%);--input-bg-color:hsl(202deg 25% 12%);--input-border-color:hsl(200deg 24% 32%);--panel-bg-color:hsl(200deg 24% 20%);--panel-border-color:hsl(200deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(195deg 22% 8%);--subgroup-input-bg-color:hsl(200deg 24% 8%);--subgroup-input-border-color:hsl(200deg 24% 32%);--subpanel-bg-color:hsl(202deg 25% 12%);--subpanel-border-color:hsl(200deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(152deg 3% 36%);--input-focus-color:hsl(159deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(200deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(201deg 24% 77%);--icon-hover-color:hsl(195deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(194deg 24% 4%);--nav-color:hsl(201deg 24% 77%);--nav-hover-color:hsl(194deg 24% 4%);--input-color:hsl(159deg 96% 55%);--label-color:hsl(201deg 24% 77%);--subgroup-input-color:hsl(302deg 100% 100%);--placeholder-color:hsl(200deg 24% 32%);--text-color:hsl(201deg 24% 77%); \ No newline at end of file diff --git a/javascript/ui.js b/javascript/ui.js index ce9c7c48..c7c2d8f4 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -320,18 +320,13 @@ onUiUpdate(function(){ let leftSide = resizer.previousElementSibling; let rightSide = resizer.nextElementSibling; - let dir = 1.0; - - if(flexDir == "row-reverse"){ - dir = -1.0; - } + + let dir = flexDir == "row-reverse" ? -1.0 : 1.0; let x = e.clientX; let y = e.clientY; let leftWidth = leftSide.getBoundingClientRect().width; - - function mouseMoveHandler(e) { resizer.style.cursor = 'col-resize'; container.style.cursor = 'col-resize'; @@ -378,14 +373,24 @@ onUiUpdate(function(){ container.style.flexDirection = 'row-reverse'; }else{ container.style.flexDirection = 'row'; - } - + } }) - - }) + + function disableScroll() { + 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() {}; + } + // mobile nav menu const tabs_menu = gradioApp().querySelector('#tabs > div:first-child'); const nav_menu = gradioApp().querySelector('#nav_menu'); @@ -401,24 +406,51 @@ onUiUpdate(function(){ 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(); } + } + + nav_menu.addEventListener('click', toggleNavMenu); + + // quicksettings nav menu + 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; + 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); + + } } - - nav_menu.addEventListener('click', toggleNavMenu); + quick_menu.addEventListener('click', toggleQuickMenu); - //const doc = document.getElementsByTagName('gradio-app')[0].shadowRoot; - - }) diff --git a/modules/ui.py b/modules/ui.py index 3184d027..59811016 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -1652,12 +1652,20 @@ def create_ui(): extensions_interface = ui_extensions.create_ui() interfaces += [(extensions_interface, "Extensions", "extensions")] - with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo: - with gr.Row(elem_id="quicksettings", variant="compact"): - for i, k, item in sorted(quicksettings_list, key=lambda x: quicksettings_names.get(x[1], x[0])): - component = create_setting_component(k, is_quicksettings=True) - component_dict[k] = component + with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo: + with gr.Row(elem_id="quicksettings"): + with gr.Row(elem_id="quick_row_sd_model_checkpoint") as qsettings_row: + component = create_setting_component("sd_model_checkpoint", is_quicksettings=True) + component_dict["sd_model_checkpoint"] = component + + with gr.Column(elem_id="quicksettings_overflow"): + for i, k, item in sorted(quicksettings_list, key=lambda x: quicksettings_names.get(x[1], x[0])): + if( k != "sd_model_checkpoint"): + with gr.Row(elem_id=f"quick_row_{k}") as qsettings_row: + component = create_setting_component(k, is_quicksettings=True) + component_dict[k] = component + gr.Row(elem_id="quick_menu") parameters_copypaste.connect_paste_params_buttons() with gr.Tabs(elem_id="tabs") as tabs: diff --git a/style.css b/style.css index 19edcdf2..4e895403 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,11 @@ Version: 1.0 License: GNU General Public License */ +body { + background-color: var(--main-bg-color) !important; +} + + /* label color */ .dark .dark\:text-gray-200 { color: var(--label-color); @@ -412,6 +417,7 @@ License: GNU General Public License transition: all 0.25s ease 0s; box-shadow: rgba(0,0,0,0)-30px 0 30px 30px; overflow-y: auto; + overflow-x: hidden; } @@ -438,8 +444,6 @@ License: GNU General Public License } - - #tabs > div:first-child > button:hover{ background-color: var(--primary-color) !important; @@ -490,6 +494,116 @@ License: GNU General Public License background-color: var(--main-bg-color); } +/* offcanvas quicksettings menu */ + +#quicksettings_overflow { + position: fixed; + z-index: 9999; + display: block; + width: 90%; + background-color: var(--main-bg-color) !important; + top: 70px; + bottom: 0px; + padding: 16px; + padding-top: 0px; + right: 0; + max-width: 480px; + transform: translateX(100%); + transition: all 0.25s ease 0s; + box-shadow: rgba(0,0,0,0) -30px 0 30px -30px; + overflow-y: auto; + +} + +#quicksettings_overflow.open { + transform: translateX(0); + box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px; +} + +#quicksettings_overflow > div { + margin-bottom: var(--outside-gap-size); +} +#quicksettings_overflow > div button{ + height:auto; +} + +#quicksettings { + align-items: center; + flex-direction: row; + width: auto; + align-self: end; + background: 0; + padding: 0; +} + +#quick_row_sd_model_checkpoint { + margin-right:50px; + margin-left:50px; + position:relative; + z-index:9999; + +} + +#quick_row_sd_model_checkpoint div { + border: 0; + background: 0; + padding: 0; +} + +#quick_row_sd_model_checkpoint span { +display:none; +} + +#quick_row_sd_model_checkpoint .gr-input { +padding-right: 37px; +min-height: 34px; +} + +#quick_menu { + z-index: 9999; + background-color: var(--input-bg-color); + position: absolute; + width: 38px; + height: 38px; + top: -2px; + right: 0; + border-radius: 100%; + cursor: pointer; +} + +#quick_menu.fixed { + position: fixed; + top:22px; + right:16px; +} + +#quick_menu::before { + content: ' '; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--icon-color); + width: var(--icon-size); + height: var(--icon-size); + -webkit-mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%; + cursor: pointer; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(1.0); + +} + +#quick_menu:hover { + background-color: var(--primary-color); +} +#quick_menu:hover::before { + background-color: var(--main-bg-color); +} + + + /* footer to bottom of page */ .min-h-screen > .mx-auto.container{ display:flex; @@ -497,6 +611,7 @@ License: GNU General Public License min-height: 100vh; margin:0; min-width: 300px; + overflow: hidden; } .min-h-screen > .mx-auto.container > div{ @@ -1072,44 +1187,7 @@ textarea:focus -#quicksettings { - align-items: center; - flex-direction: row; - width: auto; - align-self: end; - background: 0; - padding: 0; -} -/* align left */ -#quicksettings { - align-items: center; - flex-direction: row; - width: auto; - /*align-self: flex-start;*/ - background: 0; - padding: 0; - margin-left: 50px; -} - -#quicksettings div { - border: 0; - background: 0; - padding: 0; -} - -#quicksettings span { -display:none; -} - -#quicksettings .gr-input { -padding-right: 37px; -/* -width: auto; -max-width: 245px; -*/ -min-height: 34px; -} /***************************/ /* Generate Interrupt Skip */