Fix open url, add delete buttons to recent list items and fix help se…

…ction links
suyashmahar · Aug 23, 2020 · e980bab · e980bab
1 parent 7ceff72
commit e980bab
Show file tree

Hide file tree

Showing 16 changed files with 177 additions and 76 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,5 @@
 
-# Electron Todo
+# Europa - Feature rich wrapper around Jupyter Lab
 
-A simple todo app made with Electron.
-
-[See the tutorial here](https://medium.com/@codedraken)
-
-If something doesn't work in the future check the [Electron Breaking Changes page](https://github.com/electron/electron/blob/master/docs/api/breaking-changes.md).
+## Screenshot
+![Screenshot of Europa's welcome page](github-assets/img/welcomescreen.png)
diff --git a/github-assets/img/welcomescreen.png b/github-assets/img/welcomescreen.png
diff --git a/renderer/index.js b/renderer/index.js
diff --git a/DataStore.js → src/DataStore.js b/DataStore.js → src/DataStore.js
diff --git a/Window.js → src/Window.js b/Window.js → src/Window.js
diff --git a/main.js → src/main.js b/main.js → src/main.js
@@ -5,8 +5,10 @@ const { app, ipcMain, BrowserWindow } = require('electron')
 
 const Window = require('./Window')
 const DataStore = require('./DataStore')
+const electronLocalshortcut = require('electron-localshortcut');
+
+require('electron-reload')(process.cwd())
 
-require('electron-reload')(__dirname)
 
 // create a new todo store name "Todos Main"
 const todosData = new DataStore({ name: 'Todos Main' })
@@ -19,6 +21,8 @@ function main () {
 
   // add todo window
   let addTodoWin
+  let newJupyterWin
+  let newServerDialog
 
   // TODO: put these events into their own file
 
@@ -77,30 +81,46 @@ function main () {
 
   // create add todo window
   ipcMain.on('open-url', (e, url) => {
-    console.log(url);
-    // if addTodoWin does not already exist
-    if (!newJupyterWin) {
-      // create a new add todo window
-      newJupyterWin = new BrowserWindow({
-        width: 500,
-        height: 120,
-        // close with the main window
-        parent: mainWindow
-      })
-      newJupyterWin.loadURL(url);
-
-      // Disable menu bar
-      // newJupyterWin.setMenu(null)
-      // newJupyterWin.setAutoHideMenuBar(true)
 
-      // cleanup
-      newJupyterWin.on('closed', () => {
-        newJupyterWin = null
-      })
-      newJupyterWin.once('ready-to-show', () => {
-        newJupyterWin.show()
-      })
+    // Create a title for the new window
+    var windowTitle = 'Europa @ '.concat(url.substring(0, 100));
+    if (url.length > 100) {
+      windowTitle.concat('...');
     }
+
+    console.log(windowTitle);
+    newJupyterWin = new BrowserWindow({
+      width: 1080,
+      height: 768,
+      webPreferences: {
+        nodeIntegration: false
+      },
+      title: windowTitle
+    })
+    newJupyterWin.loadURL(url);
+
+    // Disable menu bar
+    newJupyterWin.setMenu(null)
+    newJupyterWin.setAutoHideMenuBar(true)
+
+    // cleanup
+    newJupyterWin.on('closed', () => {
+      newJupyterWin = null
+    })
+    newJupyterWin.once('ready-to-show', () => {
+      newJupyterWin.show()
+    })
+
+    // Prevent the title from being updated
+    newJupyterWin.on('page-title-updated', (evt) => {
+      evt.preventDefault();
+    });
+
+    // Register shortcuts
+    electronLocalshortcut.register(newJupyterWin, 'Ctrl+Shift+W', () => {
+      newJupyterWin.close();
+      console.log('You pressed ctrl+shift+w');
+    });
   })
 
   // add-todo from add todo window

diff --git a/package-lock.json → src/package-lock.json b/package-lock.json → src/package-lock.json
diff --git a/package.json → src/package.json b/package.json → src/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "electron": "^3.0.4",
+    "electron-localshortcut": "^3.2.1",
     "electron-reload": "^1.2.5",
     "electron-store": "^2.0.0",
     "spectre.css": "^0.5.3"

diff --git a/renderer/add.html → src/renderer/add.html b/renderer/add.html → src/renderer/add.html
diff --git a/renderer/add.js → src/renderer/add.js b/renderer/add.js → src/renderer/add.js
diff --git a/renderer/index.html → src/renderer/index.html b/renderer/index.html → src/renderer/index.html
@@ -4,17 +4,15 @@
   <head>
     <meta charset="UTF-8">
     <title>Jupytron</title>
-    <!-- <link rel="stylesheet" href="../node_modules/spectre.css/dist/spectre.min.css"> -->
     <link rel="stylesheet" href="style.css">
-    <!-- <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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   </head>
 
   <body>
     <div class="jumbotron vertical-center">
       <div class="container">
-        <h1>Jupytron</h1>
-        <h3>Editing evolved</h3>
+        <h1>Europa</h1>
+        <h3>Jupyter Lab's Moon</h3>
 
         <div class="main-section">
           <h4 class="section-header">Start</h4>
@@ -34,11 +32,11 @@ <h4 class="section-header">Recent</h4>
         <div class="main-section">
           <h4 class="section-header">Help</h4>
           <ul class="compact-list">
-            <li class="compact-list-item"><a href="#">Keyboard shortcuts</a></li>
-            <li class="compact-list-item"><a href="#">Tips and tricks</a></li>
-            <li class="compact-list-item"><a href="#">Product documentation</a></li>
-            <li class="compact-list-item"><a href="#">Report an issue</a></li>
-            <li class="compact-list-item"><a href="#">GitHub repository</a></li>
+            <li class="compact-list-item"><a href="#" id="helpKeyboardShortcuts">Keyboard shortcuts</a></li>
+            <li class="compact-list-item"><a href="#" id="helpTipsAndTricks">Tips and tricks</a></li>
+            <li class="compact-list-item"><a href="#" id="helpProductDocumentation">Product documentation</a></li>
+            <li class="compact-list-item"><a href="#" id="helpReportIssue">Report an issue</a></li>
+            <li class="compact-list-item"><a href="#" id="helpGitHubRepo">GitHub repository</a></li>
           </ul>
         </div>
       </div>

diff --git a/src/renderer/index.js b/src/renderer/index.js
@@ -0,0 +1,68 @@
+'use strict'
+
+const { ipcRenderer, shell } = require('electron')
+
+// delete todo by its text value ( used below in event listener)
+const recentItemClicked = (e) => {
+  console.log(e.target.textContent);
+  // ipcRenderer.send('delete-todo', e.target.textContent)
+  ipcRenderer.send('open-url', e.target.textContent);
+}
+const deleteRecentItemClicked = (e) => {
+  console.log(e.target.getAttribute('id'));
+  ipcRenderer.send('delete-todo', e.target.getAttribute('id'))
+}
+
+document.getElementById('openUrlBtn').addEventListener('click', () => {
+  ipcRenderer.send('open-url-window')
+})
+document.getElementById('newServerBtn').addEventListener('click', () => {
+  ipcRenderer.send('new-server-window')
+})
+
+// Listeners for help links
+document.getElementById('helpReportIssue').addEventListener('click', () => {
+  shell.openExternal('https://github.com/suyashmahar/jupytron/issues')
+})
+document.getElementById('helpGitHubRepo').addEventListener('click', () => {
+  shell.openExternal('https://github.com/suyashmahar/jupytron')
+})
+document.getElementById('helpProductDocumentation').addEventListener('click', () => {
+  shell.openExternal('https://github.com/suyashmahar/jupytron/wiki')
+})
+document.getElementById('helpTipsAndTricks').addEventListener('click', () => {
+  shell.openExternal('https://github.com/suyashmahar/jupytron/wiki/TipsAndTricks')
+})
+document.getElementById('helpKeyboardShortcuts').addEventListener('click', () => {
+  shell.openExternal('https://github.com/suyashmahar/jupytron/wiki/KeyboardShortcuts')
+})
+
+
+https://github.com/suyashmahar/jupytron/wiki
+
+// on receive todos
+ipcRenderer.on('todos', (event, todos) => {
+  // get the todoList ul
+  const todoList = document.getElementById('todoList')
+
+  // create html string
+  const todoItems = todos.reduce((html, todo) => {
+    var itemDeleteBtnHtml = `<a id="${todo}" href="javascript:void" class="inline-btn-link-delete">✕</a>`
+    html += `<li class="recent-item"><a class="recent-item-link" href="javascript:void" id="${todo}">${todo}</a>${itemDeleteBtnHtml}</li>`
+
+    return html
+  }, '')
+
+  // set list html to the todo items
+  todoList.innerHTML = todoItems
+
+  // Add click handlers to the link
+  todoList.querySelectorAll('.recent-item-link').forEach(item => {
+    item.addEventListener('click', recentItemClicked)
+  })
+
+  // Add click handlers to the delete button
+  todoList.querySelectorAll('.inline-btn-link-delete').forEach(item => {
+    item.addEventListener('click', deleteRecentItemClicked)
+  })
+})
diff --git a/renderer/new_server/newserver.css → src/renderer/new_server/newserver.css b/renderer/new_server/newserver.css → src/renderer/new_server/newserver.css
diff --git a/renderer/new_server/newserver.html → src/renderer/new_server/newserver.html b/renderer/new_server/newserver.html → src/renderer/new_server/newserver.html
diff --git a/renderer/new_server/newserver.js → src/renderer/new_server/newserver.js b/renderer/new_server/newserver.js → src/renderer/new_server/newserver.js
diff --git a/renderer/style.css → src/renderer/style.css b/renderer/style.css → src/renderer/style.css
@@ -3,6 +3,25 @@ body {
   background-color: #fffbf6 !important;
 }
 
+.recent-item-link {}
+
+.inline-btn-link-delete {
+  padding-left: 0.5%;
+  opacity: 0;
+  font-size: 80%;
+  text-decoration: none !important;
+}
+
+.inline-btn-link-delete:hover {
+  opacity: 1;
+  color: red;
+}
+
+.recent-item-link:hover + .inline-btn-link-delete {
+  opacity: 1;
+  color: red;
+}
+
 .vertical-center {
   background-color: #fffbf6 !important;
   min-height: 100%;  /* Fallback for browsers do NOT support vh unit */