Merge pull request #395 from 18alantom/platform-specific-fixes

fix: platform specific, post build fixes

dummy/index.ts

@@ -29,6 +29,8 @@ export async function setupDummyInstance(
   baseCount: number = 1000,
   notifier?: Notifier
 ) {
+  fyo.store.skipTelemetryLogging = true;
+
   fyo.purgeCache();
   notifier?.(fyo.t`Setting Up Instance`, -1);
   const options = {
@@ -55,6 +57,8 @@ export async function setupDummyInstance(
     ModelNameEnum.SystemSettings,
     'instanceId'
   )) as string;
+
+  fyo.store.skipTelemetryLogging = false;
   return { companyName: options.companyName, instanceId };
 }
 

fyo/index.ts

@@ -223,6 +223,7 @@ export class Fyo {
 
   store = {
     isDevelopment: false,
+    skipTelemetryLogging: false,
     appVersion: '',
   };
 }

fyo/telemetry/telemetry.ts

@@ -63,20 +63,16 @@ export class TelemetryManager {
   }
 
   async start(openCount?: number) {
-    this.#telemetryObject.country ||= getCountry(this.fyo);
+    await this.#init();
-    this.#telemetryObject.language ??= getLanguage(this.fyo);
-    this.#telemetryObject.deviceId ||= getDeviceId(this.fyo);
-    this.#telemetryObject.instanceId ||= await getInstanceId(this.fyo);
-    this.#telemetryObject.version ||= await getVersion(this.fyo);
 
     this.#started = true;
     await this.#setCreds();
 
     if (typeof openCount === 'number') {
       this.#telemetryObject.openCount = openCount;
-      this.log(Verb.Started, 'telemetry');
+      this.log(Verb.Opened, 'instance');
     } else {
-      this.log(Verb.Resumed, 'telemetry');
+      this.log(Verb.Resumed, 'instance');
     }
   }
 
@@ -85,7 +81,7 @@ export class TelemetryManager {
       return;
     }
 
-    this.log(Verb.Stopped, 'telemetry');
+    this.log(Verb.Closed, 'instance');
     this.#started = false;
     this.#clear();
   }
@@ -99,8 +95,14 @@ export class TelemetryManager {
     this.#sendBeacon(verb, noun, more);
   }
 
+  async logOpened() {
+    await this.#init();
+    await this.#setCreds();
+    this.#sendBeacon(Verb.Opened, 'app');
+  }
+
   #sendBeacon(verb: Verb, noun: Noun, more?: Record<string, unknown>) {
-    if (!this.hasCreds) {
+    if (!this.hasCreds || this.fyo.store.skipTelemetryLogging) {
       return;
     }
 
@@ -123,6 +125,21 @@ export class TelemetryManager {
     this.#token = tokenString;
   }
 
+  async #init() {
+    this.#telemetryObject.language ??= getLanguage(this.fyo);
+    this.#telemetryObject.deviceId ||= getDeviceId(this.fyo);
+    this.#telemetryObject.version = this.fyo.store.appVersion;
+
+    if (this.fyo.db.dbPath) {
+      this.#telemetryObject.country ||= getCountry(this.fyo);
+      this.#telemetryObject.instanceId ||= await getInstanceId(this.fyo);
+      this.#telemetryObject.version = await getVersion(this.fyo);
+    } else {
+      this.#telemetryObject.country ||= '';
+      this.#telemetryObject.instanceId ||= '';
+    }
+  }
+
   #getTelemtryData(
     verb: Verb,
     noun: Noun,

fyo/telemetry/types.ts

@@ -11,8 +11,8 @@ export enum Verb {
   Cancelled = 'cancelled',
   Imported = 'imported',
   Exported = 'exported',
-  Stopped = 'stopped',
+  Closed = 'closed',
-  Started = 'started',
+  Opened = 'opened',
   Resumed = 'resumed',
 }
 

main.ts

@@ -26,7 +26,7 @@ export class Main {
   mainWindow: BrowserWindow | null = null;
 
   WIDTH = 1200;
-  HEIGHT = 900;
+  HEIGHT = process.platform === 'win32' ? 926 : 900;
 
   constructor() {
     this.icon = this.isDevelopment
@@ -86,10 +86,18 @@ export class Main {
         contextIsolation: false, // TODO: Switch this off
         nodeIntegration: true,
       },
-      frame: this.isLinux,
+      autoHideMenuBar: true,
+      frame: !this.isMac,
       resizable: true,
     };
 
+    if (!this.isMac) {
+      options.titleBarOverlay = {
+        color: '#FFFFFF',
+        height: 26,
+      };
+    }
+
     if (this.isDevelopment || this.isLinux) {
       Object.assign(options, { icon: this.icon });
     }

main/registerIpcMainActionListeners.ts

@@ -16,17 +16,6 @@ import {
 import { saveHtmlAsPdf } from './saveHtmlAsPdf';
 
 export default function registerIpcMainActionListeners(main: Main) {
-  ipcMain.handle(IPC_ACTIONS.TOGGLE_MAXIMIZE_CURRENT_WINDOW, (event) => {
-    const maximized = main.mainWindow!.isFullScreen();
-    if (maximized) {
-      main.mainWindow?.setFullScreen(false);
-      main.mainWindow?.setSize(main.WIDTH, main.HEIGHT, true);
-    } else {
-      main.mainWindow?.setFullScreen(true);
-    }
-    return maximized;
-  });
-
   ipcMain.handle(IPC_ACTIONS.GET_OPEN_FILEPATH, async (event, options) => {
     return await dialog.showOpenDialog(main.mainWindow!, options);
   });

main/registerIpcMainMessageListeners.ts

@@ -20,14 +20,6 @@ export default function registerIpcMainMessageListeners(main: Main) {
     main.mainWindow!.reload();
   });
 
-  ipcMain.on(IPC_MESSAGES.CLOSE_CURRENT_WINDOW, () => {
-    main.mainWindow!.close();
-  });
-
-  ipcMain.on(IPC_MESSAGES.MINIMIZE_CURRENT_WINDOW, () => {
-    main.mainWindow!.minimize();
-  });
-
   ipcMain.on(IPC_MESSAGES.OPEN_EXTERNAL, (_, link) => {
     shell.openExternal(link);
   });

src/App.vue

@@ -3,8 +3,11 @@
     id="app"
     class="h-screen flex flex-col font-sans overflow-hidden antialiased"
   >
-    <WindowsTitleBar v-if="platform === 'Windows'" />
+    <WindowsTitleBar
-
+      v-if="platform === 'Windows'"
+      :db-path="dbPath"
+      :company-name="companyName"
+    />
     <!-- Main Contents -->
     <Desk
       class="flex-1"
@@ -52,6 +55,8 @@ export default {
   data() {
     return {
       activeScreen: null,
+      dbPath: '',
+      companyName: '',
     };
   },
   components: {
@@ -61,8 +66,6 @@ export default {
     WindowsTitleBar,
   },
   async mounted() {
-    fyo.telemetry.platform = this.platform;
-
     const lastSelectedFilePath = fyo.config.get(
       ConfigKeys.LastSelectedFilePath,
       null
@@ -76,7 +79,7 @@ export default {
       await this.fileSelected(lastSelectedFilePath, false);
     } catch (err) {
       await handleErrorWithDialog(err, undefined, true, true);
-      await this.showDbSelector()
+      await this.showDbSelector();
     }
   },
   methods: {
@@ -86,6 +89,11 @@ export default {
       const openCount = await incrementOpenCount(filePath);
       await fyo.telemetry.start(openCount);
       await checkForUpdates(false);
+      this.dbPath = filePath;
+      this.companyName = await fyo.getValue(
+        ModelNameEnum.AccountingSettings,
+        'companyName'
+      );
     },
     async fileSelected(filePath, isNew) {
       fyo.config.set(ConfigKeys.LastSelectedFilePath, filePath);
@@ -130,6 +138,8 @@ export default {
       fyo.telemetry.stop();
       fyo.purgeCache();
       this.activeScreen = 'DatabaseSelector';
+      this.dbPath = '';
+      this.companyName = '';
     },
   },
 };

src/components/Charts/DonutChart.vue

@@ -77,7 +77,8 @@
           text-xs text-gray-600
           font-semibold
           whitespace-nowrap
-          overflow-x-scroll
+          overflow-x-auto
+          no-scrollbar
         "
       >
         {{

src/components/Controls/Currency.vue

@@ -17,7 +17,7 @@
     />
     <div
       v-show="!showInput"
-      :class="[inputClasses, 'cursor-text whitespace-nowrap overflow-x-scroll']"
+      :class="[inputClasses, 'cursor-text whitespace-nowrap overflow-x-auto']"
       @click="activateInput"
       @focus="activateInput"
       tabindex="0"

src/components/Icons/18/fb.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    width="19"
+    height="13"
+    viewBox="0 0 19 13"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.25935 12.128V0.727295H13.8241C14.6628 0.727295 15.3624 0.851619 15.9227 1.10027C16.4831 1.34892 16.9043 1.69405 17.1864 2.13568C17.4684 2.5736 17.6095 3.07832 17.6095 3.64984C17.6095 4.09518 17.5204 4.4867 17.3423 4.82442C17.1641 5.15843 16.9192 5.43305 16.6075 5.6483C16.2994 5.85984 15.9469 6.01014 15.5498 6.09921V6.21054C15.984 6.2291 16.3904 6.35156 16.7689 6.57795C17.1511 6.80433 17.461 7.12163 17.6985 7.52986C17.9361 7.93438 18.0548 8.41683 18.0548 8.97721C18.0548 9.58213 17.9045 10.1221 17.6039 10.5971C17.307 11.0685 16.8672 11.4414 16.2846 11.7161C15.7019 11.9907 14.9838 12.128 14.1303 12.128H9.25935ZM11.6698 10.1574H13.6348C14.3065 10.1574 14.7964 10.0293 15.1044 9.77326C15.4125 9.51348 15.5665 9.16834 15.5665 8.73784C15.5665 8.42239 15.4904 8.14406 15.3382 7.90283C15.1861 7.66161 14.969 7.47234 14.6869 7.33502C14.4086 7.19771 14.0764 7.12905 13.6905 7.12905H11.6698V10.1574ZM11.6698 5.498H13.4567C13.787 5.498 14.0802 5.44047 14.3362 5.32543C14.596 5.20667 14.8001 5.03967 14.9486 4.82442C15.1007 4.60917 15.1768 4.35125 15.1768 4.05064C15.1768 3.6387 15.0302 3.30655 14.737 3.05419C14.4476 2.80184 14.0356 2.67566 13.5012 2.67566H11.6698V5.498Z"
+      fill="#505A62"
+    />
+    <path
+      d="M7.73114 2.75564V0.75855H0.0548096V2.75564H7.73114Z"
+      fill="#0089FF"
+    />
+    <path
+      d="M2.48876 7.43646H7.35669V5.43935H0.0548096V12.1796H2.48876V7.43646Z"
+      fill="#0089FF"
+    />
+  </svg>
+</template>
+<script>
+import Base from '../base';
+export default {
+  name: 'FB',
+  extends: Base,
+};
+</script>

src/components/Report/ListReport.vue

@@ -16,7 +16,7 @@
             text-gray-600 text-base
             px-3
             flex-shrink-0
-            overflow-x-scroll
+            overflow-x-auto
             whitespace-nowrap
           "
         >
@@ -50,7 +50,7 @@
                 text-gray-900 text-base
                 px-3
                 flex-shrink-0
-                overflow-x-scroll
+                overflow-x-auto
                 whitespace-nowrap
               "
             >

src/components/SearchBar.vue

@@ -20,7 +20,7 @@
     >
       <feather-icon name="search" class="w-4 h-4" />
       <p>{{ t`Search` }}</p>
-      <div v-if="!inputValue" class="text-gray-500 ml-auto">
+      <div v-if="!inputValue" class="text-gray-400 ml-auto text-sm">
         {{ modKey('k') }}
       </div>
     </button>
@@ -58,7 +58,7 @@
     <hr v-if="suggestions.length" />
 
     <!-- Search List -->
-    <div :style="`max-height: ${49 * 6 - 1}px`" class="overflow-scroll">
+    <div :style="`max-height: ${49 * 6 - 1}px`" class="overflow-auto">
       <div
         v-for="(si, i) in suggestions"
         :key="`${i}-${si.key}`"

src/components/Sidebar.vue

@@ -7,13 +7,16 @@
   >
     <div>
       <!-- Company name and DB Switcher -->
-      <div class="px-2 flex flex-row items-center justify-between mb-6 mt-12">
+      <div
+        class="px-2 flex flex-row items-center justify-between mb-4"
+        :class="platform === 'Mac' ? 'mt-10' : 'mt-2'"
+      >
         <h6
           class="
             text-xl
             font-semibold
             whitespace-nowrap
-            overflow-scroll
+            overflow-auto
             no-scrollbar
             select-none
             w-32

src/components/WindowsTitleBar.vue

@@ -1,50 +1,24 @@
 <template>
-  <div class="bg-white text-base flex justify-between window-drag border-b">
+  <div
-    <div
+    class="window-drag flex items-center border-b text-gray-900 border-gray-100"
-      class="py-1 px-2 window-no-drag hover:bg-gray-100 cursor-pointer"
+    style="height: 28px"
-      @click="openMenu"
+  >
-    >
+    <Fb class="ml-2" />
-      <feather-icon name="menu" class="w-4 h-4" />
+    <p class="mx-auto text-sm" v-if="companyName && dbPath">
-    </div>
+      {{ companyName }} - {{ dbPath }}
-    <div class="flex window-no-drag">
+    </p>
-      <div
-        class="py-1 px-2 hover:bg-gray-100 cursor-pointer"
-        @click="action('minimize')"
-      >
-        <feather-icon name="minus" class="w-4 h-4" />
-      </div>
-      <div
-        class="flex-center py-1 px-2 hover:bg-gray-100 cursor-pointer"
-        @click="action('maximize')"
-      >
-        <feather-icon name="square" class="w-3 h-3" />
-      </div>
-      <div
-        class="py-1 px-2 hover:bg-red-500 hover:text-white cursor-pointer"
-        @click="action('close')"
-      >
-        <feather-icon name="x" class="w-4 h-4" />
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-import { ipcRenderer } from 'electron';
+import Fb from './Icons/18/fb.vue';
-import { runWindowAction } from 'src/utils/ipcCalls';
-import { IPC_MESSAGES } from 'utils/messages';
 
 export default {
   name: 'WindowsTitleBar',
-  emits: ['close', 'minimize', 'maximize', 'unmaximize'],
+  components: { Fb },
-  methods: {
+  props: {
-    async action(name) {
+    dbPath: String,
-      const actionRan = await runWindowAction(name);
+    companyName: String,
-      this.$emit(actionRan);
-    },
-    openMenu() {
-      ipcRenderer.send(IPC_MESSAGES.OPEN_MENU);
-    },
   },
 };
 </script>

src/pages/Dashboard/Dashboard.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <PageHeader :title="t`Dashboard`" />
 
-    <div class="mx-4 overflow-y-scroll no-scrollbar flex flex-col gap-8">
+    <div class="mx-4 overflow-y-auto no-scrollbar flex flex-col gap-8">
       <Cashflow class="" />
       <hr />
       <UnpaidInvoices />

src/pages/Dashboard/Expenses.vue

@@ -18,7 +18,7 @@
           @mouseleave="active = null"
         >
           <div class="w-3 h-3 rounded-sm flex-shrink-0" :class="d.class" />
-          <p class="ml-2 overflow-x-scroll whitespace-nowrap no-scrollbar w-28">
+          <p class="ml-2 overflow-x-auto whitespace-nowrap no-scrollbar w-28">
             {{ d.account }} 
           </p>
           <p class="whitespace-nowrap flex-shrink-0 ml-auto">

src/pages/DataImport.vue

@@ -127,7 +127,7 @@
       <div v-if="fileName" class="pb-4">
         <h2 class="text-lg font-semibold">{{ t`Assign Imported Labels` }}</h2>
         <div
-          class="gap-2 mt-4 grid grid-flow-col overflow-x-scroll no-scrollbar"
+          class="gap-2 mt-4 grid grid-flow-col overflow-x-auto no-scrollbar"
         >
           <div
             v-for="(f, k) in importer.assignableLabels"
@@ -165,7 +165,7 @@
           {{ t`Verify Imported Data` }}
         </h2>
 
-        <div class="overflow-scroll mt-4 pb-4">
+        <div class="overflow-auto mt-4 pb-4">
           <!-- Column Name Rows  -->
           <div
             class="grid grid-flow-col pb-4 border-b gap-2 sticky top-0 bg-white"
@@ -280,7 +280,7 @@
         <p class="text-lg text-center">
           {{ t`Successfully created the following ${names.length} entries:` }}
         </p>
-        <div class="max-h-96 overflow-y-scroll">
+        <div class="max-h-96 overflow-y-auto">
           <div
             v-for="(n, i) in names"
             :key="'name-' + i"

src/pages/DatabaseSelector.vue

@@ -65,7 +65,7 @@
       <hr />
 
       <!-- File List -->
-      <div class="overflow-scroll" style="max-height: 340px">
+      <div class="overflow-y-auto" style="max-height: 340px">
         <div
           class="h-18 px-6 flex gap-4 items-center"
           :class="creatingDemo ? '' : 'hover:bg-gray-100 cursor-pointer'"
@@ -84,18 +84,31 @@
               bg-gray-200
               text-gray-500
               font-semibold
+              flex-shrink-0
               text-base
             "
           >
             {{ i + 1 }}
           </div>
-          <div>
+          <div class="w-full">
             <p class="font-medium">
               {{ file.companyName }}
             </p>
-            <p class="text-sm text-gray-600">
+            <div
-              {{ formatDate(file.modified) }}
+              class="
-            </p>
+                text-sm text-gray-600
+                flex
+                justify-between
+                overflow-x-scroll
+              "
+            >
+              <p class="whitespace-nowrap mr-2">
+                {{ formatDate(file.modified) }}
+              </p>
+              <p class="text-right" v-if="fyo.store.isDevelopment">
+                {{ file.dbPath }}
+              </p>
+            </div>
           </div>
           <button
             class="
@@ -230,7 +243,7 @@ export default {
       }
 
       this.creatingDemo = true;
-      const baseCount = fyo.store.isDevelopment ? 1000 : 150;
+      const baseCount = fyo.store.isDevelopment ? 1000 : 100;
 
       const { companyName, instanceId } = await setupDummyInstance(
         filePath,

src/pages/GetStarted.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col overflow-y-hidden">
     <PageHeader :title="t`Setup Your Workspace`" />
-    <div class="flex-1 mx-4 overflow-y-auto">
+    <div class="flex-1 mx-4 overflow-y-auto overflow-x-hidden">
       <div class="my-4" v-for="section in sections" :key="section.label">
         <h2 class="font-medium">{{ section.label }}</h2>
         <div class="flex mt-4 -mx-2">
@@ -14,7 +14,7 @@
               class="
                 flex flex-col
                 justify-between
-                h-full
+                h-40
                 p-4
                 border
                 rounded-lg

src/pages/ListView/List.vue

@@ -11,7 +11,7 @@
         <div
           v-for="(column, i) in columns"
           :key="column.label"
-          class="py-4 overflow-x-scroll whitespace-nowrap"
+          class="py-4 overflow-x-auto no-scrollbar whitespace-nowrap"
           :class="{
             'text-right': isNumeric(column.fieldtype),
             'pr-4': i === columns.length - 1,

src/pages/PrintView/PrintView.vue

@@ -93,16 +93,13 @@ export default {
       const html = document.createElement('html');
       const head = document.createElement('head');
       const body = document.createElement('body');
-      const style = document.getElementsByTagName('style');
+      const style = getAllCSSAsStyleElem();
-      const styleTags = Array.from(style)
-        .map((s) => s.outerHTML)
-        .join('\n');
 
       head.innerHTML = [
         '<meta charset="UTF-8">',
         '<title>Print Window</title>',
-        styleTags,
       ].join('\n');
+      head.append(style);
 
       body.innerHTML = this.$refs.printContainer.innerHTML;
       html.append(head, body);
@@ -112,8 +109,7 @@ export default {
       const savePath = await this.getSavePath();
       if (!savePath) return;
 
-
+      const html = this.constructPrintDocument();
-      const html = this.constructPrintDocument()
       await makePDF(html, savePath);
       fyo.telemetry.log(Verb.Exported, 'SalesInvoice', { extension: 'pdf' });
     },
@@ -138,4 +134,21 @@ export default {
     },
   },
 };
+
+function getAllCSSAsStyleElem() {
+  const cssTexts = [];
+  for (const sheet of document.styleSheets) {
+    for (const rule of sheet.cssRules) {
+      cssTexts.push(rule.cssText);
+    }
+
+    for (const rule of sheet.ownerRule ?? []) {
+      cssTexts.push(rule.cssText);
+    }
+  }
+
+  const styleElem = document.createElement('style');
+  styleElem.innerHTML = cssTexts.join('\n');
+  return styleElem;
+}
 </script>

src/pages/Settings/Settings.vue

@@ -36,7 +36,7 @@
           <div class="mt-2 text-xs">{{ tab.label }}</div>
         </div>
       </div>
-      <div class="flex-1 overflow-y-scroll">
+      <div class="flex-1 overflow-y-auto">
         <component :is="activeTabComponent" @change="handleChange" />
       </div>
     </div>

src/renderer.ts

@@ -30,6 +30,7 @@ import { setLanguageMap } from './utils/language';
 
   fyo.store.isDevelopment = isDevelopment;
   fyo.store.appVersion = version;
+  const platformName = getPlatformName(platform);
 
   setOnWindow(isDevelopment);
 
@@ -50,16 +51,7 @@ import { setLanguageMap } from './utils/language';
         return fyo;
       },
       platform() {
-        switch (platform) {
+        return platformName;
-          case 'win32':
-            return 'Windows';
-          case 'darwin':
-            return 'Mac';
-          case 'linux':
-            return 'Linux';
-          default:
-            return 'Linux';
-        }
       },
     },
     methods: {
@@ -68,6 +60,8 @@ import { setLanguageMap } from './utils/language';
     },
   });
 
+  fyo.telemetry.platform = platformName;
+  await fyo.telemetry.logOpened();
   app.mount('body');
 })();
 
@@ -106,3 +100,16 @@ function setOnWindow(isDevelopment: boolean) {
   // @ts-ignore
   window.DateTime = DateTime;
 }
+
+function getPlatformName(platform: string) {
+  switch (platform) {
+    case 'win32':
+      return 'Windows';
+    case 'darwin':
+      return 'Mac';
+    case 'linux':
+      return 'Linux';
+    default:
+      return 'Linux';
+  }
+}

src/utils/ipcCalls.ts

@@ -39,26 +39,6 @@ export async function makePDF(html: string, savePath: string) {
   }
 }
 
-export async function runWindowAction(name: WindowAction) {
-  switch (name) {
-    case 'close':
-      ipcRenderer.send(IPC_MESSAGES.CLOSE_CURRENT_WINDOW);
-      break;
-    case 'minimize':
-      ipcRenderer.send(IPC_MESSAGES.MINIMIZE_CURRENT_WINDOW);
-      break;
-    case 'maximize':
-      const maximized = await ipcRenderer.invoke(
-        IPC_ACTIONS.TOGGLE_MAXIMIZE_CURRENT_WINDOW
-      );
-      name = maximized ? 'unmaximize' : name;
-      break;
-    default:
-      throw new Error(`invalid window action ${name}`);
-  }
-  return name;
-}
-
 export function showExportInFolder(message: string, filePath: string) {
   showToast({
     message,

utils/messages.ts

@@ -5,13 +5,10 @@ export enum IPC_MESSAGES {
   OPEN_EXTERNAL = 'open-external',
   SHOW_ITEM_IN_FOLDER = 'show-item-in-folder',
   RELOAD_MAIN_WINDOW = 'reload-main-window',
-  CLOSE_CURRENT_WINDOW = 'close-current-window',
-  MINIMIZE_CURRENT_WINDOW = 'minimize-current-window',
 }
 
 // ipcRenderer.invoke(...)
 export enum IPC_ACTIONS {
-  TOGGLE_MAXIMIZE_CURRENT_WINDOW = 'toggle-maximize-current-window',
   GET_OPEN_FILEPATH = 'open-dialog',
   GET_SAVE_FILEPATH = 'save-dialog',
   GET_DIALOG_RESPONSE = 'show-message-box',