From 37c83d3c0210061b831beb0cf08465583fa5d470 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Mon, 17 Oct 2022 11:19:48 +0300
Subject: [PATCH] convert to view component

---
 presets.js                                        |  2 +-
 public/akaunting-js/generalAction.js              | 14 ++++++--------
 public/css/app.css                                |  4 ++--
 resources/views/common/items/index.blade.php      |  8 ++------
 resources/views/components/marguee-text.blade.php |  5 +++++
 resources/views/components/table/td.blade.php     | 12 +++++++++---
 6 files changed, 25 insertions(+), 20 deletions(-)
 create mode 100644 resources/views/components/marguee-text.blade.php

diff --git a/presets.js b/presets.js
index fbb3bc00d..5d701e8a2 100644
--- a/presets.js
+++ b/presets.js
@@ -244,7 +244,7 @@ module.exports = {
               spin: 'spin 1000ms infinite',
               submit: 'submit 0.7s ease alternate infinite',
               submit_second: 'submit_second 0.7s ease alternate infinite',
-              marquee: 'marquee 5s linear infinite'
+              marquee: 'marquee 9s linear infinite'
           },
 
           transitionProperty: {
diff --git a/public/akaunting-js/generalAction.js b/public/akaunting-js/generalAction.js
index 500f91f5e..938a1819c 100644
--- a/public/akaunting-js/generalAction.js
+++ b/public/akaunting-js/generalAction.js
@@ -362,8 +362,12 @@ if (navigator.userAgent.search("Firefox") >= 0) {
 document.querySelectorAll('[data-truncate]').forEach((truncate) => {
     let truncateText = truncate.textContent.split(" ").join("");
 
+    if (truncateText.length > 30) {
+        truncate.classList.add('truncate');
+    }
+    
     truncate.addEventListener('mouseover', function () {
-        if (truncateText.length > 20) {
+        if (truncateText.length > 30) {
             truncate.style.animationPlayState = 'running';
             truncate.classList.add('animate-marquee');
 
@@ -374,17 +378,11 @@ document.querySelectorAll('[data-truncate]').forEach((truncate) => {
     });
 
     truncate.addEventListener('mouseout', function () {
-        if (truncateText.length > 20) {
+        if (truncateText.length > 30) {
             truncate.style.animationPlayState = 'paused';
             truncate.classList.add('truncate');
             truncate.classList.remove('animate-marquee');
         }
     });
-
-    if (document.body.clientWidth <= 991) {
-        if (truncate.parentElement.getAttribute('data-truncate-parent')) {
-            truncate.parentElement.remove();
-        }
-    }
 });
 //margue animation for truncated text
diff --git a/public/css/app.css b/public/css/app.css
index 47369554b..853582455 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10036,8 +10036,8 @@ input[type="date"]::-webkit-inner-spin-button,
   }
 }
 .animate-marquee{
-  -webkit-animation: marquee 5s linear infinite;
-          animation: marquee 5s linear infinite;
+  -webkit-animation: marquee 9s linear infinite;
+          animation: marquee 9s linear infinite;
 }
 .cursor-auto{
   cursor: auto;
diff --git a/resources/views/common/items/index.blade.php b/resources/views/common/items/index.blade.php
index 22b2a43c8..ad7cca862 100644
--- a/resources/views/common/items/index.blade.php
+++ b/resources/views/common/items/index.blade.php
@@ -85,12 +85,8 @@
 
                                 <x-table.td class="w-6/12 sm:w-4/12">
                                     <x-slot name="first" class="flex items-center font-bold" override="class">
-                                        <div class="w-48 flex truncate" data-truncate-parent>
-                                            <div class="w-48 truncate" data-truncate>
-                                                {{ $item->name }}
-                                            </div>
-                                        </div>
-
+                                        {{ $item->name }}
+                                        
                                         @if (! $item->enabled)
                                             <x-index.disable text="{{ trans_choice('general.items', 1) }}" />
                                         @endif
diff --git a/resources/views/components/marguee-text.blade.php b/resources/views/components/marguee-text.blade.php
new file mode 100644
index 000000000..7963a07c5
--- /dev/null
+++ b/resources/views/components/marguee-text.blade.php
@@ -0,0 +1,5 @@
+<div class="flex lg:block truncate">
+    <div data-truncate>
+        {!! $slot !!}
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/table/td.blade.php b/resources/views/components/table/td.blade.php
index d6ae64e37..f059be20a 100644
--- a/resources/views/components/table/td.blade.php
+++ b/resources/views/components/table/td.blade.php
@@ -8,7 +8,9 @@
         }
     @endphp
     <div {{ $first_attributes }}>
-        {!! $first !!}
+        <x-marguee-text>
+            {!! $first !!}
+        </x-marguee-text>
     </div>
     @endif
 
@@ -21,9 +23,13 @@
         }
     @endphp
     <div {{ $second_attributes }}>
-        {!! $second !!}
+        <x-marguee-text>
+            {!! $second !!}
+        </x-marguee-text>
     </div>
     @endif
 
-    {{ $slot }}
+    <x-marguee-text>
+        {{ $slot }}
+    </x-marguee-text>
 </td>