Skip to content

Commit

Permalink
disabled link scenario development
Browse files Browse the repository at this point in the history
  • Loading branch information
@brkcvn
brkcvn committed Jun 27, 2022
1 parent e107954 commit 135449f
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 17 deletions.
13 changes: 12 additions & 1 deletion public/akaunting-js/generalAction.js
View file
Expand Up @@ -290,4 +290,15 @@ 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]').forEach((href) => {
href.addEventListener('click', function () {
this.classList.add('disabled-link');
this.querySelector('[data-link-loading]').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 changes: 6 additions & 0 deletions public/css/app.css
View file
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions resources/assets/sass/app.css
View file
Expand Up @@ -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;
Expand Down
49 changes: 33 additions & 16 deletions 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 data-linkhref="{{ $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 data-linkhref="{{ 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 data-linkhref="{{ 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 data-linkhref="{{ 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
Expand All @@ -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 data-linkhref="{{ $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 data-linkhref="{{ $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 data-linkhref="{{ $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
9 changes: 9 additions & 0 deletions resources/views/components/link/loading.blade.php
View file
@@ -0,0 +1,9 @@
<i
data-link-loading
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>

0 comments on commit 135449f

Please sign in to comment.