main menu available in web version

packages/web/src/Screen.svelte

@@ -24,22 +24,16 @@
   import dragDropFileTarget from './utility/dragDropFileTarget';
   import TitleBar from './widgets/TitleBar.svelte';
   import { onMount } from 'svelte';
-  import getElectron from './utility/getElectron';
-
+  import { shouldDrawTitleBar } from './utility/common';
+  
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
   let domTabs;
 
   let drawTitleBar = false;
   onMount(async () => {
-    let draw = true;
-    const electron = getElectron();
-    if (electron && (await electron.isNativeMenu())) {
-      draw = false;
-    }
-    drawTitleBar = draw;
+    drawTitleBar = await shouldDrawTitleBar();
     document.documentElement.style.setProperty('--dim-visible-titlebar', drawTitleBar ? 1 : 0);
-    console.log('drawTitleBar', drawTitleBar);
   });
 
   function handleTabsWheel(e) {
@@ -48,11 +42,13 @@
       domTabs.scrollBy({ top: 0, left: e.deltaY < 0 ? -150 : 150, behavior: 'smooth' });
     }
   }
+
+  $: themeStyle = `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`;
 </script>
 
 <svelte:head>
   {#if $currentThemeDefinition?.themeCss}
-  {@html `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`}
+    {@html themeStyle}
   {/if}
 </svelte:head>
 

packages/web/src/modals/DropDownMenu.svelte

@@ -53,11 +53,31 @@
     }
     return item;
   }
+
+  function filterMenuItems(items) {
+    const res = [];
+    let wasDivider = false;
+    let wasItem = false;
+    for (const item of items.filter(x => !x.disabled || !x.hideDisabled)) {
+      if (item.divider) {
+        if (wasItem) {
+          wasDivider = true;
+        }
+      } else {
+        if (wasDivider) {
+          res.push({ divider: true });
+        }
+        wasDivider = false;
+        wasItem = true;
+        res.push(item);
+      }
+    }
+    return res;
+  }
 </script>
 
 <script>
   import _ from 'lodash';
-  import clickOutside from '../utility/clickOutside';
   import { createEventDispatcher } from 'svelte';
   import { onMount } from 'svelte';
   import { commandsCustomized, visibleCommandPalette } from '../stores';
@@ -106,7 +126,7 @@
 
   $: extracted = extractMenuItems(items, { targetElement });
   $: compacted = _.compact(extracted.map(x => mapItem(x, $commandsCustomized)));
-  $: filtered = compacted.filter(x => !x.disabled || !x.hideDisabled);
+  $: filtered = filterMenuItems(compacted);
 
   const handleClickOutside = event => {
     // if (element && !element.contains(event.target) && !event.defaultPrevented) {

packages/web/src/stores.ts

@@ -56,7 +56,8 @@ export const commandsCustomized = derived([commands, commandsSettings], ([$comma
   }))
 );
 
-export const visibleToolbar = writableWithStorage(true, 'visibleToolbar');
+// export const visibleToolbar = writableWithStorage(true, 'visibleToolbar');
+export const visibleToolbar = writable(false);
 export const zoomKoef = writableWithStorage(1, 'zoomKoef');
 export const leftPanelWidth = writableWithStorage(300, 'leftPanelWidth');
 export const currentDropDownMenu = writable(null);
@@ -77,7 +78,7 @@ export const currentThemeDefinition = derived([currentTheme, extensions], ([$cur
 );
 
 subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
-subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar');
+// subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar');
 subscribeCssVariable(leftPanelWidth, x => `${x}px`, '--dim-left-panel-width');
 
 let activeTabIdValue = null;

packages/web/src/utility/common.ts

@@ -1,5 +1,6 @@
 import { openedTabs } from '../stores';
 import _ from 'lodash';
+import getElectron from './getElectron';
 
 export class LoadingToken {
   isCanceled = false;
@@ -38,3 +39,14 @@ export async function asyncFilter(arr, predicate) {
 
   return arr.filter((_v, index) => results[index]);
 }
+
+export async function shouldDrawTitleBar() {
+  const electron = getElectron();
+  if (!electron) {
+    return false;
+  }
+  if (await electron.isNativeMenu()) {
+    return true;
+  }
+  return false;
+}

packages/web/src/utility/getElectron.ts

@@ -1,8 +1,7 @@
 class ElectronApi {
   private ipcRenderer = getIpcRenderer();
 
-  constructor() {
-  }
+  constructor() {}
 
   send(msg, args = null) {
     this.ipcRenderer.send(msg, args);
@@ -28,7 +27,8 @@ class ElectronApi {
   }
 
   async isNativeMenu() {
-    await this.ipcRenderer.invoke('isNativeMenu');
+    const res = await this.ipcRenderer.invoke('isNativeMenu');
+    return res;
   }
 
   async invoke(route, args) {

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { update } from 'lodash';
+  import { onMount } from 'svelte';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { currentDropDownMenu, selectedWidget, visibleCommandPalette, visibleToolbar } from '../stores';
+  import { currentDropDownMenu, selectedWidget, visibleCommandPalette } from '../stores';
+  import { shouldDrawTitleBar } from '../utility/common';
+  import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
 
   let domSettings;
+  let domMainMenu;
 
   const widgets = [
     {
@@ -63,15 +66,29 @@
   function handleSettingsMenu() {
     const rect = domSettings.getBoundingClientRect();
     const left = rect.right;
-    const top = rect.top;
+    const top = rect.bottom;
     const items = [{ command: 'settings.commands' }, { command: 'theme.changeTheme' }, { command: 'settings.show' }];
     currentDropDownMenu.set({ left, top, items });
   }
+
+  function handleMainMenu() {
+    const rect = domMainMenu.getBoundingClientRect();
+    const left = rect.right;
+    const top = rect.top;
+    console.log('mainMenuDefinition', mainMenuDefinition);
+    const items = mainMenuDefinition;
+    currentDropDownMenu.set({ left, top, items });
+  }
+
+  let showMainMenu = false;
+  onMount(async () => {
+    showMainMenu = !(await shouldDrawTitleBar());
+  });
 </script>
 
 <div class="main">
-  {#if !$visibleToolbar}
-    <div class="wrapper mb-3" on:click={() => ($visibleCommandPalette = 'menu')}>
+  {#if showMainMenu}
+    <div class="wrapper mb-3" on:click={handleMainMenu} bind:this={domMainMenu}>
       <FontIcon icon="icon menu" />
     </div>
   {/if}