Add windows and linux support (#43)

* Add windows and linux support

* organize colors

Author: kadiryazici

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        platform: [macos-latest]
+        platform: [macos-latest, ubuntu-20.04, windows-latest]
 
     runs-on: ${{ matrix.platform }}
     steps:

src-tauri/src/commands.rs

@@ -25,16 +25,39 @@ pub fn play_notification_sound(app: AppHandle) {
     });
 }
 
+#[cfg(target_os = "macos")]
 #[tauri::command]
 pub fn set_icon_template(is_template: bool, app: AppHandle) {
     app.tray_handle().set_icon_as_template(is_template).unwrap();
+
     app.tray_handle()
         .set_icon(tauri::Icon::Raw(
             include_bytes!("../icons/tray/icon.png").to_vec(),
         ))
         .unwrap();
 }
 
+#[cfg(any(target_os = "linux", target_os = "windows"))]
+#[tauri::command]
+pub fn set_icon_template(is_template: bool, app: AppHandle) {
+    // In other systems there is no template option for tray icons
+    // So we just simulate like it has.
+
+    if is_template {
+        app.tray_handle()
+            .set_icon(tauri::Icon::Raw(
+                include_bytes!("../icons/128x128.png").to_vec(),
+            ))
+            .unwrap();
+    } else {
+        app.tray_handle()
+            .set_icon(tauri::Icon::Raw(
+                include_bytes!("../icons/tray/icon.png").to_vec(),
+            ))
+            .unwrap();
+    }
+}
+
 #[tauri::command]
 pub fn start_server(window: Window, state: State<'_, Mutex<AuthServer>>) {
     let mut server = state.lock().unwrap();

src-tauri/src/main.rs

@@ -16,16 +16,15 @@ use commands::{
 use server::AuthServer;
 
 use tauri::{
-    ActivationPolicy, App, AppHandle, GlobalWindowEvent, Manager, PhysicalPosition, SystemTray,
-    SystemTrayEvent, WindowEvent,
+    App, AppHandle, GlobalWindowEvent, Manager, PhysicalPosition, SystemTray, SystemTrayEvent,
+    WindowEvent,
 };
-use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial, NSVisualEffectState};
 
 fn handle_system_tray_event(app: &AppHandle, event: SystemTrayEvent) {
     let window = app.get_window("main").unwrap();
 
     if let SystemTrayEvent::LeftClick { position, .. } = event {
-        let win_width = window.outer_size().expect("size").width;
+        let win_outer_size = window.outer_size().unwrap();
 
         if window.is_visible().unwrap() {
             window.hide().unwrap();
@@ -35,17 +34,31 @@ fn handle_system_tray_event(app: &AppHandle, event: SystemTrayEvent) {
             window.set_focus().unwrap();
         }
 
+        window
+            .set_position(PhysicalPosition {
+                x: position.x,
+                y: position.y,
+            })
+            .unwrap();
+
         let current_monitor = window.current_monitor().unwrap().unwrap();
         let screen_size = current_monitor.size();
         let screen_position = current_monitor.position();
 
+        let y = if position.y > screen_size.height as f64 / 2.0 {
+            position.y - win_outer_size.height as f64
+        } else {
+            position.y as f64
+        };
+
         window
             .set_position(PhysicalPosition {
                 x: f64::min(
-                    position.x - win_width as f64 / 2.0,
-                    (screen_position.x as f64 + screen_size.width as f64) - win_width as f64,
+                    position.x - win_outer_size.width as f64 / 2.0,
+                    (screen_position.x as f64 + screen_size.width as f64)
+                        - win_outer_size.width as f64,
                 ),
-                y: position.y,
+                y,
             })
             .unwrap()
     }
@@ -55,15 +68,22 @@ fn handle_setup(app: &mut App) -> Result<(), Box<dyn std::error::Error>> {
     let win = app.get_window("main").expect("window not found");
 
     let _ = win.set_always_on_top(true);
-    app.set_activation_policy(ActivationPolicy::Accessory);
-
-    apply_vibrancy(
-        &win,
-        NSVisualEffectMaterial::HudWindow,
-        Some(NSVisualEffectState::Active),
-        Some(8.0),
-    )
-    .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
+
+    #[cfg(target_os = "macos")]
+    {
+        use tauri::ActivationPolicy;
+        app.set_activation_policy(ActivationPolicy::Accessory);
+
+        use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial, NSVisualEffectState};
+
+        apply_vibrancy(
+            &win,
+            NSVisualEffectMaterial::HudWindow,
+            Some(NSVisualEffectState::Active),
+            Some(8.0),
+        )
+        .expect("Unsupported platform! 'apply_vibrancy' is only supported on macOS");
+    }
 
     Ok(())
 }

src/assets/main.scss

@@ -1,3 +1,43 @@
+$colors: (
+  // Colors are: [mac, non-mac] because in macOS we use glass effect for the background.
+  dark: (
+    text-faded: rgb(190, 190, 190) rgb(190, 190, 190),
+    text: rgb(255, 255, 255) rgb(255, 255, 255),
+    gray-bright: rgb(150, 150, 150) rgb(150, 150, 150),
+    switch-dot: rgb(200, 200, 200) rgb(200, 200, 200),
+    gray: rgb(95, 95, 95) rgb(95, 95, 95),
+    switch-bg: var(--gray) var(--gray),
+    content-bg: rgba(30, 30, 30, 8) rgb(30, 30, 30),
+    page-header-bg: rgba(43, 43, 43, .6) rgb(43, 43, 43),
+    popover-bg: rgba(20, 20, 20, .6) rgb(26, 26, 26),
+    bottom-bar-bg: rgba(21, 21, 21, 0.2) rgb(21, 21, 21),
+    sidebar-bg: rgba(50, 50, 50, .75) rgb(50, 50, 50),
+    app-border: rgb(90, 90, 90) rgb(90, 90, 90),
+    item-bg: rgba(80, 80, 80, .3) rgb(56, 56, 56),
+    item-hover-bg: rgba(80, 80, 80, .75) rgb(70, 70, 70),
+    item-border-color: rgb(22, 22, 22, .3) rgb(22, 22, 22),
+    header-border: rgb(50, 50, 50) rgb(50, 50, 50),
+    popover-border: rgb(43, 43, 43) rgb(43, 43, 43)
+  ),
+  light: (
+    text-faded: rgb(20, 20, 20) rgb(30, 30, 30),
+    text: rgb(0, 0, 0) rgb(0, 0, 0),
+    gray-bright: rgb(105, 105, 105) rgb(115, 115, 115),
+    gray: rgb(160, 160, 160) rgb(160, 160, 160),
+    switch-bg: rgb(145, 145, 145) rgb(168, 168, 168),
+    switch-dot: rgb(160, 160, 160) rgb(255, 255, 255),
+    content-bg: rgba(220, 220, 220, .75) rgb(220, 220, 220),
+    page-header-bg: rgba(212, 212, 212, .6) rgb(212, 212, 212),
+    popover-bg: rgba(210, 210, 210, .8) rgb(240, 240, 240),
+    sidebar-bg: rgba(240, 240, 240, .6) rgb(240, 240, 240),
+    app-border: rgb(185, 185, 185) rgb(185, 185, 185),
+    item-bg: rgba(255, 255, 255, .3) rgb(255, 255, 255),
+    item-hover-bg: rgba(150, 150, 150, .7) rgb(235, 235, 235),
+    item-border-color: rgb(180, 180, 180, .7) rgb(201, 201, 201),
+    popover-border: rgb(167, 167, 167) rgb(210, 210, 210),
+  )
+);
+
 :root {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-synthesis: none;
@@ -6,44 +46,37 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
   line-height: 20px;
-
-  --text-faded: rgb(190, 190, 190);
-  --text: rgb(255, 255, 255);
-  --gray-bright: rgb(150, 150, 150);
-  --switch-dot: rgb(200, 200, 200);
-  --gray: rgb(95, 95, 95);
-  --switch-bg: var(--gray);
-  --content-bg: rgba(30, 30, 30, .8);
-  --page-header-bg: rgba(43, 43, 43, .6);
-  --popover-bg: rgba(20, 20, 20, .6);
-  --popover-bg-solid: rgba(40, 40, 40);
-  --bottom-bar-bg: rgba(21, 21, 21, 0.2);
-  --sidebar-bg: rgba(50, 50, 50, .75);
-  --app-border: rgb(90, 90, 90);
-  --item-bg: rgba(80, 80, 80, .3);
-  --item-hover-bg: rgba(80, 80, 80, .75);
-  --item-border-color: rgb(22, 22, 22, .3);
+  
   --accent-color: rgb(23, 115, 243);
-  --header-border: rgb(50, 50, 50);
 
-  &.light-theme {
-    --text-faded: rgb(20, 20, 20);
-    --text: rgb(0, 0, 0);
-    --gray-bright: rgb(105, 105, 105);
-    --gray: rgb(160, 160, 160);
-    --switch-bg: rgb(145, 145, 145);
-    --switch-dot: rgb(60, 60, 60);
-    --content-bg: rgba(220, 220, 220, .75);
-    --page-header-bg: rgba(212, 212, 212, .6);
-    --popover-bg: rgba(210, 210, 210, .8);
-    --popover-bg-solid: rgba(215, 215, 215);
-    --bottom-bar-bg: rgba(234, 234, 234, 0.2);
-    --sidebar-bg: rgba(240, 240, 240, .6);
-    --app-border: rgb(185, 185, 185);
-    --item-bg: rgba(255, 255, 255, .3);
-    --item-hover-bg: rgba(150, 150, 150, .7);
-    --item-border-color: rgb(180, 180, 180, .7);
-    --popover-border: rgb(167, 167, 167);
+  // Colors look really bad on Windows and Linux because there is no glass effect.
+  // Some colors are different because of that.
+  &:not([data-os-darwin]) {
+    @each $color-name, $color-list in map-get($colors, dark) {
+      $color: nth($color-list, 2);
+      --#{"" + $color-name}: #{"" + $color};
+    }
+
+    &.light-theme {
+      @each $color-name, $color-list in map-get($colors, light) {
+        $color: nth($color-list, 2);
+        --#{"" + $color-name}: #{"" + $color};
+      }
+    }
+  }
+
+  &[data-os-darwin] {
+    @each $color-name, $color-list in map-get($colors, dark) {
+      $color: nth($color-list, 1);
+      --#{"" + $color-name}: #{"" + $color};
+    }
+
+    &.light-theme {
+      @each $color-name, $color-list in map-get($colors, light) {
+        $color: nth($color-list, 1);
+        --#{"" + $color-name}: #{"" + $color};
+      }
+    }
   }
 }
 

src/main.ts

@@ -8,6 +8,7 @@ import { isEnabled as isAutostartEnabled } from 'tauri-plugin-autostart-api'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { isPermissionGranted } from '@tauri-apps/api/notification'
+import { type as osType } from '@tauri-apps/api/os'
 import { checkUpdate } from '@tauri-apps/api/updater'
 import App from './App.vue'
 import { AppStorage, cacheStorageFromDisk } from './storage'
@@ -58,6 +59,10 @@ async function main() {
     console.error(error)
   }
 
+  const os = await osType()
+  if (os === 'Darwin')
+    document.documentElement.setAttribute('data-os-darwin', '')
+
   app.mount('#app')
 }
 

src/pages/SettingsPage.vue

@@ -282,6 +282,10 @@ function handleScroll(e: Event) {
       -webkit-backdrop-filter: blur(20px);
       transition: box-shadow 0.2s ease-in-out;
 
+      @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+        background-color: var(--content-bg);
+      }
+
       &-with-border {
         box-shadow: 0px 3px 8px -5px rgba(0, 0, 0, 0.3);
       }