Merge pull request #6 from ridvanaltun/next

Next

README.md

@@ -1,6 +1,60 @@
-# Turkish Deasciifier
+<div align="center">
+  <img
+    src="./assets/images/logo.png"
+    alt="Turkish Deasciifier Logo"
+    height="128"
+  />
+  <p>
+    <h3>
+      <b>
+        Turkish Deasciifier
+      </b>
+    </h3>
+  </p>
+  <p>
+    <b>
+      Tray application for Turkish Deasciifier
+    </b>
+  </p>
+  <br/>
+  <img
+    src="./docs/preview.png"
+    alt="Preview Image"
+    width="600"
+  />
+  <br/>
+  <br/>
+  <p>
 
 [![Build Status](https://github.com/ridvanaltun/turkish-deasciifier/actions/workflows/publish.yml/badge.svg)](https://github.com/ridvanaltun/turkish-deasciifier/actions/workflows/publish.yml)
 [![Github Release](https://img.shields.io/github/v/release/ridvanaltun/turkish-deasciifier?include_prereleases)](https://github.com/ridvanaltun/turkish-deasciifier/releases)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+  </p>
+</div>
+
+### **Features**
+
+**Deasciifier:** Adapt your texts to Turkish with one click.
+
+**Asciifier:** Also, set your Turkish texts to ASCII with one click.
+
+**Offline:** It works offline, no internet required.
+
+**Tray Application:** It runs as a tray application, not bothering you with dummy screens.
+
+**Multiplatform:** Every platform are supported; macOS, Windows, and even Linux.
+
+**Auto Update:** It comes with an updater, you can easily update the app.
+
+## **Authors**
+
+This project exists thanks to all the people who contribute.
+
+<a href = "https://github.com/ridvanaltun/turkish-deasciifier/graphs/contributors">
+  <img src = "https://contrib.rocks/image?repo=ridvanaltun/turkish-deasciifier"/>
+</a>
+
+## **License**
+
+This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [`LICENSE`](LICENSE) file for details.

src/client/index.html

@@ -252,6 +252,11 @@
       ipcRenderer.on("SET_EDITOR_LINE_WRAPPING", (_, enabled) => {
         editor.setOption("lineWrapping", enabled);
       });
+
+      ipcRenderer.on("SET_ARROW_VISIBILITY", (_, enabled) => {
+        if (enabled) document.getElementById('arrow').style.display = "block"
+        else document.getElementById('arrow').style.display = "table"
+      });
     </script>
   </body>
 </html>

src/client/static/css/deasciifier.css

@@ -15,7 +15,7 @@
 .background-content {
   height: 100%;
   overflow: auto;
-  margin-top: -5px;
+  margin-top: -6px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
 }

src/lib/getWindowPosition.js

@@ -0,0 +1,106 @@
+/**
+ * Utilities to get taskbar position and consequently menubar's position
+ * https://github.com/maxogden/menubar/blob/master/src/util/getWindowPosition.ts
+ */
+
+const { screen: electronScreen } = require("electron");
+
+const isLinux = process.platform === "linux";
+
+const trayToScreenRects = (tray) => {
+  // There may be more than one screen, so we need to figure out on which screen our tray icon lives.
+  const { workArea, bounds: screenBounds } = electronScreen.getDisplayMatching(
+    tray.getBounds()
+  );
+
+  workArea.x -= screenBounds.x;
+  workArea.y -= screenBounds.y;
+
+  return [screenBounds, workArea];
+};
+
+// type TaskbarLocation = "top" | "bottom" | "left" | "right";
+
+/**
+ * Determine taskbard location: "top", "bottom", "left" or "right".
+ *
+ * Only tested on Windows for now, and only used in Windows.
+ *
+ * @param tray - The Electron Tray instance.
+ */
+const taskbarLocation = (tray) => {
+  const [screenBounds, workArea] = trayToScreenRects(tray);
+
+  // TASKBAR LEFT
+  if (workArea.x > 0) {
+    // Most likely Ubuntu hence assuming the window should be on top
+    if (isLinux && workArea.y > 0) return "top";
+    // The workspace starts more on the right
+    return "left";
+  }
+
+  // TASKBAR TOP
+  if (workArea.y > 0) {
+    return "top";
+  }
+
+  // TASKBAR RIGHT
+  // Here both workArea.y and workArea.x are 0 so we can no longer leverage them.
+  // We can use the workarea and display width though.
+  // Determine taskbar location
+  if (workArea.width < screenBounds.width) {
+    // The taskbar is either on the left or right, but since the LEFT case was handled above,
+    // we can be sure we're dealing with a right taskbar
+    return "right";
+  }
+
+  // TASKBAR BOTTOM
+  // Since all the other cases were handled, we can be sure we're dealing with a bottom taskbar
+  return "bottom";
+};
+
+// type WindowPosition =
+//   | "trayCenter"
+//   | "topRight"
+//   | "trayBottomCenter"
+//   | "bottomLeft"
+//   | "bottomRight";
+
+/**
+ * Depending on where the taskbar is, determine where the window should be
+ * positioned.
+ *
+ * @param tray - The Electron Tray instance.
+ */
+exports.getWindowPosition = (tray) => {
+  switch (process.platform) {
+    // macOS
+    // Supports top taskbars
+    case "darwin":
+      return "trayCenter";
+    // Linux
+    // Windows
+    // Supports top/bottom/left/right taskbar
+    case "linux":
+    case "win32": {
+      const traySide = taskbarLocation(tray);
+
+      // Assign position for menubar
+      if (traySide === "top") {
+        return isLinux ? "topRight" : "trayCenter";
+      }
+      if (traySide === "bottom") {
+        return isLinux ? "bottomRight" : "trayBottomCenter";
+      }
+      if (traySide === "left") {
+        return "bottomLeft";
+      }
+      if (traySide === "right") {
+        return "bottomRight";
+      }
+    }
+  }
+
+  // When we really don't know, we just show the menubar on the top-right
+  return "topRight";
+};

src/server/TrayGenerator.js

@@ -1,6 +1,7 @@
 const { Tray, Menu, globalShortcut, nativeImage } = require("electron");
 const path = require("path");
 const { autoUpdater } = require("electron-updater");
+const { getWindowPosition } = require("../lib/getWindowPosition");
 
 class TrayGenerator {
   constructor(window, store) {
@@ -9,28 +10,69 @@ class TrayGenerator {
     this.store = store;
   }
 
-  getWindowPosition = () => {
-    const windowBounds = this.window.getBounds();
-    const trayBounds = this.tray.getBounds();
-
-    // center window horizontally below the tray icon
-    const x = Math.round(
-      trayBounds.x + trayBounds.width / 2 - windowBounds.width / 2
-    );
+  setArrowVisibility = () => {
+    const whereIsTray = getWindowPosition(this.tray);
 
-    // position window vertically below the tray icon
-    const y = Math.round(trayBounds.y + trayBounds.height);
+    switch (whereIsTray) {
+      case "trayCenter":
+        this.window.webContents.send("SET_ARROW_VISIBILITY", true);
+        break;
 
-    return { x, y };
+      case "topRight":
+      case "trayBottomCenter":
+      case "bottomLeft":
+      case "bottomRight":
+        this.window.webContents.send("SET_ARROW_VISIBILITY", false);
+        break;
+    }
   };
 
   setWinPosition = () => {
-    const position = this.getWindowPosition();
-    this.window.setPosition(position.x, position.y, false);
+    const whereIsTray = getWindowPosition(this.tray);
+
+    let x = null;
+    let y = null;
+
+    const windowBounds = this.window.getBounds();
+    const trayBounds = this.tray.getBounds();
+
+    switch (whereIsTray) {
+      case "trayCenter":
+        x = Math.round(
+          trayBounds.x + trayBounds.width / 2 - windowBounds.width / 2
+        );
+        y = Math.round(trayBounds.y + trayBounds.height);
+        break;
+
+      case "topRight":
+        x = Math.round(trayBounds.x + trayBounds.width / 2);
+        y = Math.round(trayBounds.y + trayBounds.height);
+        break;
+
+      case "trayBottomCenter":
+        x = Math.round(
+          trayBounds.x + trayBounds.width / 2 - windowBounds.width / 2
+        );
+        y = Math.round(trayBounds.y - windowBounds.height);
+        break;
+
+      case "bottomLeft":
+        x = Math.round(trayBounds.x + trayBounds.width);
+        y = Math.round(trayBounds.y + trayBounds.height - windowBounds.height);
+        break;
+
+      case "bottomRight":
+        x = Math.round(trayBounds.x - windowBounds.width);
+        y = Math.round(trayBounds.y + trayBounds.height - windowBounds.height);
+        break;
+    }
+
+    this.window.setPosition(x, y, false);
   };
 
   showWindow = () => {
     this.setWinPosition();
+    this.setArrowVisibility();
     this.window.setVisibleOnAllWorkspaces(true, {
       skipTransformProcessType: true,
     });
@@ -65,10 +107,7 @@ class TrayGenerator {
         label: "Always on top",
         type: "checkbox",
         checked: this.store.get("alwaysOnTop"),
-        click: (event) => {
-          this.window.setAlwaysOnTop(event.checked);
-          this.store.set("alwaysOnTop", event.checked);
-        },
+        click: (event) => this.store.set("alwaysOnTop", event.checked),
       },
       {
         type: "separator",

src/server/main.js

@@ -72,6 +72,7 @@ const createMainWindow = () => {
     frame: false,
     fullscreenable: false,
     resizable: is.development,
+    skipTaskbar: true,
     webPreferences: {
       devTools: is.development,
       webviewTag: true,
@@ -137,7 +138,6 @@ const applyPreferences = () => {
     "SET_CORRECTION_MENU",
     store.get("showCorrectionBubble")
   );
-  mainWindow.setAlwaysOnTop(store.get("alwaysOnTop"));
 };
 
 store.onDidChange("translateWhileTyping", () => {
@@ -196,6 +196,8 @@ app.on("ready", () => {
   createTray();
   createUpdater();
 
+  mainWindow.setAlwaysOnTop(true);
+
   mainWindow.webContents.on("dom-ready", applyPreferences);
 
   mainWindow.webContents.on("did-fail-load", () => console.log("fail"));