chore(release): 0.2.0

feat: contextual option to duplicate tables
fix(UI): contextual sub-menu alignment when close to the lower edge of the window
2025-06-05 21:59:22 +02:00 · 2021-07-03 12:29:13 +02:00 · 2021-07-03 12:27:50 +02:00 · 2021-07-03 12:01:19 +02:00 · 2021-07-03 11:39:57 +02:00 · 2021-07-03 11:29:14 +02:00
49 changed files with 1182 additions and 167 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,35 @@

 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.2.0](https://github.com/Fabio286/antares/compare/v0.1.13...v0.2.0) (2021-07-03)
+
+
+### Features
+
+* contextual option to duplicate tables ([08d5b1b](https://github.com/Fabio286/antares/commit/08d5b1b3299adc5c53419f50892aee3b58e6fe72))
+* **PostgreSQL:** trigger functions support ([75bbd5f](https://github.com/Fabio286/antares/commit/75bbd5f66e38a971482acff9dde636cf89858c8e))
+* **PostgreSQL:** triggers creation ([7df0cf8](https://github.com/Fabio286/antares/commit/7df0cf83895ba784e30efa7814433cf329175364))
+* **UI:** active tab animation ([978a7c5](https://github.com/Fabio286/antares/commit/978a7c5f5b314f2ba4067c86471755fdcc341b3f))
+* **UI:** context option to copy cell or row value ([d868c77](https://github.com/Fabio286/antares/commit/d868c772b9e7c70e173d1f80ad8de51aa40991ef))
+* **UI:** resizer border mouse hover animation ([a69bdeb](https://github.com/Fabio286/antares/commit/a69bdeb20db7d67613dace554ae37a0c5e112ec2))
+
+
+### Bug Fixes
+
+* **PostgreSQL:** error opening setting tab for some stored routines ([d96907c](https://github.com/Fabio286/antares/commit/d96907ca2de344114e3edae52843f6258468934b))
+* **UI:** contextual sub-menu alignment when close to the lower edge of the window ([61a42d5](https://github.com/Fabio286/antares/commit/61a42d51f55ec3010c4ee67bad2f699ff14c9f7c))
+* fields default not correctly set in table filler ([faa07a0](https://github.com/Fabio286/antares/commit/faa07a077c899af5c71124e0c20869876e57fd9a))
+* rows loses internal id after export ([2d278aa](https://github.com/Fabio286/antares/commit/2d278aa14e0e5080725196538b7265ec00a7aebb))
+* **UI:** editor blinking on first connection with a dark theme ([0110756](https://github.com/Fabio286/antares/commit/0110756204b79388535a74017b303e1ba41e8fd8))
+* unhandled exception in connection test ([a975df3](https://github.com/Fabio286/antares/commit/a975df38dd471ab0ac8645a1021470a4600e6598))
+* vulnerability in server error toast messages ([3aef7e9](https://github.com/Fabio286/antares/commit/3aef7e953ea82a9105d470cc62c68aacfc97f9d9))
+
+
+### Improvements
+
+* improved contextual menu appearance ([f74bca7](https://github.com/Fabio286/antares/commit/f74bca7bb4fc6802143446a44663fbf12319bf29))
+* **UI:** increased application border-radius ([a0a025e](https://github.com/Fabio286/antares/commit/a0a025e4502141e95394ca9717b1ec65df2728c1))
+
 ### [0.1.13](https://github.com/Fabio286/antares/compare/v0.1.12...v0.1.13) (2021-06-19)


--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "antares",
  "productName": "Antares",
-  "version": "0.1.13",
+  "version": "0.2.0",
  "description": "A cross-platform easy to use SQL client.",
  "license": "MIT",
  "repository": "https://github.com/Fabio286/antares.git",
--- a/src/common/customizations/defaults.js
+++ b/src/common/customizations/defaults.js
@@ -62,10 +62,14 @@ module.exports = {
   functionSql: false,
   functionContext: false,
   functionLanguage: false,
+   triggerSql: false,
+   triggerStatementInCreation: false,
   triggerMultipleEvents: false,
   triggerTableInName: false,
   triggerUpdateColumns: false,
   triggerOnlyRename: false,
+   triggerFunctionSql: false,
+   triggerFunctionlanguages: false,
   parametersLength: false,
   languages: false
 };
--- a/src/common/customizations/mysql.js
+++ b/src/common/customizations/mysql.js
@@ -51,6 +51,7 @@ module.exports = {
   procedureDataAccess: true,
   procedureSql: 'BEGIN\r\n\r\nEND',
   procedureContext: true,
+   triggerSql: 'BEGIN\r\n\r\nEND',
   functionDeterministic: true,
   functionDataAccess: true,
   functionSql: 'BEGIN\r\n\r\nEND',
--- a/src/common/customizations/postgresql.js
+++ b/src/common/customizations/postgresql.js
@@ -14,30 +14,37 @@ module.exports = {
   tables: true,
   views: true,
   triggers: true,
+   triggerFunctions: true,
   routines: true,
   functions: true,
   // Settings
   tableAdd: true,
   viewAdd: true,
-   triggerAdd: false,
+   triggerAdd: true,
+   triggerFunctionAdd: true,
   routineAdd: true,
   functionAdd: true,
   databaseEdit: false,
   tableSettings: true,
   viewSettings: true,
   triggerSettings: true,
+   triggerFunctionSettings: true,
   routineSettings: true,
   functionSettings: true,
   indexes: true,
   foreigns: true,
   nullable: true,
   tableArray: true,
-   procedureSql: '$BODY$\r\n\r\n$BODY$',
+   procedureSql: '$procedure$\r\n\r\n$procedure$',
   procedureContext: true,
   procedureLanguage: true,
-   functionSql: '$BODY$\r\n\r\n$BODY$',
+   functionSql: '$function$\r\n\r\n$function$',
+   triggerFunctionSql: '$function$\r\nBEGIN\r\n\r\nEND\r\n$function$',
+   triggerFunctionlanguages: ['plpgsql'],
   functionContext: true,
   functionLanguage: true,
+   triggerSql: 'EXECUTE PROCEDURE ',
+   triggerStatementInCreation: true,
   triggerMultipleEvents: true,
   triggerTableInName: true,
   triggerOnlyRename: false,
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1,6 +1,6 @@
 'use strict';

-import { app, BrowserWindow, nativeImage } from 'electron';
+import { app, BrowserWindow, /* session, */ nativeImage } from 'electron';
 import * as path from 'path';
 import Store from 'electron-store';

@@ -38,13 +38,15 @@ async function createMainWindow () {
   });

   try {
-      if (isDevelopment) {
+      if (isDevelopment) { //
         await window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);

-         const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer');
+         // const { default: installExtension, VUEJS3_DEVTOOLS } = require('electron-devtools-installer');

-         const toolName = await installExtension(VUEJS_DEVTOOLS);
-         console.log(toolName, 'installed');
+         // const oldDevToolsID = session.defaultSession.getAllExtensions().find(ext => ext.name === 'Vue.js devtools').id;
+         // session.defaultSession.removeExtension(oldDevToolsID);
+         // const toolName = await installExtension(VUEJS3_DEVTOOLS);
+         // console.log(toolName, 'installed');
      }
      else
         await window.loadURL(new URL(`file:///${path.join(__dirname, 'index.html')}`).href);
--- a/src/main/ipc-handlers/connection.js
+++ b/src/main/ipc-handlers/connection.js
@@ -29,9 +29,8 @@ export default connections => {
         params
      });

-      await connection.connect();
-
      try {
+         await connection.connect();
         await connection.select('1+1').run();
         connection.destroy();

--- a/src/main/ipc-handlers/functions.js
+++ b/src/main/ipc-handlers/functions.js
@@ -31,6 +31,16 @@ export default (connections) => {
      }
   });

+   ipcMain.handle('alter-trigger-function', async (event, params) => {
+      try {
+         await connections[params.uid].alterTriggerFunction(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
   ipcMain.handle('create-function', async (event, params) => {
      try {
         await connections[params.uid].createFunction(params);
@@ -40,4 +50,14 @@ export default (connections) => {
         return { status: 'error', response: err.toString() };
      }
   });
+
+   ipcMain.handle('create-trigger-function', async (event, params) => {
+      try {
+         await connections[params.uid].createTriggerFunction(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
 };
--- a/src/main/ipc-handlers/tables.js
+++ b/src/main/ipc-handlers/tables.js
@@ -424,6 +424,16 @@ export default (connections) => {
      }
   });

+   ipcMain.handle('duplicate-table', async (event, params) => {
+      try {
+         await connections[params.uid].duplicateTable(params);
+         return { status: 'success' };
+      }
+      catch (err) {
+         return { status: 'error', response: err.toString() };
+      }
+   });
+
   ipcMain.handle('truncate-table', async (event, params) => {
      try {
         await connections[params.uid].truncateTable(params);
--- a/src/main/libs/clients/MySQLClient.js
+++ b/src/main/libs/clients/MySQLClient.js
@@ -333,8 +333,15 @@ export class MySQLClient extends AntaresCore {

                  const details = fieldArr.slice(2).join(' ');
                  let defaultValue = null;
-                  if (details.includes('DEFAULT'))
+                  if (details.includes('DEFAULT')) {
                     defaultValue = details.match(/(?<=DEFAULT ).*?$/gs)[0].split(' COMMENT')[0];
+                     const defaultValueArr = defaultValue.split('');
+                     if (defaultValueArr[0] === '\'') {
+                        defaultValueArr.shift();
+                        defaultValueArr.pop();
+                        defaultValue = defaultValueArr.join('');
+                     }
+                  }

                  const typeAndLength = nameAndType[1].replace(')', '').split('(');

@@ -1236,6 +1243,17 @@ export class MySQLClient extends AntaresCore {
      return await this.raw(sql);
   }

+   /**
+    * DUPLICATE TABLE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof MySQLClient
+    */
+   async duplicateTable (params) {
+      const sql = `CREATE TABLE \`${this._schema}\`.\`${params.table}_copy\` LIKE \`${this._schema}\`.\`${params.table}\``;
+      return await this.raw(sql);
+   }
+
   /**
    * TRUNCATE TABLE
    *
--- a/src/main/libs/clients/PostgreSQLClient.js
+++ b/src/main/libs/clients/PostgreSQLClient.js
@@ -215,6 +215,7 @@ export class PostgreSQLClient extends AntaresCore {
               functions: [],
               procedures: [],
               triggers: [],
+               triggerFunctions: [],
               schedulers: []
            };
         }
@@ -623,7 +624,7 @@ export class PostgreSQLClient extends AntaresCore {
         const parameters = results.rows.map(row => {
            return {
               name: row.parameter_name,
-               type: row.data_type.toUpperCase(),
+               type: row.data_type ? row.data_type.toUpperCase() : '',
               length: '',
               context: row.parameter_mode
            };
@@ -822,7 +823,7 @@ export class PostgreSQLClient extends AntaresCore {
      if (this._schema !== 'public')
         await this.use(this._schema);

-      const body = func.returns ? func.sql : '$BODY$\n$BODY$';
+      const body = func.returns ? func.sql : '$function$\n$function$';

      const sql = `CREATE FUNCTION ${this._schema}.${func.name}(${parameters})
         RETURNS ${func.returns || 'void'}
@@ -833,6 +834,48 @@ export class PostgreSQLClient extends AntaresCore {
      return await this.raw(sql, { split: false });
   }

+   /**
+    * ALTER TRIGGER FUNCTION
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof PostgreSQLClient
+    */
+   async alterTriggerFunction (params) {
+      const { func } = params;
+
+      if (this._schema !== 'public')
+         await this.use(this._schema);
+
+      const body = func.returns ? func.sql : '$function$\n$function$';
+
+      const sql = `CREATE OR REPLACE FUNCTION ${this._schema}.${func.name}()
+         RETURNS TRIGGER
+         LANGUAGE ${func.language}
+         AS ${body}`;
+
+      return await this.raw(sql, { split: false });
+   }
+
+   /**
+    * CREATE TRIGGER FUNCTION
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof PostgreSQLClient
+    */
+   async createTriggerFunction (func) {
+      if (this._schema !== 'public')
+         await this.use(this._schema);
+
+      const body = func.returns ? func.sql : '$function$\r\nBEGIN\r\n\r\nEND\r\n$function$';
+
+      const sql = `CREATE FUNCTION ${this._schema}.${func.name}()
+         RETURNS TRIGGER
+         LANGUAGE ${func.language}
+         AS ${body}`;
+
+      return await this.raw(sql, { split: false });
+   }
+
   /**
    * SELECT * FROM pg_collation
    *
@@ -1083,6 +1126,17 @@ export class PostgreSQLClient extends AntaresCore {
      return await this.raw(sql);
   }

+   /**
+    * DUPLICATE TABLE
+    *
+    * @returns {Array.<Object>} parameters
+    * @memberof PostgreSQLClient
+    */
+   async duplicateTable (params) {
+      const sql = `CREATE TABLE ${this._schema}.${params.table}_copy (LIKE ${this._schema}.${params.table} INCLUDING ALL)`;
+      return await this.raw(sql);
+   }
+
   /**
    * TRUNCATE TABLE
    *
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -19,6 +19,7 @@
         <TheScratchpad v-if="isScratchpad" />
         <ModalSettings v-if="isSettingModal" />
         <ModalDiscardChanges v-if="isUnsavedDiscardModal" />
+         <BaseTextEditor class="d-none" value="" />
      </div>
   </div>
 </template>
@@ -40,7 +41,8 @@ export default {
      ModalNewConnection: () => import(/* webpackChunkName: "ModalNewConnection" */'@/components/ModalNewConnection'),
      ModalSettings: () => import(/* webpackChunkName: "ModalSettings" */'@/components/ModalSettings'),
      TheScratchpad: () => import(/* webpackChunkName: "TheScratchpad" */'@/components/TheScratchpad'),
-      ModalDiscardChanges: () => import(/* webpackChunkName: "ModalDiscardChanges" */'@/components/ModalDiscardChanges')
+      ModalDiscardChanges: () => import(/* webpackChunkName: "ModalDiscardChanges" */'@/components/ModalDiscardChanges'),
+      BaseTextEditor: () => import(/* webpackChunkName: "BaseTextEditor" */'@/components/BaseTextEditor')
   },
   data () {
      return {};
--- a/src/renderer/components/BaseContextMenu.vue
+++ b/src/renderer/components/BaseContextMenu.vue
@@ -1,5 +1,5 @@
 <template>
-   <div class="context">
+   <div class="context" :class="{'bottom': isBottom}">
      <a
         class="context-overlay"
         @click="close"
@@ -23,18 +23,21 @@ export default {
   },
   data () {
      return {
-         contextSize: null
+         contextSize: null,
+         isBottom: false
      };
   },
   computed: {
      position () {
         const { clientY, clientX } = this.contextEvent;
-         let topCord = `${clientY + 5}px`;
+         let topCord = `${clientY + 2}px`;
         let leftCord = `${clientX + 5}px`;

         if (this.contextSize) {
-            if (clientY + this.contextSize.height + 5 >= window.innerHeight)
-               topCord = `${clientY - this.contextSize.height}px`;
+            if (clientY + (this.contextSize.height < 200 ? 200 : this.contextSize.height) + 5 >= window.innerHeight) {
+               topCord = `${clientY + 3 - this.contextSize.height}px`;
+               this.isBottom = true;
+            }

            if (clientX + this.contextSize.width + 5 >= window.innerWidth)
               leftCord = `${clientX - this.contextSize.width}px`;
@@ -83,12 +86,21 @@ export default {
  left: 0;
  bottom: 0;

+  &:not(.bottom) .context-submenu {
+    top: -0.2rem;
+  }
+
+  &.bottom .context-submenu {
+    bottom: -0.2rem;
+  }
+
  .context-container {
    min-width: 100px;
    z-index: 10;
    padding: 0;
    background: #1d1d1d;
-    border-radius: 0.1rem;
+    border-radius: $border-radius;
+    border: 1px solid $bg-color-light-dark;
    display: flex;
    flex-direction: column;
    position: absolute;
@@ -97,19 +109,24 @@ export default {
    .context-element {
      display: flex;
      align-items: center;
+      margin: 0.2rem;
      padding: 0.1rem 0.3rem;
+      border-radius: $border-radius;
      cursor: pointer;
      justify-content: space-between;
      position: relative;
+      white-space: nowrap;

      .context-submenu {
+        border-radius: $border-radius;
+        border: 1px solid $bg-color-light-dark;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s;
        position: absolute;
        left: 100%;
-        top: 0;
        min-width: 100px;
+        background: #1d1d1d;
      }

      &:hover {
--- a/src/renderer/components/BaseToast.vue
+++ b/src/renderer/components/BaseToast.vue
@@ -4,7 +4,7 @@
      class="toast mt-2"
      :class="toastStatus.className"
   >
-      <span class="p-vcentered text-left" v-html="`${toastStatus.iconTag} ${message}`" />
+      <span class="p-vcentered text-left"><i class="mdi mdi-24px mr-1" :class="toastStatus.iconName" /> {{ message }}</span>
      <button class="btn btn-clear" @click="hideToast" />
   </div>
 </template>
@@ -30,27 +30,27 @@ export default {
   computed: {
      toastStatus () {
         let className = '';
-         let iconTag = '';
+         let iconName = '';
         switch (this.status) {
            case 'success':
               className = 'toast-success';
-               iconTag = '<i class="mdi mdi-24px mdi-check mr-1"></i>';
+               iconName = 'mdi-check';
               break;
            case 'error':
               className = 'toast-error';
-               iconTag = '<i class="mdi mdi-24px mdi-alert-rhombus mr-1"></i>';
+               iconName = 'mdi-alert-rhombus';
               break;
            case 'warning':
               className = 'toast-warning';
-               iconTag = '<i class="mdi mdi-24px mdi-alert mr-1"></i>';
+               iconName = 'mdi-alert';
               break;
            case 'primary':
               className = 'toast-primary';
-               iconTag = '<i class="mdi mdi-24px mdi-information-outline mr-1"></i>';
+               iconName = 'mdi-information-outline';
               break;
         }

-         return { className, iconTag };
+         return { className, iconName };
      }
   },
   watch: {
--- a/src/renderer/components/BaseUploadInput.vue
+++ b/src/renderer/components/BaseUploadInput.vue
@@ -63,7 +63,7 @@ export default {

 <style lang="scss" scoped>
 .file-uploader {
-  border-radius: 0.1rem;
+  border-radius: $border-radius;
  height: 1.8rem;
  line-height: 1.2rem;
  display: flex;
--- a/src/renderer/components/ModalEditConnection.vue
+++ b/src/renderer/components/ModalEditConnection.vue
@@ -15,18 +15,18 @@
               <div class="panel-nav">
                  <ul class="tab tab-block">
                     <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                        :class="{'active': selectedTab === 'general'}"
                        @click="selectTab('general')"
                     >
-                        <a class="c-hand">{{ $t('word.general') }}</a>
+                        <a class="tab-link">{{ $t('word.general') }}</a>
                     </li>
                     <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                        :class="{'active': selectedTab === 'ssl'}"
                        @click="selectTab('ssl')"
                     >
-                        <a class="c-hand">{{ $t('word.ssl') }}</a>
+                        <a class="tab-link">{{ $t('word.ssl') }}</a>
                     </li>
                  </ul>
               </div>
--- a/src/renderer/components/ModalFakerRows.vue
+++ b/src/renderer/components/ModalFakerRows.vue
@@ -252,32 +252,31 @@ export default {
         else {
            if ([...NUMBER, ...FLOAT].includes(field.type))
               fieldDefault = Number.isNaN(+field.default) ? null : +field.default;
-
-            if ([...TEXT, ...LONG_TEXT].includes(field.type)) {
+            else if ([...TEXT, ...LONG_TEXT].includes(field.type)) {
               fieldDefault = field.default
                  ? field.default.includes('\'')
                     ? field.default.split('\'')[1]
                     : field.default
                  : '';
            }
-
-            if ([...TIME, ...DATE].includes(field.type))
+            else if ([...TIME, ...DATE].includes(field.type))
               fieldDefault = field.default;
-
-            if (BIT.includes(field.type))
+            else if (BIT.includes(field.type))
               fieldDefault = field.default.replaceAll('\'', '').replaceAll('b', '');
-
-            if (DATETIME.includes(field.type)) {
-               if (field.default && field.default.toLowerCase().includes('current_timestamp')) {
+            else if (DATETIME.includes(field.type)) {
+               if (field.default && ['current_timestamp', 'now()'].includes(field.default.toLowerCase())) {
                  let datePrecision = '';
                  for (let i = 0; i < field.datePrecision; i++)
                     datePrecision += i === 0 ? '.S' : 'S';
                  fieldDefault = moment().format(`YYYY-MM-DD HH:mm:ss${datePrecision}`);
               }
+               else
+                  fieldDefault = field.default;
            }
-
-            if (field.enumValues)
+            else if (field.enumValues)
               fieldDefault = field.enumValues.replaceAll('\'', '').split(',');
+            else
+               fieldDefault = field.default;
         }

         rowObj[field.name] = { value: fieldDefault };
--- a/src/renderer/components/ModalNewConnection.vue
+++ b/src/renderer/components/ModalNewConnection.vue
@@ -16,18 +16,18 @@
               <div class="panel-nav">
                  <ul class="tab tab-block">
                     <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                        :class="{'active': selectedTab === 'general'}"
                        @click="selectTab('general')"
                     >
-                        <a class="c-hand">{{ $t('word.general') }}</a>
+                        <a class="tab-link">{{ $t('word.general') }}</a>
                     </li>
                     <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                        :class="{'active': selectedTab === 'ssl'}"
                        @click="selectTab('ssl')"
                     >
-                        <a class="c-hand">{{ $t('word.ssl') }}</a>
+                        <a class="tab-link">{{ $t('word.ssl') }}</a>
                     </li>
                  </ul>
               </div>
@@ -344,6 +344,7 @@ export default {
         else {
            try {
               const res = await Connection.makeTest(this.connection);
+               console.log(res.response);
               if (res.status === 'error')
                  this.toast = { status: 'error', message: res.response.message };
               else
--- a/src/renderer/components/ModalNewFunction.vue
+++ b/src/renderer/components/ModalNewFunction.vue
@@ -155,8 +155,8 @@ export default {
      if (this.customizations.languages)
         this.localFunction.language = this.customizations.languages[0];

-      if (this.customizations.procedureSql)
-         this.localFunction.sql = this.customizations.procedureSql;
+      if (this.customizations.functionSql)
+         this.localFunction.sql = this.customizations.functionSql;
      setTimeout(() => {
         this.$refs.firstInput.focus();
      }, 20);
--- a/src/renderer/components/ModalNewTrigger.vue
+++ b/src/renderer/components/ModalNewTrigger.vue
@@ -25,7 +25,7 @@
                  >
               </div>
            </div>
-            <div class="form-group">
+            <div v-if="customizations.definer" class="form-group">
               <label class="form-label col-4">
                  {{ $t('word.definer') }}
               </label>
@@ -75,26 +75,52 @@
                        <option>BEFORE</option>
                        <option>AFTER</option>
                     </select>
-                     <select v-model="localTrigger.event" class="form-select">
-                        <option>INSERT</option>
-                        <option>UPDATE</option>
-                        <option>DELETE</option>
+                     <select
+                        v-if="!customizations.triggerMultipleEvents"
+                        v-model="localTrigger.event"
+                        class="form-select"
+                     >
+                        <option v-for="event in Object.keys(localEvents)" :key="event">
+                           {{ event }}
+                        </option>
                     </select>
+                     <div v-if="customizations.triggerMultipleEvents" class="px-4">
+                        <label
+                           v-for="event in Object.keys(localEvents)"
+                           :key="event"
+                           class="form-checkbox form-inline"
+                           @change.prevent="changeEvents(event)"
+                        >
+                           <input :checked="localEvents[event]" type="checkbox"><i class="form-icon" /> {{ event }}
+                        </label>
+                     </div>
                  </div>
               </div>
            </div>
         </form>
+         <div v-if="customizations.triggerStatementInCreation" class="workspace-query-results column col-12 mt-2">
+            <label class="form-label ml-2">{{ $t('message.triggerStatement') }}</label>
+            <QueryEditor
+               ref="queryEditor"
+               :value.sync="localTrigger.sql"
+               :workspace="workspace"
+               :schema="schema"
+               :height="editorHeight"
+            />
+         </div>
      </div>
   </ConfirmModal>
 </template>

 <script>
 import ConfirmModal from '@/components/BaseConfirmModal';
+import QueryEditor from '@/components/QueryEditor';

 export default {
   name: 'ModalNewTrigger',
   components: {
-      ConfirmModal
+      ConfirmModal,
+      QueryEditor
   },
   props: {
      workspace: Object
@@ -103,13 +129,15 @@ export default {
      return {
         localTrigger: {
            definer: '',
-            sql: 'BEGIN\r\n\r\nEND',
+            sql: '',
            name: '',
            table: '',
            activation: 'BEFORE',
            event: 'INSERT'
         },
-         isOptionsChanging: false
+         isOptionsChanging: false,
+         localEvents: { INSERT: false, UPDATE: false, DELETE: false },
+         editorHeight: 150
      };
   },
   computed: {
@@ -122,11 +150,16 @@ export default {
            .map(schema => schema.tables);

         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      },
+      customizations () {
+         return this.workspace.customizations;
      }
   },
-   mounted () {
+   created () {
      this.localTrigger.table = this.schemaTables.length ? this.schemaTables[0].name : '';
-
+      this.localTrigger.sql = this.customizations.triggerSql;
+   },
+   mounted () {
      setTimeout(() => {
         this.$refs.firstInput.focus();
      }, 20);
@@ -134,6 +167,16 @@ export default {
   methods: {
      confirmNewTrigger () {
         this.$emit('open-create-trigger-editor', this.localTrigger);
+      },
+      changeEvents (event) {
+         if (this.customizations.triggerMultipleEvents) {
+            this.localEvents[event] = !this.localEvents[event];
+            this.localTrigger.event = [];
+            for (const key in this.localEvents) {
+               if (this.localEvents[key])
+                  this.localTrigger.event.push(key);
+            }
+         }
      }
   }
 };
--- a/src/renderer/components/ModalNewTriggerFunction.vue
+++ b/src/renderer/components/ModalNewTriggerFunction.vue
@@ -0,0 +1,132 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.confirm')"
+      size="400"
+      @confirm="confirmNewFunction"
+      @hide="$emit('close')"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-plus mr-1" /> {{ $t('message.createNewFunction') }}
+         </div>
+      </template>
+      <div :slot="'body'">
+         <form class="form-horizontal">
+            <div class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.name') }}
+               </label>
+               <div class="column">
+                  <input
+                     ref="firstInput"
+                     v-model="localFunction.name"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+            <div v-if="customizations.languages" class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.language') }}
+               </label>
+               <div class="column">
+                  <select v-model="localFunction.language" class="form-select">
+                     <option v-for="language in customizations.triggerFunctionlanguages" :key="language">
+                        {{ language }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.definer" class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.definer') }}
+               </label>
+               <div class="column">
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="localFunction.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option
+                        v-for="user in workspace.users"
+                        :key="`${user.name}@${user.host}`"
+                        :value="`\`${user.name}\`@\`${user.host}\``"
+                     >
+                        {{ user.name }}@{{ user.host }}
+                     </option>
+                  </select>
+                  <select v-if="!workspace.users.length" class="form-select">
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.comment" class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.comment') }}
+               </label>
+               <div class="column">
+                  <input
+                     v-model="localFunction.comment"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+         </form>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'ModalNewTriggerFunction',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      workspace: Object
+   },
+   data () {
+      return {
+         localFunction: {
+            definer: '',
+            sql: '',
+            name: '',
+            comment: '',
+            language: null
+         },
+         isOptionsChanging: false
+      };
+   },
+   computed: {
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      },
+      customizations () {
+         return this.workspace.customizations;
+      }
+   },
+   mounted () {
+      if (this.customizations.triggerFunctionlanguages)
+         this.localFunction.language = this.customizations.triggerFunctionlanguages[0];
+
+      if (this.customizations.triggerFunctionSql)
+         this.localFunction.sql = this.customizations.triggerFunctionSql;
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      confirmNewFunction () {
+         this.$emit('open-create-function-editor', this.localFunction);
+      }
+   }
+};
+</script>
--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@@ -16,40 +16,40 @@
               <div class="panel-nav">
                  <ul class="tab tab-block">
                     <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                        :class="{'active': selectedTab === 'general'}"
                        @click="selectTab('general')"
                     >
-                        <a class="c-hand">{{ $t('word.general') }}</a>
+                        <a class="tab-link">{{ $t('word.general') }}</a>
                     </li>
                     <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                        :class="{'active': selectedTab === 'themes'}"
                        @click="selectTab('themes')"
                     >
-                        <a class="c-hand">{{ $t('word.themes') }}</a>
+                        <a class="tab-link">{{ $t('word.themes') }}</a>
                     </li>
                     <li
                        v-if="updateStatus !== 'disabled'"
-                        class="tab-item"
+                        class="tab-item c-hand"
                        :class="{'active': selectedTab === 'update'}"
                        @click="selectTab('update')"
                     >
-                        <a class="c-hand" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
+                        <a class="tab-link" :class="{'badge badge-update': hasUpdates}">{{ $t('word.update') }}</a>
                     </li>
                     <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                        :class="{'active': selectedTab === 'changelog'}"
                        @click="selectTab('changelog')"
                     >
-                        <a class="c-hand">{{ $t('word.changelog') }}</a>
+                        <a class="tab-link">{{ $t('word.changelog') }}</a>
                     </li>
                     <li
-                        class="tab-item"
+                        class="tab-item c-hand"
                        :class="{'active': selectedTab === 'about'}"
                        @click="selectTab('about')"
                     >
-                        <a class="c-hand">{{ $t('word.about') }}</a>
+                        <a class="tab-link">{{ $t('word.about') }}</a>
                     </li>
                  </ul>
               </div>
--- a/src/renderer/components/QueryEditor.vue
+++ b/src/renderer/components/QueryEditor.vue
@@ -187,8 +187,15 @@ export default {
         }
      },
      isSelected () {
-         if (this.isSelected)
+         if (this.isSelected) {
            this.lastSchema = this.schema;
+            this.editor.resize();
+         }
+      },
+      height () {
+         setTimeout(() => {
+            this.editor.resize();
+         }, 20);
      },
      lastSchema () {
         if (this.editor) {
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@@ -174,6 +174,7 @@ export default {
        align-content: center;
        justify-content: center;
        flex-direction: column;
+        border-radius: 0;

        &:hover {
          opacity: 1;
@@ -181,6 +182,21 @@ export default {

        &.selected {
          opacity: 1;
+
+          &::before {
+            height: $settingbar-width;
+          }
+        }
+
+        &::before {
+          content: '';
+          height: 0;
+          width: 3px;
+          transition: height 0.2s;
+          background-color: $primary-color;
+          position: absolute;
+          left: 0;
+          border-radius: $border-radius;
        }

        .settingbar-element-icon {
@@ -211,7 +227,7 @@ export default {
      padding: 0.2rem 0.4rem;
      font-size: 0.7rem;
      background: rgba(48, 55, 66, 0.95);
-      border-radius: 0.1rem;
+      border-radius: $border-radius;
      color: #fff;
      max-width: 320px;
      pointer-events: none;
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -127,6 +127,12 @@
            :connection="connection"
            :function="workspace.breadcrumbs.function"
         />
+         <WorkspacePropsTabTriggerFunction
+            v-show="selectedTab === 'prop' && workspace.breadcrumbs.triggerFunction"
+            :is-selected="selectedTab === 'prop'"
+            :connection="connection"
+            :function="workspace.breadcrumbs.triggerFunction"
+         />
         <WorkspacePropsTabScheduler
            v-show="selectedTab === 'prop' && workspace.breadcrumbs.scheduler"
            :is-selected="selectedTab === 'prop'"
@@ -165,6 +171,7 @@ import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
 import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
 import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
 import WorkspacePropsTabFunction from '@/components/WorkspacePropsTabFunction';
+import WorkspacePropsTabTriggerFunction from '@/components/WorkspacePropsTabTriggerFunction';
 import WorkspacePropsTabScheduler from '@/components/WorkspacePropsTabScheduler';
 import ModalProcessesList from '@/components/ModalProcessesList';

@@ -179,6 +186,7 @@ export default {
      WorkspacePropsTabTrigger,
      WorkspacePropsTabRoutine,
      WorkspacePropsTabFunction,
+      WorkspacePropsTabTriggerFunction,
      WorkspacePropsTabScheduler,
      ModalProcessesList
   },
@@ -208,6 +216,7 @@ export default {
         if (this.workspace.breadcrumbs.trigger && this.workspace.customizations.triggerSettings) return true;
         if (this.workspace.breadcrumbs.procedure && this.workspace.customizations.routineSettings) return true;
         if (this.workspace.breadcrumbs.function && this.workspace.customizations.functionSettings) return true;
+         if (this.workspace.breadcrumbs.triggerFunction && this.workspace.customizations.functionSettings) return true;
         if (this.workspace.breadcrumbs.scheduler && this.workspace.customizations.schedulerSettings) return true;
         return false;
      },
@@ -219,6 +228,7 @@ export default {
               this.workspace.breadcrumbs.trigger === null &&
               this.workspace.breadcrumbs.procedure === null &&
               this.workspace.breadcrumbs.function === null &&
+               this.workspace.breadcrumbs.triggerFunction === null &&
               this.workspace.breadcrumbs.scheduler === null &&
               ['data', 'prop'].includes(this.workspace.selected_tab)
            ) ||
@@ -362,7 +372,7 @@ export default {
            min-width: 100%;

            .menu-item a {
-              border-radius: 0.1rem;
+              border-radius: $border-radius;
              color: inherit;
              display: block;
              margin: 0 -0.4rem;
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/src/renderer/components/WorkspaceExploreBar.vue
@@ -90,6 +90,12 @@
         @close="hideCreateFunctionModal"
         @open-create-function-editor="openCreateFunctionEditor"
      />
+      <ModalNewTriggerFunction
+         v-if="isNewTriggerFunctionModal"
+         :workspace="workspace"
+         @close="hideCreateTriggerFunctionModal"
+         @open-create-function-editor="openCreateTriggerFunctionEditor"
+      />
      <ModalNewScheduler
         v-if="isNewSchedulerModal"
         :workspace="workspace"
@@ -106,6 +112,7 @@
         @show-create-trigger-modal="showCreateTriggerModal"
         @show-create-routine-modal="showCreateRoutineModal"
         @show-create-function-modal="showCreateFunctionModal"
+         @show-create-trigger-function-modal="showCreateTriggerFunctionModal"
         @show-create-scheduler-modal="showCreateSchedulerModal"
         @reload="refresh"
      />
@@ -147,6 +154,7 @@ import ModalNewView from '@/components/ModalNewView';
 import ModalNewTrigger from '@/components/ModalNewTrigger';
 import ModalNewRoutine from '@/components/ModalNewRoutine';
 import ModalNewFunction from '@/components/ModalNewFunction';
+import ModalNewTriggerFunction from '@/components/ModalNewTriggerFunction';
 import ModalNewScheduler from '@/components/ModalNewScheduler';

 export default {
@@ -163,6 +171,7 @@ export default {
      ModalNewTrigger,
      ModalNewRoutine,
      ModalNewFunction,
+      ModalNewTriggerFunction,
      ModalNewScheduler
   },
   props: {
@@ -179,6 +188,7 @@ export default {
         isNewTriggerModal: false,
         isNewRoutineModal: false,
         isNewFunctionModal: false,
+         isNewTriggerFunctionModal: false,
         isNewSchedulerModal: false,

         localWidth: null,
@@ -209,6 +219,9 @@ export default {
      },
      connectionName () {
         return this.getConnectionName(this.connection.uid);
+      },
+      customizations () {
+         return this.workspace.customizations;
      }
   },
   watch: {
@@ -363,7 +376,8 @@ export default {

         if (status === 'success') {
            await this.refresh();
-            this.changeBreadcrumbs({ schema: this.selectedDatabase, trigger: payload.name });
+            const triggerName = this.customizations.triggerTableInName ? `${payload.table}.${payload.name}` : payload.name;
+            this.changeBreadcrumbs({ schema: this.selectedDatabase, trigger: triggerName });
            this.selectTab({ uid: this.workspace.uid, tab: 'prop' });
         }
         else
@@ -399,6 +413,13 @@ export default {
      hideCreateFunctionModal () {
         this.isNewFunctionModal = false;
      },
+      showCreateTriggerFunctionModal () {
+         this.closeDatabaseContext();
+         this.isNewTriggerFunctionModal = true;
+      },
+      hideCreateTriggerFunctionModal () {
+         this.isNewTriggerFunctionModal = false;
+      },
      showCreateSchedulerModal () {
         this.closeDatabaseContext();
         this.isNewSchedulerModal = true;
@@ -422,6 +443,22 @@ export default {
         else
            this.addNotification({ status: 'error', message: response });
      },
+      async openCreateTriggerFunctionEditor (payload) {
+         const params = {
+            uid: this.connection.uid,
+            ...payload
+         };
+
+         const { status, response } = await Functions.createTriggerFunction(params);
+
+         if (status === 'success') {
+            await this.refresh();
+            this.changeBreadcrumbs({ schema: this.selectedDatabase, triggerFunction: payload.name });
+            this.selectTab({ uid: this.workspace.uid, tab: 'prop' });
+         }
+         else
+            this.addNotification({ status: 'error', message: response });
+      },
      async openCreateSchedulerEditor (payload) {
         const params = {
            uid: this.connection.uid,
@@ -451,6 +488,11 @@ export default {
    height: calc(100vh - #{$excluding-size});
    cursor: ew-resize;
    z-index: 99;
+    transition: background 0.2s;
+
+    &:hover {
+      background: rgba($primary-color, 50%);
+    }
  }

  .workspace-explorebar {
--- a/src/renderer/components/WorkspaceExploreBarMiscContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarMiscContext.vue
@@ -84,6 +84,7 @@ export default {
            case 'procedure':
               return this.$t('message.deleteRoutine');
            case 'function':
+            case 'triggerFunction':
               return this.$t('message.deleteFunction');
            case 'scheduler':
               return this.$t('message.deleteScheduler');
@@ -135,6 +136,7 @@ export default {
                  });
                  break;
               case 'function':
+               case 'triggerFunction':
                  res = await Functions.dropFunction({
                     uid: this.selectedWorkspace,
                     func: this.selectedMisc.name
--- a/src/renderer/components/WorkspaceExploreBarSchema.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchema.vue
@@ -93,6 +93,34 @@
            </details>
         </div>

+         <div v-if="filteredTriggerFunctions.length && customizations.triggerFunctions" class="database-misc">
+            <details class="accordion">
+               <summary class="accordion-header misc-name" :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction}">
+                  <i class="misc-icon mdi mdi-18px mdi-folder-refresh mr-1" />
+                  {{ $tc('word.triggerFunction', 2) }}
+               </summary>
+               <div class="accordion-body">
+                  <div>
+                     <ul class="menu menu-nav pt-0">
+                        <li
+                           v-for="(func, i) of filteredTriggerFunctions"
+                           :key="`${func.name}-${i}`"
+                           class="menu-item"
+                           :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name}"
+                           @click="setBreadcrumbs({schema: database.name, triggerFunction: func.name})"
+                           @contextmenu.prevent="showMiscContext($event, {...func, type: 'triggerFunction'})"
+                        >
+                           <a class="table-name">
+                              <i class="table-icon mdi mdi-cog-clockwise mdi-18px mr-1" />
+                              <span v-html="highlightWord(func.name)" />
+                           </a>
+                        </li>
+                     </ul>
+                  </div>
+               </div>
+            </details>
+         </div>
+
         <div v-if="filteredFunctions.length && customizations.functions" class="database-misc">
            <details class="accordion">
               <summary class="accordion-header misc-name" :class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.function}">
@@ -189,6 +217,11 @@ export default {
      filteredFunctions () {
         return this.database.functions.filter(func => func.name.search(this.searchTerm) >= 0);
      },
+      filteredTriggerFunctions () {
+         return this.database.triggerFunctions
+            ? this.database.triggerFunctions.filter(func => func.name.search(this.searchTerm) >= 0)
+            : [];
+      },
      filteredSchedulers () {
         return this.database.schedulers.filter(scheduler => scheduler.name.search(this.searchTerm) >= 0);
      },
@@ -311,7 +344,7 @@ export default {
  .database-name,
  .misc-name {
    &:hover {
-      border-radius: 2px;
+      border-radius: $border-radius;
    }
  }

@@ -320,7 +353,7 @@ export default {
    position: relative;

    &:hover {
-      border-radius: 2px;
+      border-radius: $border-radius;
    }
  }

--- a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
@@ -42,6 +42,13 @@
            >
               <span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box pr-1" /> {{ $tc('word.function', 1) }}</span>
            </div>
+            <div
+               v-if="workspace.customizations.triggerFunctionAdd"
+               class="context-element"
+               @click="showCreateTriggerFunctionModal"
+            >
+               <span class="d-flex"><i class="mdi mdi-18px mdi-cog-clockwise pr-1" /> {{ $tc('word.triggerFunction', 1) }}</span>
+            </div>
            <div
               v-if="workspace.customizations.schedulerAdd"
               class="context-element"
@@ -140,6 +147,9 @@ export default {
      showCreateFunctionModal () {
         this.$emit('show-create-function-modal');
      },
+      showCreateTriggerFunctionModal () {
+         this.$emit('show-create-trigger-function-modal');
+      },
      showCreateSchedulerModal () {
         this.$emit('show-create-scheduler-modal');
      },
--- a/src/renderer/components/WorkspaceExploreBarTableContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarTableContext.vue
@@ -3,6 +3,13 @@
      :context-event="contextEvent"
      @close-context="closeContext"
   >
+      <div
+         v-if="selectedTable.type === 'table'"
+         class="context-element"
+         @click="duplicateTable"
+      >
+         <span class="d-flex"><i class="mdi mdi-18px mdi-table-multiple text-light pr-1" /> {{ $t('message.duplicateTable') }}</span>
+      </div>
      <div
         v-if="selectedTable.type === 'table'"
         class="context-element"
@@ -105,6 +112,24 @@ export default {
      closeContext () {
         this.$emit('close-context');
      },
+      async duplicateTable () {
+         try {
+            const { status, response } = await Tables.duplicateTable({
+               uid: this.selectedWorkspace,
+               table: this.selectedTable.name
+            });
+
+            if (status === 'success') {
+               this.closeContext();
+               this.$emit('reload');
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+      },
      async emptyTable () {
         try {
            const { status, response } = await Tables.truncateTable({
--- a/src/renderer/components/WorkspacePropsForeignModal.vue
+++ b/src/renderer/components/WorkspacePropsForeignModal.vue
@@ -362,7 +362,7 @@ export default {

 <style lang="scss" scoped>
 .tile {
-  border-radius: 2px;
+  border-radius: $border-radius;
  opacity: 0.5;
  transition: background 0.2s;
  transition: opacity 0.2s;
--- a/src/renderer/components/WorkspacePropsFunctionParamsModal.vue
+++ b/src/renderer/components/WorkspacePropsFunctionParamsModal.vue
@@ -274,7 +274,7 @@ export default {

 <style lang="scss" scoped>
 .tile {
-  border-radius: 2px;
+  border-radius: $border-radius;
  opacity: 0.5;
  transition: background 0.2s;
  transition: opacity 0.2s;
--- a/src/renderer/components/WorkspacePropsIndexesModal.vue
+++ b/src/renderer/components/WorkspacePropsIndexesModal.vue
@@ -247,7 +247,7 @@ export default {

 <style lang="scss" scoped>
 .tile {
-  border-radius: 2px;
+  border-radius: $border-radius;
  opacity: 0.5;
  transition: background 0.2s;
  transition: opacity 0.2s;
--- a/src/renderer/components/WorkspacePropsOptionsModal.vue
+++ b/src/renderer/components/WorkspacePropsOptionsModal.vue
@@ -48,6 +48,7 @@
                     v-model="optionsProxy.autoIncrement"
                     class="form-input"
                     type="number"
+                     :disabled="optionsProxy.autoIncrement === null"
                  >
               </div>
            </div>
--- a/src/renderer/components/WorkspacePropsRoutineParamsModal.vue
+++ b/src/renderer/components/WorkspacePropsRoutineParamsModal.vue
@@ -274,7 +274,7 @@ export default {

 <style lang="scss" scoped>
 .tile {
-  border-radius: 2px;
+  border-radius: $border-radius;
  opacity: 0.5;
  transition: background 0.2s;
  transition: opacity 0.2s;
--- a/src/renderer/components/WorkspacePropsTabFunction.vue
+++ b/src/renderer/components/WorkspacePropsTabFunction.vue
@@ -137,7 +137,9 @@ export default {
         return JSON.stringify(this.originalFunction) !== JSON.stringify(this.localFunction);
      },
      isDefinerInUsers () {
-         return this.originalFunction ? this.workspace.users.some(user => this.originalFunction.definer === `\`${user.name}\`@\`${user.host}\``) : true;
+         return this.originalFunction
+            ? this.workspace.users.some(user => this.originalFunction.definer === `\`${user.name}\`@\`${user.host}\``)
+            : true;
      },
      schemaTables () {
         const schemaTables = this.workspace.structure
--- a/src/renderer/components/WorkspacePropsTabTriggerFunction.vue
+++ b/src/renderer/components/WorkspacePropsTabTriggerFunction.vue
@@ -0,0 +1,315 @@
+<template>
+   <div class="workspace-query-tab column col-12 columns col-gapless">
+      <div class="workspace-query-runner column col-12">
+         <div class="workspace-query-runner-footer">
+            <div class="workspace-query-buttons">
+               <button
+                  class="btn btn-primary btn-sm"
+                  :disabled="!isChanged"
+                  :class="{'loading':isSaving}"
+                  title="CTRL+S"
+                  @click="saveChanges"
+               >
+                  <span>{{ $t('word.save') }}</span>
+                  <i class="mdi mdi-24px mdi-content-save ml-1" />
+               </button>
+               <button
+                  :disabled="!isChanged"
+                  class="btn btn-link btn-sm mr-0"
+                  :title="$t('message.clearChanges')"
+                  @click="clearChanges"
+               >
+                  <span>{{ $t('word.clear') }}</span>
+                  <i class="mdi mdi-24px mdi-delete-sweep ml-1" />
+               </button>
+
+               <div class="divider-vert py-3" />
+
+               <button class="btn btn-dark btn-sm" @click="showOptionsModal">
+                  <span>{{ $t('word.options') }}</span>
+                  <i class="mdi mdi-24px mdi-cogs ml-1" />
+               </button>
+            </div>
+         </div>
+      </div>
+      <div class="workspace-query-results column col-12 mt-2 p-relative">
+         <BaseLoader v-if="isLoading" />
+         <label class="form-label ml-2">{{ $t('message.functionBody') }}</label>
+         <QueryEditor
+            v-show="isSelected"
+            ref="queryEditor"
+            :value.sync="localFunction.sql"
+            :workspace="workspace"
+            :schema="schema"
+            :height="editorHeight"
+         />
+      </div>
+      <WorkspacePropsTriggerFunctionOptionsModal
+         v-if="isOptionsModal"
+         :local-options="localFunction"
+         :workspace="workspace"
+         @hide="hideOptionsModal"
+         @options-update="optionsUpdate"
+      />
+      <ModalAskParameters
+         v-if="isAskingParameters"
+         :local-routine="localFunction"
+         :client="workspace.client"
+         @confirm="runFunction"
+         @close="hideAskParamsModal"
+      />
+   </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import { uidGen } from 'common/libs/uidGen';
+import BaseLoader from '@/components/BaseLoader';
+import QueryEditor from '@/components/QueryEditor';
+import WorkspacePropsTriggerFunctionOptionsModal from '@/components/WorkspacePropsTriggerFunctionOptionsModal';
+import ModalAskParameters from '@/components/ModalAskParameters';
+import Functions from '@/ipc-api/Functions';
+
+export default {
+   name: 'WorkspacePropsTabTriggerFunction',
+   components: {
+      BaseLoader,
+      QueryEditor,
+      WorkspacePropsTriggerFunctionOptionsModal,
+      ModalAskParameters
+   },
+   props: {
+      connection: Object,
+      function: String
+   },
+   data () {
+      return {
+         tabUid: 'prop',
+         isLoading: false,
+         isSaving: false,
+         isOptionsModal: false,
+         isParamsModal: false,
+         isAskingParameters: false,
+         originalFunction: null,
+         localFunction: { sql: '' },
+         lastFunction: null,
+         sqlProxy: '',
+         editorHeight: 300
+      };
+   },
+   computed: {
+      ...mapGetters({
+         selectedWorkspace: 'workspaces/getSelected',
+         getWorkspace: 'workspaces/getWorkspace'
+      }),
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
+      isSelected () {
+         return this.workspace.selected_tab === 'prop' && this.selectedWorkspace === this.workspace.uid && this.function;
+      },
+      schema () {
+         return this.workspace.breadcrumbs.schema;
+      },
+      isChanged () {
+         return JSON.stringify(this.originalFunction) !== JSON.stringify(this.localFunction);
+      },
+      isDefinerInUsers () {
+         return this.originalFunction
+            ? this.workspace.users.some(user => this.originalFunction.definer === `\`${user.name}\`@\`${user.host}\``)
+            : true;
+      },
+      schemaTables () {
+         const schemaTables = this.workspace.structure
+            .filter(schema => schema.name === this.schema)
+            .map(schema => schema.tables);
+
+         return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
+      }
+   },
+   watch: {
+      async function () {
+         if (this.isSelected) {
+            await this.getFunctionData();
+            this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
+            this.lastFunction = this.function;
+         }
+      },
+      async isSelected (val) {
+         if (val && this.lastFunction !== this.function) {
+            await this.getFunctionData();
+            this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
+            this.lastFunction = this.function;
+         }
+      },
+      isChanged (val) {
+         if (this.isSelected && this.lastFunction === this.function && this.function !== null)
+            this.setUnsavedChanges(val);
+      }
+   },
+   mounted () {
+      window.addEventListener('resize', this.resizeQueryEditor);
+   },
+   destroyed () {
+      window.removeEventListener('resize', this.resizeQueryEditor);
+   },
+   created () {
+      window.addEventListener('keydown', this.onKey);
+   },
+   beforeDestroy () {
+      window.removeEventListener('keydown', this.onKey);
+   },
+   methods: {
+      ...mapActions({
+         addNotification: 'notifications/addNotification',
+         refreshStructure: 'workspaces/refreshStructure',
+         setUnsavedChanges: 'workspaces/setUnsavedChanges',
+         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
+         newTab: 'workspaces/newTab'
+      }),
+      async getFunctionData () {
+         if (!this.function) return;
+
+         this.isLoading = true;
+         this.localFunction = { sql: '' };
+
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            func: this.workspace.breadcrumbs.triggerFunction
+         };
+
+         try {
+            const { status, response } = await Functions.getFunctionInformations(params);
+            if (status === 'success') {
+               this.originalFunction = response;
+
+               this.originalFunction.parameters = [...this.originalFunction.parameters.map(param => {
+                  param._id = uidGen();
+                  return param;
+               })];
+
+               this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
+               this.sqlProxy = this.localFunction.sql;
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.resizeQueryEditor();
+         this.isLoading = false;
+      },
+      async saveChanges () {
+         if (this.isSaving) return;
+         this.isSaving = true;
+         const params = {
+            uid: this.connection.uid,
+            schema: this.schema,
+            func: {
+               ...this.localFunction,
+               oldName: this.originalFunction.name
+            }
+         };
+
+         try {
+            const { status, response } = await Functions.alterTriggerFunction(params);
+
+            if (status === 'success') {
+               const oldName = this.originalFunction.name;
+
+               await this.refreshStructure(this.connection.uid);
+
+               if (oldName !== this.localFunction.name) {
+                  this.setUnsavedChanges(false);
+                  this.changeBreadcrumbs({ schema: this.schema, function: this.localFunction.name });
+               }
+
+               this.getFunctionData();
+            }
+            else
+               this.addNotification({ status: 'error', message: response });
+         }
+         catch (err) {
+            this.addNotification({ status: 'error', message: err.stack });
+         }
+
+         this.isSaving = false;
+      },
+      clearChanges () {
+         this.localFunction = JSON.parse(JSON.stringify(this.originalFunction));
+         this.$refs.queryEditor.editor.session.setValue(this.localFunction.sql);
+      },
+      resizeQueryEditor () {
+         if (this.$refs.queryEditor) {
+            const footer = document.getElementById('footer');
+            const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
+            this.editorHeight = size;
+            this.$refs.queryEditor.editor.resize();
+         }
+      },
+      optionsUpdate (options) {
+         this.localFunction = options;
+      },
+      parametersUpdate (parameters) {
+         this.localFunction = { ...this.localFunction, parameters };
+      },
+      runFunctionCheck () {
+         if (this.localFunction.parameters.length)
+            this.showAskParamsModal();
+         else
+            this.runFunction();
+      },
+      runFunction (params) {
+         if (!params) params = [];
+
+         let sql;
+         switch (this.connection.client) { // TODO: move in a better place
+            case 'maria':
+            case 'mysql':
+               sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`;
+               break;
+            case 'pg':
+               sql = `SELECT ${this.originalFunction.name}(${params.join(',')})`;
+               break;
+            case 'mssql':
+               sql = `SELECT ${this.originalFunction.name} ${params.join(',')}`;
+               break;
+            default:
+               sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`;
+         }
+
+         this.newTab({ uid: this.connection.uid, content: sql, autorun: true });
+      },
+      showOptionsModal () {
+         this.isOptionsModal = true;
+      },
+      hideOptionsModal () {
+         this.isOptionsModal = false;
+      },
+      showParamsModal () {
+         this.isParamsModal = true;
+      },
+      hideParamsModal () {
+         this.isParamsModal = false;
+      },
+      showAskParamsModal () {
+         this.isAskingParameters = true;
+      },
+      hideAskParamsModal () {
+         this.isAskingParameters = false;
+      },
+      onKey (e) {
+         if (this.isSelected) {
+            e.stopPropagation();
+            if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
+               if (this.isChanged)
+                  this.saveChanges();
+            }
+         }
+      }
+   }
+};
+</script>
--- a/src/renderer/components/WorkspacePropsTriggerFunctionOptionsModal.vue
+++ b/src/renderer/components/WorkspacePropsTriggerFunctionOptionsModal.vue
@@ -0,0 +1,125 @@
+<template>
+   <ConfirmModal
+      :confirm-text="$t('word.confirm')"
+      size="400"
+      @confirm="confirmOptionsChange"
+      @hide="$emit('hide')"
+   >
+      <template :slot="'header'">
+         <div class="d-flex">
+            <i class="mdi mdi-24px mdi-cogs mr-1" />
+            <span class="cut-text">{{ $t('word.options') }} "{{ localOptions.name }}"</span>
+         </div>
+      </template>
+      <div :slot="'body'">
+         <form class="form-horizontal">
+            <div v-if="customizations.triggerFunctionlanguages" class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.language') }}
+               </label>
+               <div class="column">
+                  <select v-model="optionsProxy.language" class="form-select">
+                     <option v-for="language in customizations.triggerFunctionlanguages" :key="language">
+                        {{ language }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.definer" class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.definer') }}
+               </label>
+               <div class="column">
+                  <select
+                     v-if="workspace.users.length"
+                     v-model="optionsProxy.definer"
+                     class="form-select"
+                  >
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                     <option
+                        v-for="user in workspace.users"
+                        :key="`${user.name}@${user.host}`"
+                        :value="`\`${user.name}\`@\`${user.host}\``"
+                     >
+                        {{ user.name }}@{{ user.host }}
+                     </option>
+                  </select>
+                  <select v-if="!workspace.users.length" class="form-select">
+                     <option value="">
+                        {{ $t('message.currentUser') }}
+                     </option>
+                  </select>
+               </div>
+            </div>
+            <div v-if="customizations.comment" class="form-group">
+               <label class="form-label col-4">
+                  {{ $t('word.comment') }}
+               </label>
+               <div class="column">
+                  <input
+                     v-model="optionsProxy.comment"
+                     class="form-input"
+                     type="text"
+                  >
+               </div>
+            </div>
+         </form>
+      </div>
+   </ConfirmModal>
+</template>
+
+<script>
+import ConfirmModal from '@/components/BaseConfirmModal';
+
+export default {
+   name: 'WorkspacePropsTriggerFunctionOptionsModal',
+   components: {
+      ConfirmModal
+   },
+   props: {
+      localOptions: Object,
+      workspace: Object
+   },
+   data () {
+      return {
+         optionsProxy: {},
+         isOptionsChanging: false
+      };
+   },
+   computed: {
+      isTableNameValid () {
+         return this.optionsProxy.name !== '';
+      },
+      customizations () {
+         return this.workspace.customizations;
+      },
+      isInDataTypes () {
+         let typeNames = [];
+         for (const group of this.workspace.dataTypes) {
+            typeNames = group.types.reduce((acc, curr) => {
+               acc.push(curr.name);
+               return acc;
+            }, []);
+         }
+         return typeNames.includes(this.localOptions.returns);
+      }
+   },
+   created () {
+      this.optionsProxy = JSON.parse(JSON.stringify(this.localOptions));
+
+      setTimeout(() => {
+         this.$refs.firstInput.focus();
+      }, 20);
+   },
+   methods: {
+      confirmOptionsChange () {
+         if (!this.isTableNameValid)
+            this.optionsProxy.name = this.localOptions.name;
+
+         this.$emit('options-update', this.optionsProxy);
+      }
+   }
+};
+</script>
--- a/src/renderer/components/WorkspaceQueryTab.vue
+++ b/src/renderer/components/WorkspaceQueryTab.vue
@@ -31,25 +31,6 @@
                  <span>{{ $t('word.run') }}</span>
                  <i class="mdi mdi-24px mdi-play" />
               </button>
-               <div class="dropdown export-dropdown pr-2">
-                  <button
-                     :disabled="!results.length || isQuering"
-                     class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
-                     tabindex="0"
-                  >
-                     <span>{{ $t('word.export') }}</span>
-                     <i class="mdi mdi-24px mdi-file-export ml-1" />
-                     <i class="mdi mdi-24px mdi-menu-down" />
-                  </button>
-                  <ul class="menu text-left">
-                     <li class="menu-item">
-                        <a class="c-hand" @click="downloadTable('json')">JSON</a>
-                     </li>
-                     <li class="menu-item">
-                        <a class="c-hand" @click="downloadTable('csv')">CSV</a>
-                     </li>
-                  </ul>
-               </div>
               <button
                  class="btn btn-dark btn-sm"
                  :disabled="!query || isQuering"
@@ -68,6 +49,28 @@
                  <span>{{ $t('word.clear') }}</span>
                  <i class="mdi mdi-24px mdi-delete-sweep pl-1" />
               </button>
+
+               <div class="divider-vert py-3" />
+
+               <div class="dropdown table-dropdown pr-2">
+                  <button
+                     :disabled="!results.length || isQuering"
+                     class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
+                     tabindex="0"
+                  >
+                     <span>{{ $t('word.export') }}</span>
+                     <i class="mdi mdi-24px mdi-file-export ml-1" />
+                     <i class="mdi mdi-24px mdi-menu-down" />
+                  </button>
+                  <ul class="menu text-left">
+                     <li class="menu-item">
+                        <a class="c-hand" @click="downloadTable('json')">JSON</a>
+                     </li>
+                     <li class="menu-item">
+                        <a class="c-hand" @click="downloadTable('csv')">CSV</a>
+                     </li>
+                  </ul>
+               </div>
            </div>
            <div class="workspace-query-info">
               <div
@@ -281,11 +284,16 @@ export default {

    .query-area-resizer {
      position: absolute;
-      height: 5px;
+      height: 4px;
      bottom: 40px;
      width: 100%;
      cursor: ns-resize;
      z-index: 99;
+      transition: background 0.2s;
+
+      &:hover {
+        background: rgba($primary-color, 50%);
+      }
    }

    .workspace-query-runner-footer {
@@ -319,10 +327,4 @@ export default {
    min-height: 200px;
  }
 }
-
-.export-dropdown {
-  .menu {
-    min-width: 100%;
-  }
-}
 </style>
--- a/src/renderer/components/WorkspaceQueryTable.vue
+++ b/src/renderer/components/WorkspaceQueryTable.vue
@@ -12,6 +12,8 @@
         :selected-rows="selectedRows"
         @show-delete-modal="showDeleteConfirmModal"
         @set-null="setNull"
+         @copy-cell="copyCell"
+         @copy-row="copyRow"
         @close-context="closeContext"
      />
      <ul v-if="resultsWithRows.length > 1" class="tab tab-block result-tabs">
@@ -385,6 +387,22 @@ export default {
         };
         this.$emit('update-field', params);
      },
+      copyCell () {
+         const row = this.localResults.find(row => this.selectedRows.includes(row._id));
+         const cellName = Object.keys(row).find(prop => [
+            this.selectedCell.field,
+            `${this.fields[0].table}.${this.selectedCell.field}`,
+            `${this.fields[0].tableAlias}.${this.selectedCell.field}`
+         ].includes(prop));
+         const valueToCopy = row[cellName];
+         navigator.clipboard.writeText(valueToCopy);
+      },
+      copyRow () {
+         const row = this.localResults.find(row => this.selectedRows.includes(row._id));
+         const rowToCopy = JSON.parse(JSON.stringify(row));
+         delete rowToCopy._id;
+         navigator.clipboard.writeText(JSON.stringify(rowToCopy));
+      },
      applyUpdate (params) {
         const { primary, id, field, table, content } = params;

@@ -465,7 +483,7 @@ export default {
      downloadTable (format, filename) {
         if (!this.sortedResults) return;

-         const rows = [...this.sortedResults].map(row => {
+         const rows = JSON.parse(JSON.stringify(this.sortedResults)).map(row => {
            delete row._id;
            return row;
         });
--- a/src/renderer/components/WorkspaceQueryTableContext.vue
+++ b/src/renderer/components/WorkspaceQueryTableContext.vue
@@ -3,6 +3,30 @@
      :context-event="contextEvent"
      @close-context="closeContext"
   >
+      <div v-if="selectedRows.length === 1" class="context-element">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ $t('word.copy') }}</span>
+         <i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
+         <div class="context-submenu">
+            <div
+               v-if="selectedRows.length === 1"
+               class="context-element"
+               @click="copyCell"
+            >
+               <span class="d-flex">
+                  <i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ $tc('word.cell', 1) }}
+               </span>
+            </div>
+            <div
+               v-if="selectedRows.length === 1"
+               class="context-element"
+               @click="copyRow"
+            >
+               <span class="d-flex">
+                  <i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ $tc('word.row', 1) }}
+               </span>
+            </div>
+         </div>
+      </div>
      <div
         v-if="selectedRows.length === 1"
         class="context-element"
@@ -44,6 +68,14 @@ export default {
      setNull () {
         this.$emit('set-null');
         this.closeContext();
+      },
+      copyCell () {
+         this.$emit('copy-cell');
+         this.closeContext();
+      },
+      copyRow () {
+         this.$emit('copy-row');
+         this.closeContext();
      }
   }
 };
--- a/src/renderer/components/WorkspaceTableTab.vue
+++ b/src/renderer/components/WorkspaceTableTab.vue
@@ -42,8 +42,8 @@
                     <i class="mdi mdi-24px mdi-skip-previous" />
                  </button>
                  <div class="dropdown" :class="{'active': isPageMenu}">
-                     <div class="btn-group" @click="openPageMenu">
-                        <div class="btn btn-dark btn-sm mr-0 dropdown-toggle text-bold px-3">
+                     <div @click="openPageMenu">
+                        <div class="btn btn-dark btn-sm mr-0 no-radius dropdown-toggle text-bold px-3">
                           {{ page }}
                        </div>
                        <div class="menu px-3">
@@ -81,7 +81,7 @@
                  <i class="mdi mdi-24px mdi-playlist-plus ml-1" />
               </button>

-               <div class="dropdown export-dropdown pr-2">
+               <div class="dropdown table-dropdown pr-2">
                  <button
                     :disabled="isQuering"
                     class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
@@ -383,10 +383,3 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
-.export-dropdown {
-  .menu {
-    min-width: 100%;
-  }
-}
-</style>
--- a/src/renderer/i18n/en-US.js
+++ b/src/renderer/i18n/en-US.js
@@ -109,7 +109,10 @@ module.exports = {
      structure: 'Structure',
      small: 'Small',
      medium: 'Medium',
-      large: 'Large'
+      large: 'Large',
+      row: 'Row | Rows',
+      cell: 'Cell | Cells',
+      triggerFunction: 'Trigger function | Trigger functions'
   },
   message: {
      appWelcome: 'Welcome to Antares SQL Client!',
@@ -216,7 +219,8 @@ module.exports = {
      markdownSupported: 'Markdown supported',
      plantATree: 'Plant a Tree',
      dataTabPageSize: 'DATA tab page size',
-      pageNumber: 'Page number'
+      pageNumber: 'Page number',
+      duplicateTable: 'Duplicate table'
   },
   faker: {
      address: 'Address',
--- a/src/renderer/ipc-api/Functions.js
+++ b/src/renderer/ipc-api/Functions.js
@@ -14,7 +14,15 @@ export default class {
      return ipcRenderer.invoke('alter-function', params);
   }

+   static alterTriggerFunction (params) {
+      return ipcRenderer.invoke('alter-trigger-function', params);
+   }
+
   static createFunction (params) {
      return ipcRenderer.invoke('create-function', params);
   }
+
+   static createTriggerFunction (params) {
+      return ipcRenderer.invoke('create-trigger-function', params);
+   }
 }
--- a/src/renderer/ipc-api/Tables.js
+++ b/src/renderer/ipc-api/Tables.js
@@ -46,6 +46,10 @@ export default class {
      return ipcRenderer.invoke('alter-table', params);
   }

+   static duplicateTable (params) {
+      return ipcRenderer.invoke('duplicate-table', params);
+   }
+
   static truncateTable (params) {
      return ipcRenderer.invoke('truncate-table', params);
   }
--- a/src/renderer/scss/_variables.scss
+++ b/src/renderer/scss/_variables.scss
@@ -22,6 +22,7 @@ $enum-color: goldenrod;
 $unknown-color: gray;

 /* Sizes */
+$border-radius: 0.3rem;
 $titlebar-height: 1.5rem;
 $settingbar-width: 3rem;
 $explorebar-width: 14rem;
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -34,6 +34,10 @@ body {
  outline: none !important;
 }

+.no-radius {
+  border-radius: 0 !important;
+}
+
 .no-border {
  outline: none !important;
  border: none !important;
@@ -109,7 +113,7 @@ body {
  .modal-container,
  .modal-sm .modal-container {
    padding: 0;
-    border-radius: 3px;
+    border-radius: $border-radius;

    .modal-header {
      padding: 0.4rem 0.8rem;
@@ -117,7 +121,7 @@ body {
      display: flex;
      justify-content: space-between;
      align-items: center;
-      border-radius: 3px 3px 0 0;
+      border-radius: $border-radius $border-radius 0 0;

      .modal-title {
        overflow: hidden;
@@ -128,6 +132,35 @@ body {

 .tab {
  .tab-item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+
+    .tab-link {
+      min-width: 0;
+      transition: color 0.2s;
+    }
+
+    &.active {
+      .tab-link {
+        border-color: transparent;
+      }
+
+      &::after {
+        width: 100%;
+      }
+    }
+
+    &::after {
+      content: "";
+      height: 2px;
+      width: 0;
+      transition: width 0.2s;
+      background-color: $primary-color;
+      position: absolute;
+      bottom: 0;
+    }
+
    .btn-clear {
      margin-top: -0.1rem;
      font-size: 0.6rem;
@@ -205,3 +238,37 @@ body {
    visibility: hidden;
  }
 }
+
+.table-dropdown {
+  .menu {
+    min-width: 100%;
+    padding: 0;
+
+    .menu-item {
+      padding: 0;
+
+      > a {
+        margin: 0.2rem;
+        padding: 0.1rem 0.3rem;
+
+        &:hover {
+          color: inherit;
+        }
+      }
+    }
+  }
+}
+
+// Ace Editor
+.ace_editor {
+  &.ace_autocomplete {
+    border-radius: $border-radius;
+
+    .ace_marker-layer {
+      .ace_active-line,
+      .ace_line-hover {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
--- a/src/renderer/scss/themes/dark-theme.scss
+++ b/src/renderer/scss/themes/dark-theme.scss
@@ -235,7 +235,7 @@
        }

        &:hover {
-          background: $primary-color;
+          background: rgba($light-color, 15%);
        }
      }
    }
@@ -266,7 +266,7 @@
  }

  .editor-col {
-    border-left: 2px solid $bg-color-light-dark;
+    border-left: 0.05rem solid rgba($bg-color-light-dark, 60%);
  }

  .table {
@@ -363,26 +363,6 @@
      margin: 0;

      .settingbar-element {
-        height: $settingbar-width;
-        width: 100%;
-        margin: 0;
-        border-left: 3px solid transparent;
-        opacity: 0.5;
-        transition: opacity 0.2s;
-        display: flex;
-        align-content: center;
-        justify-content: center;
-        flex-direction: column;
-
-        &:hover {
-          opacity: 1;
-        }
-
-        &.selected {
-          border-left-color: $body-font-color-dark;
-          opacity: 1;
-        }
-
        .settingbar-element-icon {
          &.badge::after {
            bottom: -10px;
--- a/src/renderer/scss/themes/light-theme.scss
+++ b/src/renderer/scss/themes/light-theme.scss
@@ -98,7 +98,7 @@
  }

  .editor-col {
-    border-left: 2px solid darken($bg-color-light-gray, 15%);
+    border-left: 0.05rem solid darken($bg-color-light-gray, 15%);
  }

  .file-uploader {
@@ -147,26 +147,6 @@
      margin: 0;

      .settingbar-element {
-        height: $settingbar-width;
-        width: 100%;
-        margin: 0;
-        border-left: 3px solid transparent;
-        opacity: 0.5;
-        transition: opacity 0.2s;
-        display: flex;
-        align-content: center;
-        justify-content: center;
-        flex-direction: column;
-
-        &:hover {
-          opacity: 1;
-        }
-
-        &.selected {
-          border-left-color: $body-font-color-dark;
-          opacity: 1;
-        }
-
        .settingbar-element-icon {
          &.badge::after {
            bottom: -10px;
@@ -239,7 +219,7 @@
        }

        &:hover {
-          background: $primary-color;
+          background: rgba($light-color, 15%);
        }
      }
    }
Author	SHA1	Message	Date
Fabio Di Stasio	5c21b67b3d	chore(release): 0.2.0	2021-07-03 12:29:13 +02:00
Fabio Di Stasio	08d5b1b329	feat: contextual option to duplicate tables	2021-07-03 12:27:50 +02:00
Fabio Di Stasio	61a42d51f5	fix(UI): contextual sub-menu alignment when close to the lower edge of the window	2021-07-03 12:01:19 +02:00
Fabio Di Stasio	d96907ca2d	fix(PostgreSQL): error opening setting tab for some stored routines	2021-07-03 11:39:57 +02:00
Fabio Di Stasio	75bbd5f66e	feat(PostgreSQL): trigger functions support	2021-07-03 11:29:14 +02:00
Fabio Di Stasio	faa07a077c	fix: fields default not correctly set in table filler	2021-07-01 19:18:57 +02:00
Fabio Di Stasio	7ca69e51ae	refactor(UI): round corners to editor autocomplete	2021-06-30 19:43:30 +02:00
Fabio Di Stasio	d868c772b9	feat(UI): context option to copy cell or row value	2021-06-30 19:27:24 +02:00
Fabio Di Stasio	a69bdeb20d	feat(UI): resizer border mouse hover animation	2021-06-30 09:49:32 +02:00
Fabio Di Stasio	51db2795bb	refactor(UI): minor UI improvements	2021-06-29 23:31:18 +02:00
Fabio Di Stasio	2d278aa14e	fix: rows loses internal id after export	2021-06-29 23:23:11 +02:00
Fabio Di Stasio	f74bca7bb4	perf: improved contextual menu appearance	2021-06-29 18:22:40 +02:00
Fabio Di Stasio	978a7c5f5b	feat(UI): active tab animation	2021-06-28 18:34:39 +02:00
Fabio Di Stasio	0110756204	fix(UI): editor blinking on first connection with a dark theme	2021-06-27 12:28:55 +02:00
Fabio Di Stasio	7df0cf8389	feat(PostgreSQL): triggers creation	2021-06-26 16:36:05 +02:00
Fabio Di Stasio	3aef7e953e	fix: vulnerability in server error toast messages	2021-06-25 09:35:20 +02:00
Fabio Di Stasio	a975df38dd	fix: unhandled exception in connection test	2021-06-25 09:29:59 +02:00
Fabio Di Stasio	a0a025e450	perf(UI): increased application border-radius	2021-06-24 21:49:46 +02:00