From d42e0944091cd693436338d14db8c24120f1ae52 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 1 Jul 2020 11:59:21 +0300
Subject: [PATCH] Ripple for action icons

---
 src/components/datatable/BodyCell.vue     | 12 ++++++++----
 src/components/datatable/DataTable.vue    |  4 ++++
 src/components/tree/Tree.vue              |  2 ++
 src/components/tree/TreeNode.vue          |  6 +++++-
 src/components/treetable/TreeTable.vue    |  2 ++
 src/components/treetable/TreeTableRow.vue |  6 +++++-
 6 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 179e22f42..0b78ef387 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -10,18 +10,18 @@
             <i :class="['p-datatable-reorderablerow-handle', column.rowReorderIcon]"></i>
         </template>
         <template v-else-if="column.expander">
-            <button class="p-row-toggler p-link" @click="toggleRow">
+            <button class="p-row-toggler p-link" @click="toggleRow" v-ripple>
                 <span :class="rowTogglerIcon"></span>
             </button>
         </template>
         <template v-else-if="editMode === 'row' && column.rowEditor">
-            <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button">
+            <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple>
                 <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
             </button>
-            <button class="p-row-editor-save p-link" v-if="d_editing" @click="onRowEditSave" type="button">
+            <button class="p-row-editor-save p-link" v-if="d_editing" @click="onRowEditSave" type="button" v-ripple>
                 <span class="p-row-editor-save-icon pi pi-fw pi-check"></span>
             </button>
-            <button class="p-row-editor-cancel p-link" v-if="d_editing" @click="onRowEditCancel" type="button">
+            <button class="p-row-editor-cancel p-link" v-if="d_editing" @click="onRowEditCancel" type="button" v-ripple>
                 <span class="p-row-editor-cancel-icon pi pi-fw pi-times"></span>
             </button>
         </template>
@@ -35,6 +35,7 @@ import ObjectUtils from '../utils/ObjectUtils';
 import ColumnSlot from './ColumnSlot.vue';
 import RowRadioButton from './RowRadioButton';
 import RowCheckbox from './RowCheckbox.vue';
+import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
@@ -278,6 +279,9 @@ export default {
         'ColumnSlot': ColumnSlot,
         'DTRadioButton': RowRadioButton,
         'DTCheckbox': RowCheckbox
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 745ab5523..09404b835 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -1972,6 +1972,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
 
 /* Expand */
@@ -1979,6 +1981,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
 
 /* Reorder */
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
index 87ab34222..b4707aef7 100755
--- a/src/components/tree/Tree.vue
+++ b/src/components/tree/Tree.vue
@@ -303,6 +303,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
diff --git a/src/components/tree/TreeNode.vue b/src/components/tree/TreeNode.vue
index ecdf7de1a..b6f38fd08 100755
--- a/src/components/tree/TreeNode.vue
+++ b/src/components/tree/TreeNode.vue
@@ -2,7 +2,7 @@
     <li :class="containerClass">
         <div :class="contentClass" tabindex="0" role="treeitem" :aria-expanded="expanded"
             @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style">
-            <button class="p-tree-toggler p-link" @click="toggle" tabindex="-1">
+            <button class="p-tree-toggler p-link" @click="toggle" tabindex="-1" v-ripple>
                 <span :class="toggleIcon"></span>
             </button>
             <div class="p-checkbox p-component" v-if="checkboxMode">
@@ -26,6 +26,7 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
+import Ripple from '../ripple/Ripple';
 
 const TreeNodeTemplate = {
     functional: true,
@@ -311,6 +312,9 @@ export default {
     },
     components: {
         'TreeNodeTemplate': TreeNodeTemplate
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 6418b4353..a0d55efb7 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -932,6 +932,8 @@ export default {
     align-items: center;
     justify-content: center;
     vertical-align: middle;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-treetable-toggler + .p-checkbox {
diff --git a/src/components/treetable/TreeTableRow.vue b/src/components/treetable/TreeTableRow.vue
index 87ba180ab..ba3e778d0 100755
--- a/src/components/treetable/TreeTableRow.vue
+++ b/src/components/treetable/TreeTableRow.vue
@@ -1,7 +1,7 @@
 <template>
     <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
         <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" :class="col.bodyClass">
-            <button class="p-treetable-toggler p-link" @click="toggle" v-if="col.expander" :style="togglerStyle" tabindex="-1">
+            <button class="p-treetable-toggler p-link" @click="toggle" v-if="col.expander" :style="togglerStyle" tabindex="-1" v-ripple>
                 <i :class="togglerIcon"></i>
             </button>
             <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && col.expander" role="checkbox" :aria-checked="checked">
@@ -22,6 +22,7 @@
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
 import TreeTableColumnSlot from './TreeTableColumnSlot';
+import Ripple from '../ripple/Ripple';
 
 export default {
     name: 'sub-ttnode',
@@ -247,6 +248,9 @@ export default {
     },
     components: {
         'TTColumnSlot': TreeTableColumnSlot
+    },
+    directives: {
+        'ripple': Ripple
     }
 }
 </script>
\ No newline at end of file