Skip to content

Commit

Permalink
Added no sliders layout - compact mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@anapnoe
anapnoe committed May 12, 2023
1 parent 652bc08 commit e0d16e9
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 140 deletions.
170 changes: 83 additions & 87 deletions extensions-builtin/sd_theme_editor/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,113 @@
#theme_menu
{
z-index: 9999;
background-color: var(--ae-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 {
z-index: 9999;
background-color: var(--ae-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(--ae-icon-color);
width: var(--ae-icon-size);
height: var(--ae-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::before {
content: " ";
display: inline-block;
-webkit-mask-size: cover;
mask-size: cover;
background-color: var(--ae-icon-color);
width: var(--ae-icon-size);
height: var(--ae-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);
}

#theme_menu.fixed, #theme_menu:hover {
background-color: var(--ae-icon-color);
#theme_menu.fixed,
#theme_menu:hover {
background-color: var(--ae-icon-color);
}

#theme_menu.fixed::before,
#theme_menu:hover::before
{
background-color: var(--ae-icon-hover-color);
#theme_menu:hover::before {
background-color: var(--ae-icon-hover-color);
}

#theme_overflow_container{
overflow-y: auto;
height: calc(100vh - var(--ae-top-header-height) - ( var(--ae-outside-gap-size) * 2 ) - ( var(--ae-inside-padding-size) * 4 ) - 96px );
#theme_overflow_container {
overflow-y: auto;
height: calc(
100vh - var(--ae-top-header-height) - (var(--ae-outside-gap-size) * 2) -
(var(--ae-inside-padding-size) * 4) - 96px
);
overflow-x: hidden;
}

#tab_ui_theme.open
{
transform: translateX(0);
box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px;
#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 {
display: block !important;
}

#tab_ui_theme.aside
{
position: fixed;
top: var(--ae-top-header-height);
width: 90%;
right: 0;
height: calc(100% - var(--ae-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(--ae-outside-gap-size));
background-color: var(--ae-main-bg-color) !important;

}
#tab_ui_theme.aside.open
{
transform: translateX(0);
box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px;
#tab_ui_theme.aside {
position: fixed;
top: var(--ae-top-header-height);
width: 90%;
right: 0;
height: calc(100% - var(--ae-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(--ae-outside-gap-size));
background-color: var(--ae-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;
#setting_ui_hidden_tabs .theme {
display: none !important;
}

#tab_ui_theme [id*="color"] label{
display:flex;
align-items: center;
pointer-events: none;
#tab_ui_theme [id*="color"] label {
display: flex;
align-items: center;
pointer-events: none;
}
#tab_ui_theme [id*="color"] label span{
min-width: 50% !important;
#tab_ui_theme [id*="color"] label span {
min-width: 50% !important;
}
#tab_ui_theme [id*="color"] label input{
flex-grow:1;
pointer-events: all;
cursor: pointer;
#tab_ui_theme [id*="color"] label input {
flex-grow: 1;
pointer-events: all;
cursor: pointer;
}

#settings_ui_theme > div > div
{
flex-direction: row;
flex-wrap: wrap;
#settings_ui_theme > div > div {
flex-direction: row;
flex-wrap: wrap;
}
#settings_ui_theme > div > div > div
{
max-width:30%;
#settings_ui_theme > div > div > div {
max-width: 30%;
}

#tab_ui_theme > div{
padding:16px !important;
padding-top:0!important;
#tab_ui_theme > div {
padding: 16px !important;
padding-top: 0 !important;
}

#ui_theme_hsv + button{
min-width:unset;
}
#ui_theme_hsv + button {
min-width: unset;
}
15 changes: 15 additions & 0 deletions javascript/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1489,6 +1489,21 @@ onUiUpdate(function () {
});
ui_show_range_ticks(opts.ui_show_range_ticks);

const gradio_main = gradioApp().querySelector(".gradio-container > div.main");
function ui_no_slider_layout(value) {
if (value) {
gradio_main.classList.add("no-slider-layout");
} else {
gradio_main.classList.remove("no-slider-layout");
}
}
gradioApp()
.querySelector("#setting_ui_no_slider_layout input")
.addEventListener("click", function (e) {
ui_no_slider_layout(e.target.checked, true);
});
ui_no_slider_layout(opts.ui_no_slider_layout);

// draggable reordable quicksettings
const container = gradioApp().querySelector(
"#quicksettings_overflow_container"
Expand Down
1 change: 1 addition & 0 deletions modules/shared.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -426,6 +426,7 @@ def list_samplers():
"ui_output_image_fit": OptionInfo("Scale-down", "Generated image fit method", gr.Radio, {"choices": ["Scale-down", "Contain"]}),
"ui_show_range_ticks": OptionInfo(True, "Show ticks for range sliders"),
"ui_dispatch_input_release": OptionInfo(True, "Dispatch event change on release, for slider and input number components"),
"ui_no_slider_layout": OptionInfo(False, "No sliders compact layout mode"),
"localization": OptionInfo("None", "Localization (requires restart)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(cmd_opts.localizations_dir)),
"gradio_theme": OptionInfo("Default", "Gradio theme (requires restart)", ui_components.DropdownEditable, lambda: {"choices": ["Default"] + gradio_hf_hub_themes})
}))
Expand Down
12 changes: 5 additions & 7 deletions modules/ui.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ def calc_resolution_hires(enable, width, height, hr_scale, hr_resize_x, hr_resiz
with devices.autocast():
p.init([""], [0], [0])

return f"resize: from <span class='resolution'>{p.width}x{p.height}</span> to <span class='resolution'>{p.hr_resize_x or p.hr_upscale_to_x}x{p.hr_resize_y or p.hr_upscale_to_y}</span>"
return f"from <span class='resolution'>{p.width}x{p.height}</span> to <span class='resolution'>{p.hr_resize_x or p.hr_upscale_to_x}x{p.hr_resize_y or p.hr_upscale_to_y}</span>"


def resize_from_to_html(width, height, scale_by):
Expand All @@ -142,7 +142,7 @@ def resize_from_to_html(width, height, scale_by):
if not target_width or not target_height:
return "no image selected"

return f"resize: from <span class='resolution'>{width}x{height}</span> to <span class='resolution'>{target_width}x{target_height}</span>"
return f"from <span class='resolution'>{width}x{height}</span> to <span class='resolution'>{target_width}x{target_height}</span>"


def apply_styles(prompt, prompt_neg, styles):
Expand Down Expand Up @@ -523,9 +523,7 @@ def create_ui():
res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="txt2img_res_switch_btn")
height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="txt2img_height")


if opts.dimensions_and_batch_together:

if opts.dimensions_and_batch_together:
with gr.Row(elem_id="txt2img_column_batch"):
batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="txt2img_batch_count")
batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="txt2img_batch_size")
Expand All @@ -538,7 +536,7 @@ def create_ui():

elif category == "checkboxes":
#with FormRow(elem_id="txt2img_checkboxes", variant="compact"):
with gr.Row():
with gr.Row(elem_id="txt2img_checkboxes"):
restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="txt2img_restore_faces")
tiling = gr.Checkbox(label='Tiling', value=False, elem_id="txt2img_tiling")
enable_hr = gr.Checkbox(label='Hires. fix', value=False, elem_id="txt2img_enable_hr")
Expand All @@ -562,7 +560,7 @@ def create_ui():
elif category == "batch":
if not opts.dimensions_and_batch_together:
#with FormRow(elem_id="txt2img_column_batch"):
with gr.Row():
with gr.Row(id="txt2img_column_batch"):
batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="txt2img_batch_count")
batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="txt2img_batch_size")

Expand Down
96 changes: 50 additions & 46 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,4 @@
:root {
--ae-main-bg-color: hsl(0deg 0% 10%);
--ae-primary-color: hsl(168deg 97% 41%);
--ae-input-bg-color: hsl(225deg 6% 13%);
--ae-input-border-color: hsl(214deg 5% 30%);
--ae-panel-bg-color: hsl(225deg 5% 17%);
--ae-panel-border-color: hsl(214deg 5% 30%);
--ae-panel-border-radius: 0px;
--ae-subgroup-bg-color: hsl(0deg 0% 10%);
--ae-subgroup-input-bg-color: hsl(225deg 6% 13%);
--ae-subgroup-input-border-color: hsl(214deg 5% 30%);
--ae-subpanel-bg-color: hsl(220deg 4% 14%);
--ae-subpanel-border-color: hsl(214deg 5% 30%);
--ae-subpanel-border-radius: 8px;
--ae-textarea-focus-color: hsl(210deg 3% 36%);
--ae-input-focus-color: hsl(168deg 97% 41%);
--ae-outside-gap-size: 8px;
--ae-inside-padding-size: 8px;
--ae-tool-button-size: 34px;
--ae-tool-button-radius: 16px;
--ae-generate-button-height: 70px;
--ae-cancel-color: hsl(0deg 84% 60%);
--ae-max-padding: max(
var(--ae-outside-gap-size),
var(--ae-inside-padding-size)
);
--ae-icon-color: hsl(168deg 97% 41%);
--ae-icon-hover-color: hsl(0deg 0% 10%);
--ae-icon-size: 22px;
--ae-nav-bg-color: hsl(0deg 0% 4%);
--ae-nav-color: hsl(210deg 4% 80%);
--ae-nav-hover-color: hsl(0deg 0% 4%);
--ae-input-color: hsl(210deg 4% 80%);
--ae-label-color: hsl(210deg 4% 80%);
--ae-subgroup-input-color: hsl(210deg 4% 80%);
--ae-placeholder-color: hsl(214deg 5% 30%);
--ae-text-color: hsl(210deg 4% 80%);
--ae-mobile-outside-gap-size: 2px;
--ae-mobile-inside-padding-size: 2px;
--ae-frame-bg-color: hsl(225deg 6% 13%);
--ae-modal-bg-color: hsl(0deg 0% 10%);
--ae-modal-icon-color: hsl(168deg 97% 41%);
}

/*BREAKPOINT_CSS_CONTENT*/
:root{--ae-main-bg-color:hsl(0deg 0% 10%);--ae-primary-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(214deg 5% 30%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-border-radius:0px;--ae-subgroup-bg-color:hsl(0deg 0% 10%);--ae-subgroup-input-bg-color:hsl(225deg 6% 13%);--ae-subgroup-input-border-color:hsl(214deg 5% 30%);--ae-subpanel-bg-color:hsl(220deg 4% 14%);--ae-subpanel-border-color:hsl(214deg 5% 30%);--ae-subpanel-border-radius:8px;--ae-textarea-focus-color:hsl(210deg 3% 36%);--ae-input-focus-color:hsl(168deg 97% 41%);--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-cancel-color:hsl(0deg 84% 60%);--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-color:hsl(168deg 97% 41%);--ae-icon-hover-color:hsl(0deg 0% 10%);--ae-icon-size:22px;--ae-nav-bg-color:hsl(0deg 0% 4%);--ae-nav-color:hsl(210deg 4% 80%);--ae-nav-hover-color:hsl(0deg 0% 4%);--ae-input-color:hsl(210deg 4% 80%);--ae-label-color:hsl(210deg 4% 80%);--ae-subgroup-input-color:hsl(210deg 4% 80%);--ae-placeholder-color:hsl(214deg 5% 30%);--ae-text-color:hsl(210deg 4% 80%);--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--ae-frame-bg-color:hsl(225deg 6% 13%);--ae-modal-bg-color:hsl(0deg 0% 10%);--ae-modal-icon-color:hsl(168deg 97% 41%);}/*BREAKPOINT_CSS_CONTENT*/

/*
Theme Name: DarkUX
Expand Down Expand Up @@ -1258,6 +1214,54 @@ button.secondary {
margin-bottom: var(--ae-inside-padding-size);
}

.no-slider-layout .gradio-slider input[type="range"] {
display: none;
}
.no-slider-layout .gradio-slider input[type="number"] {
width: 100% !important;
margin-bottom: 0;
min-height: 34px;
padding-right: 8px !important;
}
.no-slider-layout .head.svelte-1cl284s {
flex-direction: column;
}
[id*="2img_toprow"] > div:first-child {
min-width: unset !important;
}
.no-slider-layout [id$="2img_settings"] {
min-width: min(320px, 100%) !important;
}

.no-slider-layout div.block.padded.gradio-slider {
align-content: stretch;
}
[id*="2img_checkboxes"] > .form > div {
min-width: unset !important;
white-space: nowrap;
}
input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70 {
align-self: flex-start;
margin-top: 2px;
}
.thumbnail-small.svelte-g4rw9 > img.svelte-g4rw9 {
object-fit: contain;
max-height: 54px !important;
}
.thumbnail-small.svelte-g4rw9.svelte-g4rw9 {
width: auto;
max-height: 56px;
max-width: 180px;
}
.no-slider-layout [id$="2img_res_switch_btn"] {
height: 34px;
align-self: flex-end;
margin-bottom: var(--ae-inside-padding-size) !important;
}
.no-slider-layout [id$="2img_dimensions_row"] > .form {
background-color: var(--ae-panel-bg-color) !important;
}

.gradio-dropdown:not(.multiselect) .wrap-inner {
padding: 0px 5px !important;
height: 32px !important;
Expand Down Expand Up @@ -4199,4 +4203,4 @@ div[data-testid="image"] canvas {
}
}

/*BREAKPOINT_CSS_CONTENT*/
/*BREAKPOINT_CSS_CONTENT*/

0 comments on commit e0d16e9

Please sign in to comment.