Add html for advanced user config

suyashmahar · Aug 24, 2020 · e18c928 · e18c928
1 parent f9e2fc6
commit e18c928
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 23 deletions.
diff --git a/src/main.js b/src/main.js
@@ -9,7 +9,6 @@ const electronLocalshortcut = require('electron-localshortcut');
 
 require('electron-reload')(process.cwd())
 
-
 // create a new todo store name "Todos Main"
 const todosData = new DataStore({ name: 'Todos Main' })
 
@@ -73,8 +72,8 @@ function main () {
       })
 
       // Disable menu bar
-      newServerDialog.setMenu(null)
-      newServerDialog.setAutoHideMenuBar(true)
+      // newServerDialog.setMenu(null)
+      // newServerDialog.setAutoHideMenuBar(true)
 
       // cleanup
       newServerDialog.on('closed', () => {

diff --git a/src/renderer/new_server/advanceduser.css b/src/renderer/new_server/advanceduser.css
diff --git a/src/renderer/new_server/advanceduser.html b/src/renderer/new_server/advanceduser.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Create new server</title>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
+        <link rel="stylesheet" href="newserver.css">
+    </head>
+
+    <body>
+        <div class="container">
+            <div class="container large-header" id="advanced-config-header">
+                <a class="back-btn" href="javascript:void" id="backBtn"><i class="fas fa-arrow-left fa-2x"></i></a>
+                <h2 style="display: inline;">Advanced configuration</h2>
+            </div>
+
+            <div class="input-group mb-3">
+                <input type="text" class="form-control" placeholder="Path to python interpreter" aria-label="Recipient's username" aria-describedby="basic-addon2" id="pythonInterpreterPath">
+                <div class="input-group-append form-inline-link-div">
+                    <a class="form-inline-link" href="javascript:void" id="pythonInterpreterPathBtn"><i class="fas fa-search"></i></a>
+                </div>
+            </div>
+
+            <div class="input-group mb-3">
+                <input type="text" class="form-control" placeholder="Path to initial directory" aria-label="Recipient's username" aria-describedby="basic-addon2" id="pythonInterpreterPath">
+                <div class="input-group-append form-inline-link-div">
+                    <a class="form-inline-link" href="javascript:void" id="pythonInterpreterPathBtn"><i class="fas fa-search"></i></a>
+                </div>
+            </div>
+
+            <div class="input-group mb-3">
+                <input type="text" class="form-control" placeholder="Port number (number or 'auto')" aria-label="Recipient's username" aria-describedby="basic-addon2" id="pythonInterpreterPath">
+                <div class="input-group-append form-inline-link-div">
+                    <a class="form-inline-link" href="javascript:void" id="pythonInterpreterPathBtn"></a>
+                </div>
+            </div>
+
+            <div class="col-sm advanced-config-btn-grp">
+                <button id="submitBtn" type="submit" class="btn btn-primary float-right">start</button>
+                <button id="cancelBtn" type="cancel" class="btn btn-secondary float-right">cancel</button>
+            </div>
+
+        </div>
+
+        <div class="need-help-link">
+            <a href="javascript:void">Need help?</a>
+        </div>
+
+        <script src="./advanceduser.js"></script>
+        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+        <script src="https://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
+        <script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
+        <script src="https://kit.fontawesome.com/ad56bed05a.js" crossorigin="anonymous"></script>
+        <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
+  </body>
+
+</html>
diff --git a/src/renderer/new_server/advanceduser.js b/src/renderer/new_server/advanceduser.js
@@ -0,0 +1,17 @@
+'use strict'
+
+const { ipcRenderer } = require('electron')
+const electron = require('electron')
+const path = require('path')
+const remote = electron.remote
+
+document.getElementById('backBtn').addEventListener('click', (evt) => {
+    var window = remote.getCurrentWindow();
+    window.webContents.goBack()
+})
+
+document.getElementById('cancelBtn').addEventListener('click', (evt) => {
+    var window = remote.getCurrentWindow();
+    window.close()
+})
+
diff --git a/src/renderer/new_server/newserver.css b/src/renderer/new_server/newserver.css
@@ -3,6 +3,7 @@ body {
 }
 
 .need-help-link {
+    font-size: small;
     text-align: right;
     position:absolute;
     bottom:0;
@@ -18,9 +19,37 @@ body {
 
 .large-header {
     padding-top: 10%;
+    padding-bottom: 8%;
+    padding-left: 0;
+}
+
+.back-btn {
+    padding-right: 3%;
+}
+
+.advanced-config-btn-grp {
+    margin-top: 7%;
+}
+
+.form-inline-link-div {
+    width: 15%;
+    display: flex;
+    justify-content: center;
+}
+
+.form-inline-link {
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+#advanced-config-header {
     padding-bottom: 10%;
 }
 
+.no-top-padding {
+    padding-top: 0%;
+}
+
 .vertical-center {
     background-color: #fffbf6 !important;
     min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
@@ -34,31 +63,21 @@ body {
     margin-right:0%; 
     padding-right: 0%;
     padding-left: 1%;
-    opacity: 0.8;
 }
 
 .text-col {
     padding-left: 2.5%;
-    opacity: 0.8;
-}
-
-.icon-col:hover {
-    opacity: 1;
-}
-
-.text-col:hover {
-    opacity: 1;
 }
 
 .descriptive-option {
+    opacity: 0.8;
     padding-top: 2%;
     padding-bottom: 2%;
-    /* margin-top: 5%; */
     height: 20%;
-    /* table-layout: fixed; */
 }
 
 .descriptive-option:hover {
+    opacity: 1;
     background: #f8f2eb;
     cursor: pointer;
 }
diff --git a/src/renderer/new_server/newserver.html b/src/renderer/new_server/newserver.html
@@ -9,29 +9,29 @@
 
   <body>
     <div class="container">
-      <div class="container">
+      <!-- <div class="container"> -->
         <div class="container large-header">
           <h2>Create new server</h2>
           Choose an option to proceed
         </div>
         <div class="container descriptive-option" id="beginnerUser">
           <div class="row">
             <div class="col-xs-1 my-auto icon-col">
-              <i class="fas fa-play fa-2x fa-fw"></i>
+              <i class="fas fa-play fa-2x fa-fw text-primary"></i>
             </div>
             <div class="col-xs-11 text-col">
-              <h4>Beginner</h4>
+              <h4 class="text-primary">Beginner</h4>
               I just need local JupyterLab running
             </div>
           </div>
         </div>
         <div class="container descriptive-option" id="advancedUser">
           <div class="row">
             <div class="col-xs-1 my-auto icon-col">
-              <i class="fas fa-cogs fa-2x fa-fw"></i>
+              <i class="fas fa-cogs fa-2x fa-fw text-primary"></i>
             </div>
             <div class="col-xs-11 text-col">
-              <h4>Advanced user</h4>
+              <h4 class="text-primary">Advanced user</h4>
               I want to make sure everything is right    
             </div>
           </div>

diff --git a/src/renderer/new_server/newserver.js b/src/renderer/new_server/newserver.js
@@ -3,9 +3,11 @@
 const { ipcRenderer } = require('electron')
 const electron = require('electron')
 const path = require('path')
+const url = require('url')
 const remote = electron.remote
 
-document.getElementById('close-btn').addEventListener('click', (evt) => {
-  var window = remote.getCurrentWindow();
-  window.close();
+document.getElementById('advancedUser').addEventListener('click', (evt) => {
+  var filePath = path.join('renderer', 'new_server', 'advanceduser.html');
+  console.log(filePath);
+  remote.getCurrentWindow().loadFile(filePath);
 })