aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--index.html3
-rw-r--r--package.json6
-rw-r--r--renderer.js8
-rw-r--r--style.css32
-rw-r--r--table-style.css46
5 files changed, 63 insertions, 32 deletions
diff --git a/index.html b/index.html
index eac7bc9..23593dc 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
<title>SQL++</title>
<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css"></link>
+ <link rel="stylesheet" href="node_modules/codemirror/theme/dracula.css"></link>
<link rel="stylesheet" type="text/css" href="./style.css"></link>
<link rel="stylesheet" type="text/css" href="./table-style.css"></link>
</head>
@@ -19,7 +20,7 @@
<div id="editor" class="editor-row split-row"></div>
<div class="results-row split-row">
- <table id="result-table" width="100%"></table>
+ <table id="result-table" class="table stripe compact order-column" width="100%"></table>
</div>
</div>
diff --git a/package.json b/package.json
index 29b0493..8a1c25e 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,11 @@
"repository": "https://github.com/jamesbarnett91/sql-plus-plus",
"license": "GPL-3.0",
"devDependencies": {
- "electron": "~1.7.8",
"codemirror": "5.33.0",
- "pg": "7.4.1",
- "jquery": "3.3.1",
"datatables": "1.10.13",
+ "electron": "~1.7.8",
+ "jquery": "3.3.1",
+ "pg": "7.4.1",
"split.js": "1.3.5"
}
}
diff --git a/renderer.js b/renderer.js
index 113119f..d10e5af 100644
--- a/renderer.js
+++ b/renderer.js
@@ -1,13 +1,15 @@
-const $ = require('jquery');
+'use strict';
+const $ = require("jquery");
const cm = require("codemirror");
const { Pool } = require("pg");
-require('datatables')(window, $);
+require("datatables")(window, $);
require("codemirror/mode/sql/sql");
const Split = require("split.js");
const editorContext = cm(document.getElementById("editor"), {
value: "select *\nfrom information_schema.tables",
mode: "text/x-sql",
+ theme: "dracula",
lineNumbers: true
});
@@ -41,6 +43,8 @@ function displayResults(results) {
dataTable = _resultsTable().DataTable({
paging: false,
destroy: true,
+ order: [],
+ dom: 'tr',
data: results.rows,
columns: _mapColumnProperties(results)
});
diff --git a/style.css b/style.css
index 8b9ab29..891cb76 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,26 @@ body {
margin: 0
}
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background: #474A5E;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #63677C;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+::-webkit-scrollbar-corner {
+ background: #63677C
+}
+
.flex-wrapper {
display: flex;
flex-flow: column;
@@ -12,7 +32,7 @@ body {
.flex-wrapper .row.header {
flex: 0 1 auto;
- background-color: #505050;
+ background-color: #474A5E;
color: white;
}
@@ -25,7 +45,7 @@ body {
.flex-wrapper .row.footer {
flex: 0 1 20px;
- background-color: #505050;
+ background-color: #474A5E;
color: white;
}
@@ -34,7 +54,7 @@ body {
}
.gutter {
- background-color: #505050;
+ background-color: #474A5E;
background-repeat: no-repeat;
background-position: 50%;
}
@@ -51,4 +71,10 @@ body {
.CodeMirror {
height: 100%;
+}
+
+.results-row {
+ color: #ffffff;
+ background-color: #282a36;
+ font-family: monospace;
} \ No newline at end of file
diff --git a/table-style.css b/table-style.css
index e550b65..ed2d93f 100644
--- a/table-style.css
+++ b/table-style.css
@@ -47,7 +47,7 @@ table.dataTable {
table.dataTable thead .sorting_desc_disabled {
background-image: url("./images/sort_desc_disabled.png"); }
table.dataTable tbody tr {
- background-color: white; }
+ background-color: #282a36; }
table.dataTable tbody tr.selected {
background-color: #b0bed9; }
table.dataTable tbody th,
@@ -69,11 +69,11 @@ table.dataTable {
table.dataTable.cell-border tbody tr:first-child td {
border-top: none; }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
- background-color: #f9f9f9; }
+ background-color: #474A5E; }
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
background-color: #abb9d3; }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
- background-color: whitesmoke; }
+ background-color: #262834; }
table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected {
background-color: #a9b7d1; }
table.dataTable.order-column tbody tr > .sorting_1,
@@ -81,7 +81,7 @@ table.dataTable {
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
- background-color: #f9f9f9; }
+ background-color: #4F4837; }
table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
@@ -89,23 +89,23 @@ table.dataTable {
table.dataTable.display tbody tr.selected > .sorting_3 {
background-color: #acbad4; }
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
- background-color: #f1f1f1; }
+ background-color: #897E63; }
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
- background-color: #f3f3f3; }
+ background-color: #262833; }
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
- background-color: whitesmoke; }
+ background-color: #262833; }
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
- background-color: #a6b3cd; }
+ background-color: #897E63; }
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
background-color: #a7b5ce; }
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
background-color: #a9b6d0; }
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
- background-color: #f9f9f9; }
+ background-color: #4F4837; }
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
- background-color: #fbfbfb; }
+ background-color: #272935; }
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
- background-color: #fdfdfd; }
+ background-color: #272935; }
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
background-color: #acbad4; }
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
@@ -113,11 +113,11 @@ table.dataTable {
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
background-color: #afbdd8; }
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
- background-color: #eaeaea; }
+ background-color: #242631; }
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
- background-color: #ebebeb; }
+ background-color: #252631; }
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
- background-color: #eeeeee; }
+ background-color: #252732; }
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
background-color: #a1aec7; }
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
@@ -232,11 +232,11 @@ table.dataTable td {
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
- color: #333333 !important;
+ color: white !important;
border: 1px solid transparent;
border-radius: 2px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
- color: #333333 !important;
+ color: white !important;
border: 1px solid #979797;
background-color: white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
@@ -303,18 +303,18 @@ table.dataTable td {
text-align: center;
font-size: 1.2em;
background-color: white;
- background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
- background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
- background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
- background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
- background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
- background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); }
+ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(40, 42, 54, 0)), color-stop(25%, rgba(40, 42, 54, 0.9)), color-stop(75%, rgba(40, 42, 54, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
+ background: -webkit-linear-gradient(left, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%);
+ background: -moz-linear-gradient(left, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%);
+ background: -ms-linear-gradient(left, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%);
+ background: -o-linear-gradient(left, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%);
+ background: linear-gradient(to right, rgba(40, 42, 54, 0) 0%, rgba(40, 42, 54, 0.9) 25%, rgba(40, 42, 54, 0.9) 75%, rgba(40, 42, 54, 0) 100%); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
- color: #333333; }
+ color: white; }
.dataTables_wrapper .dataTables_scroll {
clear: both; }
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-10 18:10:20 +0000