button loading action return to view component
This commit is contained in:
parent
dd9b492aee
commit
9dffcf849d
4
public/css/app.css
vendored
4
public/css/app.css
vendored
@ -48223,6 +48223,10 @@ body{
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.sm\:grid-cols-2{
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.sm\:grid-cols-3{
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
@ -41,8 +41,7 @@
|
||||
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>
|
||||
<span :class="[{'opacity-0': form.loading}]">{{ trans('general.send') }}</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('general.send') }}" text-hide="[{'opacity-0': form.loading}]" />
|
||||
</x-button>
|
||||
</div>
|
||||
</x-form>
|
||||
|
@ -70,10 +70,7 @@
|
||||
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>
|
||||
<span :class="[{'opacity-0': form.loading}]">
|
||||
{{ trans('auth.login') }}
|
||||
</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('auth.login') }}" text-hide="[{'opacity-0': form.loading}]" />
|
||||
</x-button>
|
||||
</div>
|
||||
</x-form>
|
||||
|
@ -58,8 +58,7 @@
|
||||
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>
|
||||
<span :class="[{'opacity-0': form.loading}]">{{ trans('auth.reset') }}</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('auth.reset') }}" text-hide="[{'opacity-0': form.loading}]" />
|
||||
</x-button>
|
||||
</div>
|
||||
</x-form>
|
||||
|
@ -264,8 +264,7 @@
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<span :class="[{'ml-0': form.loading}]">{{ trans('reconciliations.save_draft') }}</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('reconciliations.save_draft') }}" text-hide="[{'opacity-0': form.loading}]" />
|
||||
</x-button>
|
||||
|
||||
<div v-if="reconcile">
|
||||
@ -278,13 +277,7 @@
|
||||
@click="onReconcileSubmit"
|
||||
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>
|
||||
|
||||
<span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('reconciliations.reconcile') }}" text-hide="[{'opacity-1': reconcile}]" />
|
||||
</x-button>
|
||||
</x-tooltip>
|
||||
</div>
|
||||
@ -297,12 +290,7 @@
|
||||
@click="onReconcileSubmit"
|
||||
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>
|
||||
<span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('reconciliations.reconcile') }}" text-hide="[{'opacity-1': reconcile}]" />
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -203,8 +203,7 @@
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<span :class="[{'ml-0': form.loading}]">{{ trans('general.save') }}</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('general.save') }}" text-hide="[{'opacity-1': reconcile}]" />
|
||||
</x-button>
|
||||
<div v-if="reconcile">
|
||||
<x-tooltip id="tooltip-reconcile" placement="top" message="{{ trans('reconciliations.irreconcilable') }}">
|
||||
@ -217,12 +216,7 @@
|
||||
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>
|
||||
<span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('reconciliations.reconcile') }}" text-hide="[{'opacity-1': reconcile}]" />
|
||||
</x-button>
|
||||
</x-tooltip>
|
||||
</div>
|
||||
@ -236,12 +230,7 @@
|
||||
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>
|
||||
<span :class="[{'opacity-1': reconcile}]">{{ trans('reconciliations.reconcile') }}</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('reconciliations.reconcile') }}" text-hide="[{'opacity-1': reconcile}]" />
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -41,8 +41,7 @@
|
||||
</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">
|
||||
<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>
|
||||
<span :class="[{'opacity-0': form.loading}]">{{ trans('general.confirm') }}</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('general.confirm') }}" text-hide="[{'opacity-0': form.loading}]" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -47,10 +47,7 @@
|
||||
::disabled="form.loading"
|
||||
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>
|
||||
<span :class="[{'opacity-0': form.loading}]">
|
||||
{{ trans('import.import') }}
|
||||
</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('import.import') }}" text-hide="[{'opacity-0': form.loading}]" />
|
||||
</x-button>
|
||||
</div>
|
||||
</div>
|
||||
|
9
resources/views/components/button-loading.blade.php
Normal file
9
resources/views/components/button-loading.blade.php
Normal file
@ -0,0 +1,9 @@
|
||||
<i
|
||||
{{ $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]"
|
||||
>
|
||||
</i>
|
||||
|
||||
<span :class="{{ $textHide }}">
|
||||
{!! $text !!}
|
||||
</span>
|
@ -17,10 +17,7 @@
|
||||
::disabled="form.loading"
|
||||
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>
|
||||
<span :class="[{'opacity-0': form.loading}]">
|
||||
{{ trans('general.save') }}
|
||||
</span>
|
||||
<x-button-loading v-if="form.loading" text="{{ trans('general.save') }}" text-hide="[{'opacity-0': form.loading}]" />
|
||||
</x-button>
|
||||
</div>
|
||||
@stack('save_buttons_end')
|
||||
|
@ -21,10 +21,7 @@
|
||||
@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"
|
||||
>
|
||||
<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>
|
||||
<span :class="[{'opacity-0': loadMoreLoading}]">
|
||||
{{ trans('modules.see_more') }}
|
||||
</span>
|
||||
<x-button-loading v-if="loadMoreLoading" text="{{ trans('modules.see_more') }}" text-hide="[{'opacity-0': loadMoreLoading}]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
@ -21,10 +21,7 @@
|
||||
@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"
|
||||
>
|
||||
<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>
|
||||
<span :class="[{'opacity-0': loadMoreLoading}]">
|
||||
{{ trans('modules.see_more') }}
|
||||
</span>
|
||||
<x-button-loading v-if="loadMoreLoading" text="{{ trans('modules.see_more') }}" text-hide="[{'opacity-0': loadMoreLoading}]" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
@ -34,10 +34,7 @@
|
||||
: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"
|
||||
>
|
||||
<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>
|
||||
<span :class="[{'opacity-0': loadMoreLoading}]">
|
||||
{{ trans('modules.see_more') }}
|
||||
</span>
|
||||
<x-button-loading v-if="loadMoreLoading" text="{{ trans('modules.see_more') }}" text-hide="[{'opacity-0': loadMoreLoading}]" />
|
||||
</button>
|
||||
|
||||
<x-form.input.hidden name="see_more_path" value="{{ route('apps.load-more', ['type' => $type]) }}" />
|
||||
|
Loading…
x
Reference in New Issue
Block a user