Merge branch 'master' of https://github.com/frappe/books

src/App.vue

@@ -4,7 +4,7 @@
     class="h-screen flex flex-col font-sans overflow-hidden antialiased"
   >
     <WindowsTitleBar
-      v-if="['Windows', 'Linux'].includes(platform)"
+      v-if="platform === 'Windows'"
       @close="reloadMainWindowOnSettingsClose"
     />
     <Desk class="flex-1" v-if="activeScreen === 'Desk'" />

src/background.js

@@ -11,6 +11,7 @@ import { getMainWindowSize } from './screenSize';
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 const isMac = process.platform === 'darwin';
+const isLinux = process.platform === 'linux';
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -35,7 +36,7 @@ function createWindow() {
     webPreferences: {
       nodeIntegration: true
     },
-    frame: false,
+    frame: isLinux,
     resizable: true
   });
 
@@ -61,7 +62,7 @@ function createWindow() {
 function createSettingsWindow(tab = 'General') {
   let settingsWindow = new BrowserWindow({
     parent: mainWindow,
-    frame: false,
+    frame: isLinux,
     width: 460,
     height: 577,
     backgroundColor: theme.backgroundColor.gray['200'],

src/components/Controls/Base.vue

@@ -58,7 +58,7 @@ export default {
           'px-2 py-1': this.size === 'small',
           'bg-gray-100': this.background
         },
-        'focus:outline-none focus:bg-gray-200 rounded w-full text-gray-900'
+        'focus:outline-none focus:bg-gray-200 rounded w-full text-gray-900 placeholder-gray-400'
       ];
 
       return this.getInputClassesFromProp(classes);

src/components/Controls/Select.vue

@@ -23,7 +23,7 @@
         </option>
       </select>
       <div
-        class="absolute left-0 pl-2 text-gray-600 pointer-events-none"
+        class="absolute left-0 pl-2 text-gray-400 pointer-events-none"
         v-if="!value"
       >
         {{ inputPlaceholder }}

src/components/DatePicker/DatePicker.vue

@@ -5,7 +5,7 @@
         <span v-if="value">
           {{ formatValue ? formatValue(value) : value }}
         </span>
-        <span class="text-gray-600" v-else>
+        <span class="text-gray-400" v-else>
           <template v-if="placeholder">
             {{ placeholder }}
           </template>

src/pages/DatabaseSelector.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="py-10 flex-1 bg-white window-drag">
+  <div
+    class="py-10 flex-1 bg-white window-drag"
+    :class="{ 'pointer-events-none': loadingDatabase }"
+  >
     <div class="w-full">
       <div class="px-12">
         <h1 class="text-2xl font-semibold">
@@ -29,7 +32,16 @@
                 <feather-icon name="plus" class="text-white w-5 h-5" />
               </div>
             </div>
-            <div class="mt-5 font-medium">{{ _('New File') }}</div>
+            <div class="mt-5 font-medium">
+              <template
+                v-if="loadingDatabase && fileSelectedFrom === 'New File'"
+              >
+                {{ _('Loading...') }}
+              </template>
+              <template v-else>
+                {{ _('New File') }}
+              </template>
+            </div>
             <div class="mt-2 text-sm text-gray-600 text-center">
               {{ _('Create a new file and store it in your computer.') }}
             </div>
@@ -45,7 +57,16 @@
                 <feather-icon name="upload" class="w-4 h-4 text-white" />
               </div>
             </div>
-            <div class="mt-5 font-medium">{{ _('Existing File') }}</div>
+            <div class="mt-5 font-medium">
+              <template
+                v-if="loadingDatabase && fileSelectedFrom === 'Existing File'"
+              >
+                {{ _('Loading...') }}
+              </template>
+              <template v-else>
+                {{ _('Existing File') }}
+              </template>
+            </div>
             <div class="mt-2 text-sm text-gray-600 text-center">
               {{ _('Load an existing .db file from your computer.') }}
             </div>
@@ -67,11 +88,16 @@
             :class="{ 'border-t': i === 0 }"
             v-for="(file, i) in files"
             :key="file.filePath"
-            @click="connectToDatabase(file.filePath)"
+            @click="selectFile(file)"
           >
             <div class="flex items-baseline">
               <span>
+                <template v-if="loadingDatabase && fileSelectedFrom === file">
+                  {{ _('Loading...') }}
+                </template>
+                <template v-else>
                   {{ file.companyName }}
+                </template>
               </span>
             </div>
             <div class="text-gray-700">
@@ -106,6 +132,8 @@ export default {
   name: 'DatabaseSelector',
   data() {
     return {
+      loadingDatabase: false,
+      fileSelectedFrom: null,
       showFiles: false,
       files: []
     };
@@ -116,15 +144,23 @@ export default {
   },
   methods: {
     async newDatabase() {
+      this.fileSelectedFrom = 'New File';
       let filePath = await createNewDatabase();
       this.connectToDatabase(filePath);
     },
     async existingDatabase() {
+      this.fileSelectedFrom = 'Existing File';
       let filePath = await loadExistingDatabase();
       this.connectToDatabase(filePath);
     },
+    async selectFile(file) {
+      this.fileSelectedFrom = file;
+      await this.connectToDatabase(file.filePath);
+    },
     async connectToDatabase(filePath) {
+      this.loadingDatabase = true;
       await connectToLocalDatabase(filePath);
+      this.loadingDatabase = false;
       this.$emit('database-connect');
     },
     getFileLastModified(filePath) {

src/pages/Settings/Settings.vue

@@ -2,11 +2,7 @@
   <div class="flex flex-col flex-1 overflow-hidden">
     <div class="bg-gray-200 window-drag pb-2">
       <div class="p-2">
-        <WindowControls
-          v-if="platform === 'Mac'"
-          @close="frappe.events.trigger('reload-main-window')"
-          :buttons="['close']"
-        />
+        <WindowControls v-if="platform === 'Mac'" :buttons="['close']" />
       </div>
       <Row
         :columnCount="5"
@@ -31,6 +27,8 @@
   </div>
 </template>
 <script>
+import frappe from 'frappejs';
+import { remote } from 'electron';
 import { _ } from 'frappejs/utils';
 import WindowControls from '@/components/WindowControls';
 import TabGeneral from './TabGeneral.vue';
@@ -82,6 +80,11 @@ export default {
     if (index !== -1) {
       this.activeTab = index;
     }
+
+    let currentWindow = remote.getCurrentWindow();
+    currentWindow.on('close', () => {
+      frappe.events.trigger('reload-main-window');
+    });
   },
   methods: {
     getIconComponent(tab) {