Merge pull request #2534 from poooi/feat/update-material-style

feat: update material style

app.js

@@ -35,6 +35,7 @@ const dbg = require('./lib/debug')
 require('./lib/updater')
 require('./lib/tray')
 require('./lib/screenshot')
+require('./lib/native-theme-helper')
 
 // Disable HA
 if (config.get('poi.misc.disablehwaccel', false)) {
@@ -239,7 +240,7 @@ app.on('ready', () => {
  alwaysOnTop: config.get('poi.content.alwaysOnTop', false),
  // FIXME: titlebarStyle and transparent: https://github.com/electron/electron/issues/14129
  titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : hideTitlebar ? 'hidden' : null,
- transparent: true,
+ transparent: process.platform === 'darwin',
  frame: !hideTitlebar,
  enableLargerThanScreen: true,
  maximizable: config.get('poi.content.resizable', true),
@@ -257,7 +258,7 @@ app.on('ready', () => {
  backgroundThrottling: false,
  },
  backgroundColor: '#00000000',
- backgroundMaterial: 'acrylic',
+ backgroundMaterial: config.get('poi.appearance.vibrant', 0) ? 'acrylic' : 'none',
  roundedCorners: true,
  })
 
@@ -280,10 +281,6 @@ app.on('ready', () => {
  mainWindow.loadURL(`file://${__dirname}/index.html${dbg.isEnabled() ? '?react_perf' : ''}`)
  if (config.get('poi.window.isMaximized', false)) {
  mainWindow.maximize()
- } else {
- // Workaround for initial backgroundMaterial config not applied
- mainWindow.setSize(width + 1, height)
- mainWindow.setSize(width, height)
  }
  if (config.get('poi.window.isFullScreen', false)) {
  mainWindow.setFullScreen(true)

lib/native-theme-helper.ts

@@ -0,0 +1,12 @@
+import config from './config'
+import { nativeTheme } from 'electron'
+
+const getThemeSource = (value: string) => (value === 'dark' ? 'dark' : 'light')
+
+config.on('config.set', (key: string, value: string) => {
+ if (key === 'poi.appearance.theme') {
+ nativeTheme.themeSource = getThemeSource(value)
+ }
+})
+
+nativeTheme.themeSource = getThemeSource(config.get('poi.appearance.theme', 'dark'))

lib/webcontent-utils.ts

@@ -125,7 +125,8 @@ export function stopNavigateAndHandleNewWindow(id: number) {
  sandbox: false,
  webviewTag: true,
  },
- transparent: true,
+ transparent: isModernDarwin,
+ backgroundMaterial: config.get('poi.appearance.vibrant', 0) ? 'acrylic' : 'none',
  }
  if (frameName.startsWith('plugin[kangame]')) {
  options.useContentSize = true

package.json

@@ -64,7 +64,7 @@
  "@blueprintjs/datetime": "^4.3.5",
  "@blueprintjs/popover2": "^1.5.1",
  "@blueprintjs/select": "^4.5.3",
- "@electron/remote": "^2.0.11",
+ "@electron/remote": "^2.1.1",
  "@exponent/electron-cookies": "^2.0.0",
  "@fortawesome/fontawesome-svg-core": "^6.1.2",
  "@fortawesome/free-brands-svg-icons": "^6.1.2",
@@ -188,7 +188,7 @@
  "asar": "^3.2.0",
  "babel-jest": "^28.1.3",
  "cross-env": "^7.0.3",
- "electron": "^27.0.4",
+ "electron": "^28.1.1",
  "electron-builder": "^23.3.3",
  "eslint": "^8.22.0",
  "eslint-config-prettier": "^8.5.0",

views/env-parts/theme.es

@@ -110,7 +110,7 @@ export function loadStyle(
  if ('darwin' === process.platform) {
  delaySetBackgroundColor(isDark ? 'rgba(47, 52, 60, 0.59)' : 'rgba(246, 247, 249, 0.59)')
  } else {
- delaySetBackgroundColor(isDark ? 'rgba(36, 41, 46, 0.7)' : 'rgba(246, 247, 249, 0.25)')
+ delaySetBackgroundColor(isDark ? 'rgba(47, 52, 60, 0.5)' : 'rgba(246, 247, 249, 0.25)')
  }
  } else {
  delaySetBackgroundColor(isDark ? 'rgb(47, 52, 60)' : 'rgb(246, 247, 249)')
@@ -239,25 +239,6 @@ export function loadStyle(
  setBackground(config.get('poi.appearance.background'))
  toggleBackground(config.get('poi.appearance.vibrant'))
  })
-
- // Workaround for window transparency on 27.0.0
- if (process.platform === 'win32') {
- const resetBackgroundColor = () => {
- if (config.get('poi.appearance.vibrant', 0) === 1) {
- currentWindow.setBackgroundColor('#00000000')
- }
- }
-
- currentWindow.on('blur', resetBackgroundColor)
- currentWindow.on('focus', resetBackgroundColor)
- currentWindow.on('restore', () => {
- if (config.get('poi.appearance.vibrant', 0) === 1) {
- const [width, height] = currentWindow.getSize()
- currentWindow.setSize(width + 1, height + 1)
- currentWindow.setSize(width, height)
- }
- })
- }
 }
 
 loadStyle()

views/redux/layout/index.es

@@ -85,7 +85,7 @@ export function reducer(state = initState, { type, value }) {
  ...state,
  webview: {
  ...state.webview,
- ...value,
+ ...getIntegerSize(value),
  },
  }
  default: