Skip to content

Commit

Permalink
button animated change component..
Browse files Browse the repository at this point in the history
  • Loading branch information
@cuneytsenturk
cuneytsenturk committed Jul 4, 2022
1 parent 47610fa commit ded7bfd
Show file tree
Hide file tree
Showing 31 changed files with 135 additions and 84 deletions.
36 changes: 36 additions & 0 deletions app/View/Components/Button/Hover.php
View file
@@ -0,0 +1,36 @@
<?php

namespace App\View\Components\Button;

use App\Abstracts\View\Component;

class Hover extends Component
{
public $color;

public $groupHover;

/**
* Create a new component instance.
*
* @return void
*/
public function __construct(
string $color = 'to-black',
bool $groupHover = false,

) {
$this->color = $color;
$this->groupHover = $groupHover;
}

/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|string
*/
public function render()
{
return view('components.button.hover');
}
}
2 changes: 1 addition & 1 deletion app/View/Components/Link/Hover.php
View file
Expand Up @@ -3,11 +3,11 @@
namespace App\View\Components\Link;

use App\Abstracts\View\Component;
use Illuminate\Support\Str;

class Hover extends Component
{
public $color;

public $groupHover;

/**
Expand Down
4 changes: 2 additions & 2 deletions resources/views/common/dashboards/show.blade.php
View file
Expand Up @@ -9,9 +9,9 @@
<x-dropdown id="dashboard-list">
<x-slot name="trigger" class="flex items-center" override="class">
<span class="text-2xl xl:text-5xl text-black font-light truncate">
<x-link.hover color="to-black-700">
<x-button.hover color="to-black-700">
{{ $dashboard->name }}
</x-link.hover>
</x-button.hover>
</span>

<svg class="w-5 h-5 mt-1 text-gray-400" x-description="Heroicon name: solid/selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
Expand Down
8 changes: 5 additions & 3 deletions resources/views/common/reports/index.blade.php
View file
Expand Up @@ -35,7 +35,7 @@
@foreach($category['reports'] as $report)
<div class="flex justify-between sm:col-span-3 p-1 group">
<div class="lg:w-80">
<a href="{{ route('reports.show', $report->id) }}" class="flex">
<x-link href="{{ route('reports.show', $report->id) }}" class="flex" override="class">
<span class="material-icons-outlined text-5xl transform transition-all hover:scale-125 text-black-400">
{{ $icons[$report->id] }}
</span>
Expand All @@ -47,9 +47,11 @@
</x-link.hover>
</h2>

<span class="text-black-400 text-sm">{{ $report->description }}</span>
<span class="text-black-400 text-sm">
{{ $report->description }}
</span>
</div>
</a>
</x-link>
</div>

<div class="flex items-start ltr:space-x-2 rtl:space-x-reverse">
Expand Down
9 changes: 9 additions & 0 deletions resources/views/components/button/hover.blade.php
View file
@@ -0,0 +1,9 @@
<span
@class([
$color,
$groupHover ? 'group-hover:bg-full-2' : 'hover:bg-full-2',
'bg-no-repeat bg-0-2 bg-0-full bg-gradient-to-b from-transparent transition-backgroundSize'
])
>
{!! $slot !!}
</span>
16 changes: 8 additions & 8 deletions resources/views/components/documents/form/line-item.blade.php
View file
Expand Up @@ -189,20 +189,20 @@ class="form-element mt-0 text-right input-number-disabled"
<div class="absolute -top-6 left-3 flex items-center">
@if (! $hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
<div class="text-left border-0 p-0 mr-16" v-if="!row.add_discount">
<button type="button" class="text-xs text-purple" @click="onAddLineDiscount(index)">
<x-link.hover color="to-purple">
<x-button type="button" class="text-xs text-purple" @click="onAddLineDiscount(index)" override="class">
<x-button.hover color="to-purple">
{{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
</x-link.hover>
</button>
</x-button.hover>
</x-button>
</div>
@endif

<div class="text-right border-0 p-0 pr-4">
<button type="button" class="text-xs text-purple" @click="onAddTax(index)">
<x-link.hover color="to-purple">
<x-button type="button" class="text-xs text-purple" @click="onAddTax(index)" override="class">
<x-button.hover color="to-purple">
{{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
</x-link.hover>
</button>
</x-button.hover>
</x-button>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/documents/form/totals.blade.php
View file
Expand Up @@ -80,9 +80,9 @@

<td class="text-right border-t-0 border-r-0 border-b-0 align-middle py-0 pr-0">
<div v-if="show_discount_text" v-if="!totals.discount_text" @click="onAddDiscount()">
<x-link.hover color="to-purple">
<x-button.hover color="to-purple">
{{ trans('invoices.add_discount') }}
</x-link.hover>
</x-button.hover>
</div>

<span v-if="totals.discount_text" v-html="totals.discount_text"></span>
Expand Down
12 changes: 6 additions & 6 deletions resources/views/components/documents/show/get-paid.blade.php
View file
Expand Up @@ -62,16 +62,16 @@ class="py-1.5 mb-3 sm:mb-0 text-xs bg-transparent hover:bg-transparent font-medi

@if (! empty($transaction->contact) && $transaction->contact->email)
<x-button id="button-email-send" class="text-purple mt-1" override="class" @click="onEmail('{{ route($transactionEmailRoute, $transaction->id) }}')">
<x-link.hover color="to-purple">
<x-button.hover color="to-purple">
{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
</x-link.hover>
</x-button.hover>
</x-button>
@else
<x-tooltip message="{{ trans('invoices.messages.email_required') }}" placement="top">
<x-button class="text-purple mt-1" override="class" disabled="disabled">
<x-link.hover color="to-purple">
<x-button.hover color="to-purple">
{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
</x-link.hover>
</x-button.hover>
</x-button>
</x-tooltip>
@endif
Expand All @@ -84,9 +84,9 @@ class="py-1.5 mb-3 sm:mb-0 text-xs bg-transparent hover:bg-transparent font-medi
class="text-purple mt-1"
override="class"
>
<x-link.hover color="to-purple">
<x-button.hover color="to-purple">
{{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}
</x-link.hover>
</x-button.hover>
</x-button>

<span> - </span>
Expand Down
12 changes: 6 additions & 6 deletions resources/views/components/documents/show/make-payment.blade.php
View file
Expand Up @@ -46,16 +46,16 @@ class="px-3 py-1.5 mb-3 sm:mb-0 rounded-lg text-xs font-medium leading-6 bg-gree

@if (! empty($transaction->contact) && $transaction->contact->email)
<x-button id="button-email-send" class="text-purple mt-1" override="class" @click="onEmail('{{ route($transactionEmailRoute, $transaction->id) }}')">
<x-link.hover color="to-purple">
<x-button.hover color="to-purple">
{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
</x-link.hover>
</x-button.hover>
</x-button>
@else
<x-tooltip message="{{ trans('invoices.messages.email_required') }}" placement="top">
<x-button class="text-purple mt-1" override="class" disabled="disabled">
<x-link.hover color="to-purple">
<x-button.hover color="to-purple">
{{ trans('general.title.send', ['type' => trans_choice('general.receipts', 1)]) }}
</x-link.hover>
</x-button.hover>
</x-button>
</x-tooltip>
@endif
Expand All @@ -68,9 +68,9 @@ class="px-3 py-1.5 mb-3 sm:mb-0 rounded-lg text-xs font-medium leading-6 bg-gree
class="text-purple mt-1"
override="class"
>
<x-link.hover color="to-purple">
<x-button.hover color="to-purple">
{{ trans('general.title.edit', ['type' => trans_choice('general.payments', 1)]) }}
</x-link.hover>
</x-button.hover>
</x-button>

<span> - </span>
Expand Down
10 changes: 5 additions & 5 deletions resources/views/components/index/bulkaction/index.blade.php
View file
Expand Up @@ -54,13 +54,13 @@ class="w-8 h-8 flex items-center px-2 rounded-lg hover:bg-gray-200"
@endif
@endforeach
</div>

<div class="ltr:mr-4 rtl:ml-4" v-if="bulk_action.count">
<button type="button" @click="onClearBulkAction">
<x-link.hover>
<x-button @click="onClearBulkAction" class="bg-transparent" override="class">
<x-button.hover>
{{ trans('general.clear') }}
</x-link.hover>
</button>
</x-button.hover>
</x-button>
</div>
</div>

Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/layouts/admin/menu.blade.php
View file
Expand Up @@ -113,9 +113,9 @@ class="flex flex-col items-center justify-center mb-5 cursor-pointer menu-button

<div class="flex ltr:ml-2 rtl:mr-2">
<span class="w-28 text-left block text-base truncate">
<x-link.hover>
<x-button.hover>
{{ Str::limit(setting('company.name'), 22) }}
</x-link.hover>
</x-button.hover>
</span>

@can('read-common-companies')
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/layouts/portal/menu.blade.php
View file
Expand Up @@ -84,9 +84,9 @@ class="flex flex-col items-center justify-center mb-5 cursor-pointer menu-button

<div class="flex ltr:ml-2 rtl:mr-2">
<span class="w-28 text-left block text-base truncate">
<x-link.hover>
<x-button.hover>
{{ Str::limit(setting('company.name'), 22) }}
</x-link.hover>
</x-button.hover>
</span>

@can('read-common-companies')
Expand Down
1 change: 0 additions & 1 deletion resources/views/components/link/hover.blade.php
View file
Expand Up @@ -7,4 +7,3 @@
>
{!! $slot !!}
</span>

6 changes: 3 additions & 3 deletions resources/views/components/modules/items.blade.php
View file
Expand Up @@ -10,11 +10,11 @@

@if ($attributes->has('route'))
<div class="flex justify-center items-center group">
<a href="{{ route($attributes->get('route')) }}">
<x-link.hover group-hover>
<x-link href="{{ route($attributes->get('route')) }}" class="bg-transparent" override="class">
<x-link.hover group-hover>
{{ trans('modules.see_all_type', ['type' => $attributes->get('title')]) }}
</x-link.hover>
</a>
</x-link>

<i class="material-icons text-sm ltr:ml-1 rtl:mr-1 transform transition-all group-hover:translate-x-1">arrow_forward</i>
</div>
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/show/accordion/head.blade.php
View file
@@ -1,8 +1,8 @@
<div>
<h2 class="lg:text-lg font-medium text-black">
<x-link.hover group-hover>
<x-button.hover group-hover>
{{ $title }}
</x-link.hover>
</x-button.hover>
</h2>

@if (! empty($description))
Expand Down
9 changes: 4 additions & 5 deletions resources/views/components/show/no-records.blade.php
View file
Expand Up @@ -8,7 +8,6 @@
<img src="{{ $image }}" class="w-60 h-60 object-contain mt-10 m-auto" />
</div>


<div @class([
'lg:w-3/5',
$textColor,
Expand All @@ -22,11 +21,11 @@
@if (! empty($button) && $button->isNotEmpty())
{!! $button !!}
@else
<a href="{!! $url !!}">
<x-link.hover color="to-white">
<x-link href="{!! $url !!}" class="bg-transparent" override="class">
<x-link.hover color="to-white">
{{ $textAction }}
</x-link.hover>
</a>
</x-link>
@endif
</div>
</div>
</div>
6 changes: 3 additions & 3 deletions resources/views/components/tips/fixed.blade.php
View file
Expand Up @@ -14,11 +14,11 @@
{!! $item->description !!}
</p>

<a href="{{ $item->action }}" class="font-light text-sm" target="_blank">
<x-link.hover>
<x-link href="{{ $item->action }}" class="font-light text-sm" override="class" target="_blank">
<x-link.hover>
{{ $item->learn_more }}
</x-link.hover>
</a>
</x-link>
</div>

<div class="absolute ltr:right-0 rtl:left-0 -top-4">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/tips/relative.blade.php
View file
Expand Up @@ -14,11 +14,11 @@
{!! $item->description !!}
</p>

<a href="{{ $item->action }}" class="font-light text-sm">
<x-link href="{{ $item->action }}" class="font-light text-sm" override="class" target="_blank">
<x-link.hover>
{{ $item->learn_more }}
</x-link.hover>
</a>
</x-link>
</div>

<div class="absolute ltr:right-0 rtl:left-0 -top-4">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/transactions/show/attachment.blade.php
View file
Expand Up @@ -6,9 +6,9 @@
x-on:click="attachment !== 1 ? attachment = 1 : attachment = null"
>
<span class="font-medium">
<x-link.hover group-hover>
<x-button.hover group-hover>
{{ trans_choice('general.attachments', 2) }}
</x-link.hover>
</x-button.hover>
</span>

<div class="text-black-400 text-sm">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/transactions/show/children.blade.php
View file
Expand Up @@ -3,9 +3,9 @@
x-on:click="children !== 1 ? children = 1 : children = null"
>
<span class="font-medium">
<x-link.hover group-hover>
<x-button.hover group-hover>
{{ trans_choice('general.transactions', 2) }}
</x-link.hover>
</x-button.hover>
</span>

<div class="text-black-400 text-sm">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/transactions/show/create.blade.php
View file
Expand Up @@ -5,9 +5,9 @@
x-on:click="create !== 1 ? create = 1 : create = null"
>
<span class="font-medium">
<x-link.hover>
<x-button.hover>
{{ trans('general.create') }}
</x-link.hover>
</x-button.hover>
</span>

<div class="text-black-400 text-sm">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/transactions/show/schedule.blade.php
View file
Expand Up @@ -8,9 +8,9 @@
x-on:click="schedule !== 1 ? schedule = 1 : schedule = null"
>
<span class="font-medium">
<x-link.hover group-hover>
<x-button.hover group-hover>
{{ trans_choice('general.schedules', 1) }}
</x-link.hover>
</x-button.hover>
</span>

<div class="text-black-400 text-sm">
Expand Down
6 changes: 3 additions & 3 deletions resources/views/components/transfers/show/attachment.blade.php
View file
Expand Up @@ -2,9 +2,9 @@
<div class="border-b border-gray-200 pb-4" x-data="{ attachment : null }">
<div class="relative w-full text-left cursor-pointer group" x-on:click="attachment !== 1 ? attachment = 1 : attachment = null">
<span class="font-medium">
<x-link.hover group-hover>
<x-button.hover group-hover>
{{ trans_choice('general.attachments', 2) }}
</x-link.hover>
</x-button.hover>
</span>

<div class="text-black-400 text-sm">
Expand All @@ -17,7 +17,7 @@
<div class="overflow-hidden transition-transform origin-top-left ease-linear duration-100"
x-ref="container1"
x-bind:class="attachment == 1 ? 'h-auto ' : 'scale-y-0 h-0'"
>
@foreach ($transfer->attachment as $file)
<x-media.file :file="$file" />
@endforeach
Expand Down

0 comments on commit ded7bfd

Please sign in to comment.