From 60c8ba238cc6f966d046317699a48e3c22e6f050 Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Tue, 25 Apr 2017 08:57:15 -0500 Subject: [PATCH] Add new webui design from Joe --- webui/assets/chevron-down.png | Bin 0 -> 3655 bytes webui/assets/main.css | 63 --------- webui/assets/main.js | 114 --------------- webui/assets/nav_cluster.svg | 1 + webui/assets/nav_console.svg | 1 + webui/assets/nav_documentation.svg | 1 + webui/assets/nav_item1.svg | 1 + webui/assets/style.css | 220 +++++++++++++++++++++++++++++ webui/index.html | 209 +++++++++++++++++++++------ 9 files changed, 389 insertions(+), 221 deletions(-) create mode 100644 webui/assets/chevron-down.png delete mode 100644 webui/assets/main.css delete mode 100644 webui/assets/main.js create mode 100644 webui/assets/nav_cluster.svg create mode 100644 webui/assets/nav_console.svg create mode 100644 webui/assets/nav_documentation.svg create mode 100644 webui/assets/nav_item1.svg create mode 100644 webui/assets/style.css diff --git a/webui/assets/chevron-down.png b/webui/assets/chevron-down.png new file mode 100644 index 0000000000000000000000000000000000000000..3312489a21a768a90cb73633e3a596c792c6941b GIT binary patch literal 3655 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 literal 0 HcmV?d00001 diff --git a/webui/assets/main.css b/webui/assets/main.css deleted file mode 100644 index 3db45d2f1..000000000 --- a/webui/assets/main.css +++ /dev/null @@ -1,63 +0,0 @@ -.output { - overflow: auto; - padding: 0 8px; -} - -.output .query { - font-family: monospace; -} - -.output .response { - font-family: monospace; -} - -.input-bar { - padding-right: 2em; - background-color: #eeeeee; -} - -.input-textarea { - font-family: monospace; - font-size: 14px; - background-color: #dddddd; - width: 100%; - border: 0; - outline: 0; - margin: 1em; -} - -body { - padding-top: 5rem; -} - -.controls { - padding: 1em; -} - -.output { - padding: 1em; -} - -.result { - background-color: #eeeeee; - padding: 1em; - margin-top: 1em; -} -.result > .tab-content > .tab-pane { - padding: 1em; -} - -.query { - background-color: #dddddd; - padding: 0.5em -} - -#exTab3 .nav-pills > li > a { - border-radius: 4px 4px 0 0 ; -} - -#exTab3 .tab-content { - color : white; - background-color: #428bca; - padding : 5px 15px; -} diff --git a/webui/assets/main.js b/webui/assets/main.js deleted file mode 100644 index efd0542ed..000000000 --- a/webui/assets/main.js +++ /dev/null @@ -1,114 +0,0 @@ -class REPL { - constructor(input, output) { - this.input = input - this.output = output - this.history = [] - this.history_index = 0 - this.history_buffer = '' - this.result_number = 0 - } - bind_events() { - const repl = this - const keys = { - ENTER: 13, - UP_ARROW: 38, - DOWN_ARROW: 40 - } - - this.input.addEventListener("keydown", (e) => { - if (e.keyCode == keys.UP_ARROW) { - e.preventDefault() - if (this.input.value.substring(0, this.input.selectionStart).indexOf('\n') == '-1') { - if (this.history_index == 0) { - return - } else { - if (this.history_index == this.history.length) { - this.history_buffer = this.input.value - } - this.history_index-- - this.input.value = this.history[this.history_index] - this.input.setSelectionRange(this.input.value.length, this.input.value.length) - } - } - } - if (e.keyCode == keys.DOWN_ARROW) { - e.preventDefault() - if (this.input.value.substring(this.input.selectionEnd, this.input.length).indexOf('\n') == '-1') { - if (this.history_index == this.history.length) { - return - } else { - this.history_index++ - if (this.history_index == this.history.length) { - this.input.value = this.history_buffer - } else { - this.input.value = this.history[this.history_index] - } - this.input.setSelectionRange(this.input.value.length, this.input.value.length) - } - } - } - if (e.keyCode == keys.ENTER && !e.shiftKey) { - e.preventDefault() - this.history_buffer = '' - this.history_index = this.history.length - this.history[this.history_index] = this.input.value - this.history_index++ - this.process_query(this.input.value) - this.input.value = "" - } - }) - } - - process_query(query) { - var xhr = new XMLHttpRequest(); - var dbname = 'foo'; // todo: get db name from dropdown menu - xhr.open('POST', '/db/' + dbname + '/query'); - xhr.setRequestHeader('Content-Type', 'application/text'); - - const repl = this - xhr.onload = function() { - repl.result_number++ -//const entry = document.createElement('p') - const result = ( - '
' + - '
    ' + - '
  • ' + - 'Result' + - '
    • ' + - '
  • ' + - 'Raw' + - '
    • ' + - '
' + -'' + - '
' + - '
' + - '

' + - query + - '

' + - '

Response

' + - '

' + - xhr.responseText + - '

' + - '
' + - '
' + - '' + - '' + - '' + - '' + - '
Response code' + xhr.status + '
Response text' + xhr.responseText + '
Response URL' + xhr.responseURL + '
' + - '
' + - '
' + - '
') - // TODO: remove jquery - $(repl.output).prepend($(result)) - }; - xhr.send(query); - } -} - -function startup() { - const input = document.querySelector('.input-textarea') - const output = document.querySelector('.output') - repl = new REPL(input, output) - repl.bind_events() -} diff --git a/webui/assets/nav_cluster.svg b/webui/assets/nav_cluster.svg new file mode 100644 index 000000000..baf6310ea --- /dev/null +++ b/webui/assets/nav_cluster.svg @@ -0,0 +1 @@ +nav_cluster_1 \ No newline at end of file diff --git a/webui/assets/nav_console.svg b/webui/assets/nav_console.svg new file mode 100644 index 000000000..2263c2a69 --- /dev/null +++ b/webui/assets/nav_console.svg @@ -0,0 +1 @@ +nav_console \ No newline at end of file diff --git a/webui/assets/nav_documentation.svg b/webui/assets/nav_documentation.svg new file mode 100644 index 000000000..12cd2108c --- /dev/null +++ b/webui/assets/nav_documentation.svg @@ -0,0 +1 @@ +documentation \ No newline at end of file diff --git a/webui/assets/nav_item1.svg b/webui/assets/nav_item1.svg new file mode 100644 index 000000000..d6d7f779e --- /dev/null +++ b/webui/assets/nav_item1.svg @@ -0,0 +1 @@ +nav_item1 \ No newline at end of file diff --git a/webui/assets/style.css b/webui/assets/style.css new file mode 100644 index 000000000..940d6657f --- /dev/null +++ b/webui/assets/style.css @@ -0,0 +1,220 @@ +*{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +body{ + font-family: sans-serif; + background-color: #fbfcfd; + margin: 0; + color: #102445; +} +h2{ + margin-bottom: 30px; +} + +h5{ + text-transform: uppercase; + letter-spacing: 2px; + line-height: 1.21; + margin: 0; +} +a{ + line-height: 1.38; + letter-spacing: 0.2px; + text-decoration: none; + color: #102445; +} + + +a:hover{ + color: #1db598; +} + +textarea{ + width: 100%; + margin-bottom: 10px; + border-radius: 2px; + background-color: #fbfcfd; + border: solid 1.5px #e4eff4; + font-family: monospace; + font-size: 16px; + line-height: 1.5; + letter-spacing: 1.1px; + outline: none; + padding: 30px; +} + + +select{ + /*-webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: url("img/chevron-down.png") no-repeat calc(100% - 10px) !important;*/ + border-radius: 3px; + background-color: #fbfcfd; + width: 187px; + height: 50px; + border: solid 1.5px #e4eff4; + font-size: 18px; + font-weight: bold; + line-height: 1.39; + letter-spacing: 0.2px; + color: #102445; + padding: 10.5px; + +} + +button{ + width: 165px; + height: 50px; + border-radius: 3px; + background-color: #1db598; + outline: none; + border: none; + font-size: 16px; + color: white; +} + +em{ + font-style: normal; + opacity: 0.5; + font-size: 14px; + font-weight: 500; + letter-spacing: 0.2px; + color: #102445; +} + +.header{ + height: 92px; + display: flex; + align-items: center; + justify-content: space-between; + width: 90%; + margin: auto; +} + +.container{ + display: flex; + height:100%; + min-height: 100vh; +} +.nav{ + color: white; + display: flex; + flex-direction: column; + width: 150px; + background: #3c5f8d; +} + +.nav-item{ + height:150px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + border-bottom: 3px solid #2a4871; + cursor: pointer; +} + +.nav-active{ + background: #f2f7f9; + font-weight: bold; + color: #1db598; +} + + + +.interface{ + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + background: #f2f7f9; +} + +.query{ + margin-bottom: 30px; +} +.query, +.output-container{ + width: 75%; +} + +.output{ + margin-bottom: 30px; +} + +.input-controls{ + display: flex; + justify-content: flex-end; +} + +.tabs{ + display: flex; + background: #eaf2f6; +} +.active-tab{ + background: white; + font-weight: bold; + color: #1db598; + +} + +.tab{ + height:60px; + width: 100px; + border-top-right-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + visibility: visible; + cursor: pointer; + +} + +.pane{ + background: white; + padding: 30px; + display: none; +} + +.active{ + display: block; +} + + + +.result-io-header{ + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.result-input, +.result-ouput{ + border-radius: 2px; + background-color: #fafafa; + border: solid 1.5px #e4eff4; + font-family: monospace; + font-size: 16px; + line-height: 1.5; + letter-spacing: 1.1px; + color: #102445; + padding: 15px; + margin-bottom: 15px; +} + + +.result-ouput{ + background-color: #edf9f7; + border-left: solid 4px #1db598; +} + + +.raw{ + height: 253px; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/webui/index.html b/webui/index.html index 1fe4b9f68..a14d202bf 100644 --- a/webui/index.html +++ b/webui/index.html @@ -1,51 +1,172 @@ - - - - - - - - -
-
-
- -
- 1 - 2 -
-
- +
+ + Cluster Admin +
+
+ + Documentation
-
+
- - - - - - +
+

Query

+ +
+ + +     + +
+
+ + +
+ +

Output

+
+ + +
+ +
+ + + +
+ +
+ + +