Add new button for open with code

kimsseTheWolf · Jan 8, 2024 · 09de659 · 09de659
1 parent ba2dec7
commit 09de659
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 14 deletions.
diff --git a/assets/add-bold.svg b/assets/add-bold.svg
diff --git a/assets/minus-bold.svg b/assets/minus-bold.svg
diff --git a/assets/vscode.svg b/assets/vscode.svg
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 <body>
     <div class="menu">
         <div class="menu-group">
-            <div id="pathDisplay"></div>
+            <div id="pathDisplay" style="margin-left: 5px;"></div>
             <div id="saveStatus">Unsaved changes</div>
         </div>
         <div class="menu-group">
@@ -28,20 +28,32 @@
                 <img src="assets/rename-file.svg" width="16px" height="16px" style="margin-right: 5px;"/>
                 <div class="button-hover-content">Rename File</div>
             </div>
+            <div class="button" id="openWithCode">
+                <img src="assets/vscode.svg" width="16px" height="16px" style="margin-right: 5px;" />
+            </div>
         </div>
     </div>
     <div id="container"></div>
-    <div class="menu">
-        <select id="language">
-            <option value="javascript">JavaScript</option>
-            <option value="html">HTML</option>
-            <option value="css">CSS</option>
-            <option value="python">Python</option>
-            <option value="cpp">C++</option>
-            <option value="java">Java</option>
-            <option value="json">JSON</option>
-            <option value="txt">Plain text</option>
-        </select>
+    <div class="menu" id="footerMenu">
+        <div class="menu-group">
+            <select id="language">
+                <option value="javascript">JavaScript</option>
+                <option value="html">HTML</option>
+                <option value="css">CSS</option>
+                <option value="python">Python</option>
+                <option value="cpp">C++</option>
+                <option value="java">Java</option>
+                <option value="json">JSON</option>
+                <option value="txt">Plain text</option>
+            </select>
+            <div class="button" id="increaseFontSizeButton">
+                <img src="assets/add-bold.svg" width="16px" height="16px"/>
+            </div>
+            <div class="button" id="textSize">-</div>
+            <div class="button" id="decreaseFontSizeButton">
+                <img src="assets/minus-bold.svg" width="16px" height="16px"/>
+            </div>
+        </div>
         <div id="cursorPosition" style="font-size: small;">Row: 0, Column: 0</div>
     </div>
     <script src="renderer.js"></script>
@@ -64,6 +76,11 @@
         flex-direction: column;
         user-select: none;
     }
+    #footerMenu {
+        background-color: rgba(0,0,0,0);
+        margin: 0px;
+        padding: 5px;
+    }
     #container {
         flex: auto;
         width: 100%;
@@ -109,12 +126,12 @@
     .button:hover {
         background-color: rgba(255, 255, 255, 0.2);
     }
-    .button-hover-content {
+    /* .button-hover-content {
         display: none;
     }
     .button:hover .button-hover-content {
         display: block;
-    }
+    } */
 
     select {
         font-family: var(--default-font-family);

diff --git a/main.js b/main.js
@@ -2,6 +2,7 @@
 const { app, BrowserWindow, ipcMain, dialog, globalShortcut, Tray, Menu } = require('electron');
 const fs = require('fs');
 const path = require('path');
+const {exec} = require('child_process');
 const homedirHandler = require('./homedirHandler');
 const moment = require('moment');
 const themes = require("./styles/stylesManager.js");
@@ -115,6 +116,16 @@ app.on('ready', () => {
         event.reply("got-style", themes)
     });
 
+    // open with code
+    ipcMain.on("open-with-code", (event, filePath) => {
+        console.log(filePath);
+        exec(`code "${filePath}"`, (err, stdout, stderr) => {
+            if (err) {
+                console.log(err);
+            }
+        });
+    })
+
 });
 
 app.on('window-all-closed', function () {

diff --git a/renderer.js b/renderer.js
@@ -3,6 +3,7 @@ let editor;
 let currentFilePath;
 let client;
 let isSaved = false;
+let currentTextSize = 16;
 
 const defaultTheme = {
     base: "vs-dark",
@@ -360,6 +361,7 @@ require(['vs/editor/editor.main'], function() {
         value: '',
         language: 'javascript',
         theme: 'currentTheme',
+        fontSize: currentTextSize,
     });
 
     editor.onDidChangeCursorPosition(function (e) {
@@ -405,6 +407,8 @@ require(['vs/editor/editor.main'], function() {
         currentFilePath = filePath;
         document.getElementById("pathDisplay").innerText = fileName;
     });
+
+    document.getElementById('textSize').textContent = currentTextSize;
 });
 
 function openFile() {
@@ -448,12 +452,35 @@ async function handleRenameFile() {
     console.log(filePath);
 }
 
+function increaseTextSize() {
+    currentTextSize += 1;
+    editor.updateOptions({
+        fontSize: currentTextSize
+    });
+    document.getElementById('textSize').textContent = currentTextSize;
+}
+
+function decreaseTextSize() {
+    currentTextSize -= 1;
+    editor.updateOptions({
+        fontSize: currentTextSize
+    });
+    document.getElementById('textSize').textContent = currentTextSize;
+}
+
+function openWithCode() {
+    window.ipcRenderer.send("open-with-code", currentFilePath);
+}
+
 
 document.getElementById("pathDisplay").innerText = currentFilePath;
 document.getElementById('openFileButton').addEventListener('click', openFile);
 document.getElementById('newFileButton').addEventListener('click', createNewFile);
 document.getElementById('saveFileButton').addEventListener('click', saveFile);
 document.getElementById('renameFileButton').addEventListener('click', renameFile);
+document.getElementById('increaseFontSizeButton').addEventListener('click', increaseTextSize);
+document.getElementById('decreaseFontSizeButton').addEventListener('click', decreaseTextSize);
+document.getElementById('openWithCode').addEventListener('click', openWithCode);
 
 window.addEventListener('resize', function () {
     editor.layout();