enhancement: add tooltips to bottom options

packages/nc-gui/components/templates/editor.vue

@@ -118,10 +118,8 @@
                       </span>
 
                       <v-spacer />
-                      <v-tooltip
+                      <v-tooltip bottom>
-                        bottom
+                        <template #activator="{ on }">
-                      >
-                          <template #activator="{ on }">
                           <v-icon
                             v-if="!viewMode"
                             class="flex-grow-0 mr-2"
@@ -131,9 +129,9 @@
                             v-on="on"
                           >
                             mdi-delete-outline
-                          </v-icon>  
+                          </v-icon>
-                          </template>
+                        </template>
-                          <!-- TODO: i18n -->
+                        <!-- TODO: i18n -->
                         <span>Delete Table</span>
                       </v-tooltip>
                     </v-expansion-panel-header>
@@ -495,24 +493,22 @@
                                   "
                                 />
                                 <td style="max-width: 50px; width: 50px">
-                                  <v-tooltip
+                                  <v-tooltip bottom>
-                                    bottom
+                                    <template #activator="{ on }">
-                                  >
-                                   <template #activator="{ on }">
                                       <v-icon
-                                          v-if="!viewMode"
+                                        v-if="!viewMode"
-                                          class="flex-grow-0"
+                                        class="flex-grow-0"
-                                          small
+                                        small
-                                          color="grey"
+                                        color="grey"
-                                          @click.stop="
+                                        @click.stop="
                                             deleteTableColumn(i, j, col, table)
                                           "
-                                          v-on="on"
+                                        v-on="on"
-                                        >
+                                      >
-                                          mdi-delete-outline
+                                        mdi-delete-outline
-                                        </v-icon>
+                                      </v-icon>
-                                      </template>
+                                    </template>
-                                      <!-- TODO: i18n -->
+                                    <!-- TODO: i18n -->
                                     <span>Delete Column</span>
                                   </v-tooltip>
                                 </td>
@@ -522,57 +518,110 @@
                         </v-simple-table>
 
                         <div v-if="!viewMode" class="text-center">
-                          <v-icon
+                          <v-tooltip bottom>
-                            class="mx-2"
+                            <template #activator="{ on }">
-                            small
+                              <v-icon
-                            @click="addNewColumnRow(table, 'Number')"
+                                class="mx-2"
-                          >
+                                small
-                            {{ getIcon("Number") }}
+                                @click="addNewColumnRow(table, 'Number')"
-                          </v-icon>
+                                v-on="on"
-                          <v-icon
+                              >
-                            class="mx-2"
+                                {{ getIcon("Number") }}
-                            small
+                              </v-icon>
-                            @click="addNewColumnRow(table, 'SingleLineText')"
+                            </template>
-                          >
+                            <!-- TODO: i18n -->
-                            {{ getIcon("SingleLineText") }}
+                            <span>Add Number Column</span>
-                          </v-icon>
+                          </v-tooltip>
-                          <v-icon
+
-                            class="mx-2"
+                          <v-tooltip bottom>
-                            small
+                            <template #activator="{ on }">
-                            @click="addNewColumnRow(table, 'LongText')"
+                              <v-icon
-                          >
+                                class="mx-2"
-                            {{ getIcon("LongText") }}
+                                small
-                          </v-icon>
+                                @click="addNewColumnRow(table, 'SingleLineText')"
-                          <v-icon
+                                v-on="on"
-                            class="mx-2"
+                              >
-                            small
+                                {{ getIcon("SingleLineText") }}
-                            @click="
+                              </v-icon>
-                              addNewColumnRow(table, 'LinkToAnotherRecord')
+                            </template>
-                            "
+                            <!-- TODO: i18n -->
-                          >
+                            <span>Add SingleLineText Column</span>
-                            {{ getIcon("LinkToAnotherRecord") }}
+                          </v-tooltip>
-                          </v-icon>
+
-                          <v-icon
+                          <v-tooltip bottom>
-                            class="mx-2"
+                            <template #activator="{ on }">
-                            small
+                              <v-icon
-                            @click="addNewColumnRow(table, 'Lookup')"
+                                class="mx-2"
-                          >
+                                small
-                            {{ getIcon("Lookup") }}
+                                @click="addNewColumnRow(table, 'LongText')"
-                          </v-icon>
+                                v-on="on"
-                          <v-icon
+                              >
-                            class="mx-2"
+                                {{ getIcon("LongText") }}
-                            small
+                              </v-icon>
-                            @click="addNewColumnRow(table, 'Rollup')"
+                            </template>
-                          >
+                            <!-- TODO: i18n -->
-                            {{ getIcon("Rollup") }}
+                            <span>Add LongText Column</span>
-                          </v-icon>
+                          </v-tooltip>
-                          <v-btn
+
-                            class="mx-2"
+                          <v-tooltip bottom>
-                            small
+                            <template #activator="{ on }">
-                            @click="addNewColumnRow(table)"
+                              <v-icon
-                          >
+                                class="mx-2"
-                            + column
+                                small
-                          </v-btn>
+                                @click="addNewColumnRow(table, 'LinkToAnotherRecord')"
+                                v-on="on"
+                              >
+                                {{ getIcon("LinkToAnotherRecord") }}
+                              </v-icon>
+                            </template>
+                            <!-- TODO: i18n -->
+                            <span>Add LinkToAnotherRecord Column</span>
+                          </v-tooltip>
+
+                          <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-icon
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table, 'Lookup')"
+                                v-on="on"
+                              >
+                                {{ getIcon("Lookup") }}
+                              </v-icon>
+                            </template>
+                            <!-- TODO: i18n -->
+                            <span>Add Lookup Column</span>
+                          </v-tooltip>
+
+                          <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-icon
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table, 'Rollup')"
+                                v-on="on"
+                              >
+                                {{ getIcon("Rollup") }}
+                              </v-icon>
+                            </template>
+                            <!-- TODO: i18n -->
+                            <span>Add Rollup Column</span>
+                          </v-tooltip>
+
+                          <v-tooltip bottom>
+                            <template #activator="{ on }">
+                              <v-btn
+                                class="mx-2"
+                                small
+                                @click="addNewColumnRow(table)"
+                                v-on="on"
+                              >
+                                + column
+                              </v-btn>
+                            </template>
+                            <!-- TODO: i18n -->
+                            <span>Add Other Column</span>
+                          </v-tooltip>
                         </div>
                       </template>
                     </v-expansion-panel-content>