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

Merge pull request #2487 from brkcvn/link-loading

Browse Source 
The click link then active loading and disabled feature
This commit is contained in:
Cüneyt Şentürk 2022-06-28 09:30:27 +03:00 committed by GitHub
commit 460d3c3ec3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 70 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/akaunting-js/generalAction.js vendored
View File

@ -290,4 +290,17 @@ function OnInput() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
//Auto Height for Textarea
//Auto Height for Textarea
//Loading scenario for href links
document.querySelectorAll('[data-link-loading]').forEach((href) => {
let target_link_html = href.parentElement;
target_link_html.addEventListener('click', function () {
this.classList.add('disabled-link');
this.querySelector('[data-link-spin]').classList.remove('hidden');
this.querySelector('[data-link-text]').classList.add('opacity-0');
this.querySelector('[data-link-text]').classList.remove('opacity-1');
});
});
//Loading scenario for href links

6
public/css/app.css vendored
View File

@ -35773,6 +35773,12 @@ html[dir='rtl'] .el-input__suffix {
text-overflow: unset;
}
.disabled-link{
pointer-events: none;
cursor: default;
opacity: 0.5;
}
@media only screen and (max-width: 480px) {
.small-table-width {
width: 450px;

4
resources/assets/sass/app.css vendored
View File

@ -495,6 +495,10 @@ html[dir='rtl'] .el-input__suffix {
text-overflow: unset;
}
.disabled-link {
@apply cursor-default pointer-events-none opacity-50;
}
@media only screen and (max-width: 480px) {
.small-table-width {
width: 450px;

2
resources/views/components/layouts/modules.blade.php
View File

@ -16,6 +16,8 @@
<x-layouts.admin.menu />
<x-loading.content />
<div class="main-content xl:ltr:ml-64 xl:rtl:mr-64 transition-all ease-in-out" id="panel">
<div id="main-body">
<div class="container">

49
resources/views/components/layouts/modules/show/buttons.blade.php
View File

@ -1,25 +1,33 @@
@props(['module', 'installed', 'enable'])
@if (! empty($module->plan))
<a href="{{ $module->action_url }}" class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
{{ trans('modules.get_premium_cloud') }}
<a href="{{ $module->action_url }}" class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
<x-link.loading>
{{ trans('modules.get_premium_cloud') }}
</x-link.loading>
</a>
@elseif (in_array('onprime', $module->where_to_use))
@if ($installed)
@can('delete-modules-item')
<a href="{{ route('apps.app.uninstall', $module->slug) }}" class="bg-red text-white rounded-md text-sm text-center w-1/2 py-2 truncate">
{{ trans('modules.button.uninstall') }}
<a href="{{ route('apps.app.uninstall', $module->slug) }}" class="relative bg-red text-white rounded-md text-sm text-center w-1/2 py-2 truncate">
<x-link.loading>
{{ trans('modules.button.uninstall') }}
</x-link.loading>
</a>
@endcan
@can('update-modules-item')
@if ($enable)
<a href="{{ route('apps.app.disable', $module->slug) }}" class="bg-orange rounded-md text-white w-1/2 text-center text-sm py-2 truncate">
{{ trans('modules.button.disable') }}
<a href="{{ route('apps.app.disable', $module->slug) }}" class="relative bg-orange rounded-md text-white w-1/2 text-center text-sm py-2 truncate">
<x-link.loading>
{{ trans('modules.button.disable') }}
</x-link.loading>
</a>
@else
<a href="{{ route('apps.app.enable', $module->slug) }}" class="bg-green rounded-md text-white text-sm text-center w-1/2 py-2 truncate">
{{ trans('modules.button.enable') }}
<a href="{{ route('apps.app.enable', $module->slug) }}" class="relative bg-green rounded-md text-white text-sm text-center w-1/2 py-2 truncate">
<x-link.loading>
{{ trans('modules.button.enable') }}
</x-link.loading>
</a>
@endif
@endcan
@ -35,27 +43,36 @@
@else
<button type="button"
@click="onInstall('{{ $module->action_url }}', '{{ $module->slug }}', '{!! str_replace("'", "\'", $module->name) !!}', '{{ $module->version }}')"
class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate"
class="bg-green hover:bg-green-700 disabled:bg-green-100 rounded-md text-white text-sm text-center w-full py-2 truncate"
id="install-module"
:disabled="installation.show"
>
{{ trans('modules.install') }}
<x-button.loading action="installation.show">
{{ trans('modules.install') }}
</x-button.loading>
</button>
@endif
@else
<a href="{{ $module->action_url }}" class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
{{ trans('modules.use_app') }}
<a href="{{ $module->action_url }}" class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
<x-link.loading>
{{ trans('modules.use_app') }}
</x-link.loading>
</a>
@endif
@endcan
@endif
@else
@if ($module->install)
<a href="{{ $module->action_url }}" class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
{{ trans('modules.install_cloud') }}
<a href="{{ $module->action_url }}" class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
<x-link.loading>
{{ trans('modules.install_cloud') }}
</x-link.loading>
</a>
@else
<a href="{{ $module->action_url }}" class="bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
{{ trans('modules.get_cloud') }}
<a href="{{ $module->action_url }}" class="relative bg-green hover:bg-green-700 rounded-md text-white text-sm text-center w-full py-2 truncate" target="_blank">
<x-link.loading>
{{ trans('modules.get_cloud') }}
</x-link.loading>
</a>
@endif
@endif

11
resources/views/components/link/loading.blade.php Normal file
View File

@ -0,0 +1,11 @@
<div data-link-loading>
<i
data-link-spin
class="hidden 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 data-link-text class="opacity-1">
{!! $slot !!}
</span>
</div>