Merge pull request #717 from TriliumNext/feature/mica

Mica (Windows transparency effects)

src/public/app/desktop.js

@@ -48,16 +48,18 @@ function initOnElectron() {
     const electron = utils.dynamicRequire('electron');
     electron.ipcRenderer.on('globalShortcut', async (event, actionName) => appContext.triggerCommand(actionName));
     
+    const electronRemote = utils.dynamicRequire("@electron/remote");    
+    const currentWindow = electronRemote.getCurrentWindow();    
+    const style = window.getComputedStyle(document.body);
+
+    initTransparencyEffects(style, currentWindow);
+
     if (options.get("nativeTitleBarVisible") !== "true") {
-        initTitleBarButtons();
-    }
+        initTitleBarButtons(style, currentWindow);
+    }    
 }
 
-function initTitleBarButtons() {
-    const electronRemote = utils.dynamicRequire("@electron/remote");    
-    const currentWindow = electronRemote.getCurrentWindow();
-    const style = window.getComputedStyle(document.body);
-    
+function initTitleBarButtons(style, currentWindow) {
     if (window.glob.platform === "win32") {
         const applyWindowsOverlay = () => {
             const color = style.getPropertyValue("--native-titlebar-background");
@@ -80,3 +82,10 @@ function initTitleBarButtons() {
         currentWindow.setWindowButtonPosition({ x: xOffset, y: yOffset });
     }    
 }
+
+function initTransparencyEffects(style, currentWindow) {
+    if (window.glob.platform === "win32") {
+        const material = style.getPropertyValue("--background-material");
+        currentWindow.setBackgroundMaterial(material);
+    }
+}

src/public/app/layouts/desktop_layout.js

@@ -124,6 +124,7 @@ export default class DesktopLayout {
             .optChild(launcherPaneIsHorizontal, launcherPane)
             .child(new FlexContainer('row')
                 .css("flex-grow", "1")
+                .id("horizontal-main-container")
                 .optChild(!launcherPaneIsHorizontal, launcherPane)
                 .child(new LeftPaneContainer()
                     .optChild(!launcherPaneIsHorizontal, new QuickSearchWidget())
@@ -141,6 +142,7 @@ export default class DesktopLayout {
                     .child(new FlexContainer('row')
                         .filling()
                         .collapsible()
+                        .id("vertical-main-container")
                         .child(new FlexContainer('column')
                             .filling()
                             .collapsible()

src/public/stylesheets/theme-next.css

@@ -412,6 +412,43 @@ body.layout-horizontal {
     --native-titlebar-darwin-y-offset: 14 !important;
 }
 
+/* #region Mica */
+body.electron.platform-win32 {
+    --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15);
+    --launcher-pane-background-color: rgba(255, 255, 255, 0.7);
+    --tab-background-color: transparent;
+    --new-tab-button-background: transparent;
+    --active-tab-background-color: var(--launcher-pane-background-color);
+    --native-titlebar-background: #00000000;
+    --background-material: tabbed;    
+}
+
+@media (prefers-color-scheme: dark) {
+    body.electron.platform-win32 {
+        --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5);
+        --launcher-pane-background-color: rgba(255, 255, 255, 0.09);
+    }
+}
+
+body.electron.platform-win32.layout-vertical {
+    --left-pane-background-color: transparent;
+    --launcher-pane-background-color: rgba(255, 255, 255, 0.055);
+    --left-pane-item-hover-background: rgba(127, 127, 127, 0.05);
+    --background-material: mica;
+}
+
+body.electron.platform-win32,
+body.electron.platform-win32 #root-widget,
+body.electron.platform-win32 #launcher-pane .launcher-button {
+    background: transparent !important;   
+}
+
+body.electron.platform-win32.layout-horizontal #horizontal-main-container,
+body.electron.platform-win32.layout-vertical #vertical-main-container {
+    background-color: var(--root-background);
+}
+/* #endregion */
+
 /* Matches when the left pane is collapsed */
 :has(#left-pane.hidden-int) {
     --center-pane-border-radius: 0;
@@ -849,16 +886,37 @@ div.quick-search .search-button.show  {
     position: relative;
 }
 
-body.layout-horizontal .tab-row-container:after {
+/* #region Apply a border to the tab bar that avoids the current tab but also allows a transparent active tab. */
+body.layout-horizontal .tab-row-widget,
+body.layout-horizontal .tab-row-widget-container,
+body.layout-horizontal .tab-row-container .note-tab[active] {
+    overflow: visible !important;
+}
+
+body.layout-horizontal .tab-row-container .note-tab[active]:before {    
     content: "";
     position: absolute;
     bottom: 0;
-    left: 0;
-    right: 0;
+    left: -100vw;
+    top: var(--tab-height);
+    right: calc(100% - 1px);
     height: 1px;
     border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
 }
 
+body.layout-horizontal .tab-row-container .note-tab[active]:after {    
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 100%;
+    top: var(--tab-height);
+    right: 0;
+    width: 100vw;
+    height: 1px;
+    border-bottom: 1px solid var(--launcher-pane-horizontal-border-color);
+}
+/* #endregion */
+
 body.layout-vertical.electron.platform-darwin .tab-row-container {
     border-bottom: 1px solid var(--subtle-border-color);
 }

src/services/window.ts

@@ -131,6 +131,11 @@ function getWindowExtraOpts() {
         }
     }
 
+    // Window effects (Mica)
+    if (isWindows) {
+        extraOpts.backgroundMaterial = "auto";
+    }
+
     return extraOpts;
 }