From ff18eb627f0582c5252ea4271272a822c55d8e3d Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Thu, 9 Mar 2023 01:44:24 +0200
Subject: [PATCH] offcanvas aside theme configurator
added moonlight and retrog theme styles
---
.../sd_theme_editor/scripts/ui_theme.py | 136 +++++++++---------
extensions-builtin/sd_theme_editor/style.css | 110 ++++++++++++++
.../sd_theme_editor/themes/default_orange.css | 2 +-
.../sd_theme_editor/themes/moonlight.css | 1 +
.../sd_theme_editor/themes/retrog.css | 1 +
html/svg/contrast-drop-2-line.svg | 1 +
javascript/ui.js | 72 ++++++++--
modules/ui.py | 4 +-
style.css | 31 ++--
9 files changed, 256 insertions(+), 102 deletions(-)
create mode 100644 extensions-builtin/sd_theme_editor/style.css
create mode 100644 extensions-builtin/sd_theme_editor/themes/moonlight.css
create mode 100644 extensions-builtin/sd_theme_editor/themes/retrog.css
create mode 100644 html/svg/contrast-drop-2-line.svg
diff --git a/extensions-builtin/sd_theme_editor/scripts/ui_theme.py b/extensions-builtin/sd_theme_editor/scripts/ui_theme.py
index 216bc055..b83c396e 100644
--- a/extensions-builtin/sd_theme_editor/scripts/ui_theme.py
+++ b/extensions-builtin/sd_theme_editor/scripts/ui_theme.py
@@ -19,8 +19,7 @@ def get_files(folder, file_filter=[], file_list=[], split=False):
def on_ui_tabs():
- with gr.Blocks(analytics_enabled=False) as ui_theme:
-
+ with gr.Blocks(analytics_enabled=False) as ui_theme:
with gr.Row():
with gr.Column():
with gr.Row():
@@ -33,79 +32,80 @@ def on_ui_tabs():
#delete_button = gr.Button(value="Delete", variant="primary")
#with gr.Accordion(label="Debug View", open=True):
- with gr.Row():
+ with gr.Row(elem_id="theme_hidden"):
vars_text = gr.Textbox(label="Vars", elem_id="theme_vars", show_label=True, lines=7, interactive=False, visible=False)
css_text = gr.Textbox(label="Css", elem_id="theme_css", show_label=True, lines=7, interactive=False, visible=False)
#result_text = gr.Text(elem_id="theme_result", interactive=False, visible=False)
- with gr.Accordion(label="Theme Color adjustments", open=True):
- with gr.Row():
- with gr.Column(scale=6, elem_id="ui_theme_hsv"):
- gr.Slider(elem_id="theme_hue", label='Hue', minimum=0, maximum=360, step=1)
- gr.Slider(elem_id="theme_sat", label='Saturation', minimum=-100, maximum=100, step=1, value=0, interactive=True)
- gr.Slider(elem_id="theme_brt", label='Lightness', minimum=-50, maximum=50, step=1, value=0, interactive=True)
-
- gr.Button(elem_id="theme_invert_btn", value="Invert", variant="primary")
-
-
- with gr.Row(elem_id="ui_theme_settings"):
- with gr.Column():
+ with gr.Column(elem_id="theme_overflow_container"):
+ with gr.Accordion(label="Theme Color adjustments", open=True):
+ with gr.Row():
+ with gr.Column(scale=6, elem_id="ui_theme_hsv"):
+ gr.Slider(elem_id="theme_hue", label='Hue', minimum=0, maximum=360, step=1)
+ gr.Slider(elem_id="theme_sat", label='Saturation', minimum=-100, maximum=100, step=1, value=0, interactive=True)
+ gr.Slider(elem_id="theme_brt", label='Lightness', minimum=-50, maximum=50, step=1, value=0, interactive=True)
+
+ gr.Button(elem_id="theme_invert_btn", value="Invert", variant="primary")
+
+
+ with gr.Row(elem_id="ui_theme_settings"):
with gr.Column():
- with gr.Accordion(label="Main colors", open=True):
- gr.ColorPicker(elem_id="--main-bg-color", interactive=True, label="Background color")
- gr.ColorPicker(elem_id="--primary-color", label="Primary color")
-
- with gr.Accordion(label="Focus", open=True):
- gr.ColorPicker(elem_id="--textarea-focus-color", label="Textarea color")
- gr.ColorPicker(elem_id="--input-focus-color", label="Input color")
-
- with gr.Accordion(label="Spacing", open=True):
- gr.Slider(elem_id="--outside-gap-size", label='Gap size', minimum=1, maximum=16, step=1, interactive=True)
- gr.Slider(elem_id="--inside-padding-size", label='Padding size', minimum=1, maximum=16, step=1, interactive=True)
-
- with gr.Accordion(label="Spacing (Modile)", open=True):
- gr.Slider(elem_id="--mobile-outside-gap-size", label='Mobile Gap size', minimum=1, maximum=16, step=1, interactive=True)
- gr.Slider(elem_id="--mobile-inside-padding-size", label='Mobile Padding size', minimum=1, maximum=16, step=1, interactive=True)
-
- with gr.Accordion(label="Panel colors", open=True):
- gr.ColorPicker(elem_id="--label-color", label="Label color")
- gr.ColorPicker(elem_id="--frame-bg-color", label="Frame Background color")
- gr.ColorPicker(elem_id="--panel-bg-color", label="Background color")
- gr.ColorPicker(elem_id="--panel-border-color", label="Border color")
- gr.Slider(elem_id="--panel-border-radius", label='Border radius', minimum=0, maximum=16, step=1)
-
- gr.ColorPicker(elem_id="--input-color", label="Input text color")
- gr.ColorPicker(elem_id="--input-bg-color", label="Input background color")
- gr.ColorPicker(elem_id="--input-border-color", label="Input border color")
- with gr.Column():
- with gr.Row(elem_id="theme_sub-group-collapse"):
-
- with gr.Accordion(label="Subgroup / Panel colors", open=True):
- gr.ColorPicker(elem_id="--subgroup-bg-color", label="Subgoup background color")
- #gr.ColorPicker(elem_id="--subgroup-label-color", label="Label color", value="#000000")
- gr.ColorPicker(elem_id="--subpanel-bg-color", label="Background color")
- gr.ColorPicker(elem_id="--subpanel-border-color", label="Border color")
- gr.Slider(elem_id="--subpanel-border-radius", label='Border radius', minimum=0, maximum=16, step=1)
-
- gr.ColorPicker(elem_id="--subgroup-input-color", label="Input text color")
- gr.ColorPicker(elem_id="--subgroup-input-bg-color", label="Input background color")
- gr.ColorPicker(elem_id="--subgroup-input-border-color", label="Input border color")
-
- with gr.Row():
with gr.Column():
- with gr.Accordion(label="Navigation menu colors", open=True):
- gr.ColorPicker(elem_id="--nav-bg-color", label="Background color")
- gr.ColorPicker(elem_id="--nav-color", label="Text color")
- gr.ColorPicker(elem_id="--nav-hover-color", label="Hover color")
+ with gr.Accordion(label="Main colors", open=True):
+ gr.ColorPicker(elem_id="--main-bg-color", interactive=True, label="Background color")
+ gr.ColorPicker(elem_id="--primary-color", label="Primary color")
+
+ with gr.Accordion(label="Focus", open=True):
+ gr.ColorPicker(elem_id="--textarea-focus-color", label="Textarea color")
+ gr.ColorPicker(elem_id="--input-focus-color", label="Input color")
+
+ with gr.Accordion(label="Spacing", open=True):
+ gr.Slider(elem_id="--outside-gap-size", label='Gap size', minimum=1, maximum=16, step=1, interactive=True)
+ gr.Slider(elem_id="--inside-padding-size", label='Padding size', minimum=1, maximum=16, step=1, interactive=True)
+
+ with gr.Accordion(label="Spacing (Modile)", open=True):
+ gr.Slider(elem_id="--mobile-outside-gap-size", label='Mobile Gap size', minimum=1, maximum=16, step=1, interactive=True)
+ gr.Slider(elem_id="--mobile-inside-padding-size", label='Mobile Padding size', minimum=1, maximum=16, step=1, interactive=True)
+
+ with gr.Accordion(label="Panel colors", open=True):
+ gr.ColorPicker(elem_id="--label-color", label="Label color")
+ gr.ColorPicker(elem_id="--frame-bg-color", label="Frame Background color")
+ gr.ColorPicker(elem_id="--panel-bg-color", label="Background color")
+ gr.ColorPicker(elem_id="--panel-border-color", label="Border color")
+ gr.Slider(elem_id="--panel-border-radius", label='Border radius', minimum=0, maximum=16, step=1)
- with gr.Accordion(label="Icon colors", open=True):
- gr.ColorPicker(elem_id="--icon-color", label="Text color")
- gr.ColorPicker(elem_id="--icon-hover-color", label="Hover color")
+ gr.ColorPicker(elem_id="--input-color", label="Input text color")
+ gr.ColorPicker(elem_id="--input-bg-color", label="Input background color")
+ gr.ColorPicker(elem_id="--input-border-color", label="Input border color")
+ with gr.Column():
+ with gr.Row(elem_id="theme_sub-group-collapse"):
+
+ with gr.Accordion(label="Subgroup / Panel colors", open=True):
+ gr.ColorPicker(elem_id="--subgroup-bg-color", label="Subgoup background color")
+ #gr.ColorPicker(elem_id="--subgroup-label-color", label="Label color", value="#000000")
+ gr.ColorPicker(elem_id="--subpanel-bg-color", label="Background color")
+ gr.ColorPicker(elem_id="--subpanel-border-color", label="Border color")
+ gr.Slider(elem_id="--subpanel-border-radius", label='Border radius', minimum=0, maximum=16, step=1)
- with gr.Accordion(label="Other colors", open=True):
- gr.ColorPicker(elem_id="--text-color", label="Text color")
- gr.ColorPicker(elem_id="--placeholder-color", label="Placeholder color")
- gr.ColorPicker(elem_id="--cancel-color", label="Cancel/Interrupt color")
-
+ gr.ColorPicker(elem_id="--subgroup-input-color", label="Input text color")
+ gr.ColorPicker(elem_id="--subgroup-input-bg-color", label="Input background color")
+ gr.ColorPicker(elem_id="--subgroup-input-border-color", label="Input border color")
+
+ with gr.Row():
+ with gr.Column():
+ with gr.Accordion(label="Navigation menu colors", open=True):
+ gr.ColorPicker(elem_id="--nav-bg-color", label="Background color")
+ gr.ColorPicker(elem_id="--nav-color", label="Text color")
+ gr.ColorPicker(elem_id="--nav-hover-color", label="Hover color")
+
+ with gr.Accordion(label="Icon colors", open=True):
+ gr.ColorPicker(elem_id="--icon-color", label="Text color")
+ gr.ColorPicker(elem_id="--icon-hover-color", label="Hover color")
+
+ with gr.Accordion(label="Other colors", open=True):
+ gr.ColorPicker(elem_id="--text-color", label="Text color")
+ gr.ColorPicker(elem_id="--placeholder-color", label="Placeholder color")
+ gr.ColorPicker(elem_id="--cancel-color", label="Cancel/Interrupt color")
+
def save_theme( vars_text, css_text, filename):
diff --git a/extensions-builtin/sd_theme_editor/style.css b/extensions-builtin/sd_theme_editor/style.css
new file mode 100644
index 00000000..5c0d44c5
--- /dev/null
+++ b/extensions-builtin/sd_theme_editor/style.css
@@ -0,0 +1,110 @@
+#theme_menu
+{
+ z-index: 9999;
+ background-color: var(--input-bg-color);
+ position: relative;
+ width: 38px;
+ height: 38px;
+ border-radius: 100%;
+ cursor: pointer;
+ min-width: unset;
+ max-width: 38px;
+ align-self: center;
+}
+
+#theme_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/contrast-drop-2-line.svg) no-repeat 50% 50%;
+ mask: url(./file=html/svg/contrast-drop-2-line.svg) no-repeat 50% 50%;
+ cursor: pointer;
+ position: relative;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%) scale(1.0);
+}
+
+#theme_menu.fixed,
+#theme_menu:hover
+{
+ background-color: var(--primary-color);
+}
+#theme_menu.fixed::before,
+#theme_menu:hover::before
+{
+ background-color: var(--main-bg-color);
+}
+
+#theme_overflow_container{
+ overflow-y: auto;
+ height: calc(100vh - var(--top-header-height) - ( var(--outside-gap-size) * 2 ) - ( var(--inside-padding-size) * 4 ) - 96px );
+}
+
+#tab_ui_theme.open
+{
+ transform: translateX(0);
+ box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px;
+}
+
+#tab_ui_theme.aside{
+ display: block !important;
+}
+
+#tab_ui_theme.aside
+{
+ position: fixed;
+ top: var(--top-header-height);
+ width: 90%;
+ right: 0;
+ height: calc(100% - var(--top-header-height));
+ max-width: 480px;
+ z-index: 9999;
+ transform: translateX(100%);
+ transition: all 0.25s ease 0s;
+ box-shadow: rgba(0,0,0,0) -30px 0 30px -30px;
+ padding: calc(1rem - var(--outside-gap-size));
+ background-color: var(--main-bg-color) !important;
+}
+#tab_ui_theme.aside.open
+{
+ transform: translateX(0);
+ box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px;
+}
+
+#theme_hidden,
+#setting_ui_header_tabs .theme,
+#setting_ui_hidden_tabs .theme{
+ display:none !important;
+}
+
+#tab_ui_theme [id*="color"] label{
+ display:flex;
+ align-items: center;
+}
+#tab_ui_theme [id*="color"] label span{
+ min-width: 50% !important;
+}
+#tab_ui_theme [id*="color"] label input{
+ flex-grow:1;
+}
+
+#settings_ui_theme > div > div
+{
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+#settings_ui_theme > div > div > div
+{
+ max-width:30%;
+}
+
+#tab_ui_theme > div{
+ padding:16px !important;
+}
+
diff --git a/extensions-builtin/sd_theme_editor/themes/default_orange.css b/extensions-builtin/sd_theme_editor/themes/default_orange.css
index 15fdb470..577c08ab 100644
--- a/extensions-builtin/sd_theme_editor/themes/default_orange.css
+++ b/extensions-builtin/sd_theme_editor/themes/default_orange.css
@@ -1 +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%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;
\ No newline at end of file
+--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%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;--frame-bg-color:hsl(225deg 6% 13%);
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/moonlight.css b/extensions-builtin/sd_theme_editor/themes/moonlight.css
new file mode 100644
index 00000000..5000cb0e
--- /dev/null
+++ b/extensions-builtin/sd_theme_editor/themes/moonlight.css
@@ -0,0 +1 @@
+--main-bg-color:hsl(240deg 16% 6%);--primary-color:hsl(222deg 75% 62%);--input-bg-color:hsl(240deg 17% 8%);--input-border-color:hsl(240deg 20% 16%);--panel-bg-color:hsl(240deg 18% 12%);--panel-border-color:hsl(240deg 16% 16%);--panel-border-radius:0px;--subgroup-bg-color:hsl(240deg 17% 8%);--subgroup-input-bg-color:hsl(240deg 17% 8%);--subgroup-input-border-color:hsl(240deg 20% 16%);--subpanel-bg-color:hsl(240deg 18% 10%);--subpanel-border-color:hsl(240deg 20% 16%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(222deg 75% 62%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(222deg 75% 62%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(222deg 75% 62%);--icon-hover-color:hsl(240deg 18% 12%);--icon-size:22px;--nav-bg-color:hsl(240deg 16% 6%);--nav-color:hsl(185deg 66% 85%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(185deg 66% 85%);--label-color:hsl(185deg 66% 85%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(240deg 20% 24%);--text-color:hsl(185deg 66% 85%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;--frame-bg-color:hsl(240deg 18% 10%);
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/retrog.css b/extensions-builtin/sd_theme_editor/themes/retrog.css
new file mode 100644
index 00000000..db273d45
--- /dev/null
+++ b/extensions-builtin/sd_theme_editor/themes/retrog.css
@@ -0,0 +1 @@
+--main-bg-color:hsl(197deg 97% 14%);--primary-color:hsl(27deg 99% 50%);--input-bg-color:hsl(197deg 98% 16%);--input-border-color:hsl(166deg 62% 33%);--panel-bg-color:hsl(196deg 98% 18%);--panel-border-color:hsl(166deg 62% 33%);--panel-border-radius:0px;--subgroup-bg-color:hsl(197deg 97% 14%);--subgroup-input-bg-color:hsl(197deg 97% 14%);--subgroup-input-border-color:hsl(166deg 62% 33%);--subpanel-bg-color:hsl(197deg 98% 16%);--subpanel-border-color:hsl(166deg 62% 33%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(222deg 75% 62%);--outside-gap-size:6px;--inside-padding-size:6px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(70deg 69% 54%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(27deg 99% 50%);--icon-hover-color:hsl(196deg 98% 18%);--icon-size:22px;--nav-bg-color:hsl(197deg 97% 14%);--nav-color:hsl(70deg 69% 54%);--nav-hover-color:hsl(197deg 97% 14%);--input-color:hsl(70deg 69% 54%);--label-color:hsl(70deg 69% 54%);--subgroup-input-color:hsl(27deg 99% 50%);--placeholder-color:hsl(166deg 62% 33%);--text-color:hsl(185deg 66% 85%);--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;--frame-bg-color:hsl(197deg 98% 16%);
\ No newline at end of file
diff --git a/html/svg/contrast-drop-2-line.svg b/html/svg/contrast-drop-2-line.svg
new file mode 100644
index 00000000..abd8f3ea
--- /dev/null
+++ b/html/svg/contrast-drop-2-line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/javascript/ui.js b/javascript/ui.js
index 8917fb93..2001a6c2 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -416,7 +416,9 @@ onUiUpdate(function(){
gradioApp().querySelectorAll('#tabs > div > button').forEach(function (tab, index){
tab.setAttribute("tab-id", index);
tab.removeEventListener('mouseup', navTabClicked);
- tab.addEventListener('mouseup', navTabClicked);
+ tab.addEventListener('mouseup', navTabClicked);
+ if(tab.innerHTML.indexOf("Theme") != -1) tab.style.display = "none";
+
})
netMenuVisibility();
@@ -487,11 +489,13 @@ onUiUpdate(function(){
}
z_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');
- function toggleQuickMenu(e) {
+ function toggleQuickMenu(e) {
+ closeNavMenus(quick_menu);
quick_menu_open = !quick_menu_open;
const withinBoundaries = e.composedPath().includes(quicksettings_overflow);
if(!quick_menu_open && withinBoundaries){
@@ -501,15 +505,17 @@ onUiUpdate(function(){
e.stopPropagation();
toggleMenu(quick_menu_open, quick_menu, quicksettings_overflow, toggleQuickMenu);
}
+
}
quick_menu.addEventListener('click', toggleQuickMenu);
- function toggleNetMenu(e) {
+ // extra networks nav menu
+ function toggleNetMenu(e) {
+ closeNavMenus(net_menu);
net_menu_open = !net_menu_open;
e.preventDefault();
e.stopPropagation();
toggleMenu(net_menu_open, net_menu, net_container, null);
-
}
net_menu.addEventListener('click', toggleNetMenu);
gradioApp().querySelectorAll('button[id$="2img_extra_networks"]').forEach((elem) => {
@@ -517,6 +523,52 @@ onUiUpdate(function(){
})
+ // theme nav menu
+ let theme_container = gradioApp().querySelector('#tab_ui_theme');
+ let theme_menu_open = false;
+ const theme_menu = gradioApp().querySelector('#theme_menu');
+
+ function toggleThemeMenu(e) {
+ closeNavMenus(theme_menu);
+ theme_menu_open = !theme_menu_open;
+ e.preventDefault();
+ e.stopPropagation();
+ toggleMenu(theme_menu_open, theme_menu, theme_container, null);
+
+ }
+ theme_menu.addEventListener('click', toggleThemeMenu);
+
+ // close open aside views
+ function closeNavMenus(menu){
+ if(quick_menu != menu && quick_menu_open) quick_menu.click();
+ if(net_menu != menu && net_menu_open) net_menu.click();
+ if(theme_menu != menu && theme_menu_open) theme_menu.click();
+ }
+
+ const theme_tab = gradioApp().querySelector('#tab_ui_theme');
+ function theme_aside(value){
+ if(value){
+ theme_tab.classList.add("aside");
+ }else{
+ theme_tab.classList.remove("aside");
+ }
+ }
+ if(theme_tab) theme_aside(true);
+
+ function disabled_extensions(value){
+ console.log(value);
+ if(value){
+ theme_menu.classList.remove("hidden");
+ }else{
+ theme_menu.classList.add("hidden");
+ }
+ }
+ const theme_ext = gradioApp().querySelector('#extensions input[name="enable_sd_theme_editor"]');
+ disabled_extensions(theme_ext.checked);
+
+ //
+
+
// additional ui styles
let styleobj = {};
const r = gradioApp();
@@ -633,6 +685,7 @@ onUiUpdate(function(){
})
extra_networks_aside(opts.extra_networks_aside);
+
// hidden - header ui tabs
let radio_hidden_html="";
@@ -707,7 +760,7 @@ onUiUpdate(function(){
maintabs.forEach(function (elem, index) {
- let tabvalue = elem.innerText.replaceAll(" ", "");
+ let tabvalue = elem.innerText.replaceAll(" ", "");
hiddentabs[tabvalue] = false;
headertabs[tabvalue] = false;
let checked_hidden = "";
@@ -720,8 +773,8 @@ onUiUpdate(function(){
headertabs[tabvalue] = true;
checked_header = "checked";
}
- radio_hidden_html += '';
- radio_header_html += '';
+ radio_hidden_html += '';
+ radio_header_html += '';
tabitems[index].setAttribute("tab-item", index);
elem.setAttribute("tab-id", index);
@@ -833,11 +886,12 @@ onUiUpdate(function(){
}
let input_selectors = selectors.join(",");
- gradioApp().querySelectorAll(input_selectors).forEach(function (elem){
+ gradioApp().querySelectorAll(input_selectors).forEach(function (elem, index){
let parent = elem.parentElement;
let label = parent.querySelector("label");
- let clone_num = elem.cloneNode(true);
+ let clone_num = elem.cloneNode(true);
+ clone_num.id = "num_clone_"+index;
parent.append(clone_num);
elem.style.display = "none";
diff --git a/modules/ui.py b/modules/ui.py
index e34a34df..68bd61f9 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -1732,10 +1732,10 @@ def create_ui():
#with gr.Row(elem_id=f"quick_row_{k}") as qsettings_row:
component = create_setting_component(k, item.section[0], is_quicksettings=True)
component_dict[k] = component
-
+ gr.Row(elem_id="theme_menu")
gr.Row(elem_id="extra_networks_menu")
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 d1de18a4..c90de04e 100644
--- a/style.css
+++ b/style.css
@@ -748,7 +748,6 @@ body {
}
/* offcanvas quicksettings menu */
-
#quicksettings_overflow {
position: fixed;
z-index: 9999;
@@ -781,6 +780,7 @@ body {
#quicksettings_overflow > div {
margin-bottom: var(--outside-gap-size);
}
+
/*
#quicksettings_overflow > div button{
height:auto;
@@ -806,7 +806,6 @@ padding-right: 37px;
min-height: 34px;
}
-
#extra_networks_menu::before,
#quick_menu::before {
content: ' ';
@@ -829,11 +828,13 @@ min-height: 34px;
-webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%;
}
+
#extra_networks_menu.fixed,
#extra_networks_menu:hover,
#quick_menu:hover {
background-color: var(--primary-color);
}
+
#extra_networks_menu.fixed::before,
#extra_networks_menu:hover::before,
#quick_menu:hover::before {
@@ -1907,6 +1908,10 @@ canvas[key=mask] {
#settings>div {
padding-top:0;
}
+
+#settings > div > .bg-white {
+ color: var(--primary-color);
+}
/****************/
/* Results View */
/****************/
@@ -2495,8 +2500,6 @@ ul.list-none {
box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px;
}
-
-
[id$="2img_extra_networks_row"].aside > div:first-child
{
border: 0 !important;
@@ -2936,19 +2939,6 @@ ul.list-none {
color:var(--primary-color);
}
-#settings_ui_theme > div > div
-{
- flex-direction: row;
- flex-wrap: wrap;
-}
-#settings_ui_theme > div > div > div
-{
- max-width:30%;
-}
-
-#settings > div > .bg-white {
- color: var(--primary-color);
-}
/******************/
/* lightboxModal */
@@ -3084,11 +3074,8 @@ ul.list-none {
transition: none !important;
}
-/*
-#ui_theme_settings > div{
- max-width:120px;
-}
-*/
+
+
/*********************/
/* Mobile breakpoint */
/*********************/