SQL++

From 52f6783f63d2e2f52e06d14a97b5e00eab8ac1c0 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sun, 18 Feb 2018 21:20:37 +0000 Subject: Add new connection dialog box - WIP --- editor-instance.html | 2 +- index.html | 11 ++-- instance-manager.js | 18 +++++- main.js | 24 +++++++- new-connection.html | 62 ++++++++++++++++++++ package-lock.json | 6 ++ package.json | 3 +- styles/editor-instance.css | 134 ++++++++++++++++++++++++++++++++++++++++++++ styles/instance-manager.css | 28 +++++++++ styles/new-connection.css | 3 + styles/style.css | 133 ------------------------------------------- 11 files changed, 281 insertions(+), 143 deletions(-) create mode 100644 new-connection.html create mode 100644 styles/editor-instance.css create mode 100644 styles/instance-manager.css create mode 100644 styles/new-connection.css delete mode 100644 styles/style.css diff --git a/editor-instance.html b/editor-instance.html index 1983bfe..454c6ce 100644 --- a/editor-instance.html +++ b/editor-instance.html @@ -9,7 +9,7 @@ - + diff --git a/index.html b/index.html index 217c363..4f0d500 100644 --- a/index.html +++ b/index.html @@ -5,17 +5,16 @@ SQL++ - + +

+ +

diff --git a/instance-manager.js b/instance-manager.js index e8b803e..115f359 100644 --- a/instance-manager.js +++ b/instance-manager.js @@ -2,6 +2,7 @@ const { ipcRenderer } = require('electron'); const TabGroup = require("electron-tabs"); +const $ = window.jQuery = require("jquery"); let tabGroup = new TabGroup(); let tab = tabGroup.addTab({ @@ -26,4 +27,19 @@ let tab2 = tabGroup.addTab({ visible: true, active: true, webviewAttributes: { "nodeintegration": true }, -}); \ No newline at end of file +}); + +function createNewConnection() { + ipcRenderer.send("instanceManager.openNewConnectionDialog"); +} + +ipcRenderer.on("instanceManager.newConnectionCallback", (event, response) => { + console.log(response); +}); + + +$(document).ready(() => { + $("#new-connection").click(() => { + createNewConnection(); + }) +}) \ No newline at end of file diff --git a/main.js b/main.js index 6cb76c8..88c25b9 100644 --- a/main.js +++ b/main.js @@ -5,6 +5,7 @@ const url = require("url"); let uiWindow; let queryExecutorProcess; +let newConnectionDialog; function createMainWindow() { uiWindow = new BrowserWindow({ @@ -25,7 +26,7 @@ function createMainWindow() { function createQueryExecutorProcess() { queryExecutorProcess = new BrowserWindow({ - show: true + show: false }); queryExecutorProcess.loadURL(url.format({ @@ -57,6 +58,27 @@ app.on("activate", () => { } }); +function createNewConnectionDialog() { + newConnectionDialog = new BrowserWindow({ + width: 400, + height: 470 + }); + newConnectionDialog.loadURL(url.format({ + pathname: path.join(__dirname, "new-connection.html"), + protocol: "file:", + slashes: true + })); + + newConnectionDialog.on("closed", () => { + newConnectionDialog = null; + }); +} + +ipcMain.on("instanceManager.openNewConnectionDialog", (event, payload) => { + createNewConnectionDialog(); +}); + + const { webContents } = require('electron'); // TODO - only send messages to instance manager which will route request to correct webView, rather than diff --git a/new-connection.html b/new-connection.html new file mode 100644 index 0000000..dace021 --- /dev/null +++ b/new-connection.html @@ -0,0 +1,62 @@ + + + + + SQL++ - New connection + + + + + +

Add new connection

+ +

+ Vendor +

+ +

+ Hostname +

+ +

+ Port +

+ +

+ Username +

+ +

+ Password +

+ +

+ + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7d59e86..b05f744 100644 --- a/package-lock.json +++ b/package-lock.json @@ -111,6 +111,12 @@ "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", "dev": true }, + "bulma": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.6.2.tgz", + "integrity": "sha1-9LHRHVrMUaeWROsKKwsQZJ09cfU=", + "dev": true + }, "camelcase": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", diff --git a/package.json b/package.json index 5f05487..5dd96cb 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "jquery-ui": "1.12.1", "jquery.tabulator": "3.4.2", "electron-tabs": "0.9.0", - "uuid": "3.2.1" + "uuid": "3.2.1", + "bulma": "0.6.2" } } diff --git a/styles/editor-instance.css b/styles/editor-instance.css new file mode 100644 index 0000000..99ac763 --- /dev/null +++ b/styles/editor-instance.css @@ -0,0 +1,134 @@ +html, +body { + height: 100%; + 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; + height: 100%; +} + +.flex-wrapper .row.header { + flex: 0 1 auto; + /* background-color: #474A5E; */ + background: #6D8A88; + color: white; +} + +.flex-wrapper .row.content { + flex: 1 1 auto; + display: flex; + flex-direction: column; + height: 100%; +} + +.flex-wrapper .row.footer { + flex: 0 1 auto; + background-color: #474A5E; + color: white; + display: flex; + flex-direction: row; + font-family: monospace; + align-items: center; + height: 20px; +} + +.flex-wrapper .row .split-row { + overflow: auto; +} + +.gutter { + background-color: #474A5E; + background-repeat: no-repeat; + background-position: 50%; +} + +.gutter.gutter-vertical { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); + cursor: ns-resize; +} + +.gutter.gutter-horizontal { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); + cursor: ew-resize; +} + +.CodeMirror { + height: 100%; +} + +.results-row { + color: #ffffff; + background-color: #282a36; + font-family: monospace; +} + +#result-error { + padding: 5px; +} + +#execution-status { + padding: 2px; + flex-basis: 60px; + text-align: center; + font-weight: bold; +} + +#execution-time { + /* background-color: green; */ + flex-basis: auto; + padding: 2px 10px; +} + +#cursor-coords { + margin-left: auto; + padding-right: 10px; +} + +.exec-idle { + background-color: gray; +} + +.exec-running { + background-color: yellow; + color: black; +} + +.exec-ok { + background-color: green; +} + +.exec-error { + background-color: red; + color: black; +} + +.selected-statement { + background-color: #4F4837; +} + +.statement-pointer { + width: 10px; +} \ No newline at end of file diff --git a/styles/instance-manager.css b/styles/instance-manager.css new file mode 100644 index 0000000..8449b9c --- /dev/null +++ b/styles/instance-manager.css @@ -0,0 +1,28 @@ +body { + margin: 0; +} + +.etabs-tabgroup { + background-color: #282a36; +} + +.etabs-tab { + color: white; + background: none; + background-color: #474A5E; + border: none; +} + +.etabs-tab.active { + background: #6D8A88; +} + +.etabs-views { + border: none; +} + +.etabs-buttons button { + width: inherit; + padding: 4px 6px; + background: #6D8A88; +} \ No newline at end of file diff --git a/styles/new-connection.css b/styles/new-connection.css new file mode 100644 index 0000000..97aaae6 --- /dev/null +++ b/styles/new-connection.css @@ -0,0 +1,3 @@ +html, body { + padding: 8px; +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css deleted file mode 100644 index 7ae5727..0000000 --- a/styles/style.css +++ /dev/null @@ -1,133 +0,0 @@ -html, -body { - height: 100%; - 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; - height: 100%; -} - -.flex-wrapper .row.header { - flex: 0 1 auto; - background-color: #474A5E; - color: white; -} - -.flex-wrapper .row.content { - flex: 1 1 auto; - display: flex; - flex-direction: column; - height: 100%; -} - -.flex-wrapper .row.footer { - flex: 0 1 auto; - background-color: #474A5E; - color: white; - display: flex; - flex-direction: row; - font-family: monospace; - align-items: center; - height: 20px; -} - -.flex-wrapper .row .split-row { - overflow: auto; -} - -.gutter { - background-color: #474A5E; - background-repeat: no-repeat; - background-position: 50%; -} - -.gutter.gutter-vertical { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); - cursor: ns-resize; -} - -.gutter.gutter-horizontal { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); - cursor: ew-resize; -} - -.CodeMirror { - height: 100%; -} - -.results-row { - color: #ffffff; - background-color: #282a36; - font-family: monospace; -} - -#result-error { - padding: 5px; -} - -#execution-status { - padding: 2px; - flex-basis: 60px; - text-align: center; - font-weight: bold; -} - -#execution-time { - /* background-color: green; */ - flex-basis: auto; - padding: 2px 10px; -} - -#cursor-coords { - margin-left: auto; - padding-right: 10px; -} - -.exec-idle { - background-color: gray; -} - -.exec-running { - background-color: yellow; - color: black; -} - -.exec-ok { - background-color: green; -} - -.exec-error { - background-color: red; - color: black; -} - -.selected-statement { - background-color: #4F4837; -} - -.statement-pointer { - width: 10px; -} \ No newline at end of file -- cgit v1.2.3