balki/pgweb
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #434 from sosedoff/restructure-sidebar

Browse Source 
Sidebar restructure
This commit is contained in:
Dan Sosedoff 2019-07-05 16:29:32 -05:00 committed by GitHub
commit 06a9d8015c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 344 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
pkg/data/bindata.go
View File

File diff suppressed because one or more lines are too long

171
static/css/app.css
View File

@ -74,35 +74,43 @@
background: #f9f9f9; background: #f9f9f9;
} }
#sidebar .title { #sidebar .current-database {
position: absolute; position: fixed;
top: 0; left: 0px;
width: 100%; top: 0px;
line-height: 33px; width: 250px;
height: 33px;
padding: 0px 8px;
color: #555;
font-weight: bold;
font-size: 13px;
}
#sidebar .title.main {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
font-weight: bold;
font-size: 14px; font-size: 14px;
background: #79589f;
color: #fff; color: #fff;
padding: 0px; background: #79589f;
z-index: 900;
} }
#sidebar .title.main i.fa-database { #sidebar .current-database .wrap {
position: relative;
height: 50px;
}
#sidebar .current-database span.current-database-name {
margin-left: 30px;
display: inline-block;
width: 200px;
height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
#sidebar .current-database i.fa-database {
position: absolute; position: absolute;
left: 8px; left: 8px;
top: 18px; top: 18px;
} }
#sidebar span.current-database, #sidebar .current-database input.typeahead {
#sidebar input.typeahead {
margin-left: 30px; margin-left: 30px;
display: inline-block; display: inline-block;
width: 200px; width: 200px;
@ -112,7 +120,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#sidebar input.typeahead { #sidebar .current-database input.typeahead {
display: none; display: none;
background: #79589f; background: #79589f;
width: 200px; width: 200px;
@ -123,11 +131,25 @@
border: 0px none; border: 0px none;
} }
#sidebar input.typeahead::-webkit-input-placeholder { #sidebar .current-database span.refresh {
color: #d6cce2; position: absolute;
top: 0px;
right: 6px;
cursor: pointer;
color: #fff;
display: none;
}
#sidebar .current-database:hover span.refresh {
display: inline-block;
}
#sidebar .current-database input.typeahead::-webkit-input-placeholder {
color: #fff;
} }
#sidebar ul.typeahead { #sidebar ul.typeahead {
position: absolute;
margin-left: 30px; margin-left: 30px;
overflow-y: auto; overflow-y: auto;
max-height: 300px; max-height: 300px;
@ -139,12 +161,63 @@
padding: 3px 10px; padding: 3px 10px;
} }
#sidebar div.tables-list { #sidebar .objects-search {
position: absolute; position: fixed;
right: 0; top: 50px;
top: 0px;
left: 0px; left: 0px;
bottom: 145px; width: 250px;
height: 30px;
overflow: hidden;
}
#sidebar .objects-search .wrap {
position: relative;
background: transparent;
height: 30px;
padding: 4px;
box-sizing: border-box;
border-bottom: 1px solid #eee;
}
#sidebar .objects-search i.fa-search {
position: absolute;
left: 8px;
top: 7px;
color: #a1a1a1;
}
#sidebar .objects-search i.fa-times-circle {
position: absolute;
right: 8px;
top: 7px;
color: #a1a1a1;
display: none;
cursor: pointer;
}
#sidebar .objects-search i.fa-times-circle:hover {
color: #888;
}
#sidebar .objects-search input[type="text"] {
background: transparent;
border: 0px none;
font-size: 12px;
color: #000;
height: 22px;
line-height: 22px;
padding: 0px;
margin-left: 25px;
width: 200px;
outline: none;
}
#sidebar div.tables-list {
position: fixed;
width: 250px;
top: 80px;
left: 0px;
bottom: 130px;
overflow: auto; overflow: auto;
} }
@ -153,25 +226,8 @@
overflow: auto; overflow: auto;
} }
#sidebar div.tables-list .title span.current-database {
cursor: pointer;
}
#sidebar div.tables-list .title:hover span.refresh {
display: inline-block;
}
#sidebar div.tables-list .title span.refresh {
position: absolute;
top: 0px;
right: 6px;
cursor: pointer;
color: #fff;
display: none;
}
#sidebar div.tables-list #tables, #sequences, #objects { #sidebar div.tables-list #tables, #sequences, #objects {
padding: 50px 0 0;
font-size: 12px; font-size: 12px;
} }
@ -179,11 +235,10 @@
position: fixed; position: fixed;
width: 250px; width: 250px;
left: 0px; left: 0px;
height: 145px; height: 130px;
bottom: 0px; bottom: 0px;
/*border-top: 1px solid #d4d4d4;*/
/*border-right: 1px solid #d4d4d4;*/
box-sizing: border-box; box-sizing: border-box;
cursor: default;
} }
#sidebar div.table-information .wrap { #sidebar div.table-information .wrap {
@ -192,24 +247,27 @@
} }
#sidebar div.table-information .title { #sidebar div.table-information .title {
/*background: #f6f6f6;*/ font-size: 12px;
text-transform: uppercase;
color: #aaa;
line-height: 30px;
padding: 0px 8px;
border-top: 1px solid #eee;
} }
#sidebar div.table-information ul { #sidebar div.table-information .lines {
padding: 33px 0 0;
font-size: 12px;
display: none; display: none;
} }
#sidebar div.table-information ul li { #sidebar div.table-information .lines .line {
line-height: 24px; line-height: 24px;
height: 24px; height: 24px;
padding: 0 8px 0 12px; padding: 0 8px 0 8px;
cursor: default; font-size: 12px;
color: #7F7E7F !important; color: #7F7E7F !important;
} }
#sidebar div.table-information ul li span { #sidebar div.table-information .lines .line span {
color: #4F4F4F; color: #4F4F4F;
min-width: 0; min-width: 0;
padding-left: 0px; padding-left: 0px;
@ -723,10 +781,7 @@
.ace_gutter, .ace_gutter-cell { .ace_gutter, .ace_gutter-cell {
background: #fff !important; background: #fff !important;
color: #bbb; color: #bbb;
} font-size: 12px;
.ace_active-line {
background: #f9f9f9 !important;
} }
.ace_active-line { .ace_active-line {

31
static/index.html
View File

@ -38,25 +38,34 @@
</div> </div>
</div> </div>
<div id="sidebar"> <div id="sidebar">
<div class="current-database">
<div class="wrap">
<i class="fa fa-database"></i> <span class="current-database-name" id="current_database"></span>
<input class="typeahead" id="database_search" type="text" placeholder="Search database" />
<span class="refresh" id="refresh_tables" title="Refresh tables list"><i class="fa fa-refresh"></i></span>
</div>
</div>
<div class="objects-search">
<div class="wrap">
<i class="fa fa-search"></i>
<i class="fa fa-times-circle clear-objects-filter"></i>
<input type="text" placeholder="Filter database objects" id="filter_database_objects" />
</div>
</div>
<div class="tables-list"> <div class="tables-list">
<div class="wrap"> <div class="wrap">
<div class="title main">
<i class="fa fa-database"></i> <span class="current-database" id="current_database"></span>
<input class="typeahead current_database" id="database_search" type="text" placeholder="Search database">
<span class="refresh" id="refresh_tables" title="Refresh tables list"><i class="fa fa-refresh"></i></span>
</div>
<div id="objects"></div> <div id="objects"></div>
</div> </div>
</div> </div>
<div class="table-information"> <div class="table-information">
<div class="wrap"> <div class="wrap">
<div class="title">Table Information</div> <div class="title">Table Information</div>
<ul> <div class="lines">
<li>Size: <span id="table_total_size"></span></li> <div class="line">Size: <span id="table_total_size"></span></div>
<li>Data size: <span id="table_data_size"></span></li> <div class="line">Data size: <span id="table_data_size"></span></div>
<li>Index size: <span id="table_index_size"></span></li> <div class="line">Index size: <span id="table_index_size"></span></div>
<li>Estimated rows: <span id="table_rows_count"></span></li> <div class="line">Estimated rows: <span id="table_rows_count"></span></div>
</ul> </div>
</div> </div>
</div> </div>
</div> </div>

52
static/js/app.js
View File

@ -130,7 +130,7 @@ function buildSchemaSection(name, objects) {
if (objects[group]) { if (objects[group]) {
objects[group].forEach(function(item) { objects[group].forEach(function(item) {
var id = name + "." + item; var id = name + "." + item;
section += "<li class='schema-" + group + "' data-type='" + group + "' data-id='" + id + "'>" + icons[group] + "&nbsp;" + item + "</li>"; section += "<li class='schema-item schema-" + group + "' data-type='" + group + "' data-id='" + id + "' data-name='" + item + "'>" + icons[group] + "&nbsp;" + item + "</li>";
}); });
section += "</ul></div>"; section += "</ul></div>";
} }
@ -422,7 +422,7 @@ function showTableInfo() {
} }
apiCall("get", "/tables/" + name + "/info", {}, function(data) { apiCall("get", "/tables/" + name + "/info", {}, function(data) {
$(".table-information ul").show(); $(".table-information .lines").show();
$("#table_total_size").text(data.total_size); $("#table_total_size").text(data.total_size);
$("#table_data_size").text(data.data_size); $("#table_data_size").text(data.data_size);
$("#table_index_size").text(data.index_size); $("#table_index_size").text(data.index_size);
@ -951,6 +951,52 @@ function bindCurrentDatabaseMenu() {
}); });
} }
function bindDatabaseObjectsFilter() {
var filterTimeout = null;
$("#filter_database_objects").on("keyup", function (e) {
clearTimeout(filterTimeout);
var val = $(this).val().trim();
// Reset search on ESC
if (e.keyCode == 27 || val == "") {
resetObjectsFilter();
return;
}
$(".clear-objects-filter").show();
$(".schema-group").addClass("expanded");
filterTimeout = setTimeout(function () {
filterObjectsByName(val)
}, 200);
});
$(".clear-objects-filter").on("click", function(e) {
resetObjectsFilter();
});
}
function resetObjectsFilter() {
$("#filter_database_objects").val("");
$("#objects li.schema-item").show();
$(".clear-objects-filter").hide();
}
function filterObjectsByName(query) {
$("#objects li.schema-item").each(function (idx, el) {
var item = $(el);
var name = $(el).data("name");
if (name.indexOf(query) < 0) {
item.hide();
} else {
item.show();
}
});
}
function getQuotedSchemaTableName(table) { function getQuotedSchemaTableName(table) {
if (typeof table === "string" && table.indexOf(".") > -1) { if (typeof table === "string" && table.indexOf(".") > -1) {
var schemaTableComponents = table.split("."); var schemaTableComponents = table.split(".");
@ -1410,4 +1456,6 @@ $(document).ready(function() {
} }
} }
}); });
bindDatabaseObjectsFilter();
}); });