ProcessMaker · ryancooley · Jul 1, 2024 · Jun 19, 2024 · Jun 19, 2024 · Jun 20, 2024
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
@@ -1,11 +1,11 @@
 <template>
   <span>
-    <svg v-if="!columnSortAsc && !columnSortDesc && !filterApplied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+    <svg v-if="(!columnSortAsc && !columnSortDesc && !filterApplied) || columnMouseover" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
       <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
     </svg>
-    <PMColumnFilterIconAsc v-if="columnSortAsc"></PMColumnFilterIconAsc>
-    <PMColumnFilterIconDesc v-if="columnSortDesc"></PMColumnFilterIconDesc>
-    <i v-if="filterApplied" class="fas fa-filter"></i>
+    <PMColumnFilterIconAsc v-if="columnSortAsc && !columnMouseover"></PMColumnFilterIconAsc>
+    <PMColumnFilterIconDesc v-if="columnSortDesc && !columnMouseover"></PMColumnFilterIconDesc>
+    <i v-if="filterApplied && !columnMouseover" class="fas fa-filter"></i>
   </span>
 </template>
 <script>
@@ -22,6 +22,7 @@ export default {
     "columnSortAsc",
     "columnSortDesc",
     "filterApplied",
+    "columnMouseover",
   ],
 };
 </script>
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
@@ -8,6 +8,7 @@
         :columnSortAsc="columnSortAsc"
         :columnSortDesc="columnSortDesc"
         :filterApplied="filterApplied"
+        :columnMouseover="columnHover"
       />
     </b-button>
     <b-popover :container="container"
@@ -61,12 +62,18 @@
       "columnSortAsc",
       "columnSortDesc",
       "filterApplied",
+      "columnMouseover",
     ],
     data() {
       return {
         popoverShow: false
       };
     },
+    computed: {
+      columnHover() {
+        return this.columnMouseover === this.value;
+      },
+    },
     methods: {
       onShown() {
         this.$emit("onUpdate", this);

diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
@@ -23,6 +23,8 @@
             class="pm-table-ellipsis-column"
             :class="{ 'pm-table-filter-applied': column.filterApplied || column.sortAsc || column.sortDesc }"
             :style="{ width: column.fixed_width + 'px' }"
+            @mouseover="$emit('table-column-mouseover', column.field)"
+            @mouseleave="$emit('table-column-mouseleave')"
           >
             <div
               class="pm-table-column-header"
@@ -242,7 +244,7 @@ export default {
     doResize(event) {
       if (this.isResizing) {
         const diff = event.pageX - this.startX;
-        let min = 40;
+        let min = 64;
         const currentWidth = Math.max(min, this.startWidth + diff);
         const contentWidth = this.calculateContent(this.resizingColumnIndex);
         if ((contentWidth - currentWidth) <= 80) {
@@ -308,6 +310,7 @@ export default {
 .pm-table-column-header {
   overflow: hidden;
   white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .pm-table-column-resizer {
@@ -377,6 +380,7 @@ export default {
   position: absolute;
   top: 20%;
   right: 7px;
+  background-color: #F2F8FE
 }
 .pm-table-ellipsis-column .pm-table-filter-button {
   opacity: 0;
@@ -414,16 +418,27 @@ export default {
   opacity: 1 !important;
 }
 .pm-table-tooltip-header .tooltip-inner {
-  background-color: #deebff;
-  color: #104a75;
+  background-color: #FFFFFF;
+  color: #4C545C;
   box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
   max-width: 250px;
   padding: 14px;
   border-radius: 7px;
+  border: 1px solid #CDDDEE
 }
 .pm-table-tooltip-header .arrow::before {
-  border-bottom-color: #deebff !important;
-  border-top-color: #deebff !important;
+  border-bottom-color: #CDDDEE !important;
+  border-top-color: #CDDDEE !important;
+}
+.pm-table-tooltip-header .arrow::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  border-width: 0 .4rem .4rem;
+  transform: translateY(3px);
+  border-color: transparent;
+  border-style: solid;
+  border-bottom-color: #FFFFFF;
 }
 .pm-table-filter-applied {
   color: #1572C2;

diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
@@ -9,10 +9,28 @@
         :unread="unreadColumnName"
         :loading="shouldShowLoader"
         @table-row-click="handleRowClick"
+        @table-column-mouseover="handleColumnMouseover"
+        @table-column-mouseleave="handleColumnMouseleave"
       >
         <!-- Slot Table Header -->
         <template v-for="(column, index) in tableHeaders" v-slot:[column.field]>
-          <div :key="index" style="display: inline-block;">{{ $t(column.label) }}</div>
+          <div
+            :key="index"
+            :id="`requests-table-column-${column.field}`"
+            class="pm-table-column-header-text"
+          >
+            {{ $t(column.label) }}
+          </div>
+          <b-tooltip
+            :key="index"
+            :target="`requests-table-column-${column.field}`"
+            custom-class="pm-table-tooltip-header"
+            placement="bottom"
+            :delay="0"
+            @show="checkIfTooltipIsNeeded"
+          >
+            {{ $t(column.label) }}
+          </b-tooltip>
         </template>
         <!-- Slot Table Header filter Button -->
         <template v-for="(column, index) in tableHeaders" v-slot:[`filter-${column.field}`]>
@@ -31,6 +49,7 @@
                                    :columnSortAsc="column.sortAsc"
                                    :columnSortDesc="column.sortDesc"
                                    :filterApplied="column.filterApplied"
+                                   :columnMouseover="columnMouseover"
                                    @onChangeSort="onChangeSort($event, column.field)"
                                    @onApply="onApply($event, column.field)"
                                    @onClear="onClear(column.field)"
@@ -162,6 +181,7 @@ export default {
       previousAdvancedFilter: "",
       tableHeaders: [],
       unreadColumnName: "user_viewed_at",
+      columnMouseover: null,
     };
   },
   computed: {
@@ -572,13 +592,23 @@ export default {
         type: 'requestFilter',
       }
     },
+    handleColumnMouseover(column) {
+      this.columnMouseover = column;
+    },
+    handleColumnMouseleave() {
+      this.columnMouseover = null;
+    },
   }
 };
 </script>
 <style>
   .pm-table-ellipsis-column{
     text-transform: uppercase;
   }
+  .pm-table-column-header-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
 <style lang="scss" scoped>
   @import url("../../../sass/_scrollbar.scss");

diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
@@ -16,6 +16,8 @@
         @table-row-mouseover="handleRowMouseover"
         @table-tr-mouseleave="handleTrMouseleave"
         @table-row-mouseleave="handleRowMouseleave"
+        @table-column-mouseover="handleColumnMouseover"
+        @table-column-mouseleave="handleColumnMouseleave"
       >
         <!-- Slot Table Header -->
         <template
@@ -24,7 +26,8 @@
         >
           <div
             :key="index"
-            style="display: inline-block"
+            :id="`tasks-table-column-${column.field}`"
+            class="pm-table-column-header-text"
           >
             <img
               v-if="column.field === 'is_priority'"
@@ -35,6 +38,16 @@
             />
             <span v-else>{{ $t(column.label) }}</span>
           </div>
+          <b-tooltip
+            :key="index"
+            :target="`tasks-table-column-${column.field}`"
+            custom-class="pm-table-tooltip-header"
+            placement="bottom"
+            :delay="0"
+            @show="checkIfTooltipIsNeeded"
+          >
+            {{ $t(column.label) }}
+          </b-tooltip>
         </template>
         <!-- Slot Table Header filter Button -->
         <template
@@ -56,6 +69,7 @@
             :columnSortAsc="column.sortAsc"
             :columnSortDesc="column.sortDesc"
             :filterApplied="column.filterApplied"
+            :columnMouseover="columnMouseover"
             @onChangeSort="onChangeSort($event, column.field)"
             @onApply="onApply($event, column.field)"
             @onClear="onClear(column.field)"
@@ -350,6 +364,7 @@ export default {
       isTooltipVisible: false,
       hideTimer: null,
       ellipsisShow: false,
+      columnMouseover: null,
     };
   },
   computed: {
@@ -839,6 +854,12 @@ export default {
     taskListRowButtonsHide(row, index) {
       this.$refs["taskListRowButtons-" + index][0].close();
     },
+    handleColumnMouseover(column) {
+      this.columnMouseover = column;
+    },
+    handleColumnMouseleave() {
+      this.columnMouseover = null;
+    },
   },
 };
 </script>
@@ -870,6 +891,10 @@ export default {
   background-color: #EDF1F6;
   color: #888;
 }
+.pm-table-column-header-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
 <style lang="scss" scoped>
 @import url("../../../sass/_scrollbar.scss");