Merge branch 'master' of https://github.com/antares-sql/antares into ts-renderer

.github/workflows/build-linux.yml

@@ -1,4 +1,4 @@
-name: Build/release [linux]
+name: Build/release [LINUX]
 
 on: push
 

.github/workflows/build-mac.yml

@@ -1,4 +1,4 @@
-name: Build/release [mac]
+name: Build/release [MAC]
 
 on: push
 

.github/workflows/build-win.yml

@@ -1,4 +1,4 @@
-name: Build/release [windows]
+name: Build/release [WINDOWS]
 
 on: push
 

.github/workflows/create-artifact-linux.yml

@@ -0,0 +1,26 @@
+name: Create artifact [LINUX]
+
+on: 
+  workflow_dispatch: {}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: npm install & build
+        run: |
+          npm install
+          npm run build:local
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: linux-build
+          retention-days: 3
+          path: |
+            build
+            !build/*-unpacked
+            !build/.icon-ico

.github/workflows/test-e2e-linux.yml

@@ -1,4 +1,4 @@
-name: Test end-to-end [linux]
+name: Test end-to-end [LINUX]
 
 on: push
 

.vscode/settings.json

@@ -6,7 +6,8 @@
       "PostgreSQL",
       "SQLite",
       "Windows",
-      "translation"
+      "translation",
+      "Linux"
    ],
    "svg.preview.background": "transparent"
 }

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.6](https://github.com/antares-sql/antares/compare/v0.5.4...v0.5.6) (2022-06-02)
+
+### Bug Fixes
+
+* empty query tab schema select if no schema selected ([31b7999](https://github.com/antares-sql/antares/commit/31b7999bba5d115913d42087614b9888bc761068))
+* inline field update not working with tables missing primary key ([caf776b](https://github.com/antares-sql/antares/commit/caf776bd55606c793c9763c204aa9f05d1feb27f))
+* **SQLite:** unable to insert rows with TEXT fields ([a7d5e19](https://github.com/antares-sql/antares/commit/a7d5e1973cd59d7d0ef1e74bdcf44d87fba43559))
+* **UI:** select closes clicking on scrollbar ([8870304](https://github.com/antares-sql/antares/commit/8870304c15346257a90193807b9ae07c1393e3e2))
+
+
+### Improvements
+
+* improved precision of MariaDB or MySQL auto detection ([26aad51](https://github.com/antares-sql/antares/commit/26aad519df6ea1bbc7dffbf540193a7b2ed9ae2a))
+
 ### [0.5.5](https://github.com/antares-sql/antares/compare/v0.5.4...v0.5.5) (2022-05-24)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "antares",
   "productName": "Antares",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "A modern, fast and productivity driven SQL client with a focus in UX.",
   "license": "MIT",
   "repository": "https://github.com/antares-sql/antares.git",
@@ -13,7 +13,7 @@
     "compile:workers": "webpack --mode=production --config webpack.workers.config.js",
     "compile:renderer": "webpack --mode=production --config webpack.renderer.config.js",
     "build": "cross-env NODE_ENV=production npm run compile",
-    "build:local": "npm run build && electron-builder",
+    "build:local": "npm run build && electron-builder --publish never",
     "build:appx": "npm run build:local -- --win appx",
     "rebuild:electron": "rimraf ./dist &&  npm run postinstall",
     "release": "standard-version",
@@ -82,6 +82,12 @@
       "license": "./LICENSE",
       "category": "Development"
     },
+    "nsis": {
+      "license": "./LICENSE",
+      "installerIcon": "assets/icon.ico",
+      "uninstallerIcon": "assets/icon.ico",
+      "installerHeader": "assets/icon.ico"
+    },
     "portable": {
       "artifactName": "${productName}-${version}-portable.exe"
     },

src/main/ipc-handlers/tables.ts

@@ -169,6 +169,8 @@ export default (connections: {[key: string]: antares.Client}) => {
          }
          else {
             const { orgRow } = params;
+            delete orgRow._antares_id;
+
             reload = true;
 
             for (const key in orgRow) {

src/main/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, /* session, */ nativeImage, Menu } from 'electron';
+import { app, BrowserWindow, /* session, */ nativeImage, Menu, ipcMain } from 'electron';
 import * as path from 'path';
 import * as Store from 'electron-store';
 import * as windowStateKeeper from 'electron-window-state';
@@ -7,9 +7,13 @@ import * as remoteMain from '@electron/remote/main';
 import ipcHandlers from './ipc-handlers';
 
 Store.initRenderer();
+const persistentStore = new Store({ name: 'settings' });
 
+const appTheme = persistentStore.get('application_theme');
 const isDevelopment = process.env.NODE_ENV !== 'production';
 const isMacOS = process.platform === 'darwin';
+const isLinux = process.platform === 'linux';
+const isWindows = process.platform === 'win32';
 const gotTheLock = app.requestSingleInstanceLock();
 
 process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
@@ -19,7 +23,7 @@ let mainWindow: BrowserWindow;
 let mainWindowState: windowStateKeeper.State;
 
 async function createMainWindow () {
-   const icon = require('../renderer/images/logo-32.png');
+   const icon = require('../renderer/images/logo-64.png');
    const window = new BrowserWindow({
       width: mainWindowState.width,
       height: mainWindowState.height,
@@ -28,15 +32,21 @@ async function createMainWindow () {
       minWidth: 900,
       minHeight: 550,
       title: 'Antares SQL',
-      autoHideMenuBar: true,
       icon: nativeImage.createFromDataURL(icon.default),
       webPreferences: {
          nodeIntegration: true,
          contextIsolation: false,
          spellcheck: false
       },
-      frame: false,
+      autoHideMenuBar: true,
-      titleBarStyle: isMacOS ? 'hidden' : 'default',
+      titleBarStyle: isLinux ? 'default' :'hidden',
+      titleBarOverlay: isWindows
+         ? {
+            color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
+            symbolColor: appTheme === 'dark' ? '#fff' : '#000',
+            height: 30
+         }
+         : false,
       trafficLightPosition: isMacOS ? { x: 10, y: 8 } : undefined,
       backgroundColor: '#1d1d1d'
    });
@@ -73,10 +83,24 @@ else {
    // Initialize ipcHandlers
    ipcHandlers();
 
+   ipcMain.on('refresh-theme-settings', () => {
+      const appTheme = persistentStore.get('application_theme');
+      if(isWindows){
+         mainWindow.setTitleBarOverlay({
+            color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
+            symbolColor: appTheme === 'dark' ? '#fff' : '#000'
+         });
+      }
+   });
+
+   ipcMain.on('change-window-title', (event, title: string) => {
+      if (mainWindow) mainWindow.setTitle(title);
+   });
+
    // quit application when all windows are closed
    app.on('window-all-closed', () => {
       // on macOS it is common for applications to stay open until the user explicitly quits
-      if (isMacOS) app.quit();
+      if (!isMacOS) app.quit();
    });
 
    app.on('activate', async () => {

src/renderer/components/BaseSelect.vue

@@ -222,8 +222,16 @@ export default defineComponent({
             hightlightedIndex.value = 0;
       });
 
+      watch(() => props.modelValue, (val) => {
+         internalValue.value = val;
+      });
+
+      watch(() => props.value, (val) => {
+         internalValue.value = val;
+      });
+
       const currentOptionLabel = computed(() =>
-         flattenOptions.value.find(d => d.value === props.modelValue)?.label
+         flattenOptions.value.find(d => d.value === internalValue.value)?.label
       );
 
       const select = (opt) => {

src/renderer/components/TheSettingBar.vue

@@ -77,6 +77,7 @@ const { showSettingModal, showScratchpad } = applicationStore;
 const { getConnectionName, updateConnections } = connectionsStore;
 const { getWorkspace, selectWorkspace } = workspacesStore;
 
+const isLinux = process.platform === 'linux';
 const isContext: Ref<boolean> = ref(false);
 const isDragging: Ref<boolean> = ref(false);
 const contextEvent: Ref<MouseEvent> = ref(null);
@@ -101,7 +102,9 @@ const contextMenu = (event: MouseEvent, connection: ConnectionParams) => {
 
 const tooltipPosition = (e: Event) => {
    const el = e.target ? e.target : e;
-   const fromTop = window.scrollY + (el as HTMLElement).getBoundingClientRect().top - ((el as HTMLElement).offsetHeight / 4);
+   const fromTop = isLinux
+      ? window.scrollY + (el as HTMLElement).getBoundingClientRect().top + ((el as HTMLElement).offsetHeight / 4)
+      : window.scrollY + (el as HTMLElement).getBoundingClientRect().top - ((el as HTMLElement).offsetHeight / 4);
    (el as HTMLElement).querySelector<HTMLElement>('.ex-tooltip-content').style.top = `${fromTop}px`;
 };
 

src/renderer/components/TheTitleBar.vue

@@ -1,5 +1,9 @@
 <template>
-   <div id="titlebar" @dblclick="toggleFullScreen">
+   <div
+      v-if="!isLinux"
+      id="titlebar"
+      @dblclick="toggleFullScreen"
+   >
       <div class="titlebar-resizer" />
       <div class="titlebar-elements">
          <img
@@ -26,28 +30,7 @@
          >
             <i class="mdi mdi-24px mdi-refresh" />
          </div>
-         <div
+         <div v-if="isWindows" style="width: 140px;" />
-            v-if="!isMacOS"
-            class="titlebar-element"
-            @click="minimizeApp"
-         >
-            <i class="mdi mdi-24px mdi-minus" />
-         </div>
-         <div
-            v-if="!isMacOS"
-            class="titlebar-element"
-            @click="toggleFullScreen"
-         >
-            <i v-if="isMaximized" class="mdi mdi-24px mdi-fullscreen-exit" />
-            <i v-else class="mdi mdi-24px mdi-fullscreen" />
-         </div>
-         <div
-            v-if="!isMacOS"
-            class="titlebar-element close-button"
-            @click="closeApp"
-         >
-            <i class="mdi mdi-24px mdi-close" />
-         </div>
       </div>
    </div>
 </template>
@@ -55,7 +38,6 @@
 <script setup lang="ts">
 import { computed, onUnmounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
-import { ipcRenderer } from 'electron';
 import { getCurrentWindow } from '@electron/remote';
 import { useConnectionsStore } from '@/stores/connections';
 import { useWorkspacesStore } from '@/stores/workspaces';
@@ -74,7 +56,9 @@ const appIcon = require('@/images/logo.svg');
 const w = ref(getCurrentWindow());
 const isMaximized = ref(getCurrentWindow().isMaximized());
 const isDevelopment = ref(process.env.NODE_ENV === 'development');
-const isMacOS = ref(process.platform === 'darwin');
+const isMacOS = process.platform === 'darwin';
+const isWindows = process.platform === 'win32';
+const isLinux = process.platform === 'linux';
 
 const windowTitle = computed(() => {
    if (!selectedWorkspace.value) return '';
@@ -87,14 +71,6 @@ const windowTitle = computed(() => {
    return [connectionName, ...breadcrumbs].join(' • ');
 });
 
-const closeApp = () => {
-   ipcRenderer.send('close-app');
-};
-
-const minimizeApp = () => {
-   w.value.minimize();
-};
-
 const toggleFullScreen = () => {
    if (isMaximized.value)
       w.value.unmaximize();
@@ -165,7 +141,7 @@ onUnmounted(() => {
         height: $titlebar-height;
         line-height: 0;
         padding: 0 0.7rem;
-        opacity: 0.7;
+        opacity: 0.9;
         transition: opacity 0.2s;
         -webkit-app-region: no-drag;
 

src/renderer/components/Workspace.vue

@@ -315,10 +315,9 @@
             </template>
          </Draggable>
          <WorkspaceEmptyState v-if="!workspace.tabs.length" @new-tab="addQueryTab" />
-         <template v-for="tab of workspace.tabs">
+         <template v-for="tab of workspace.tabs" :key="tab.uid">
             <WorkspaceTabQuery
-               v-if="tab.type==='query'"
+               v-if="tab.type ==='query'"
-               :key="tab.uid"
                :tab-uid="tab.uid"
                :tab="tab"
                :is-selected="selectedTab === tab.uid"
@@ -326,7 +325,7 @@
             />
             <WorkspaceTabTable
                v-else-if="['temp-data', 'data'].includes(tab.type)"
-               :key="tab.uid+'_data'"
+               v-once
                :tab-uid="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
@@ -336,7 +335,6 @@
             />
             <WorkspaceTabNewTable
                v-else-if="tab.type === 'new-table'"
-               :key="tab.uid+'_new-table'"
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
@@ -345,7 +343,6 @@
             />
             <WorkspaceTabPropsTable
                v-else-if="tab.type === 'table-props'"
-               :key="tab.uid+'_table-props'"
                :tab-uid="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
@@ -354,7 +351,6 @@
             />
             <WorkspaceTabNewView
                v-else-if="tab.type === 'new-view'"
-               :key="tab.uid+'_new-view'"
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
@@ -363,7 +359,6 @@
             />
             <WorkspaceTabPropsView
                v-else-if="tab.type === 'view-props'"
-               :key="tab.uid+'_view-props'"
                :tab-uid="tab.uid"
                :is-selected="selectedTab === tab.uid"
                :connection="connection"
@@ -372,7 +367,6 @@
             />
             <WorkspaceTabNewTrigger
                v-else-if="tab.type === 'new-trigger'"
-               :key="tab.uid+'_new-trigger'"
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
@@ -382,7 +376,6 @@
             />
             <WorkspaceTabPropsTrigger
                v-else-if="['temp-trigger-props', 'trigger-props'].includes(tab.type)"
-               :key="tab.uid+'_trigger-props'"
                :tab-uid="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
@@ -391,7 +384,6 @@
             />
             <WorkspaceTabNewTriggerFunction
                v-else-if="tab.type === 'new-trigger-function'"
-               :key="tab.uid+'_new-trigger-function'"
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
@@ -401,7 +393,6 @@
             />
             <WorkspaceTabPropsTriggerFunction
                v-else-if="['temp-trigger-function-props', 'trigger-function-props'].includes(tab.type)"
-               :key="tab.uid+'_trigger-function-props'"
                :tab-uid="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
@@ -410,7 +401,6 @@
             />
             <WorkspaceTabNewRoutine
                v-else-if="tab.type === 'new-routine'"
-               :key="tab.uid+'_new-routine'"
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
@@ -420,7 +410,6 @@
             />
             <WorkspaceTabPropsRoutine
                v-else-if="['temp-routine-props', 'routine-props'].includes(tab.type)"
-               :key="tab.uid+'_routine-props'"
                :tab-uid="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
@@ -429,7 +418,6 @@
             />
             <WorkspaceTabNewFunction
                v-else-if="tab.type === 'new-function'"
-               :key="tab.uid+'_new-function'"
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
@@ -439,7 +427,6 @@
             />
             <WorkspaceTabPropsFunction
                v-else-if="['temp-function-props', 'function-props'].includes(tab.type)"
-               :key="tab.uid+'_function-props'"
                :tab-uid="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"
@@ -448,7 +435,6 @@
             />
             <WorkspaceTabNewScheduler
                v-else-if="tab.type === 'new-scheduler'"
-               :key="tab.uid+'_new-scheduler'"
                :tab-uid="tab.uid"
                :tab="tab"
                :connection="connection"
@@ -458,7 +444,6 @@
             />
             <WorkspaceTabPropsScheduler
                v-else-if="['temp-scheduler-props', 'scheduler-props'].includes(tab.type)"
-               :key="tab.uid+'_scheduler-props'"
                :tab-uid="tab.uid"
                :connection="connection"
                :is-selected="selectedTab === tab.uid"

src/renderer/components/WorkspaceAddConnectionPanel.vue

@@ -516,9 +516,9 @@ const continueTest = async (credentials: { user: string; password: string }) =>
    isTesting.value = false;
 };
 
-const saveConnection = () => {
+const saveConnection = async () => {
+   await addConnection(connection.value);
    selectWorkspace(connection.value.uid);
-   return addConnection(connection.value);
 };
 
 const closeAsking = () => {

src/renderer/components/WorkspaceTabPropsTable.vue

@@ -438,15 +438,12 @@ export default {
 
          // Fields Changes
          const changes = [];
-         this.originalFields.forEach((originalField, oI) => {
+         this.localFields.forEach((field, i) => {
-            const lI = this.localFields.findIndex(localField => localField._antares_id === originalField._antares_id);
+            const originalField = this.originalFields.find(oField => oField._antares_id === field._antares_id);
-            const originalSibling = oI > 0 ? this.originalFields[oI - 1]._antares_id : false;
+            const after = i > 0 ? this.localFields[i - 1].name : false;
-            const localSibling = lI > 0 ? this.localFields[lI - 1]._antares_id : false;
-            const after = lI > 0 ? this.localFields[lI - 1].name : false;
             const orgName = originalField.name;
 
-            if (JSON.stringify(originalField) !== JSON.stringify(this.localFields[lI]) || originalSibling !== localSibling)
+            changes.push({ ...field, after, orgName });
-               if (this.localFields[lI]) changes.push({ ...this.localFields[lI], after, orgName });
          });
 
          // OPTIONS

src/renderer/components/WorkspaceTabQueryTable.vue

@@ -5,7 +5,6 @@
       tabindex="0"
       :style="{'height': resultsSize+'px'}"
       @keyup.delete="showDeleteConfirmModal"
-      @keydown.ctrl.a="selectAllRows($event)"
       @keydown.esc="deselectRows"
    >
       <TableContext
@@ -78,7 +77,11 @@
                   :key-usage="keyUsage"
                   :element-type="elementType"
                   :class="{'selected': selectedRows.includes(row._antares_id)}"
-                  @select-row="selectRow($event, row._antares_id)"
+                  :selected="selectedRows.includes(row._antares_id)"
+                  :selected-cell="selectedRows.length === 1 && selectedRows.includes(row._antares_id) ? selectedField : null"
+                  @start-editing="isEditingRow = true"
+                  @stop-editing="isEditingRow = false"
+                  @select-row="selectRow"
                   @update-field="updateField($event, row)"
                   @contextmenu="contextMenu"
                />
@@ -162,7 +165,9 @@ export default {
          currentSortDir: 'asc',
          resultsetIndex: 0,
          scrollElement: null,
-         rowHeight: 23
+         rowHeight: 23,
+         selectedField: null,
+         isEditingRow: false
       };
    },
    computed: {
@@ -268,9 +273,11 @@ export default {
    },
    mounted () {
       window.addEventListener('resize', this.resizeResults);
+      window.addEventListener('keydown', this.onKey);
    },
    unmounted () {
       window.removeEventListener('resize', this.resizeResults);
+      window.removeEventListener('keydown', this.onKey);
    },
    methods: {
       fieldType (cKey) {
@@ -447,20 +454,23 @@ export default {
             return row;
          });
       },
-      selectRow (event, row) {
+      selectRow (event, row, field) {
-         if (event.ctrlKey) {
+         this.selectedField = field;
-            if (this.selectedRows.includes(row))
+         const selectedRowId = row._antares_id;
-               this.selectedRows = this.selectedRows.filter(el => el !== row);
+
+         if (event.ctrlKey || event.metaKey) {
+            if (this.selectedRows.includes(selectedRowId))
+               this.selectedRows = this.selectedRows.filter(el => el !== selectedRowId);
             else
-               this.selectedRows.push(row);
+               this.selectedRows.push(selectedRowId);
          }
          else if (event.shiftKey) {
             if (!this.selectedRows.length)
-               this.selectedRows.push(row);
+               this.selectedRows.push(selectedRowId);
             else {
                const lastID = this.selectedRows.slice(-1)[0];
                const lastIndex = this.sortedResults.findIndex(el => el._antares_id === lastID);
-               const clickedIndex = this.sortedResults.findIndex(el => el._antares_id === row);
+               const clickedIndex = this.sortedResults.findIndex(el => el._antares_id === selectedRowId);
                if (lastIndex > clickedIndex) {
                   for (let i = clickedIndex; i < lastIndex; i++)
                      this.selectedRows.push(this.sortedResults[i]._antares_id);
@@ -472,18 +482,20 @@ export default {
             }
          }
          else
-            this.selectedRows = [row];
+            this.selectedRows = [selectedRowId];
       },
       selectAllRows (e) {
          if (e.target.classList.contains('editable-field')) return;
 
+         this.selectedField = 0;
          this.selectedRows = this.localResults.reduce((acc, curr) => {
             acc.push(curr._antares_id);
             return acc;
          }, []);
       },
       deselectRows () {
-         this.selectedRows = [];
+         if (!this.isEditingRow)
+            this.selectedRows = [];
       },
       contextMenu (event, cell) {
          if (event.target.localName === 'input') return;
@@ -536,6 +548,113 @@ export default {
             content: rows,
             filename
          });
+      },
+      onKey (e) {
+         if (!this.isSelected)
+            return;
+
+         if (this.isEditingRow)
+            return;
+
+         if ((e.ctrlKey || e.metaKey) && e.code === 'KeyA' && !e.altKey)
+            this.selectAllRows(e);
+
+         // row naviation stuff
+         if ((e.code.includes('Arrow') || e.code === 'Tab') && this.sortedResults.length > 0 && !e.altKey) {
+            e.preventDefault();
+
+            const aviableFields= Object.keys(this.sortedResults[0]).slice(0, -1); // removes _antares_id
+
+            if (!this.selectedField)
+               this.selectedField = aviableFields[0];
+
+            const selectedId = this.selectedRows[0];
+            const selectedIndex = this.sortedResults.findIndex(row => row._antares_id === selectedId);
+            const selectedFieldIndex = aviableFields.findIndex(field => field === this.selectedField);
+            let nextIndex = 0;
+            let nextFieldIndex = 0;
+
+            if (selectedIndex > -1) {
+               switch (e.code) {
+                  case 'ArrowDown':
+                     nextIndex = selectedIndex + 1;
+                     nextFieldIndex = selectedFieldIndex;
+
+                     if (nextIndex > this.sortedResults.length -1)
+                        nextIndex = this.sortedResults.length -1;
+
+                     break;
+                  case 'ArrowUp':
+                     nextIndex = selectedIndex - 1;
+                     nextFieldIndex = selectedFieldIndex;
+
+                     if (nextIndex < 0)
+                        nextIndex = 0;
+
+                     break;
+
+                  case 'ArrowRight':
+                     nextIndex = selectedIndex;
+                     nextFieldIndex = selectedFieldIndex + 1;
+
+                     if (nextFieldIndex > aviableFields.length -1)
+                        nextFieldIndex = 0;
+
+                     break;
+
+                  case 'ArrowLeft':
+                     nextIndex = selectedIndex;
+                     nextFieldIndex = selectedFieldIndex - 1;
+
+                     if (nextFieldIndex < 0)
+                        nextFieldIndex = aviableFields.length -1;
+
+                     break;
+
+                  case 'Tab':
+                     nextIndex = selectedIndex;
+                     if (e.shiftKey) {
+                        nextFieldIndex = selectedFieldIndex - 1;
+                        if (nextFieldIndex < 0)
+                           nextFieldIndex = aviableFields.length -1;
+                     }
+                     else {
+                        nextFieldIndex = selectedFieldIndex + 1;
+                        if (nextFieldIndex > aviableFields.length -1)
+                           nextFieldIndex = 0;
+                     }
+               }
+            }
+
+            if (this.sortedResults[nextIndex] && nextIndex !== selectedIndex) {
+               this.selectedRows = [this.sortedResults[nextIndex]._antares_id];
+               this.$nextTick(() => this.scrollToCell(this.scrollElement.querySelector('.td.selected')));
+            }
+
+            if (aviableFields[nextFieldIndex] && nextFieldIndex !== selectedFieldIndex) {
+               this.selectedField = aviableFields[nextFieldIndex];
+               this.$nextTick(() => this.scrollToCell(this.scrollElement.querySelector('.td.selected')));
+            }
+         }
+      },
+      scrollToCell (el) {
+         if (!el) return;
+         const visYMin = this.scrollElement.scrollTop;
+         const visYMax = this.scrollElement.scrollTop + this.scrollElement.clientHeight - el.clientHeight;
+         const visXMin = this.scrollElement.scrollLeft;
+         const visXMax = this.scrollElement.scrollLeft + this.scrollElement.clientWidth - el.clientWidth;
+
+         if (el.offsetTop < visYMin)
+            this.scrollElement.scrollTop = el.offsetTop;
+
+         else if (el.offsetTop >= visYMax)
+            this.scrollElement.scrollTop = el.offsetTop - this.scrollElement.clientHeight + el.clientHeight;
+
+         if (el.offsetLeft < visXMin)
+            this.scrollElement.scrollLeft = el.offsetLeft;
+
+         else if (el.offsetLeft >= visXMax)
+            this.scrollElement.scrollLeft = el.offsetLeft - this.scrollElement.clientWidth + el.clientWidth;
       }
    }
 };

src/renderer/components/WorkspaceTabQueryTableRow.vue

@@ -2,14 +2,15 @@
    <div
       class="tr"
       :style="{height: itemHeight+'px'}"
-      @click="selectRow($event, row._antares_id)"
    >
       <div
          v-for="(col, cKey) in row"
          v-show="cKey !== '_antares_id'"
          :key="cKey"
          class="td p-0"
-         tabindex="0"
+         :class="{selected: selectedCell === cKey}"
+         @click="selectRow($event, cKey)"
+
          @contextmenu.prevent="openContext($event, { id: row._antares_id, orgField: cKey })"
       >
          <template v-if="cKey !== '_antares_id'">
@@ -17,7 +18,7 @@
                v-if="!isInlineEditor[cKey] && fields[cKey]"
                class="cell-content"
                :class="`${isNull(col)} ${typeClass(fields[cKey].type)}`"
-               @dblclick="editON($event, col, cKey)"
+               @dblclick="editON(cKey)"
             >{{ cutText(typeFormat(col, fields[cKey].type.toLowerCase(), fields[cKey].length)) }}</span>
             <ForeignKeySelect
                v-else-if="isForeignKey(cKey)"
@@ -105,7 +106,7 @@
                         <div class="mr-4">
                            <b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}
                         </div>
-                        <div>
+                        <div v-if="editingType">
                            <b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
                         </div>
                      </div>
@@ -170,7 +171,9 @@
                      <b>{{ $t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>
                      <b>{{ $t('word.mimeType') }}</b>: {{ contentInfo.mime }}
                   </div>
-                  <div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
+                  <div v-if="editingType">
+                     <b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
+                  </div>
                </div>
                <div class="mt-3">
                   <label>{{ $t('message.uploadFile') }}</label>
@@ -230,9 +233,11 @@ export default {
       fields: Object,
       keyUsage: Array,
       itemHeight: Number,
-      elementType: { type: String, default: 'table' }
+      elementType: { type: String, default: 'table' },
+      selected: { type: Boolean, default: false },
+      selectedCell: { type: String, default: null }
    },
-   emits: ['update-field', 'select-row', 'contextmenu'],
+   emits: ['update-field', 'select-row', 'contextmenu', 'start-editing', 'stop-editing'],
    data () {
       return {
          isInlineEditor: {},
@@ -336,6 +341,9 @@ export default {
 
          return false;
       },
+      isBaseSelectField () {
+         return this.isForeignKey(this.editingField) || this.inputProps.type === 'boolean' || this.enumArray;
+      },
       enumArray () {
          if (this.fields[this.editingField] && this.fields[this.editingField].enumValues)
             return this.fields[this.editingField].enumValues.replaceAll('\'', '').split(',');
@@ -362,8 +370,21 @@ export default {
                   this.editorMode = this.availableLanguages.find(lang => lang.id === filteredLanguages[0].languageId).slug;
             })();
          }
+      },
+      selected (isSelected) {
+         if (isSelected)
+            window.addEventListener('keydown', this.onKey);
+
+         else {
+            this.editOFF();
+            window.removeEventListener('keydown', this.onKey);
+         }
       }
    },
+   beforeUnmount () {
+      if (this.selected)
+         window.removeEventListener('keydown', this.onKey);
+   },
    methods: {
       isForeignKey (key) {
          if (key.includes('.'))
@@ -382,11 +403,10 @@ export default {
       bufferToBase64 (val) {
          return bufferToBase64(val);
       },
-      editON (event, content, field) {
+      editON (field) {
          if (!this.isEditable || this.editingType === 'none') return;
 
-         window.addEventListener('keydown', this.onKey);
+         const content = this.row[field];
-
          const type = this.fields[field].type.toUpperCase();
          this.originalContent = this.typeFormat(content, type, this.fields[field].length);
          this.editingType = type;
@@ -396,6 +416,7 @@ export default {
          if ([...LONG_TEXT, ...ARRAY, ...TEXT_SEARCH].includes(type)) {
             this.isTextareaEditor = true;
             this.editingContent = this.typeFormat(content, type);
+            this.$emit('start-editing', field);
             return;
          }
 
@@ -405,6 +426,7 @@ export default {
                this.isMapModal = true;
                this.editingContent = this.typeFormat(content, type);
             }
+            this.$emit('start-editing', field);
             return;
          }
 
@@ -426,19 +448,21 @@ export default {
                   };
                }
             }
+            this.$emit('start-editing', field);
             return;
          }
 
          // Inline editable fields
          this.editingContent = this.originalContent;
-         this.$nextTick(() => { // Focus on input
-            event.target.blur();
-
-            this.$nextTick(() => document.querySelector('.editable-field').focus());
-         });
 
          const obj = { [field]: true };
          this.isInlineEditor = { ...this.isInlineEditor, ...obj };
+
+         this.$nextTick(() => { // Focus on input
+            document.querySelector('.editable-field').focus();
+         });
+
+         this.$emit('start-editing', field);
       },
       editOFF () {
          if (!this.editingField) return;
@@ -451,7 +475,13 @@ export default {
                   this.editingContent = this.editingContent.slice(0, -1);
             }
 
-            if (this.editingContent === this.typeFormat(this.originalContent, this.editingType, this.editingLength)) return;// If not changed
+            // If not changed
+            if (this.editingContent === this.typeFormat(this.originalContent, this.editingType, this.editingLength)) {
+               this.editingType = null;
+               this.editingField = null;
+               this.$emit('stop-editing', this.editingField);
+               return;
+            }
 
             content = this.editingContent;
          }
@@ -472,15 +502,17 @@ export default {
             content
          });
 
+         this.$emit('stop-editing', this.editingField);
+
          this.editingType = null;
          this.editingField = null;
-         window.removeEventListener('keydown', this.onKey);
       },
       hideEditorModal () {
          this.isTextareaEditor = false;
          this.isBlobEditor = false;
          this.isMapModal = false;
          this.isMultiSpatial = false;
+         this.$emit('stop-editing', this.editingField);
       },
       downloadFile () {
          const downloadLink = document.createElement('a');
@@ -508,8 +540,8 @@ export default {
          };
          this.willBeDeleted = true;
       },
-      selectRow (event, row) {
+      selectRow (event, field) {
-         this.$emit('select-row', event, row);
+         this.$emit('select-row', event, this.row, field);
       },
       getKeyUsage (keyName) {
          if (keyName.includes('.'))
@@ -523,10 +555,17 @@ export default {
       },
       onKey (e) {
          e.stopPropagation();
-         if (e.key === 'Escape') {
+
+         if (!this.editingField && e.key === 'Enter')
+            return this.editON(this.selectedCell);
+
+         if (this.editingField && e.key === 'Enter' && !this.isBaseSelectField)
+            return this.editOFF();
+
+         if (this.editingField && e.key === 'Escape') {
             this.isInlineEditor[this.editingField] = false;
             this.editingField = null;
-            window.removeEventListener('keydown', this.onKey);
+            this.$emit('stop-editing', this.editingField);
          }
       },
       formatBytes,

src/renderer/scss/_variables.scss

@@ -27,4 +27,14 @@ $titlebar-height: 1.5rem;
 $settingbar-width: 3rem;
 $explorebar-width: 14rem;
 $footer-height: 1.5rem;
-$excluding-size: $footer-height + $titlebar-height;
+
+@function get-excluding-size(){
+   @if $platform == linux{
+      @return $footer-height;
+   }
+   @else {
+      @return $footer-height + $titlebar-height;
+   }
+}
+
+$excluding-size: get-excluding-size();

src/renderer/scss/themes/dark-theme.scss

@@ -231,7 +231,8 @@
         .td {
           border-color: $body-bg-dark;
 
-          &:focus {
+          &:focus,
+          &.selected {
             box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
             background-color: rgba($color: #000, $alpha: 0.3);
           }
@@ -362,7 +363,7 @@
       .titlebar-element {
         &:hover {
           opacity: 1;
-          background: rgba($color: #fff, $alpha: 0.2);
+          background: rgba($color: #fff, $alpha: 0.1);
         }
 
         &.close-button:hover {

src/renderer/scss/themes/light-theme.scss

@@ -132,7 +132,7 @@
       .titlebar-element {
         &:hover {
           opacity: 1;
-          background: rgba($color: rgb(172, 172, 172), $alpha: 0.2);
+          background: rgba($color: rgb(172, 172, 172), $alpha: 0.3);
         }
 
         &.close-button:hover {
@@ -252,7 +252,8 @@
         .td {
           border-color: $body-bg;
 
-          &:focus {
+          &:focus,
+          &.selected {
             box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
             background-color: $body-font-color-dark;
           }

src/renderer/stores/settings.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { ipcRenderer } from 'electron';
 import i18n from '@/i18n';
 import * as Store from 'electron-store';
 const persistentStore = new Store({ name: 'settings' });
@@ -57,6 +58,7 @@ export const useSettingsStore = defineStore('settings', {
       changeApplicationTheme (theme: string) {
          this.applicationTheme = theme;
          persistentStore.set('application_theme', this.applicationTheme);
+         ipcRenderer.send('refresh-theme-settings');
       },
       changeEditorTheme (theme: string) {
          this.editorTheme = theme;

src/renderer/stores/workspaces.ts

@@ -197,13 +197,14 @@ export const useWorkspacesStore = defineStore('workspaces', {
 
                // Check if Maria or MySQL
                const isMySQL = version.name.includes('MySQL');
+               const isMaria = version.name.includes('Maria');
 
                if (isMySQL && connection.client !== 'mysql') {
                   const connProxy = Object.assign({}, connection);
                   connProxy.client = 'mysql';
                   connectionsStore.editConnection(connProxy);
                }
-               else if (!isMySQL && connection.client === 'mysql') {
+               else if (isMaria && connection.client === 'mysql') {
                   const connProxy = Object.assign({}, connection);
                   connProxy.client = 'maria';
                   connectionsStore.editConnection(connProxy);
@@ -687,6 +688,26 @@ export const useWorkspacesStore = defineStore('workspaces', {
             : workspace
          );
       },
+      selectNextTab ({ uid }: {uid: string }) {
+         const workspace = (this.workspaces as Workspace[]).find(workspace => workspace.uid === uid);
+
+         let newIndex = workspace.tabs.findIndex(tab => tab.selected || tab.uid === workspace.selectedTab) + 1;
+
+         if (newIndex > workspace.tabs.length -1)
+            newIndex = 0;
+
+         this.selectTab({ uid, tab: workspace.tabs[newIndex].uid });
+      },
+      selectPrevTab ({ uid }: {uid: string }) {
+         const workspace = (this.workspaces as Workspace[]).find(workspace => workspace.uid === uid);
+
+         let newIndex = workspace.tabs.findIndex(tab => tab.selected || tab.uid === workspace.selectedTab) - 1;
+
+         if (newIndex < 0)
+            newIndex = workspace.tabs.length -1;
+
+         this.selectTab({ uid, tab: workspace.tabs[newIndex].uid });
+      },
       updateTabs ({ uid, tabs }: {uid: string; tabs: WorkspaceTab[]}) {
          this.workspaces = (this.workspaces as Workspace[]).map(workspace => workspace.uid === uid
             ? { ...workspace, tabs }

tests/app.spec.ts

@@ -21,6 +21,7 @@ test('launch app', async () => {
 
 test('main window elements visibility', async () => {
    const visibleSelectors = [
+      // '#titlebar',
       '#window-content',
       '#settingbar',
       '#footer'

webpack.renderer.config.js

@@ -113,7 +113,9 @@ const config = {
                {
                   loader: 'sass-loader',
                   options: {
-                     additionalData: '@import "@/scss/_variables.scss";',
+                     additionalData: `
+                        $platform: ${process.platform};
+                        @import "@/scss/_variables.scss";`,
                      sassOptions: { quietDeps: true }
                   }
                }