feat(UI): context menu for input and textarea tags

antares-sql · Feb 21, 2021 · b54fefb · b54fefb
1 parent 9a1bf32
commit b54fefb
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 34 deletions.
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -24,7 +24,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, remote } from 'electron';
 
 export default {
    name: 'App',
@@ -54,6 +54,45 @@ export default {
    },
    mounted () {
       ipcRenderer.send('check-for-updates');
+
+      const Menu = remote.Menu;
+
+      const InputMenu = Menu.buildFromTemplate([
+         {
+            label: this.$t('word.cut'),
+            role: 'cut'
+         },
+         {
+            label: this.$t('word.copy'),
+            role: 'copy'
+         },
+         {
+            label: this.$t('word.paste'),
+            role: 'paste'
+         },
+         {
+            type: 'separator'
+         },
+         {
+            label: this.$t('message.selectAll'),
+            role: 'selectall'
+         }
+      ]);
+
+      document.body.addEventListener('contextmenu', (e) => {
+         e.preventDefault();
+         e.stopPropagation();
+
+         let node = e.target;
+
+         while (node) {
+            if (node.nodeName.match(/^(input|textarea)$/i) || node.isContentEditable) {
+               InputMenu.popup(remote.getCurrentWindow());
+               break;
+            }
+            node = node.parentNode;
+         }
+      });
    },
    methods: {
       ...mapActions({

diff --git a/src/renderer/components/WorkspaceQueryTable.vue b/src/renderer/components/WorkspaceQueryTable.vue
@@ -324,6 +324,8 @@ export default {
             this.selectedRows = [row];
       },
       contextMenu (event, cell) {
+         if (event.target.localName === 'input') return;
+
          this.selectedCell = cell;
          if (!this.selectedRows.includes(cell.id))
             this.selectedRows = [cell.id];

diff --git a/src/renderer/components/WorkspaceQueryTableRow.vue b/src/renderer/components/WorkspaceQueryTableRow.vue
@@ -68,39 +68,43 @@
                   />
                </div>
                <div class="editor-field-info p-vcentered">
-                  <div><b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}</div>
+                  <div class="d-flex p-vcentered">
+                     <label for="editorMode" class="form-label mr-2">
+                        <b>{{ $t('word.content') }}</b>:
+                     </label>
+                     <select
+                        id="editorMode"
+                        v-model="editorMode"
+                        class="form-select select-sm"
+                     >
+                        <option value="text">
+                           TEXT
+                        </option>
+                        <option value="html">
+                           HTML
+                        </option>
+                        <option value="xml">
+                           XML
+                        </option>
+                        <option value="json">
+                           JSON
+                        </option>
+                        <option value="svg">
+                           SVG
+                        </option>
+                        <option value="yaml">
+                           YAML
+                        </option>
+                     </select>
+                  </div>
                   <div class="d-flex">
-                     <div class="d-flex p-vcentered mr-4">
-                        <label for="editorMode" class="form-label mr-2">
-                           <b>{{ $t('word.content') }}</b>:
-                        </label>
-                        <select
-                           id="editorMode"
-                           v-model="editorMode"
-                           class="form-select select-sm"
-                        >
-                           <option value="text">
-                              TEXT
-                           </option>
-                           <option value="html">
-                              HTML
-                           </option>
-                           <option value="xml">
-                              XML
-                           </option>
-                           <option value="json">
-                              JSON
-                           </option>
-                           <option value="svg">
-                              SVG
-                           </option>
-                           <option value="yaml">
-                              YAML
-                           </option>
-                        </select>
-                     </div>
                      <div class="p-vcentered">
-                        <b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
+                        <div class="mr-4">
+                           <b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}
+                        </div>
+                        <div>
+                           <b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}
+                        </div>
                      </div>
                   </div>
                </div>

diff --git a/src/renderer/i18n/en-US.js b/src/renderer/i18n/en-US.js
@@ -94,7 +94,10 @@ module.exports = {
       upload: 'Upload',
       browse: 'Browse',
       faker: 'Faker',
-      content: 'Content'
+      content: 'Content',
+      cut: 'Cut',
+      copy: 'Copy',
+      paste: 'Paste'
    },
    message: {
       appWelcome: 'Welcome to Antares SQL Client!',
@@ -186,7 +189,8 @@ module.exports = {
       manualValue: 'Manual value',
       tableFiller: 'Table Filler',
       fakeDataLanguage: 'Fake data language',
-      searchForElements: 'Search for elements'
+      searchForElements: 'Search for elements',
+      selectAll: 'Select all'
    },
    faker: {
       address: 'Address',