Merge branch 'akaunting:master' into master

app/Abstracts/Report.php

@@ -56,6 +56,10 @@ abstract class Report
 
     public $loaded = false;
 
+    public $bar_formatter_type = 'money';
+
+    public $donut_formatter_type = 'percent';
+
     public $chart = [
         'bar' => [
             'colors' => [
@@ -310,12 +314,12 @@ abstract class Report
                     continue;
                 }
 
-                $this->chart[$table_key]['bar']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter();
-                $this->chart[$table_key]['donut']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter('percent');
+                $this->chart[$table_key]['bar']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter($this->bar_formatter_type);
+                $this->chart[$table_key]['donut']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter($this->donut_formatter_type);
             }
         } else {
-            $this->chart['bar']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter();
-            $this->chart['donut']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter('percent');
+            $this->chart['bar']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter($this->bar_formatter_type);
+            $this->chart['donut']['yaxis']['labels']['formatter'] = $this->getChartLabelFormatter($this->donut_formatter_type);
         }
     }
 

presets.js

@@ -231,6 +231,14 @@ module.exports = {
                 '0%': { boxShadow: '0 28px 0 -28px #55588b' },
                 '100%': { boxShadow: '0 28px 0 #55588b' },
               },
+              marquee: {
+                '0%': { transform: 'translateX(0%)' },
+                '100%': { transform: 'translateX(-100%)' },
+              },
+              marquee_long: {
+                '0%': { transform: 'translateX(0%)' },
+                '100%': { transform: 'translateX(-350%)' },
+              }
           },
 
           animation: {
@@ -239,7 +247,9 @@ module.exports = {
               pulsate: 'pulsate 1500ms ease infinite;',
               spin: 'spin 1000ms infinite',
               submit: 'submit 0.7s ease alternate infinite',
-              submit_second: 'submit_second 0.7s ease alternate infinite'
+              submit_second: 'submit_second 0.7s ease alternate infinite',
+              marquee: 'marquee 9s linear infinite',
+              marquee_long: 'marquee_long 14s linear infinite'
           },
 
           transitionProperty: {

public/akaunting-js/generalAction.js

@@ -99,7 +99,7 @@ function expandSub(key, event) {
 //collapse accordion
 
 // run dropdown and tooltip functions for Virtual DOM
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", () => {    
     const triggers = [
         { event: "mouseover", checker: isHoverable },
         { event: "mouseout", checker: isHoverable },
@@ -357,3 +357,83 @@ if (navigator.userAgent.search("Firefox") >= 0) {
     }
 }
 //Firefox show modal for icon set
+
+//margue animation for truncated text
+function marqueeAnimation(truncate) {
+    if (truncate.closest('[disable-marquee]') !== null) {
+        truncate.parentElement.classList.add('truncate');
+        truncate.closest('[disable-marquee]').setAttribute('disable-marquee', 'data-disable-marquee');
+        return;
+    }
+    // offsetwidth = width of the text, clientWidth = width of parent text (div)
+    // because some index page has icons, we use two time parent element
+    if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {        
+        truncate.addEventListener('mouseover', function () {
+            truncate.parentElement.style.animationPlayState = 'running';
+
+            if (truncate.offsetWidth > 400 && truncate.parentElement.clientWidth < 150) {
+                truncate.parentElement.classList.remove('animate-marquee');
+                truncate.parentElement.classList.add('animate-marquee_long');
+            } else {
+                truncate.parentElement.classList.remove('animate-marquee_long');
+                truncate.parentElement.classList.add('animate-marquee');
+            }
+    
+            if (truncate.parentElement.classList.contains('truncate')) {
+                truncate.parentElement.classList.remove('truncate');
+            }
+        });
+    
+        truncate.addEventListener('mouseout', function () {
+            truncate.parentElement.style.animationPlayState = 'paused';
+            truncate.parentElement.classList.remove('animate-marquee');
+            truncate.parentElement.classList.remove('animate-marquee_long');
+            truncate.parentElement.classList.add('truncate');
+        });
+
+        truncate.classList.add('truncate');
+
+        // if truncate has truncate class, text marquee animate doesn't pretty work
+        if (truncate.querySelector('.truncate') !== null && truncate.querySelector('.truncate').classList.contains('truncate')) {
+            let old_element = truncate.querySelector('.truncate');
+            let parent = old_element.parentNode;
+            
+            let new_element = document.createElement('span');
+            new_element.innerHTML = old_element.innerHTML;
+            new_element.classList = old_element.classList;
+
+            parent.replaceChild(new_element, old_element);
+        }
+        // if truncate has truncate class, text marquee animate doesn't pretty work
+        
+        // There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons.-->
+        let animate_element = document.createElement('div');
+        animate_element.classList.add('truncate');
+        truncate.parentElement.append(animate_element);
+        animate_element.append(truncate);
+        // There needs to be two div for disable/enable icons. If I don't create this div, animation will work with disable/enable icons.-->
+
+        //there is overflow class for the animation does not overflow the width
+        truncate.parentElement.parentElement.classList.add('overflow-x-hidden');
+    }
+}
+
+document.querySelectorAll('[data-truncate-marquee]').forEach((truncate) => {
+    marqueeAnimation(truncate);
+});
+
+//disable/enable icons ejected from data-truncate-marquee, HTML of icons ejected from parent element (data-truncate-marquee)
+document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
+    let icon_parents_element = defaultText.parentElement.parentElement.parentElement;
+
+    if (icon_parents_element.classList.contains('flex')) {
+        icon_parents_element.appendChild(defaultText);
+    } else {
+        icon_parents_element.parentElement.appendChild(defaultText);
+    }
+
+    // defaultText.parentElement.parentElement.parentElement.parentElement.appendChild(defaultText);
+});
+//disable/enable icons ejected from data-truncate-marquee
+
+//margue animation for truncated text

public/css/app.css

@@ -10041,6 +10041,62 @@ input[type="date"]::-webkit-inner-spin-button,
   -webkit-animation: submit_second 0.7s ease alternate infinite;
           animation: submit_second 0.7s ease alternate infinite;
 }
+@-webkit-keyframes marquee{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+@keyframes marquee{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+.animate-marquee{
+  -webkit-animation: marquee 9s linear infinite;
+          animation: marquee 9s linear infinite;
+}
+@-webkit-keyframes marquee_long{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-350%);
+            transform: translateX(-350%);
+  }
+}
+@keyframes marquee_long{
+
+  0%{
+    -webkit-transform: translateX(0%);
+            transform: translateX(0%);
+  }
+
+  100%{
+    -webkit-transform: translateX(-350%);
+            transform: translateX(-350%);
+  }
+}
+.animate-marquee_long{
+  -webkit-animation: marquee_long 14s linear infinite;
+          animation: marquee_long 14s linear infinite;
+}
 .cursor-auto{
   cursor: auto;
 }

resources/views/banking/accounts/index.blade.php

@@ -64,9 +64,7 @@
 
                             <x-table.td class="w-6/12 sm:w-5/12">
                                 <x-slot name="first" class="flex font-bold">
-                                    <div class="truncate">
-                                        {{ $item->name }}
-                                    </div>
+                                    {{ $item->name }}
 
                                     @if (! $item->enabled)
                                         <x-index.disable text="{{ trans_choice('general.accounts', 1) }}" />

resources/views/common/items/index.blade.php

@@ -84,16 +84,14 @@
                                 </x-table.td>
 
                                 <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="truncate">
-                                            {{ $item->name }}
-                                        </div>
-
+                                    <x-slot name="first" class="font-bold" override="class">
+                                        {{ $item->name }}
+                                        
                                         @if (! $item->enabled)
                                             <x-index.disable text="{{ trans_choice('general.items', 1) }}" />
                                         @endif
                                     </x-slot>
-                                    <x-slot name="second" class="font-normal truncate" override="class">
+                                    <x-slot name="second" class="font-normal" override="class">
                                         {{ $item->description }}
                                     </x-slot>
                                 </x-table.td>

resources/views/components/form/group/select.blade.php

@@ -139,6 +139,10 @@
         @visible-change="{{ $attributes['visible-change'] }}"
         @endif
 
+        @if (! empty($attributes['clear']))
+        @clear="{{ $attributes['clear'] }}($event)"
+        @endif
+
         @if (isset($attributes['readonly']))
         :readonly="{{ $attributes['readonly'] }}"
         @endif

resources/views/components/index/category.blade.php

@@ -1,9 +1,11 @@
-<span @class([
-        'w-3 h-3 rounded-full ltr:mr-1 rtl:ml-1', $backgroundColor, $textColor
-    ])
-    @if (! empty($backgroundStyle))
-    style="background-color: {{ $backgroundStyle }}"
-    @endif
->
-</span>
-<span class="w-24 truncate">{{ $name }}</span>
+<div class="flex items-center">
+    <span @class([
+            'w-3 h-3 rounded-full ltr:mr-1 rtl:ml-1', $backgroundColor, $textColor
+        ])
+        @if (! empty($backgroundStyle))
+        style="background-color: {{ $backgroundStyle }}"
+        @endif
+    >
+    </span>
+    <span class="w-24 truncate">{{ $name }}</span>
+</div>

resources/views/components/index/default.blade.php

@@ -1,5 +1,7 @@
-<x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $text }}">
-    <span class="material-icons{{ $iconType }} text-purple text-sm ml-2">
-        {{ $icon }}
-    </span>
-</x-tooltip>
+<div data-index-icon>
+    <x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $text }}">
+        <span class="material-icons{{ $iconType }} text-purple text-sm ml-2">
+            {{ $icon }}
+        </span>
+    </x-tooltip>
+</div>

resources/views/components/index/disable.blade.php

@@ -1,5 +1,7 @@
-<x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $disableText }}">
-    <span class="material-icons{{ $iconType }} text-red text-sm ml-2">
-        {{ $icon }}
-    </span>
-</x-tooltip>
+<div data-index-icon>
+    <x-tooltip id="{{ $id }}" placement="{{ $position }}" message="{{ $disableText }}">
+        <span class="material-icons{{ $iconType }} text-red text-sm ml-2">
+            {{ $icon }}
+        </span>
+    </x-tooltip>
+</div>

resources/views/components/table/index.blade.php

@@ -1,6 +1,6 @@
 <div class="overflow-x-visible">
     <div class="py-2 align-middle">
-        <table class="flex flex-col divide-y divide-gray-200">
+        <table class="flex flex-col divide-y divide-gray-200" {{ $attributes }}>
             {{ $slot }}
         </table>
     </div>

resources/views/components/table/td.blade.php

@@ -8,7 +8,13 @@
         }
     @endphp
     <div {{ $first_attributes }}>
-        {!! $first !!}
+        <!--so that the animation does not overflow the width. With javascript will add (overflow-x-hidden) class name-->
+        <div>
+            <!-- this tag use for calculate width of text and parent element -->
+            <span data-truncate-marquee>
+                {!! $first !!}
+            </span>
+        </div>
     </div>
     @endif
 
@@ -21,9 +27,18 @@
         }
     @endphp
     <div {{ $second_attributes }}>
-        {!! $second !!}
+        <div>
+            <span data-truncate-marquee>
+                {!! $second !!}
+            </span>
+        </div>
+        
     </div>
     @endif
 
-    {{ $slot }}
+    <div>
+        <span data-truncate-marquee>
+            {{ $slot }}
+        </span>
+    </div>
 </td>

resources/views/components/table/th.blade.php

@@ -8,7 +8,13 @@
         }
     @endphp
     <div {{ $first_attributes }}>
-        {!! $first !!}
+        <!--so that the animation does not overflow the width. With javascript will add (overflow-x-hidden) class name-->
+        <div>
+            <!-- this tag use for calculate width of text and parent element -->
+            <span data-truncate-marquee>
+                {!! $first !!}
+            </span>
+        </div>
     </div>
     @endif
 
@@ -21,9 +27,17 @@
         }
     @endphp
     <div {{ $second_attributes }}>
-        {!! $second !!}
+        <div>
+            <span data-truncate-marquee>
+                {!! $second !!}
+            </span>
+        </div>
     </div>
     @endif
 
-    {{ $slot }}
+    <div>
+        <span data-truncate-marquee>
+            {{ $slot }}
+        </span>
+    </div>
 </th>

resources/views/settings/currencies/index.blade.php

@@ -57,7 +57,7 @@
                             </x-table.td>
 
                             <x-table.td class="w-6/12 sm:w-4/12">
-                                <x-slot name="first" class="flex" override="class">
+                                <x-slot name="first" class="flex font-bold" override="class">
                                     <div class="font-bold truncate">
                                         {{ $item->name }}
                                     </div>