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

2022-06-13 09:29:05 +02:00 · 2022-06-13 09:29:05 +02:00 · 33a4663694
parent bd46d17424 c37138c6f5
commit 33a4663694
27 changed files with 354 additions and 116 deletions
--- a/.github/workflows/build-linux.yml
+++ b/.github/workflows/build-linux.yml
@ -1,4 +1,4 @@
-name: Build/release [linux]
+name: Build/release [LINUX]

 on: push

--- a/.github/workflows/build-mac.yml
+++ b/.github/workflows/build-mac.yml
@ -1,4 +1,4 @@
-name: Build/release [mac]
+name: Build/release [MAC]

 on: push

--- a/.github/workflows/build-win.yml
+++ b/.github/workflows/build-win.yml
@ -1,4 +1,4 @@
-name: Build/release [windows]
+name: Build/release [WINDOWS]

 on: push

--- a/.github/workflows/create-artifact-linux.yml
+++ b/.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
--- a/.github/workflows/test-e2e-linux.yml
+++ b/.github/workflows/test-e2e-linux.yml
@ -1,4 +1,4 @@
-name: Test end-to-end [linux]
+name: Test end-to-end [LINUX]

 on: push

--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -6,7 +6,8 @@
      "PostgreSQL",
      "SQLite",
      "Windows",
-      "translation"
+      "translation",
+      "Linux"
   ],
   "svg.preview.background": "transparent"
 }
--- a/CHANGELOG.md
+++ b/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)


--- a/assets/appx/Square44x44Logo.targetsize-256_altform-unplated.png
+++ b/assets/appx/Square44x44Logo.targetsize-256_altform-unplated.png
--- a/package.json
+++ b/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"
    },
--- a/src/main/ipc-handlers/tables.ts
+++ b/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) {
--- a/src/main/main.ts
+++ b/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,
-      titleBarStyle: isMacOS ? 'hidden' : 'default',
+      autoHideMenuBar: true,
+      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 () => {
--- a/src/renderer/components/BaseSelect.vue
+++ b/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) => {
--- a/src/renderer/components/TheSettingBar.vue
+++ b/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`;
 };

--- a/src/renderer/components/TheTitleBar.vue
+++ b/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
-            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 v-if="isWindows" style="width: 140px;" />
      </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;

--- a/src/renderer/components/Workspace.vue
+++ b/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'"
-               :key="tab.uid"
+               v-if="tab.type ==='query'"
               :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"
--- a/src/renderer/components/WorkspaceAddConnectionPanel.vue
+++ b/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 = () => {
--- a/src/renderer/components/WorkspaceTabPropsTable.vue
+++ b/src/renderer/components/WorkspaceTabPropsTable.vue
@ -438,15 +438,12 @@ export default {

         // Fields Changes
         const changes = [];
-         this.originalFields.forEach((originalField, oI) => {
-            const lI = this.localFields.findIndex(localField => localField._antares_id === originalField._antares_id);
-            const originalSibling = oI > 0 ? this.originalFields[oI - 1]._antares_id : false;
-            const localSibling = lI > 0 ? this.localFields[lI - 1]._antares_id : false;
-            const after = lI > 0 ? this.localFields[lI - 1].name : false;
+         this.localFields.forEach((field, i) => {
+            const originalField = this.originalFields.find(oField => oField._antares_id === field._antares_id);
+            const after = i > 0 ? this.localFields[i - 1].name : false;
            const orgName = originalField.name;

-            if (JSON.stringify(originalField) !== JSON.stringify(this.localFields[lI]) || originalSibling !== localSibling)
-               if (this.localFields[lI]) changes.push({ ...this.localFields[lI], after, orgName });
+            changes.push({ ...field, after, orgName });
         });

         // OPTIONS
--- a/src/renderer/components/WorkspaceTabQueryTable.vue
+++ b/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) {
-         if (event.ctrlKey) {
-            if (this.selectedRows.includes(row))
-               this.selectedRows = this.selectedRows.filter(el => el !== row);
+      selectRow (event, row, field) {
+         this.selectedField = field;
+         const selectedRowId = row._antares_id;
+
+         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;
      }
   }
 };
--- a/src/renderer/components/WorkspaceTabQueryTableRow.vue
+++ b/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) {
-         this.$emit('select-row', event, row);
+      selectRow (event, field) {
+         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,
--- a/src/renderer/images/logo-64.png
+++ b/src/renderer/images/logo-64.png
--- a/src/renderer/scss/_variables.scss
+++ b/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();
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/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 {
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/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;
          }
--- a/src/renderer/stores/settings.ts
+++ b/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;
--- a/src/renderer/stores/workspaces.ts
+++ b/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 }
--- a/tests/app.spec.ts
+++ b/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'
--- a/webpack.renderer.config.js
+++ b/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 }
                  }
               }