Add html for new server window

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

Hide file tree

Showing 6 changed files with 115 additions and 20 deletions.
diff --git a/src/main.js b/src/main.js
@@ -62,8 +62,12 @@ function main () {
       // create a new add todo window
       newServerDialog = new Window({
         file: path.join('renderer', 'new_server', 'newserver.html'),
-        width: 500,
-        height: 120,
+        width: 600,
+        height: 400,
+        maxWidth: 600,
+        maxHeight: 400,
+        minWidth: 600,
+        minHeight: 400,
         // close with the main window
         parent: mainWindow
       })
@@ -90,8 +94,8 @@ function main () {
 
     console.log(windowTitle);
     newJupyterWin = new BrowserWindow({
-      width: 1080,
-      height: 768,
+      width: 600,
+      height: 350,
       webPreferences: {
         nodeIntegration: false
       },

diff --git a/src/renderer/add.html b/src/renderer/add.html
@@ -12,7 +12,7 @@
       <form id="todoForm">
         <div class="form-group">
           <input type="url" class="form-control" id="add-input" placeholder="">
-          <small id="emailHelp" class="form-text text-muted">Example: http://localhost:8888, https://your-domain.tld:1080</small>
+          <small id="urlHelp" class="form-text text-muted">Example: http://localhost:8888, https://your-domain.tld:1080</small>
         </div>
         <div class="col-sm">
           <button id="submit-btn" type="submit" class="btn btn-primary float-right">open</button>

diff --git a/src/renderer/add.js b/src/renderer/add.js
@@ -7,17 +7,22 @@ const remote = electron.remote
 
 document.getElementById('submit-btn').addEventListener('click', (evt) => {
   // prevent default refresh functionality of forms
-  evt.preventDefault()
+  evt.preventDefault();
 
-  const input = document.getElementById('add-input')
-
-  ipcRenderer.send('add-todo', input.value)
+  const input = document.getElementById('add-input');
 
-  input.value = ''
+  if (input.value != '') {
+    ipcRenderer.send('add-todo', input.value);
 
-  // Close the window
-  var window = remote.getCurrentWindow();
-  window.close();
+    input.value = '';
+
+    // Close the window
+    var window = remote.getCurrentWindow();
+    window.close();
+  } else {
+    const input = document.getElementById('add-input');
+    input.focus();
+  }
 })
 
 document.getElementById('cancel-btn').addEventListener('click', (evt) => {

diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -17,8 +17,8 @@ <h3>Jupyter Lab's Moon</h3>
         <div class="main-section">
           <h4 class="section-header">Start</h4>
           <ul class="compact-list">
-            <li id="newServerBtn" class="compact-list-item"><a href="javascript:void">New Jupyter server</a></li>
-            <li id="openUrlBtn" class="compact-list-item"><a href="javascript:void">Open url...</a></li>
+            <li class="compact-list-item"><a id="newServerBtn" href="javascript:void">New Jupyter server</a></li>
+            <li class="compact-list-item"><a id="openUrlBtn" href="javascript:void">Open url...</a></li>
           </ul>
         </div>
 

diff --git a/src/renderer/new_server/newserver.css b/src/renderer/new_server/newserver.css
@@ -1,4 +1,64 @@
+body {
+    background-color: #fffbf6 !important;
+}
+
+.need-help-link {
+    text-align: right;
+    position:absolute;
+    bottom:0;
+    right:0;
+    padding-right: 3%;
+    padding-bottom: 1%;
+}
+
 .msg {
     margin-top: 6%;
     text-align: center;
+}
+
+.large-header {
+    padding-top: 10%;
+    padding-bottom: 10%;
+}
+
+.vertical-center {
+    background-color: #fffbf6 !important;
+    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
+    min-height: 100vh; /* These two lines are counted as one :-)       */
+
+    display: flex;
+    align-items: center;
+}
+
+.icon-col {
+    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 {
+    padding-top: 2%;
+    padding-bottom: 2%;
+    /* margin-top: 5%; */
+    height: 20%;
+    /* table-layout: fixed; */
+}
+
+.descriptive-option:hover {
+    background: #f8f2eb;
+    cursor: pointer;
 }
diff --git a/src/renderer/new_server/newserver.html b/src/renderer/new_server/newserver.html
@@ -8,19 +8,45 @@
   </head>
 
   <body>
-    <div class="container-fluid">
+    <div class="container">
       <div class="container">
-        <p class="msg">Not implemented yet :(</p>
-        <div class="col-sm">
-          <button id="close-btn" type="submit" class="btn btn-primary float-right">close</button>
+        <div class="container large-header">
+          <h2>Create new server</h2>
+          Choose an option to proceed
         </div>
-    </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>
+            </div>
+            <div class="col-xs-11 text-col">
+              <h4>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>
+            </div>
+            <div class="col-xs-11 text-col">
+              <h4>Advanced user</h4>
+              I want to make sure everything is right    
+            </div>
+          </div>
+        </div>
+        <div class="need-help-link">
+          <a href="javascript:void">Need help?</a>
+        </div>
+      </div>
     </div>
 
     <script src="./newserver.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>