[SUMMER] feature/FOUR-15726 Visual components

resources/js/components/shared/FilterTable.vue

@@ -38,6 +38,7 @@
             <div
               v-if="index !== visibleHeaders.length - 1"
               class="pm-table-column-resizer"
+              @dblclick="resetSize(index)"
               :class="{ 'resizable': column.resizable === undefined || column.resizable }"
               @mousedown="column.resizable === undefined || column.resizable ? startResize($event, index) : null"
             />
@@ -183,6 +184,7 @@ export default {
       startX: 0,
       startWidth: 0,
       resizingColumnIndex: -1,
+      originalWidths: [],
     };
   },
   computed: {
@@ -215,6 +217,9 @@ export default {
     },
     calculateColumnWidth(widthAdjust = 1) {
       this.visibleHeaders.forEach((headerColumn, index) => {
+        if (!this.originalWidths[index]) {
+          this.originalWidths[index] = headerColumn.width || this.calculateContent(index);
+        }
         if (this.calculateContent(index) !== 0) {
           headerColumn.width = (this.calculateContent(index) * widthAdjust) - 32;
         }
@@ -253,6 +258,11 @@ export default {
         this.resizingColumnIndex = -1;
       }
     },
+    resetSize(index) {
+      if (this.originalWidths[index]) {
+        this.visibleHeaders[index].width = this.originalWidths[index];
+      }
+    },
     handleRowClick(row, event) {
       this.$emit("table-row-click", row, event);
     },
@@ -282,8 +292,6 @@ export default {
   border-right: 1px solid rgba(0, 0, 0, 0.125);
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 5px;
-  scrollbar-width: 8px;
-  scrollbar-color: #6C757D;
   max-height: calc(100vh - 150px);
 }
 
@@ -456,14 +464,6 @@ export default {
     white-space: nowrap;
   }
 }
-.pm-table-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.pm-table-container::-webkit-scrollbar-thumb {
-  background-color: #6C757D;
-  border-radius: 20px;
-}
 .ellipsis-dropdown-main ul.dropdown-menu.dropdown-menu-right.show {
   max-height: 250px;
   overflow-y: auto;

resources/js/components/shared/PaginationTable.vue

@@ -1,29 +1,51 @@
 <template>
   <div class="pagination">
-    <button
+    <b-button
       :disabled="currentPage === 1"
       class="pagination-button"
+      variant="light"
+      @click="firstPage"
+    >
+      <img src="/img/pagination-images/first.svg" :alt="$t('No Image')">
+    </b-button>
+    <b-button
+      :disabled="currentPage === 1"
+      class="pagination-button"
+      variant="light"
       @click="previousPage"
     >
-      <strong>&lt;</strong>
-    </button>
+      <img src="/img/pagination-images/previous.svg" :alt="$t('No Image')">
+    </b-button>
 
     <input
       ref="pageInput"
       v-model="pageInput"
       type="text"
       :placeholder="pageInputPlaceholder"
-      class="pagination-button pagination-input"
+      class="pagination-input"
       @keyup.enter="redirectPage(pageInput)"
     >
 
-    <button
+    <span class="pagination-total">
+      of {{ totalPageCount }}
+    </span>
+
+    <b-button
       :disabled="currentPage >= totalPageCount"
       class="pagination-button"
+      variant="light"
       @click="nextPage"
     >
-      <strong>&gt;</strong>
-    </button>
+      <img src="/img/pagination-images/next.svg" :alt="$t('No Image')">
+    </b-button>
+    <b-button
+      :disabled="currentPage >= totalPageCount"
+      class="pagination-button"
+      variant="light"
+      @click="lastPage"
+    >
+      <img src="/img/pagination-images/last.svg" :alt="$t('No Image')">
+    </b-button>
     <span class="pagination-total">
       {{ totalItems }}
     </span>
@@ -113,7 +135,7 @@ export default {
       return `${this.meta.per_page} per Page`;
     },
     pageInputPlaceholder() {
-      return `${this.currentPage}-${this.totalPageCount}`;
+      return `${this.currentPage}`;
     },
   },
   watch: {
@@ -132,11 +154,17 @@ export default {
         this.goToPage(this.currentPage - 1);
       }
     },
-    nextPage() {
-      if (this.currentPage < this.totalPageCount) {
-        this.goToPage(this.currentPage + 1);
+    firstPage() {
+      if (this.currentPage > 1) {
+        this.goToPage(1);
       }
     },
+    nextPage() {
+      this.goToPage(this.currentPage + 1);
+    },
+    lastPage() {
+      this.goToPage(this.totalPageCount);
+    },
     goToPage(page) {
       this.$emit("page-change", page);
     },
@@ -176,28 +204,38 @@ export default {
   align-items: center;
   margin-top: 20px;
   font-weight: 400;
-  font-size: 15px;
-  color: #5C5C63;
+  font-size: 16px;
+  color: #556271;
+  gap: 8px;
 }
 .pagination-button {
-  background-color: #FFFFFF;
-  border: 1px solid #CDDDEE;
-  border-radius: 8px;
-  padding: 5px 10px;
-  color: #5C5C63;
-  margin-right: 8px;
-  font-weight: 400;
-  font-size: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  border-radius: 4px;
+  padding: 8px;
+  width: 32px;
+  height:32px;
+}
+.pagination-button:focus {
+  box-shadow: 0px 0px 0px 3px rgba(72, 145, 255, 0.4);
+}
+.btn.disabled, .btn:disabled {
+  opacity: 0.5;
 }
 .pagination-button:hover {
-  background-color: #FAFBFC;
+  background-color: #EBEEF2;
+}
+.btn.disabled:hover {
+  background-color: transparent;
 }
 .pagination-current-page {
     color: #1572C2;
     font-weight: 700;
 }
 .pagination-total {
   margin-left: 10px;
+  padding: 0px 8px 0px 8px;
 }
 .pagination-dropup {
   font-weight: 400;
@@ -213,6 +251,13 @@ export default {
   font-size: 14.5px;
   color: #5C5C63;
 }
+.pagination-input {
+  border: solid 1px;
+  border-radius: 4px;
+  width: 44px;
+  height: 32;
+  border-color: #CDDDEE;
+}
 .pagination-input::placeholder {
   text-align: center;
 }

resources/sass/_scrollbar.scss

@@ -1,16 +1,18 @@
 /* Works on Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: #6A7888 #f7f9fb;
+  scrollbar-color: rgba(73, 94, 109, 0.5) transparent;
 }
 /* Works on Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 *::-webkit-scrollbar-track {
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), var(--icons-buttons-inter, #f7f9fb);
+  background-color: transparent;
+  border-radius: 4px;
 }
 *::-webkit-scrollbar-thumb {
-  background-color: #6A7888;
+  background-color: rgba(73, 94, 109, 0.5);
   border-radius: 4px;
 }

webpack.mix.js

@@ -57,6 +57,7 @@ mix
   .copy("resources/img/launchpad-images/*", "public/img/launchpad-images")
   .copy("resources/img/launchpad-images/icons/*", "public/img/launchpad-images/icons")
   .copy("resources/img/smartinbox-images/*", "public/img/smartinbox-images")
+  .copy("resources/img/pagination-images/*", "public/img/pagination-images")
   .copy("resources/img/script_lang/*", "public/img/script_lang")
   .copy("node_modules/snapsvg/dist/snap.svg.js", "public/js")
   .copy("resources/js/components/CustomActions.vue", "public/js")