shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2466 from brkcvn/button-loading

Browse Source 
Button animation when form posting moved global folder
This commit is contained in:
Cüneyt Şentürk 2022-06-17 08:20:50 +03:00 committed by GitHub
commit dabcecdca2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 71 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/View/Components/Button.php
View File

@ -37,7 +37,7 @@ class Button extends Component
*/ */
public function render() public function render()
{ {
return view('components.button'); return view('components.button.index');
} }
protected function getOverride($override) protected function getOverride($override)

5
resources/views/auth/forgot/create.blade.php
View File

@ -41,8 +41,9 @@
override="class" override="class"
data-loading-text="{{ trans('general.loading') }}" data-loading-text="{{ trans('general.loading') }}"
> >
<i v-if="form.loading" 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]"></i> <x-button.loading>
<span :class="[{'opacity-0': form.loading}]">{{ trans('general.send') }}</span> {{ trans('general.send') }}
</x-button.loading>
</x-button> </x-button>
</div> </div>
</x-form> </x-form>

6
resources/views/auth/login/create.blade.php
View File

@ -68,12 +68,10 @@
::disabled="form.loading" ::disabled="form.loading"
class="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 sm:col-span-6" class="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 sm:col-span-6"
override="class" override="class"
data-loading-text="{{ trans('general.loading') }}"
> >
<i v-if="form.loading" 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]"></i> <x-button.loading>
<span :class="[{'opacity-0': form.loading}]">
{{ trans('auth.login') }} {{ trans('auth.login') }}
</span> </x-button.loading>
</x-button> </x-button>
</div> </div>
</x-form> </x-form>

5
resources/views/auth/reset/create.blade.php
View File

@ -58,8 +58,9 @@
override="class" override="class"
data-loading-text="{{ trans('general.loading') }}" data-loading-text="{{ trans('general.loading') }}"
> >
<i v-if="form.loading" 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]"></i> <x-button.loading>
<span :class="[{'opacity-0': form.loading}]">{{ trans('auth.reset') }}</span> {{ trans('auth.reset') }}
</x-button.loading>
</x-button> </x-button>
</div> </div>
</x-form> </x-form>

24
resources/views/banking/reconciliations/create.blade.php
View File

@ -264,8 +264,9 @@
class="flex items-center justify-center bg-transparent hover:bg-gray-200 px-3 py-1.5 text-base rounded-lg disabled:opacity-50" class="flex items-center justify-center bg-transparent hover:bg-gray-200 px-3 py-1.5 text-base rounded-lg disabled:opacity-50"
override="class" override="class"
> >
<i v-if="form.loading" class="material-icons 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]"></i> <x-button.loading>
<span :class="[{'ml-0': form.loading}]">{{ trans('reconciliations.save_draft') }}</span> {{ trans('reconciliations.save_draft') }}
</x-button.loading>
</x-button> </x-button>
<div v-if="reconcile"> <div v-if="reconcile">
@ -278,13 +279,9 @@
@click="onReconcileSubmit" @click="onReconcileSubmit"
data-loading-text="{{ trans('general.loading') }}" data-loading-text="{{ trans('general.loading') }}"
> >
<i <x-button.loading action="! reconcile">
v-if="form.loading" {{ trans('reconciliations.reconcile') }}
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]" </x-button.loading>
>
</i>
<span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
</x-button> </x-button>
</x-tooltip> </x-tooltip>
</div> </div>
@ -297,12 +294,9 @@
@click="onReconcileSubmit" @click="onReconcileSubmit"
data-loading-text="{{ trans('general.loading') }}" data-loading-text="{{ trans('general.loading') }}"
> >
<i <x-button.loading action="! reconcile">
v-if="form.loading" {{ trans('reconciliations.reconcile') }}
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]" </x-button.loading>
>
</i>
<span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
</x-button> </x-button>
</div> </div>
</div> </div>

27
resources/views/banking/reconciliations/edit.blade.php
View File

@ -203,9 +203,11 @@
class="relative flex items-center justify-center bg-transparent hover:bg-gray-200 px-3 py-1.5 text-base rounded-lg disabled:opacity-50" class="relative flex items-center justify-center bg-transparent hover:bg-gray-200 px-3 py-1.5 text-base rounded-lg disabled:opacity-50"
override="class" override="class"
> >
<i v-if="form.loading" 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]"></i> <x-button.loading>
<span :class="[{'ml-0': form.loading}]">{{ trans('general.save') }}</span> {{ trans('general.save') }}
</x-button.loading>
</x-button> </x-button>
<div v-if="reconcile"> <div v-if="reconcile">
<x-tooltip id="tooltip-reconcile" placement="top" message="{{ trans('reconciliations.irreconcilable') }}"> <x-tooltip id="tooltip-reconcile" placement="top" message="{{ trans('reconciliations.irreconcilable') }}">
<x-button <x-button
@ -216,16 +218,13 @@
@click="onReconcileSubmit" @click="onReconcileSubmit"
data-loading-text="{{ trans('general.loading') }}" data-loading-text="{{ trans('general.loading') }}"
> >
<x-button.loading action="! reconcile">
<i {{ trans('reconciliations.reconcile') }}
v-if="form.loading" </x-button.loading>
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]"
>
</i>
<span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
</x-button> </x-button>
</x-tooltip> </x-tooltip>
</div> </div>
<div v-else> <div v-else>
<x-button <x-button
type="button" type="button"
@ -235,13 +234,9 @@
@click="onReconcileSubmit" @click="onReconcileSubmit"
data-loading-text="{{ trans('general.loading') }}" data-loading-text="{{ trans('general.loading') }}"
> >
<x-button.loading action="! reconcile">
<i {{ trans('reconciliations.reconcile') }}
v-if="form.loading" </x-button.loading>
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]"
>
</i>
<span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
</x-button> </x-button>
</div> </div>
</div> </div>

7
resources/views/banking/transfers/show.blade.php
View File

@ -40,9 +40,10 @@
{{ trans('general.cancel') }} {{ trans('general.cancel') }}
</button> </button>
<button :disabled="form.loading" type="button" class="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" @click="addTemplate"> <button :disabled="form.loading" type="button" class="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" @click="addTemplate">
<i v-if="form.loading" 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]"></i> <x-button.loading>
<span :class="[{'opacity-0': form.loading}]">{{ trans('general.confirm') }}</span> {{ trans('general.confirm') }}
</x-button.loading>
</button> </button>
</div> </div>
</template> </template>

5
resources/views/common/import/create.blade.php
View File

@ -47,10 +47,9 @@
::disabled="form.loading" ::disabled="form.loading"
override="class" override="class"
> >
<i v-if="form.loading" 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]"></i> <x-button.loading>
<span :class="[{'opacity-0': form.loading}]">
{{ trans('import.import') }} {{ trans('import.import') }}
</span> </x-button.loading>
</x-button> </x-button>
</div> </div>
</div> </div>

0
resources/views/components/button.blade.php → resources/views/components/button/index.blade.php
View File

21
resources/views/components/button/loading.blade.php Normal file
View File

@ -0,0 +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 }}
v-if="{{ $action }}"
>
</i>
<span :class="[{'opacity-0': {{ $action }}}]">
{!! $slot !!}
</span>

5
resources/views/components/form/buttons.blade.php
View File

@ -17,10 +17,9 @@
::disabled="form.loading" ::disabled="form.loading"
override="class" override="class"
> >
<i v-if="form.loading" 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:-left-3.5 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:-right-3.5 after:rounded-full after:animate-submit after:delay-[0.42s]"></i> <x-button.loading>
<span :class="[{'opacity-0': form.loading}]">
{{ trans('general.save') }} {{ trans('general.save') }}
</span> </x-button.loading>
</x-button> </x-button>
</div> </div>
@stack('save_buttons_end') @stack('save_buttons_end')

7
resources/views/components/layouts/modules/show/releases.blade.php
View File

@ -19,12 +19,11 @@
id="releases-load-more" id="releases-load-more"
:disabled="loadMoreLoading" :disabled="loadMoreLoading"
@click="onModuleLoadMore('releases')" @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" class="relative 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"
> >
<i v-if="loadMoreLoading" 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]"></i> <x-button.loading action="loadMoreLoading">
<span :class="[{'opacity-0': loadMoreLoading}]">
{{ trans('modules.see_more') }} {{ trans('modules.see_more') }}
</span> </x-button.loading>
</button> </button>
</div> </div>

7
resources/views/components/layouts/modules/show/reviews.blade.php
View File

@ -19,12 +19,11 @@
id="review-load-more" id="review-load-more"
:disabled="loadMoreLoading" :disabled="loadMoreLoading"
@click="onModuleLoadMore('reviews')" @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" class="relative 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"
> >
<i v-if="loadMoreLoading" 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]"></i> <x-button.loading action="loadMoreLoading">
<span :class="[{'opacity-0': loadMoreLoading}]">
{{ trans('modules.see_more') }} {{ trans('modules.see_more') }}
</span> </x-button.loading>
</button> </button>
</div> </div>

12
resources/views/components/modules/items.blade.php
View File

@ -30,14 +30,16 @@
@if ($seeMore) @if ($seeMore)
<div class="flex items-center mt-10"> <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" :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" class="relative w-48 m-auto 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"
> >
<i v-if="loadMoreLoading" 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]"></i> <x-button.loading action="loadMoreLoading">
<span :class="[{'opacity-0': loadMoreLoading}]">
{{ trans('modules.see_more') }} {{ trans('modules.see_more') }}
</span> </x-button.loading>
</button> </button>
<x-form.input.hidden name="see_more_path" value="{{ route('apps.load-more', ['type' => $type]) }}" /> <x-form.input.hidden name="see_more_path" value="{{ route('apps.load-more', ['type' => $type]) }}" />