client main menu

app/src/electron.js

@@ -235,7 +235,7 @@ function createWindow() {
   isNativeMenu = os.platform() == 'darwin' ? true : false;
   if (initialConfig['menuStyle'] == 'native') isNativeMenu = true;
   if (initialConfig['menuStyle'] == 'client') isNativeMenu = false;
-  isNativeMenu = true;
+  // isNativeMenu = true;
 
   mainWindow = new BrowserWindow({
     width: 1200,

packages/web/src/modals/DropDownMenu.svelte

@@ -33,47 +33,6 @@
     if (newLeft != null) element.style.left = `${newLeft}px`;
     if (newTop != null) element.style.top = `${newTop}px`;
   }
-
-  function mapItem(item, commands) {
-    if (item.command) {
-      const command = commands[item.command];
-      if (command) {
-        return {
-          text: command.menuName || command.toolbarName || command.name,
-          keyText: command.keyText || command.keyTextFromGroup,
-          onClick: () => {
-            if (command.getSubCommands) visibleCommandPalette.set(command);
-            else if (command.onClick) command.onClick();
-          },
-          disabled: !command.enabled,
-          hideDisabled: item.hideDisabled,
-        };
-      }
-      return null;
-    }
-    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>
@@ -81,7 +40,7 @@
   import { createEventDispatcher } from 'svelte';
   import { onMount } from 'svelte';
   import { commandsCustomized, visibleCommandPalette } from '../stores';
-  import { extractMenuItems } from '../utility/contextMenu';
+  import { prepareMenuItems } from '../utility/contextMenu';
   import FontIcon from '../icons/FontIcon.svelte';
 
   export let items;
@@ -124,9 +83,7 @@
     submenuOffset = hoverOffset;
   }, 500);
 
-  $: extracted = extractMenuItems(items, { targetElement });
+  $: preparedItems = prepareMenuItems(items, { targetElement }, $commandsCustomized);
-  $: compacted = _.compact(extracted.map(x => mapItem(x, $commandsCustomized)));
-  $: filtered = filterMenuItems(compacted);
 
   const handleClickOutside = event => {
     // if (element && !element.contains(event.target) && !event.defaultPrevented) {
@@ -144,7 +101,7 @@
 </script>
 
 <ul class="dropDownMenuMarker" style={`left: ${left}px; top: ${top}px`} bind:this={element}>
-  {#each filtered as item}
+  {#each preparedItems as item}
     {#if item.divider}
       <li class="divider" />
     {:else}

packages/web/src/modals/HorizontalMenu.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { commandsCustomized, currentDropDownMenu } from '../stores';
+  import { prepareMenuItems } from '../utility/contextMenu';
+  import DropDownMenu from './DropDownMenu.svelte';
+
+  export let items;
+
+  let isOpened;
+
+  function handleOpenMenu(element, item) {
+    const rect = element.getBoundingClientRect();
+    const left = rect.left;
+    const top = rect.bottom;
+    const items = item.submenu;
+    $currentDropDownMenu = { left, top, items };
+    isOpened = true;
+  }
+
+  $: preparedItems = prepareMenuItems(items, {}, $commandsCustomized);
+  $: if (!$currentDropDownMenu) {
+    isOpened = false;
+  }
+</script>
+
+<div class="container">
+  {#each preparedItems as item}
+    <div
+      class="item"
+      on:click={e => handleOpenMenu(e.target, item)}
+      on:mousemove={e => {
+        if (isOpened) {
+          handleOpenMenu(e.target, item);
+        }
+      }}
+    >
+      {item.text || item.label}
+    </div>
+  {/each}
+</div>
+
+<!-- {#if currentMenu}
+  <DropDownMenu
+    left={currentMenu.left}
+    top={currentMenu.top}
+    items={currentMenu.items}
+    on:close={() => {
+      currentMenu = null;
+    }}
+  />
+{/if} -->
+<style>
+  .container {
+    display: flex;
+  }
+  .item {
+    height: var(--dim-titlebar-height);
+    padding: 0px 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .item:hover {
+    background: var(--theme-bg-3);
+  }
+</style>

packages/web/src/utility/common.ts

@@ -46,7 +46,7 @@ export async function shouldDrawTitleBar() {
     return false;
   }
   if (await electron.isNativeMenu()) {
-    return true;
+    return false;
   }
-  return false;
+  return true;
 }

packages/web/src/utility/contextMenu.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { getContext, setContext } from 'svelte';
 import invalidateCommands from '../commands/invalidateCommands';
-import { currentDropDownMenu } from '../stores';
+import { currentDropDownMenu, visibleCommandPalette } from '../stores';
 import getAsArray from './getAsArray';
 
 export function registerMenu(...items) {
@@ -83,13 +83,61 @@ function processTags(items) {
   return res;
 }
 
-export function extractMenuItems(menu, options = null) {
+function extractMenuItems(menu, options = null) {
   let res = [];
   doExtractMenuItems(menu, res, options);
   res = processTags(res);
   return res;
 }
 
+function mapItem(item, commands) {
+  if (item.command) {
+    const command = commands[item.command];
+    if (command) {
+      return {
+        text: command.menuName || command.toolbarName || command.name,
+        keyText: command.keyText || command.keyTextFromGroup,
+        onClick: () => {
+          if (command.getSubCommands) visibleCommandPalette.set(command);
+          else if (command.onClick) command.onClick();
+        },
+        disabled: !command.enabled,
+        hideDisabled: item.hideDisabled,
+      };
+    }
+    return null;
+  }
+  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;
+}
+
 export function getContextMenu(): any {
   return getContext('componentContextMenu');
 }
+
+export function prepareMenuItems(items, options, commandsCustomized) {
+  const extracted = extractMenuItems(items, options);
+  const compacted = _.compact(extracted.map(x => mapItem(x, commandsCustomized)));
+  const filtered = filterMenuItems(compacted);
+  return filtered;
+}

packages/web/src/widgets/TitleBar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import _ from 'lodash';
+  import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
   import FontIcon from '../icons/FontIcon.svelte';
+  import HorizontalMenu from '../modals/HorizontalMenu.svelte';
 
   import { activeTab, currentDatabase } from '../stores';
   import getElectron from '../utility/getElectron';
@@ -11,7 +13,9 @@
 
 <div class="container">
   <div class="icon"><img src="logo192.png" width="20" height="20" /></div>
-  <div class="menu">File Edit Window</div>
+  <div class="menu">
+    <HorizontalMenu items={mainMenuDefinition} />
+  </div>
   <div class="title">{title}</div>
 
   <div class="actions">
@@ -34,7 +38,7 @@
     height: var(--dim-titlebar-height);
     display: flex;
     align-items: center;
-    background: var(--theme-bg-3);
+    background: var(--theme-bg-2);
     color: var(--theme-font-1);
   }
 
@@ -67,6 +71,7 @@
 
   .menu {
     margin-left: 10px;
+    -webkit-app-region: no-drag;
   }
 
   .actions {

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -75,7 +75,6 @@
     const rect = domMainMenu.getBoundingClientRect();
     const left = rect.right;
     const top = rect.top;
-    console.log('mainMenuDefinition', mainMenuDefinition);
     const items = mainMenuDefinition;
     currentDropDownMenu.set({ left, top, items });
   }