native menu, fullscreen refactor

packages/web/src/App.svelte

@@ -15,9 +15,8 @@
   import { subscribeConnectionPingers } from './utility/connectionsPinger';
   import { subscribePermissionCompiler } from './utility/hasPermission';
   import { apiCall } from './utility/api';
-  import { getConfig, getUsedApps } from './utility/metadataLoaders';
+  import { getConfig, getSettings, getUsedApps } from './utility/metadataLoaders';
   import AppTitleProvider from './utility/AppTitleProvider.svelte';
-  import { initTitleBarVisibility } from './utility/common';
 
   let loadedApi = false;
 
@@ -27,13 +26,11 @@
     //   return;
     // }
 
-    await initTitleBarVisibility();
-
     try {
       // console.log('************** LOADING API');
 
-      const settings = await apiCall('config/get-settings');
       const connections = await apiCall('connections/list');
+      const settings = await getSettings();
       const config = await getConfig();
       const apps = await getUsedApps();
       loadedApi = settings && connections && config && apps;

packages/web/src/Screen.svelte

@@ -9,6 +9,7 @@
     openedSnackbars,
     selectedWidget,
     visibleCommandPalette,
+    visibleTitleBar,
     visibleToolbar,
   } from './stores';
   import TabsPanel from './widgets/TabsPanel.svelte';
@@ -23,8 +24,6 @@
   import DragAndDropFileTarget from './DragAndDropFileTarget.svelte';
   import dragDropFileTarget from './utility/dragDropFileTarget';
   import TitleBar from './widgets/TitleBar.svelte';
-  import { onMount } from 'svelte';
-  import { getTitleBarVisibility } from './utility/common';
 
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
@@ -42,7 +41,7 @@
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}
 >
-  {#if getTitleBarVisibility()}
+  {#if $visibleTitleBar}
     <div class="titlebar">
       <TitleBar />
     </div>

packages/web/src/commands/stdCommands.ts

@@ -27,6 +27,7 @@ import { showSnackbarSuccess } from '../utility/snackbar';
 import { apiCall } from '../utility/api';
 import runCommand from './runCommand';
 import { openWebLink } from '../utility/exportElectronFile';
+import { getSettings } from '../utility/metadataLoaders';
 
 function themeCommand(theme: ThemeDefinition) {
   return {
@@ -596,7 +597,13 @@ registerCommand({
   name: 'Toggle full screen',
   keyText: 'F11',
   testEnabled: () => getElectron() != null,
-  onClick: () => getElectron().send('window-action', 'fullscreen'),
+  onClick: async () => {
+    const settings = await getSettings();
+    const value = !settings['app.fullscreen'];
+    apiCall('config/update-settings', { 'app.fullscreen': value });
+    if (value) getElectron().send('window-action', 'fullscreen-on');
+    else getElectron().send('window-action', 'fullscreen-off');
+  },
 });
 
 registerCommand({

packages/web/src/forms/SettingsCheckboxField.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { getFormContext } from './FormProviderCore.svelte';
-  import SettingsCheckboxFieldRaw from './SettingsCheckboxFieldRaw.svelte';
-
-  export let label;
-  export let name;
-  export let disabled = false;
-  export let templateProps = {};
-
-  const { template, setFieldValue, values } = getFormContext();
-</script>
-
-<svelte:component
-  this={template}
-  on:change
-  type="checkbox"
-  {label}
-  {disabled}
-  {...templateProps}
-  labelProps={disabled ? { disabled: true } : { onClick: () => setFieldValue(name, !$values[name]) }}
->
-  <SettingsCheckboxFieldRaw {name} {...$$restProps} {disabled} />
-</svelte:component>

packages/web/src/forms/SettingsCheckboxFieldRaw.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import CheckboxField from './CheckboxField.svelte';
-  import { apiCall } from '../utility/api';
-  import _ from 'lodash';
-  import { useSettings } from '../utility/metadataLoaders';
-
-  export let name;
-  export let defaultValue;
-
-  const settings = useSettings();
-
-  function handleChange(e) {
-    apiCall('config/update-settings', { [name]: e.target['checked'] });
-  }
-</script>
-
-<CheckboxField {...$$restProps} checked={($settings || {})[name] ?? defaultValue} on:change={handleChange} on:change />

packages/web/src/forms/SettingsTextField.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import { getFormContext } from './FormProviderCore.svelte';
-  import SettingsTextFieldRaw from './SettingsTextFieldRaw.svelte';
-
-  export let label;
-  export let name;
-  export let templateProps = {};
-  export let focused = false;
-
-  const { template } = getFormContext();
-</script>
-
-<svelte:component this={template} type="text" {label} {...templateProps}>
-  <SettingsTextFieldRaw {name} {...$$restProps} {focused} />
-</svelte:component>

packages/web/src/forms/SettingsTextFieldRaw.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { apiCall } from '../utility/api';
-
-  import { useSettings } from '../utility/metadataLoaders';
-
-  import TextField from './TextField.svelte';
-
-  export let name;
-  export let defaultValue;
-
-  const settings = useSettings();
-
-  function handleChange(e) {
-    apiCall('config/update-settings', { [name]: e.target['value'] });
-  }
-</script>
-
-<TextField {...$$restProps} value={($settings || {})[name] ?? defaultValue} on:input={handleChange} />

packages/web/src/settings/SettingsModal.svelte

@@ -2,40 +2,16 @@
   import _ from 'lodash';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
 
-  import FormButton from '../forms/FormButton.svelte';
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
-  import FormProvider from '../forms/FormProvider.svelte';
-
-  import FormProvider from '../forms/FormProvider.svelte';
-  import FormSelectField from '../forms/FormSelectField.svelte';
-  import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
   import FormValues from '../forms/FormValues.svelte';
-  import SettingsCheckboxField from '../forms/SettingsCheckboxField.svelte';
   import SettingsFormProvider from '../forms/SettingsFormProvider.svelte';
-  import SettingsTextField from '../forms/SettingsTextField.svelte';
-
+  
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
-  import { getCurrentSettings, getVisibleToolbar, getZoomKoef, visibleToolbar, zoomKoef } from '../stores';
-  import { apiCall } from '../utility/api';
-  import { getTitleBarVisibility } from '../utility/common';
   import getElectron from '../utility/getElectron';
   import { showSnackbarInfo } from '../utility/snackbar';
 
-  // function handleOk(e) {
-  //   apiCall(
-  //     'config/update-settings',
-  //     _.omitBy(e.detail, (v, k) => k.startsWith(':'))
-  //   );
-  //   visibleToolbar.set(!!e.detail[':visibleToolbar']);
-  //   if (electron && !getTitleBarVisibility() != !!e.detail[':useNativeMenu']) {
-  //     electron.send('set-use-native-menu', !!e.detail[':useNativeMenu']);
-  //     showSnackbarInfo('Native menu settings will be applied after app restart');
-  //   }
-  //   closeCurrentModal();
-  // }
-
   const electron = getElectron();
 </script>
 

packages/web/src/stores.ts

@@ -76,9 +76,25 @@ export const currentThemeDefinition = derived([currentTheme, extensions], ([$cur
   $extensions.themes.find(x => x.themeClassName == $currentTheme)
 );
 
+export const visibleTitleBar = derived(useSettings(), $settings => {
+  const electron = getElectron();
+  if (!electron) return false;
+  // console.log('visibleTitleBar:settings', $settings);
+  if (!$settings) return false;
+  return !$settings['app.fullscreen'] && !$settings['app.useNativeMenu'];
+});
+
+export const visibleHamburgerMenuWidget = derived(useSettings(), $settings => {
+  const electron = getElectron();
+  if (!electron) return true;
+  if (!$settings) return false;
+  return !!$settings['app.fullscreen'];
+});
+
 subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
 // subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar');
 subscribeCssVariable(leftPanelWidth, x => `${x}px`, '--dim-left-panel-width');
+subscribeCssVariable(visibleTitleBar, x => (x ? 1 : 0), '--dim-visible-titlebar');
 
 let activeTabIdValue = null;
 activeTabId.subscribe(value => {

packages/web/src/utility/common.ts

@@ -39,24 +39,3 @@ export async function asyncFilter(arr, predicate) {
 
   return arr.filter((_v, index) => results[index]);
 }
-
-async function computeTitleBarVisibility() {
-  const electron = getElectron();
-  if (!electron) {
-    return false;
-  }
-  if (await electron.useNativeMenu()) {
-    return false;
-  }
-  return true;
-}
-
-let titleBarVisibility = false;
-export async function initTitleBarVisibility() {
-  titleBarVisibility = await computeTitleBarVisibility();
-  document.documentElement.style.setProperty('--dim-visible-titlebar', titleBarVisibility ? '1' : '0');
-}
-
-export function getTitleBarVisibility() {
-  return titleBarVisibility;
-}

packages/web/src/utility/getElectron.ts

@@ -26,11 +26,6 @@ class ElectronApi {
     await this.ipcRenderer.invoke('openExternal', url);
   }
 
-  async useNativeMenu() {
-    const res = await this.ipcRenderer.invoke('useNativeMenu');
-    return res;
-  }
-
   async invoke(route, args) {
     const res = await this.ipcRenderer.invoke(route, args);
     return res;

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import FontIcon from '../icons/FontIcon.svelte';
-  import { currentDropDownMenu, selectedWidget, visibleCommandPalette } from '../stores';
-  import { getTitleBarVisibility } from '../utility/common';
+  import { currentDropDownMenu, selectedWidget, visibleCommandPalette, visibleHamburgerMenuWidget } from '../stores';
   import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
 
   let domSettings;
@@ -81,7 +80,7 @@
 </script>
 
 <div class="main">
-  {#if !getTitleBarVisibility()}
+  {#if $visibleHamburgerMenuWidget}
     <div class="wrapper mb-3" on:click={handleMainMenu} bind:this={domMainMenu}>
       <FontIcon icon="icon menu" />
     </div>