sosedoff/pgweb
1
1
Fork 0
mirror of https://github.com/sosedoff/pgweb.git synced 2024-12-14 10:23:02 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #599 from sosedoff/resizable-query-height

Browse Source 
Make query input box resizable
This commit is contained in:
Dan Sosedoff 2022-12-05 17:14:51 -06:00 committed by GitHub
commit 85b76960c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 116 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
static/css/app.css
View File

@ -283,18 +283,34 @@
}
#input {
height: 255px;
width: 100%;
height: 300px;
position: relative;
}
#input .wrapper {
position: relative;
#input .input-wrapper {
height: 250px;
padding-top: 12px;
}
#input_resize_handler {
width: 100%;
height: 1px;
background: #ddd;
cursor: row-resize;
position: absolute;
bottom: 0px;
}
#input_resize_handler:hover, #input_resize_handler.dragging {
height: 3px;
}
#input .actions {
background: #fff;
padding: 10px;
height: 50px;
border-bottom: solid 1px #ddd;
bottom: 0px;
}
#input .actions #result-rows-count {
@ -363,13 +379,10 @@
margin-right: 0px;
}
#objects {
}
#output {
position: absolute;
left: 0px;
top: 256px;
top: 300px;
bottom: 0px;
right: 0px;
margin: 0px;
@ -591,8 +604,7 @@
/* -------------------------------------------------------------------------- */
#custom_query {
height: 193px;
margin-top: 12px;
height: 238px;
}
#connection_window {

39
static/index.html
View File

@ -73,28 +73,29 @@
</div>
<div id="body">
<div id="input">
<div class="wrapper">
<div class="input-wrapper">
<div id="custom_query"></div>
<div class="actions">
<input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
<div id="explain-dropdown" class="btn-group left">
<button id="explain-dropdown-toggle" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Explain Query <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="explain">Explain Query</a></li>
<li><a href="#" id="analyze">Analyze Query</a></li>
</ul>
</div>
<div id="query_progress">Please wait, query is executing...</div>
<div class="pull-right">
<span id="result-rows-count"></span>
<input type="button" id="json" value="JSON" class="btn btn-sm btn-default" />
<input type="button" id="csv" value="CSV" class="btn btn-sm btn-default" />
<input type="button" id="xml" value="XML" class="btn btn-sm btn-default" />
</div>
</div>
<div class="actions">
<input type="button" id="run" value="Run Query" class="btn btn-sm btn-primary" />
<div id="explain-dropdown" class="btn-group left">
<button id="explain-dropdown-toggle" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Explain Query <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="explain">Explain Query</a></li>
<li><a href="#" id="analyze">Analyze Query</a></li>
</ul>
</div>
<div id="query_progress">Please wait, query is executing...</div>
<div class="pull-right">
<span id="result-rows-count"></span>
<input type="button" id="json" value="JSON" class="btn btn-sm btn-default" />
<input type="button" id="csv" value="CSV" class="btn btn-sm btn-default" />
<input type="button" id="xml" value="XML" class="btn btn-sm btn-default" />
</div>
</div>
<div id="input_resize_handler"></div>
</div>
<div id="output">
<div class="wrapper">

74
static/js/app.js
View File

@ -4,6 +4,8 @@ var bookmarks = {};
var default_rows_limit = 100;
var currentObject = null;
var autocompleteObjects = [];
var inputResizing = false;
var inputResizeOffset = null;
var filterOptions = {
"equal": "= 'DATA'",
@ -1247,7 +1249,78 @@ function enableDatabaseSearch(data) {
});
}
function bindInputResizeEvents() {
var height = sessionStorage.getItem("input_height");
if (height) {
resizeInput(height);
checkInputSize();
}
$("body").on("mousemove", onInputResize);
$("body").on("mouseup", endInputResize);
$("#input_resize_handler").on("mousedown", beginInputResize);
$(window).on("resize", checkInputSize);
}
function checkInputSize() {
var inputHeight = $("#input").height();
var bodyHeight = $("#body").height();
if (bodyHeight == 0 || inputHeight == 0) return;
if (inputHeight > bodyHeight || bodyHeight - inputHeight < 200) {
resizeInput(bodyHeight - 200);
}
}
function resizeInput(height) {
if (height < 100) height = 100;
var diff = 50 + 12; // actions box + padding
$("#input").height(height);
$("#input .input-wrapper").height(height - diff);
$("#custom_query").height(height - diff);
$("#output").css("top", height + "px");
if (editor) {
editor.resize();
}
}
function beginInputResize() {
inputResizing = true;
inputResizeOffset = $("#input").offset().top;
$("html").css("cursor", "row-resize");
$("#input_resize_handler").addClass("dragging");
}
function endInputResize() {
if (!inputResizing) return;
inputResizing = false;
inputResizeOffset = null;
$("html").css("cursor", "auto");
$("#input_resize_handler").removeClass("dragging");
// Save current settings for page reloads
sessionStorage.setItem("input_height", $("#input").height());
}
function onInputResize(event) {
if (!inputResizing) return;
var computedHeight = event.clientY - inputResizeOffset;
if (computedHeight < 150) computedHeight = 150;
resizeInput(computedHeight);
}
$(document).ready(function() {
bindInputResizeEvents();
$("#table_content").on("click", function() { showTableContent(); });
$("#table_structure").on("click", function() { showTableStructure(); });
$("#table_indexes").on("click", function() { showTableIndexes(); });
@ -1627,3 +1700,4 @@ $(document).ready(function() {
bindDatabaseObjectsFilter();
});