MacOS Blurred Background (#1520)

MacOS Vibrancy

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Bengali, Catalan, Greek and Serbian translations
 - it is not possible to close app during break that is in strict mode
 - `logs` command line option to show location of logs
+- advanced option to make break windows' background blurred
 
 ### Fixed
 - error when end break shortcut is not set

README.md

@@ -302,7 +302,7 @@ In the preferences file, change `mainColor` to whatever color you like.
 To show the Welcome window again on the next start, change `"isFirstRun"` to `true`.
 
 #### Theme transparency [![Contributor Preferences](https://img.shields.io/badge/Contributor_Preferences-✔-success)](#contributor-preferences)
-To specify how solid the break window should be when Theme transparency is enabled, set the value of `opacity` from `0` to `1` (which is in turn 0 to 100%).
+To specify how solid the break window should be when Theme transparency is enabled, set the value of `opacity` from `0` to `1` (which is in turn 0 to 100%). If you want the break window to have a blurred background, set the value of `blurredBackground` to `true`.
 
 #### Break window size [![Contributor Preferences](https://img.shields.io/badge/Contributor_Preferences-✔-success)](#contributor-preferences)
 To specify the size of the break window, set the value of `breakWindowHeight` and `breakWindowWidth` from `0` to `0.99` (which is in turn 0 to 99% of the size of the screen). Don't set 100% as that's fullscreen.

app/main.js

@@ -668,6 +668,22 @@ function startBreakNotification () {
   updateTray()
 }
 
+function getBlurredBackgroundWindowOptions () {
+  if (!settings.get('blurredBackground')) {
+    return {}
+  }
+
+  switch (process.platform) {
+    case 'darwin':
+      return {
+        vibrancy: 'hud',
+        visualEffectState: 'active'
+      }
+    default:
+      return {}
+  }
+}
+
 function startMicrobreak () {
   // don't start another break if break running
   if (microbreakWins) {
@@ -704,6 +720,7 @@ function startMicrobreak () {
       show: false,
       backgroundThrottling: false,
       transparent: true,
+      ...getBlurredBackgroundWindowOptions(),
       backgroundColor: calculateBackgroundColor(settings.get('miniBreakColor')),
       skipTaskbar: !showBreaksAsRegularWindows,
       focusable: showBreaksAsRegularWindows,
@@ -852,6 +869,7 @@ function startBreak () {
       show: false,
       backgroundThrottling: false,
       transparent: true,
+      ...getBlurredBackgroundWindowOptions(),
       backgroundColor: calculateBackgroundColor(settings.get('mainColor')),
       skipTaskbar: !showBreaksAsRegularWindows,
       focusable: showBreaksAsRegularWindows,
@@ -1064,7 +1082,7 @@ function calculateBackgroundColor (color) {
   if (settings.get('transparentMode')) {
     opacityMultiplier = settings.get('opacity')
   }
-  return color + Math.round(opacityMultiplier * 255).toString(16)
+  return color + Math.round(opacityMultiplier * 255).toString(16).padStart(2, '0')
 }
 
 function loadIdeas () {

app/utils/defaultSettings.js

@@ -27,6 +27,7 @@ module.exports = {
   mainColor: '#478484',
   miniBreakColor: '#478484',
   transparentMode: false,
+  blurredBackground: false,
   opacity: 0.9,
   audio: 'crystal-glass',
   miniBreakAudio: 'crystal-glass',