Merge branch 'master' into two-column-header

app/View/Components/DeleteLink.php

@@ -282,7 +282,7 @@ class DeleteLink extends Component
 
     protected function getClass($class)
     {
-        $default_class = 'w-full flex items-center text-purple px-2 h-9 leading-9 whitespace-nowrap';
+        $default_class = 'w-full flex items-center text-red sm:text-purple px-2 h-9 leading-9 whitespace-nowrap';
 
         $explode = explode(',', $this->override);
 

public/akaunting-js/generalAction.js

@@ -11,7 +11,7 @@ document.querySelectorAll("[data-table-list]").forEach((row) => {
 
 //redirect edit or show page for table row click
 document.querySelectorAll("[data-table-body]").forEach((table) => {
-    if (document.body.clientWidth >= 991) {
+    if (document.body.clientWidth < 768 || document.body.clientWidth > 1200) {
         let rows = table.querySelectorAll("tr");
 
         rows.forEach((row) => {
@@ -27,7 +27,13 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
             if (row_href) {
                 for (let i = first_selector; i < td.length - 1; i++) {
                     let td_item = td[i];
-                    td_item.addEventListener("click", () => {
+
+                    td_item.addEventListener("click", (event) => {
+                        // click disabled when preview dialog is open
+                        if (event.target.closest('[data-tooltip-target]')) {
+                            return;
+                        }
+                        // click disabled when preview dialog is open
                         window.location.href = row_href;
                     });
 
@@ -42,6 +48,20 @@ document.querySelectorAll("[data-table-body]").forEach((table) => {
             }
         });
     }
+
+    if (document.body.clientWidth <= 768) {
+        table.querySelectorAll('[data-table-list]').forEach((actions) => {
+            actions.querySelector('[data-mobile-actions]').addEventListener('click', function() {
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.add('show');
+                this.closest('td').querySelector('[data-mobile-actions-modal]').classList.remove('opacity-0', 'invisible');
+      
+                this.closest('td').querySelector('[data-mobile-actions-modal]').addEventListener('click', function() {
+                    this.classList.add('opacity-0', 'invisible');
+                    this.classList.remove('show');
+                });
+            });
+        });
+    }
 });
 //redirect edit or show page for table row click
 
@@ -429,6 +449,7 @@ document.querySelectorAll('[data-index-icon]').forEach((defaultText) => {
     
     if (icon_parents_element.classList.contains('flex')) {
         icon_parents_element.appendChild(defaultText);
+        icon_parents_element.classList.remove('truncate');
     } else {
         if (icon_parents_element.classList.contains('overflow-x-hidden')) {
             icon_parents_element.parentElement.appendChild(defaultText);

public/css/app.css

@@ -54515,16 +54515,16 @@ body{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-100:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-lilac-100:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(245 247 250 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-200:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -57080,6 +57080,11 @@ body{
     line-height: 2.75rem;
   }
 
+  .sm\:text-purple{
+    --tw-text-opacity: 1;
+    color: rgb(85 88 139 / var(--tw-text-opacity));
+  }
+
   [dir="ltr"] .sm\:ltr\:right-4{
     right: 1rem;
   }

resources/views/components/delete-button.blade.php

@@ -1,10 +1,26 @@
-<x-button
+@mobile
+<button
+    type="button"
+    class="rw-full flex items-center text-red sm:text-purple px-2 h-9 leading-9"
+    @click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
+    override="class"
+    {{ $attributes }}
+>
+
+    @if ($slot->isNotEmpty())
+        {!! $slot !!}
+    @else
+        <span class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">{!! $label !!}</span>
+    @endif
+@else
+<button
     type="button"
     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 }}
 >
+
     @if ($slot->isNotEmpty())
         {!! $slot !!}
     @else
@@ -14,6 +30,7 @@
             <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>
     @endif
+@endmobile
 
     <x-form.input.hidden
         name="delete-{{ $modelTable }}-{{ $id }}"
@@ -25,4 +42,4 @@
         data-cancel="{!! $cancelText !!}"
         data-delete="{!! $deleteText !!}"
     />
-</x-button>
+</button>

resources/views/components/table/actions-mobile.blade.php

@@ -0,0 +1,150 @@
+@php
+    $count_buttons = 1;
+    $more_actions = [];
+@endphp
+
+<div
+    data-mobile-actions
+    class="absolute w-6 h-6 flex items-center justify-center ltr:right-0 rtl:left-0 -top-3 py-0.5 px-1 bg-white border rounded-full cursor-pointer hover:bg-gray-100"
+>
+    <span class="material-icons-outlined text-lg">
+        more_horiz
+    </span>
+</div>
+
+<div
+    data-mobile-actions-modal
+    class="modal w-full h-full fixed flex top-0 left-0 right-0 justify-center items-center flex-wrap overflow-y-auto overflow-hidden z-50 opacity-0 invisible modal-background transition-opacity"
+>
+    <div class="w-full my-10 m-auto flex flex-col px-2 sm:px-0 max-w-md">
+        <div class="p-2 bg-body rounded-lg">
+            @foreach ($actions as $action)
+                @if (! empty($action['permission']))
+                    @can($action['permission'])
+                @endif
+
+                @if ($count_buttons > 3 && $loop->count > 4)
+                    @break
+                @endif
+
+                @php
+                    $type = ! empty($action['type']) ? $action['type'] : 'link';
+                @endphp
+
+                @switch($type)
+                    @case('button')
+                        <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                            <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                    {{ $action['icon'] }}
+                                </span>
+
+                                {{ $action['title'] }}
+                            </div>
+                        </button>
+                        @break
+
+                    @case('delete')
+                        @php
+                            $title = $action['title'] ?? null;
+                            $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                            $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                        @endphp
+
+                        <x-delete-button :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                        @break
+
+                    @default
+                        <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                            <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                    {{ $action['icon'] }}
+                                </span>
+
+                                {{ $action['title'] }}
+                            </div>
+                        </a>
+                @endswitch
+
+                @php
+                    array_shift($actions);
+
+                    $count_buttons++;
+                @endphp
+
+                @if (! empty($action['permission']))
+                    @endcan
+                @endif
+            @endforeach
+
+            @foreach ($actions as $action)
+                @if (! empty($action['permission']))
+                    @can($action['permission'])
+                    @php $more_actions[] = $action; @endphp
+                    @endcan
+                @else
+                    @php $more_actions[] = $action; @endphp
+                @endif
+            @endforeach
+
+            @if ($more_actions)
+                @php $divider = false; @endphp
+
+                @foreach ($more_actions as $action)
+                    @php
+                        $type = ! empty($action['type']) ? $action['type'] : 'link';
+                    @endphp
+
+                    @switch($type)
+                        @case('button')
+                            @php $divider = false; @endphp
+
+                            <button type="button" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                                <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                        {{ $action['icon'] }}
+                                    </span>
+
+                                    {{ $action['title'] }}
+                                </div>
+                            </button>
+                            @break
+
+                        @case('delete')
+                            @php $divider = false; @endphp
+
+                            @php
+                                $title = $action['title'] ?? null;
+                                $modelId = ! empty($action['model-id']) ? $action['model-id'] : 'id';
+                                $modelName = ! empty($action['model-name']) ? $action['model-name'] : 'name';
+                            @endphp
+                            <x-delete-link :model="$action['model']" :route="$action['route']" :text="$title" :model-id="$modelId" :model-name="$modelName" />
+                            @break
+
+                        @case('divider')
+                            @if (! $divider)
+                                @php $divider = true; @endphp
+                                <div class="py-2 px-2">
+                                    <div class="w-full border-t border-gray-200"></div>
+                                </div>
+                            @endif
+                            @break
+
+                        @default
+                            @php $divider = false; @endphp
+
+                            <a href="{{ $action['url'] }}" class="w-full flex items-center text-purple px-2 h-9 leading-9" {!! $action['attributes'] ?? null !!}>
+                                <div class="w-full h-full flex items-center rounded-md px-2 text-sm hover:bg-lilac-100">
+                                    <span class="material-icons-outlined text-purple text-lg mr-2 pointer-events-none">
+                                        {{ $action['icon'] }}
+                                    </span>
+
+                                    {{ $action['title'] }}
+                                </div>
+                            </a>
+                    @endswitch
+                @endforeach
+            @endif
+        </div>
+    </div>
+</div>

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

@@ -3,7 +3,10 @@
     $more_actions = [];
 @endphp
 
-<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
+@mobile
+    <x-table.actions-mobile :actions="$actions" :model="$model" />
+@else
+    <div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
         @foreach ($actions as $action)
             @if (! empty($action['permission']))
                 @can($action['permission'])
@@ -131,4 +134,5 @@
                 </div>
             </div>
         @endif
-</div>
+    </div>
+@endmobile

safelist.txt

@@ -17,6 +17,7 @@ sm:w-500
 sm:min-h-500
 sm:max-w-4xl
 sm:space-x-4
+sm:text-purple
 md:grid-cols-2
 lg:mt-2
 lg:mt-4