add blur state to window

dist/styles/global.css

@@ -131,6 +131,9 @@ i.ms-Nav-chevron {
     z-index: 1;
     position: relative;
 }
+body.blur #root > nav {
+    --black: var(--neutralSecondaryAlt);
+}
 nav .progress {
     position: fixed;
     top: 0;

dist/styles/main.css

@@ -26,6 +26,9 @@
     height: 100%;
     background-color: var(--neutralLighterAlt);
 }
+body.blur .menu .btn-group {
+    --black: var(--neutralSecondaryAlt);
+}
 body.darwin .menu .btn-group {
     display: flex;
     flex-direction: row-reverse;

package-lock.json

@@ -2258,9 +2258,9 @@
       }
     },
     "electron": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-9.0.5.tgz",
-      "integrity": "sha512-bnL9H48LuQ250DML8xUscsKiuSu+xv5umXbpBXYJ0BfvYVmFfNbG3jCfhrsH7aP6UcQKVxOG1R/oQExd0EFneQ==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-9.2.0.tgz",
+      "integrity": "sha512-4ecZ3rcGg//Gk4fAK3Jo61T+uh36JhU6HHR/PTujQqQiBw1g4tNPd4R2hGGth2d+7FkRIs5GdRNef7h64fQEMw==",
       "dev": true,
       "requires": {
         "@electron/get": "^1.0.1",

package.json

@@ -89,7 +89,7 @@
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
     "@yang991178/rss-parser": "^3.8.1",
-    "electron": "^9.0.5",
+    "electron": "^9.2.0",
     "electron-builder": "^22.7.0",
     "electron-react-devtools": "^0.5.3",
     "electron-store": "^5.2.0",

src/bridges/utils.ts

@@ -1,5 +1,5 @@
 import { ipcRenderer } from "electron"
-import { ImageCallbackTypes, TouchBarTexts } from "../schema-types"
+import { ImageCallbackTypes, TouchBarTexts, WindowStateListenerType } from "../schema-types"
 import { IObjectWithKey } from "@fluentui/react"
 
 const utilsBridge = {
@@ -99,14 +99,22 @@ const utilsBridge = {
     requestAttention: () => {
         ipcRenderer.invoke("request-attention")
     },
-    addWindowStateListener: (callback: (state: boolean) => any) => {
+    addWindowStateListener: (callback: (type: WindowStateListenerType, state: boolean) => any) => {
         ipcRenderer.removeAllListeners("maximized")
         ipcRenderer.on("maximized", () => {
-            callback(true)
+            callback(WindowStateListenerType.Maximized, true)
         })
         ipcRenderer.removeAllListeners("unmaximized")
         ipcRenderer.on("unmaximized", () => {
-            callback(false)
+            callback(WindowStateListenerType.Maximized, false)
+        })
+        ipcRenderer.removeAllListeners("window-focus")
+        ipcRenderer.on("window-focus", () => {
+            callback(WindowStateListenerType.Focused, true)
+        })
+        ipcRenderer.removeAllListeners("window-blur")
+        ipcRenderer.on("window-blur", () => {
+            callback(WindowStateListenerType.Focused, false)
         })
     },
 

src/components/nav.tsx

@@ -4,6 +4,7 @@ import { Icon } from "@fluentui/react/lib/Icon"
 import { AppState } from "../scripts/models/app"
 import { ProgressIndicator, IObjectWithKey } from "@fluentui/react"
 import { getWindowBreakpoint } from "../scripts/utils"
+import { WindowStateListenerType } from "../schema-types"
 
 type NavProps = {
     state: AppState
@@ -24,14 +25,27 @@ type NavState = {
 class Nav extends React.Component<NavProps, NavState> {
     constructor(props) {
         super(props)
-        window.utils.addWindowStateListener(this.setMaximizeState)
+        this.setBodyFocusState(window.utils.isFocused())
+        window.utils.addWindowStateListener(this.windowStateListener)
         this.state = {
             maximized: window.utils.isMaximized()
         }
     }
 
-    setMaximizeState = (state: boolean) => {
-        this.setState({ maximized: state })
+    setBodyFocusState = (focused: boolean) => {
+        if (focused) document.body.classList.remove("blur")
+        else document.body.classList.add("blur")
+    }
+
+    windowStateListener = (type: WindowStateListenerType, state: boolean) => {
+        switch (type) {
+            case WindowStateListenerType.Maximized:
+                this.setState({ maximized: state })
+                break
+            case WindowStateListenerType.Focused:
+                this.setBodyFocusState(state)
+                break
+        }
     }
 
     navShortcutsHandler = (e: KeyboardEvent | IObjectWithKey) => {
@@ -86,9 +100,13 @@ class Nav extends React.Component<NavProps, NavState> {
     canFetch = () => this.props.state.sourceInit && this.props.state.feedInit 
         && !this.props.state.syncing && !this.props.state.fetchingItems
     fetching = () => !this.canFetch() ? " fetching" : ""
-    menuOn = () => this.props.state.menu ? " menu-on" : ""
-    itemOn = () => this.props.itemShown ? " item-on" : ""
-    hideButtons = () => this.props.state.settings.display ? "hide-btns" : ""
+    getClassNames = () => {
+        const classNames = new Array<string>()
+        if (this.props.state.settings.display) classNames.push("hide-btns")
+        if (this.props.state.menu) classNames.push("menu-on")
+        if (this.props.itemShown) classNames.push("item-on")
+        return classNames.join(" ")
+    }
 
     fetch = () => {
         if (this.canFetch()) this.props.fetch()
@@ -108,7 +126,7 @@ class Nav extends React.Component<NavProps, NavState> {
 
     render() {
         return (
-            <nav className={this.hideButtons() + this.menuOn() + this.itemOn()}>
+            <nav className={this.getClassNames()}>
                 <div className="btn-group">
                     <a className="btn hide-wide" 
                         title={intl.get("nav.menu")} 

src/main/window.ts

@@ -78,6 +78,12 @@ export class WindowManager {
             this.mainWindow.on("unmaximize", () => {
                 this.mainWindow.webContents.send("unmaximized")
             })
+            this.mainWindow.on("focus", () => {
+                this.mainWindow.webContents.send("window-focus")
+            })
+            this.mainWindow.on("blur", () => {
+                this.mainWindow.webContents.send("window-blur")
+            })
             this.mainWindow.webContents.on("context-menu", (_, params) => {
                 if (params.selectionText) {
                     this.mainWindow.webContents.send("window-context-menu", [params.x, params.y], params.selectionText)

src/schema-types.ts

@@ -44,6 +44,10 @@ export interface ServiceConfigs {
     importGroups?: boolean
 }
 
+export const enum WindowStateListenerType {
+    Maximized, Focused
+}
+
 export interface TouchBarTexts {
     menu: string
     search: string