show info popup buttons on hover

motor-admin · Apr 8, 2023 · 58467cd · 58467cd
1 parent a57126d
commit 58467cd
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 4 deletions.
diff --git a/ui/src/data_cells/components/data_cell.vue b/ui/src/data_cells/components/data_cell.vue
@@ -43,6 +43,7 @@
     ref="cell"
     :value="value"
     :format="format"
+    :with-filter-button="isTable"
     @tag-click="$emit('tag-click', $event)"
   />
   <DataImage
@@ -165,6 +166,11 @@ export default {
       required: false,
       default: () => ({})
     },
+    isTable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     textTruncate: {
       type: Boolean,
       required: false,

diff --git a/ui/src/data_cells/components/reference.vue b/ui/src/data_cells/components/reference.vue
@@ -1,10 +1,10 @@
 <template>
   <VButton
-    v-popover="popoverParams"
     :to="referenceId || resourceId || alwaysRefer ? { name: 'resources', params: { fragments: [resourceSlug, referenceId || resourceId].filter(Boolean) }} : null"
     type="primary"
     ghost
     shape="circle"
+    class="position-relative"
     @click.stop
   >
     <template v-if="isNumberId">
@@ -17,6 +17,16 @@
     <template v-else>
       {{ truncate(model.display_primary_key ? resourceId.toString() : displayText, maxLength) }}
     </template>
+    <span
+      v-if="!popoverParams.disabled"
+      class="info-popup"
+    >
+      <span
+        v-popover="popoverParams"
+        style="vertical-align: middle; font-size: 16px; margin-bottom: 2px"
+        class="ion ion-ios-information-circle-outline"
+      />
+    </span>
   </VButton>
 </template>
 
@@ -144,7 +154,30 @@ export default {
 </style>
 
 <style lang="scss" scoped>
+@import 'utils/styles/variables';
+
 .ivu-btn {
   user-select: initial
 }
+
+.info-popup {
+  display: none;
+  width: 30px;
+  height: calc(100% + 2px);
+  top: -1px;
+  right: -15px;
+  position: absolute;
+  background: #fff;
+  border-top: 1px $primary-color solid;
+  border-bottom: 1px $primary-color solid;
+  border-top-right-radius: 32px;
+  border-bottom-right-radius: 32px;
+  border-right: 1px $primary-color solid
+}
+
+.ivu-btn:hover {
+  .info-popup {
+    display: inline;
+  }
+}
 </style>
diff --git a/ui/src/data_cells/components/tag.vue b/ui/src/data_cells/components/tag.vue
@@ -9,15 +9,27 @@
   </template>
   <div
     v-else-if="value || value == 0"
-    class="ivu-tag ivu-tag-size-default ivu-tag-checked cursor-unset"
+    class="ivu-tag ivu-tag-size-default ivu-tag-checked cursor-unset position-relative"
     :class="colorClass"
     :style="bgStyle"
-    @click.stop="$emit('tag-click', value)"
   >
     <span
       class="ivu-tag-text ivu-tag-color-white cursor-unset"
       :style="textStyle"
     >{{ options[value] || titleize(value.toString()) }}</span>
+    <span
+      v-if="withFilterButton"
+      class="filter-popup"
+      :style="bgStyle"
+      style="border-left-width: 0"
+      :class="colorClass"
+      @click.stop="$emit('tag-click', value)"
+    >
+      <span
+        style="vertical-align: middle; margin-bottom: 2px"
+        class="ion ion-ios-funnel"
+      />
+    </span>
   </div>
 </template>
 
@@ -59,6 +71,11 @@ export default {
       type: Object,
       required: false,
       default: () => ({})
+    },
+    withFilterButton: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ['tag-click'],
@@ -93,5 +110,27 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
+@import 'utils/styles/variables';
+.ivu-tag {
+  overflow: visible;
+}
+
+.filter-popup {
+  display: none;
+  width: 15px;
+  height: calc(100% + 2px);
+  top: -1px;
+  right: -12px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  position: absolute;
+  background: #fff;
+}
+
+.ivu-tag:hover {
+  .filter-popup {
+    display: inline;
+  }
+}
 </style>
diff --git a/ui/src/data_tables/components/table_column.vue b/ui/src/data_tables/components/table_column.vue
@@ -47,6 +47,7 @@
         v-else
         :value="row[column.key]"
         :format="column.format"
+        :is-table="true"
         :type="column.type"
         @tag-click="$emit('tag-click', { key: column.key, value: $event })"
       />