feat(ui): add vertical resizable splitter between database tree and editor

Author: heptau

OmniDB/OmniDB_app/static/OmniDB_app/js/tab_functions/outer_connection_tab.js

@@ -154,12 +154,10 @@ $('[data-bs-toggle="tooltip"]').tooltip({animation:true, html: true});// Loads o
 		v_connTabControl.selectTab(v_tab);
 
 		var v_width = Math.ceil((300/window.innerWidth)*100);
-		var v_complement_width = 100 - v_width;
-
-		var v_html =
-		'<div style="position: relative;">' +
-			'<div style="display: grid; grid-template-areas: \'left right\'; grid-template-columns: auto minmax(0, 1fr); height: 100%;">' +
-				'<div id="' + v_tab.id + '_div_left" class="omnidb__workspace__div-left col" style="max-width: 300px; width: 300px;">' +
+		var v_complement_width = 100 - v_width;		var v_html =
+		'<div style="position: relative; height: 100%;">' +
+			'<div style="display: grid; grid-template-areas: \'left splitter right\'; grid-template-columns: auto 12px minmax(0, 1fr); height: 100%;">' +
+				'<div id="' + v_tab.id + '_div_left" class="omnidb__workspace__div-left col" style="grid-area: left; max-width: 300px; width: 300px;">' +
 						'<div class="omnidb__workspace__content-left">' +
 							'<div id="' + v_tab.id + '_details" class="omnidb__workspace__connection-details"></div>' +
 							'<div id="' + v_tab.id + '_tree" style="overflow-y: auto; flex-grow: 1; min-height: 0; transition: scroll 0.3s;"></div>' +
@@ -177,14 +175,13 @@ $('[data-bs-toggle="tooltip"]').tooltip({animation:true, html: true});// Loads o
 								'<div id="tree_tabs_' + v_tab.id + '" class="omnidb__tree-tabs__container" style="position: relative;"></div>' +
 							'</div>' +
 						'</div>' +
-						'<div class="resize_line_vertical omnidb__resize-line__container" onmousedown="resizeConnectionHorizontal(event)" style="position:absolute;height: 100%;width: 10px;cursor: ew-resize;border-right: 1px dashed #acc4e8;top: 0px;right: 0px;opacity: 0.4;z-index: 10;"></div>' +
 					'</div>' +//.div_left
-				'<div id="' + v_tab.id + '_div_right" class="omnidb__workspace__div-right col" style="position: relative;">' +
+				'<div class="resize_line_vertical omnidb__resize-line__container" onmousedown="resizeConnectionHorizontal(event)" style="grid-area: splitter; height: 100%; width: 12px; cursor: ew-resize; border-right: 1px dashed #acc4e8; opacity: 0.6; z-index: 10;"></div>' +
+				'<div id="' + v_tab.id + '_div_right" class="omnidb__workspace__div-right col" style="grid-area: right; position: relative;">' +
 						'<button type="button" class="py-4 px-0 btn omnidb__theme__btn--secondary omnidb__tree__toggler" onclick="toggleTreeContainer()"><i class="fas fa-arrows-alt-h"></i></button>' +
 						'<div id="' + v_tab.id + '_tabs" class="w-100"></div>' +
 				'</div>' +//.div_right
 			'</div>' +//.row
-
 		'</div>';
 
 		// var v_tab_title_span = document.getElementById('tab_title');
@@ -404,7 +401,7 @@ function refreshOuterConnectionHeights() {
 		// if (!v_is_shrunk) {
 			var v_totalWidth = v_connTabControl.selectedDiv.getBoundingClientRect().width;
 			var v_div_left_width_value = v_div_left.getBoundingClientRect().width;
-			var v_right_width_value = v_totalWidth - v_div_left_width_value;
+			var v_right_width_value = v_totalWidth - v_div_left_width_value - 12;
 			// v_div_left.style['max-width'] = v_div_left_width_value + 'px';
 			// v_div_left.style['width'] = v_div_left_width_value + 'px';
 			v_div_right.style['max-width'] = v_right_width_value + 'px';