button loading action return to view component
This commit is contained in:
		
							
								
								
									
										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]) }}" /> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user