From 92f2d23b287d256b30977264828f71d23cefad2d Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Thu, 27 Oct 2022 13:59:09 +0300
Subject: [PATCH] nested group feature added

---
 app/View/Components/Table/Tr.php                   |  2 +-
 public/css/app.css                                 | 14 +++++++++-----
 resources/assets/js/views/wizard/Currencies.vue    | 14 +++++++-------
 resources/assets/sass/app.css                      |  6 +-----
 resources/views/components/delete-button.blade.php |  4 ++--
 .../documents/index/information.blade.php          |  2 +-
 .../views/components/layouts/admin/menu.blade.php  |  2 +-
 .../views/components/layouts/portal/menu.blade.php |  2 +-
 resources/views/components/table/actions.blade.php | 10 +++++-----
 resources/views/components/tooltip.blade.php       |  2 +-
 resources/views/livewire/report/pin.blade.php      |  4 ++--
 11 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/app/View/Components/Table/Tr.php b/app/View/Components/Table/Tr.php
index a781b208f..53ebff043 100644
--- a/app/View/Components/Table/Tr.php
+++ b/app/View/Components/Table/Tr.php
@@ -42,7 +42,7 @@ class Tr extends Component
         $values = $self->getValue();
 
         if (array_key_exists('App\View\Components\Table\Tbody', $values)) {
-            return 'relative flex items-center px-1 group border-b hover:bg-gray-100';
+            return 'relative flex items-center px-1 group/actions border-b hover:bg-gray-100';
         }
 
         else if (array_key_exists('App\View\Components\Table\Thead', $values)) {
diff --git a/public/css/app.css b/public/css/app.css
index 8d72892d9..3959cf6be 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -47367,10 +47367,6 @@ button, input, optgroup, select, textarea{
         max-height: 0;
     }
 /* index */
-.index-actions:hover .tooltip-content{
-  visibility: visible;
-  opacity: 1;
-}
 html[dir='ltr'] .index-actions:first-child{
   border-top-left-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -48603,7 +48599,11 @@ body{
   opacity: 0.5;
 }
 
-.group:hover .group-hover\:flex{
+.group\/tooltip:hover .group-hover\/tooltip\:visible{
+  visibility: visible;
+}
+
+.group\/actions:hover .group-hover\/actions\:flex{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -48648,6 +48648,10 @@ body{
   opacity: 1;
 }
 
+.group\/tooltip:hover .group-hover\/tooltip\:opacity-100{
+  opacity: 1;
+}
+
 [dir="ltr"] .ltr\:right-0{
   right: 0px;
 }
diff --git a/resources/assets/js/views/wizard/Currencies.vue b/resources/assets/js/views/wizard/Currencies.vue
index cf4a39509..121c19f74 100644
--- a/resources/assets/js/views/wizard/Currencies.vue
+++ b/resources/assets/js/views/wizard/Currencies.vue
@@ -27,7 +27,7 @@
                         </thead>
 
                         <tbody data-table-body>
-                            <tr v-for="(item, index) in currencies" :key="index" data-table-list class="relative flex items-center border-b hover:bg-gray-100 px-1 flex-wrap group">
+                            <tr v-for="(item, index) in currencies" :key="index" data-table-list class="relative flex items-center border-b hover:bg-gray-100 px-1 flex-wrap group/actions">
                                 <td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-medium text-black">
                                     {{ item.name }}
 
@@ -37,7 +37,7 @@
                                         </span>
 
                                         <div id="wizard-currency-default" role="tooltip"
-                                            class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm tooltip-content whitespace-normal opacity-0 invisible"
+                                            class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-normal opacity-0 invisible"
                                         >
                                             {{ translations.currencies.default }}
                                             <div 
@@ -56,20 +56,20 @@
                                 <td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 relative ltr:pr-6 rtl:pl-6 py-4 ltr:text-right rtl:text-left whitespace-nowrap text-sm font-medium text-black">
                                     {{ item.rate }}
 
-                                    <div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
-                                        <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onEditItem(item, index)">
+                                    <div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover/actions:flex">
+                                        <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions" @click="onEditItem(item, index)">
                                             <span class="material-icons-outlined text-purple text-lg">edit</span>
 
-                                           <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
+                                           <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
                                                 <span>{{ translations.currencies.edit }}</span>
                                                 <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
                                             </div>
                                         </button>
 
-                                        <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onClickDelete(item)">
+                                        <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions" @click="onClickDelete(item)">
                                             <span class="material-icons-outlined text-purple text-lg">delete</span>
 
-                                            <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
+                                            <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
                                                 <span>{{ translations.currencies.delete }}</span>
                                                 <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
                                             </div>
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 4e89d4b26..9bb8ffb69 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -17,11 +17,7 @@
         max-height: 0;
     }
 
-    /* index */
-    .index-actions:hover .tooltip-content {
-        @apply opacity-100 visible;
-    }
-      
+    /* index */ 
     html[dir='ltr'] .index-actions:first-child {
         @apply rounded-tl-lg rounded-bl-lg border-r-0;
     }
diff --git a/resources/views/components/delete-button.blade.php b/resources/views/components/delete-button.blade.php
index 95b10ff0f..e7e3333b7 100644
--- a/resources/views/components/delete-button.blade.php
+++ b/resources/views/components/delete-button.blade.php
@@ -1,6 +1,6 @@
 <x-button
     type="button"
-    class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions"
+    class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions"
     @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
     override="class"
     {{ $attributes }}
@@ -9,7 +9,7 @@
         {!! $slot !!}
     @else
         <span class="material-icons-outlined text-purple text-lg pointer-events-none">delete</span>
-        <div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
+        <div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
             <span>{!! $label !!}</span>
             <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
         </div>
diff --git a/resources/views/components/documents/index/information.blade.php b/resources/views/components/documents/index/information.blade.php
index 41ca00230..6a48d4c7e 100644
--- a/resources/views/components/documents/index/information.blade.php
+++ b/resources/views/components/documents/index/information.blade.php
@@ -1,4 +1,4 @@
-<div id="{{ $id }}" role="tooltip" class="w-full lg:w-96 inline-block absolute left-0 z-10 text-sm font-medium rounded-lg border border-gray-200 shadow-sm whitespace-nowrap tooltip-content transition-visible bg-lilac-900 border-none text-black p-6 cursor-auto opacity-0 invisible information-content">
+<div id="{{ $id }}" role="tooltip" class="w-full lg:w-96 inline-block absolute left-0 z-10 text-sm font-medium rounded-lg border border-gray-200 shadow-sm whitespace-nowrap transition-visible bg-lilac-900 border-none text-black p-6 cursor-auto opacity-0 invisible information-content">
     <div class="absolute w-2 h-2 inset-y-1/2 -right-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-lilac-900 before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0 data-popper-arrow"></div>
 
     <ul>
diff --git a/resources/views/components/layouts/admin/menu.blade.php b/resources/views/components/layouts/admin/menu.blade.php
index 79fb48b3f..5a2c62a2c 100644
--- a/resources/views/components/layouts/admin/menu.blade.php
+++ b/resources/views/components/layouts/admin/menu.blade.php
@@ -50,7 +50,7 @@
             @endif
         </div>
 
-        <div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap tooltip-content opacity-0 invisible">
+        <div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap opacity-0 invisible">
             {{ trans('auth.profile') }}
             <div class="absolute w-2 h-2 before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border -left-1 before:border-t-0 before:border-r-0 border-gray-200" data-popper-arrow></div>
         </div>
diff --git a/resources/views/components/layouts/portal/menu.blade.php b/resources/views/components/layouts/portal/menu.blade.php
index 054eb2ac0..a3affccf7 100644
--- a/resources/views/components/layouts/portal/menu.blade.php
+++ b/resources/views/components/layouts/portal/menu.blade.php
@@ -34,7 +34,7 @@
             @endif
         </div>
 
-        <div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap tooltip-content opacity-0 invisible">
+        <div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap opacity-0 invisible">
             {{ trans('auth.profile') }}
             <div class="absolute w-2 h-2 before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border -left-1 before:border-t-0 before:border-r-0 border-gray-200" data-popper-arrow></div>
         </div>
diff --git a/resources/views/components/table/actions.blade.php b/resources/views/components/table/actions.blade.php
index 003b04497..99e54dd71 100644
--- a/resources/views/components/table/actions.blade.php
+++ b/resources/views/components/table/actions.blade.php
@@ -3,7 +3,7 @@
     $more_actions = [];
 @endphp
 
-<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
+<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover/actions:flex">
     @foreach ($actions as $action)
         @if (! empty($action['permission']))
             @can($action['permission'])
@@ -19,12 +19,12 @@
 
         @switch($type)
             @case('button')
-                <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group" {!! $action['attributes'] ?? null !!}>
+                <button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
                     <span class="material-icons-outlined text-purple text-lg pointer-events-none">
                         {{ $action['icon'] }}
                     </span>
 
-                    <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 tooltip-content" data-tooltip-placement="top">
+                    <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
                         <span>{{ $action['title'] }}</span>
                         <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
                     </div>
@@ -42,12 +42,12 @@
                 @break
 
             @default
-                <a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions" {!! $action['attributes'] ?? null !!}>
+                <a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
                     <span class="material-icons-outlined text-purple text-lg pointer-events-none">
                         {{ $action['icon'] }}
                     </span>
 
-                    <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 tooltip-content" data-tooltip-placement="top">
+                    <div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
                         <span>{{ $action['title'] }}</span>
                         <div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
                     </div>
diff --git a/resources/views/components/tooltip.blade.php b/resources/views/components/tooltip.blade.php
index 78acada6a..9b2c85a77 100644
--- a/resources/views/components/tooltip.blade.php
+++ b/resources/views/components/tooltip.blade.php
@@ -20,7 +20,7 @@
         $size,
         'border',
         $borderColor,
-        'shadow-sm opacity-0 tooltip-content',
+        'shadow-sm opacity-0',
         $whitespace
     ])
 >
diff --git a/resources/views/livewire/report/pin.blade.php b/resources/views/livewire/report/pin.blade.php
index ab96e4a97..ef22c3a01 100644
--- a/resources/views/livewire/report/pin.blade.php
+++ b/resources/views/livewire/report/pin.blade.php
@@ -13,12 +13,12 @@
     </span>
 
     @if ($pinned)
-        <div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 tooltip-content">
+        <div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0">
             {{ trans('reports.pin_text.unpin_report') }}
             <div class="absolute w-2 h-2 -top-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-b-0 before:border-r-0" data-popper-arrow></div>
         </div>
      @else
-        <div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 tooltip-content">
+        <div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0">
             {{ trans('reports.pin_text.pin_report') }}
             <div class="absolute w-2 h-2 -top-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-b-0 before:border-r-0" data-popper-arrow></div>
         </div>