mrq/stable-diffusion-webui
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Split View Resizer Added

Browse Source
This commit is contained in:
anapnoe 2023-02-06 01:55:53 +02:00
parent 59b44f6b41
commit bd431065b4
3 changed files with 162 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
javascript/ui.js
View File

@ -288,71 +288,64 @@ onUiUpdate(function(){
*/
gradioApp().querySelectorAll('[id *= "sub-group"]').forEach(function(elem){
elem.classList.add("sub-group");
//console.log(elem.id);
gradioApp().querySelectorAll('[id $= "sub-group"]').forEach(function(elem){
elem.classList.add("sub-group");
})
gradioApp().querySelectorAll('#img2img_prompt textarea, #txt2img_prompt textarea').forEach(function(elem){
/* resizable textarea */
gradioApp().querySelectorAll('[id $= "_prompt"] textarea').forEach(function(elem){
elem.classList.add("input-text");
elem.classList.remove("gr-text-input", "gr-box");
})
/* coming soon split view resize
const resizer = gradioApp().getElementById('handler');
const leftSide = resizer.previousElementSibling;
const rightSide = resizer.nextElementSibling;
const container = gradioApp().getElementById('tab_txt2img');
/* split view resize */
var x = 0;
var y = 0;
var leftWidth = 0;
function mouseMoveHandler(e) {
resizer.style.cursor = 'col-resize';
container.style.cursor = 'col-resize';
const dx = e.clientX - x;
const dy = e.clientY - y;
const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
leftSide.style.flexBasis = `${newLeftWidth}%`;
leftSide.style.userSelect = 'none';
leftSide.style.pointerEvents = 'none';
rightSide.style.userSelect = 'none';
rightSide.style.pointerEvents = 'none';
console.log("Move");
gradioApp().querySelectorAll('#txt2img_splitter, #img2img_splitter').forEach((elem) => {
};
elem.addEventListener("mousedown", function(e) {
function mouseUpHandler() {
resizer.style.removeProperty('cursor');
container.style.removeProperty('cursor');
leftSide.style.removeProperty('user-select');
leftSide.style.removeProperty('pointer-events');
rightSide.style.removeProperty('user-select');
rightSide.style.removeProperty('pointer-events');
container.removeEventListener('mousemove', mouseMoveHandler);
container.removeEventListener('mouseup', mouseUpHandler);
console.log("Up");
};
let resizer = e.currentTarget;
let leftSide = resizer.previousElementSibling;
let rightSide = resizer.nextElementSibling;
let container = resizer.parentElement;
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';
const dx = e.clientX - x;
const dy = e.clientY - y;
const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
leftSide.style.flexBasis = `${newLeftWidth}%`;
leftSide.style.userSelect = 'none';
leftSide.style.pointerEvents = 'none';
rightSide.style.userSelect = 'none';
rightSide.style.pointerEvents = 'none';
}
function mouseUpHandler() {
resizer.style.removeProperty('cursor');
container.style.removeProperty('cursor');
leftSide.style.removeProperty('user-select');
leftSide.style.removeProperty('pointer-events');
rightSide.style.removeProperty('user-select');
rightSide.style.removeProperty('pointer-events');
container.removeEventListener('mousemove', mouseMoveHandler);
container.removeEventListener('mouseup', mouseUpHandler);
}
container.addEventListener('mousemove', mouseMoveHandler);
container.addEventListener('mouseup', mouseUpHandler);
function mouseDownHandler(e) {
x = e.clientX;
y = e.clientY;
leftWidth = leftSide.getBoundingClientRect().width;
container.addEventListener('mousemove', mouseMoveHandler);
container.addEventListener('mouseup', mouseUpHandler);
console.log("Down");
};
// Attach the handler
resizer.addEventListener('mousedown', mouseDownHandler);
*/
})
})
})

3
modules/ui.py
View File

@ -498,7 +498,7 @@ def create_ui():
with gr.Row().style(equal_height=False):
txt2img_gallery, generation_info, html_info, html_log = create_output_panel("txt2img", opts.outdir_txt2img_samples)
#gr.Row(elem_id="handler")
gr.Row(elem_id="txt2img_splitter")
with gr.Column(variant='panel', elem_id="txt2img_settings"):
@ -716,6 +716,7 @@ def create_ui():
with FormRow().style(equal_height=False):
img2img_gallery, generation_info, html_info, html_log = create_output_panel("img2img", opts.outdir_img2img_samples)
gr.Row(elem_id="img2img_splitter")
with gr.Column(variant='panel', elem_id="img2img_settings"):

118
style.css
View File

@ -1538,6 +1538,7 @@ div#script_list {
padding: 0;
display: flex;
justify-content: flex-start;
max-width: 37px;
}
#img2img_styles label,
@ -1785,7 +1786,7 @@ div#script_list {
#img2img_settings,
#txt2img_settings {
min-width: min(680px, 100%) !important;
min-width: min(490px, 100%) !important;
flex: 1 1 0%;
}
@ -1808,7 +1809,7 @@ div#script_list {
.flex.row>div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 5%;
flex-basis: 10%;
}
input:focus {
@ -1829,10 +1830,18 @@ input:focus {
}
#img2img_prompt textarea,
#txt2img_prompt textarea{
#txt2img_prompt textarea,
#img2img_neg_prompt textarea,
#txt2img_neg_prompt textarea
{
min-height: 37px;
overflow: hidden !important;
}
#txt2img_results::after{
}
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
@ -1850,7 +1859,51 @@ pre {
height: 34px;
}
@media only screen and (max-width: 1024px) {
#img2img_prompt_image + div,
#txt2img_prompt_image + div{
flex-wrap:nowrap;
}
#txt2img_settings,
#img2img_settings {
flex-grow: 1;
flex-shrink: 0;
/*flex-basis: 50%; initial status */
}
#txt2img_results,
#img2img_results {
flex-grow: 0 !important;
flex-shrink: 1 !important;
overflow-x: auto;
}
#txt2img_splitter,
#img2img_splitter
{
flex-grow: 0;
flex-shrink: 0;
background: #202124;
cursor: col-resize;
margin: 0 0 0 auto;
min-width: 3px;
max-width: 3px;
align-self: stretch;
}
/* fix issue with canvas */
#img2img_sketch, #img2img_sketch>.h-60, #img2img_sketch>.h-60>div, #img2img_sketch>.h-60>div>img, #img2maskimg, #inpaint_sketch {
object-fit: scale-down !important;
width:100% !important;
height:auto !important;
}
@media only screen and (max-width: 860px) {
/* For tablets: */
#img2img_gallery .overflow-y-auto,
@ -1960,7 +2013,23 @@ pre {
.dark .dark\:hover\:border-gray-600>div.cursor-pointer+div {
margin-top: 4px !important;
}
#txt2img_results {
flex-grow: 1 !important;
flex-shrink: 1 !important;
overflow-x: hidden;
}
#splitter {
display:none;
}
#img2img_prompt_image + div,
#txt2img_prompt_image + div {
flex-wrap: wrap;
}
}
@ -2115,3 +2184,42 @@ input[type=range]::-ms-fill-lower {
input[type=range]::-ms-fill-upper {
background-color: #202124;
}
/*
.gr-prose pre {background-color:#494c50 !important;}
.extra-network-cards .card {
display: inline-block;
margin: .5em;
width: 10em;
height: 10em;
box-shadow: 0 0 5px rgba(128, 128, 128, .5);
border-radius: .2em;
background-size: cover;
background-position: center;
overflow: hidden;
}
.extra-network-cards .card ul a:hover,
.red {
color: #03d0a8;
}
*/
#context-menu {
z-index: 9999;
position: absolute;
display: block;
padding: 0;
border: 1px solid #03d0a8;
border-radius: 0;
box-shadow: none;
width: 200px;
}
.context-menu-items a:hover {
color:#fff;
background: #03d0a8;
}