Button loading re-factoring..
This commit is contained in:
@ -1,9 +1,21 @@
|
||||
@props('action')
|
||||
@php
|
||||
if (empty($action)) {
|
||||
$action = 'form.loading';
|
||||
}
|
||||
@endphp
|
||||
|
||||
<i
|
||||
@class([
|
||||
'animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto',
|
||||
'before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s]',
|
||||
'after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]'
|
||||
])
|
||||
{{ $attributes }}
|
||||
@class([
|
||||
'animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto',
|
||||
'before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s]',
|
||||
'after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]'
|
||||
])
|
||||
{{ $attributes }}
|
||||
v-if="{{ $action }}"
|
||||
>
|
||||
</i>
|
||||
</i>
|
||||
|
||||
<span :class="[{'opacity-0': {{ $action }}}]">
|
||||
{!! $slot !!}
|
||||
</span>
|
||||
|
@ -17,8 +17,9 @@
|
||||
::disabled="form.loading"
|
||||
override="class"
|
||||
>
|
||||
<span>{{ trans('general.save') }}</span>
|
||||
<x-button.loading v-if="form.loading" text="{{ trans('general.save') }}" text-hide="[{'opacity-0': form.loading}]" />
|
||||
<x-button.loading>
|
||||
{{ trans('general.save') }}
|
||||
</x-button.loading>
|
||||
</x-button>
|
||||
</div>
|
||||
@stack('save_buttons_end')
|
||||
|
@ -21,8 +21,9 @@
|
||||
@click="onModuleLoadMore('releases')"
|
||||
class="w-48 bg-green m-auto block whitespace-nowrap px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white text-center js-learn-more js-button-modal-submit hover:bg-green-700 disabled:bg-green-300"
|
||||
>
|
||||
<span>{{ trans('modules.see_more') }}</span>
|
||||
<x-button.loading v-if="loadMoreLoading" text="{{ trans('modules.see_more') }}" text-hide="[{'opacity-0': loadMoreLoading}]" />
|
||||
<x-button.loading action="loadMoreLoading">
|
||||
{{ trans('modules.see_more') }}
|
||||
</x-button.loading>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
@ -21,8 +21,9 @@
|
||||
@click="onModuleLoadMore('reviews')"
|
||||
class="w-48 bg-green m-auto block whitespace-nowrap px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white text-center js-learn-more js-button-modal-submit hover:bg-green-700 disabled:bg-green-300"
|
||||
>
|
||||
<span>{{ trans('modules.see_more') }}</span>
|
||||
<x-button.loading v-if="loadMoreLoading" text="{{ trans('modules.see_more') }}" text-hide="[{'opacity-0': loadMoreLoading}]" />
|
||||
<x-button.loading action="loadMoreLoading">
|
||||
{{ trans('modules.see_more') }}
|
||||
</x-button.loading>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
@ -30,12 +30,16 @@
|
||||
|
||||
@if ($seeMore)
|
||||
<div class="flex items-center mt-10">
|
||||
<button type="button" id="button-pre-load" @click="onloadMore"
|
||||
<button
|
||||
type="button"
|
||||
id="button-pre-load"
|
||||
@click="onloadMore"
|
||||
:disabled="loadMoreLoading"
|
||||
class="w-48 m-auto relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100 js-learn-more js-button-modal-submit"
|
||||
>
|
||||
<span>{{ trans('modules.see_more') }}</span>
|
||||
<x-button.loading v-if="loadMoreLoading" text="{{ trans('modules.see_more') }}" text-hide="[{'opacity-0': loadMoreLoading}]" />
|
||||
<x-button.loading action="loadMoreLoading">
|
||||
{{ trans('modules.see_more') }}
|
||||
</x-button.loading>
|
||||
</button>
|
||||
|
||||
<x-form.input.hidden name="see_more_path" value="{{ route('apps.load-more', ['type' => $type]) }}" />
|
||||
|
Reference in New Issue
Block a user