Merge pull request #1 from kimsseTheWolf/InterfaceUpdate

Interface update

.github/workflows/learn_github_actions.yaml

@@ -0,0 +1,13 @@
+name: learn-github-actions
+run-name: ${{ github.actor }} is learning GitHub Actions
+on: [push]
+jobs:
+  check-bats-version:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '14'
+      - run: npm install -g bats
+      - run: bats -v

index.html

@@ -12,10 +12,22 @@
             <div id="saveStatus">Unsaved changes</div>
         </div>
         <div class="menu-group">
-            <button id="newFileButton">New File</button>
-            <button id="openFileButton">Open File</button>
-            <button id="saveFileButton">Save File</button>
-            <button id="renameFileButton">Rename File</button>
+            <div class="button" id="newFileButton">
+                <img src="assets/new-file.svg" width="16px" height="16px" style="margin-right: 5px;"/>
+                <div class="button-hover-content">New File</div>
+            </div>
+            <div class="button" id="openFileButton">
+                <img src="assets/open-file.svg" width="16px" height="16px" style="margin-right: 5px;"/>
+                <div class="button-hover-content">Open File</div>
+            </div>
+            <div class="button" id="saveFileButton">
+                <img src="assets/save-file.svg" width="16px" height="16px" style="margin-right: 5px;"/>
+                <div class="button-hover-content">Save File</div>
+            </div>
+            <div class="button" id="renameFileButton">
+                <img src="assets/rename-file.svg" width="16px" height="16px" style="margin-right: 5px;"/>
+                <div class="button-hover-content">Rename File</div>
+            </div>
         </div>
     </div>
     <div id="container"></div>
@@ -30,20 +42,23 @@
             <option value="json">JSON</option>
             <option value="txt">Plain text</option>
         </select>
-        <div id="cursorPosition">Row: 0, Column: 0</div>
+        <div id="cursorPosition" style="font-size: small;">Row: 0, Column: 0</div>
     </div>
     <script src="renderer.js"></script>
 </body>
 </html>
 <style>
+    :root {
+        --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }
     html, body {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
         overflow: hidden;
         background-color: #353d44;
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        font-family: var(--default-font-family);
         color: white;
         display: flex;
         flex-direction: column;
@@ -78,22 +93,42 @@
         display: flex;
         flex-direction: row;
     }
+    .button {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        padding: 5px;
+        margin-right: 5px;
+        border-radius: 5px;
+        background-color: rgba(0,0,0,0);
+        color: #f8f8f8;
+        font-size: small;
+        transition: all 0.1s ease-in-out;
+    }
+    .button:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+    .button-hover-content {
+        display: none;
+    }
+    .button:hover .button-hover-content {
+        display: block;
+    }
 
     select {
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        font-family: var(--default-font-family);
         padding: 5px;
-        font-size: 16px;
+        font-size: small;
         border: none;
         border-radius: 4px;
         background-color: rgba(0,0,0,0);
         color: #f8f8f8;
         outline: none;
-        -webkit-appearance: none;  /* Removes the default dropdown button in Chrome/Edge */
-        -moz-appearance: none;  /* Removes the default dropdown button in Firefox */
-        appearance: none;  /* Removes the default dropdown button in other browsers */
+        -webkit-appearance: none;  
+        -moz-appearance: none;  
+        appearance: none;  
     }
-
-    /* Add a custom dropdown button */
     select::-ms-expand {
         display: none;
     }
@@ -107,26 +142,18 @@
         background: rgba(0,0,0,0);
         pointer-events: none;
     }
-
-    /* Style for select when it's focused */
     select:focus {
         background-color: rgba(255, 255, 255, 0.2);
     }
-
-    /* Style for options */
     select option {
         padding-top: 20px;
         padding-bottom: 20px;
         background-color: #666;
         color: #fff;
     }
-
-    /* Style for selected option */
     select option:checked {
         background-color: #444;
     }
-
-    /* Style for option hover */
     select option:hover {
         background-color: #555;
     }

main.js

@@ -4,6 +4,7 @@ const fs = require('fs');
 const path = require('path');
 const homedirHandler = require('./homedirHandler');
 const moment = require('moment');
+const themes = require("./styles/stylesManager.js");
 let mainWindow;
 
 // Tray creation
@@ -69,18 +70,24 @@ app.on('ready', () => {
     ipcMain.on('open-file', async () => {
         const { filePaths } = await dialog.showOpenDialog(mainWindow, { properties: ['openFile'] });
         const content = fs.readFileSync(filePaths[0], 'utf-8');
-        mainWindow.webContents.send('file-opened', filePaths[0], content);
+        // get the file name
+        const fileName = path.basename(filePaths[0]);
+        mainWindow.webContents.send('file-opened', filePaths[0], content, fileName);
     });
 
     ipcMain.on('save-file', async (event, filePath, content) => {
         if (!filePath) {
             const { filePath } = await dialog.showSaveDialog(mainWindow, {});
             fs.writeFileSync(filePath, content);
-            mainWindow.webContents.send('file-saved', filePath);
+            // get the file name
+            const fileName = path.basename(filePath);
+            mainWindow.webContents.send('file-saved', filePath, fileName);
         } 
         else {
             fs.writeFileSync(filePath, content);
-            mainWindow.webContents.send('file-saved', filePath);
+            // get the file name
+            const fileName = path.basename(filePath);
+            mainWindow.webContents.send('file-saved', filePath, fileName);
         }
     });
 
@@ -95,12 +102,19 @@ app.on('ready', () => {
                     console.error('Error renaming file:', err);
                 } else {
                     // Send a message back to the renderer process with the new file path
-                    event.reply('file-renamed', newFilePath);
+                    // get the new filename first
+                    const fileName = path.basename(newFilePath);
+                    event.reply('file-renamed', newFilePath, fileName);
                 }
             });
         }
     });
 
+    // styles handler
+    ipcMain.on('get-styles', (event) => {
+        event.reply("got-style", themes)
+    });
+
 });
 
 app.on('window-all-closed', function () {