Split View Resizer Added

javascript/ui.js

@@ -288,71 +288,64 @@ onUiUpdate(function(){
 
 	*/	
 	
-	gradioApp().querySelectorAll('[id *= "sub-group"]').forEach(function(elem){
+	gradioApp().querySelectorAll('[id $= "sub-group"]').forEach(function(elem){
         elem.classList.add("sub-group");			
-		//console.log(elem.id);		
     })
 	
-	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
+	/* split view resize */
 
-	const resizer = gradioApp().getElementById('handler');
+	gradioApp().querySelectorAll('#txt2img_splitter, #img2img_splitter').forEach((elem) => {
-	const leftSide = resizer.previousElementSibling;
-	const rightSide = resizer.nextElementSibling;
-	const container = gradioApp().getElementById('tab_txt2img');
 		
-	var x = 0;
+		elem.addEventListener("mousedown", function(e) {	
-	var y = 0;
-	var leftWidth = 0;
 
+			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) {		
+			function mouseMoveHandler(e) {		
-		resizer.style.cursor = 'col-resize';
+				resizer.style.cursor = 'col-resize';
-		container.style.cursor = 'col-resize';
+				container.style.cursor = 'col-resize';
 
-		const dx = e.clientX - x;
+				const dx = e.clientX - x;
-		const dy = e.clientY - y;
+				const dy = e.clientY - y;
 
-		const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
+				const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
-		leftSide.style.flexBasis  = `${newLeftWidth}%`;
+				leftSide.style.flexBasis  = `${newLeftWidth}%`;
-		leftSide.style.userSelect = 'none';
+				leftSide.style.userSelect = 'none';
-		leftSide.style.pointerEvents = 'none';
+				leftSide.style.pointerEvents = 'none';
-		rightSide.style.userSelect = 'none';
+				rightSide.style.userSelect = 'none';
-		rightSide.style.pointerEvents = 'none';
+				rightSide.style.pointerEvents = 'none';
-		console.log("Move");
+			}
 
-	};
+			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);		
+			}
 			
-	function mouseUpHandler() {
+			container.addEventListener('mousemove', mouseMoveHandler);
-		resizer.style.removeProperty('cursor');
+			container.addEventListener('mouseup', mouseUpHandler);		
-		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");
-	};
 	
-	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);
-	*/
 	
 	
 })

modules/ui.py

@@ -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"):
 

style.css

@@ -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,
@@ -1962,6 +2015,22 @@ pre {
 	}
 	
 	
+	#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;
+}
+