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

added loading into finish button

Browse Source
This commit is contained in:
Burak Civan 2022-08-15 10:13:49 +03:00
parent c9dd7a9384
commit 2265809d82
3 changed files with 98 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
presets.js vendored
View File

@ -211,6 +211,10 @@ module.exports = {
'0%': { boxShadow: '0 28px 0 -28px #ffffff' },
'100%': { boxShadow: '0 28px 0 #ffffff' },
},
submit_second: {
'0%': { boxShadow: '0 28px 0 -28px #55588b' },
'100%': { boxShadow: '0 28px 0 #55588b' },
},
},
animation: {
@ -218,7 +222,8 @@ module.exports = {
pulsate_transparent: 'pulsate_transparent 1500ms ease infinite;',
pulsate: 'pulsate 1500ms ease infinite;',
spin: 'spin 1000ms infinite',
submit: 'submit 0.7s ease alternate infinite'
submit: 'submit 0.7s ease alternate infinite',
submit_second: 'submit_second 0.7s ease alternate infinite'
},
transitionProperty: {

80
public/css/app.css vendored
View File

@ -9981,6 +9981,34 @@ input[type="date"]::-webkit-inner-spin-button,
-webkit-animation: submit 0.7s ease alternate infinite;
animation: submit 0.7s ease alternate infinite;
}
@-webkit-keyframes submit_second{
0%{
-webkit-box-shadow: 0 28px 0 -28px #55588b;
box-shadow: 0 28px 0 -28px #55588b;
}
100%{
-webkit-box-shadow: 0 28px 0 #55588b;
box-shadow: 0 28px 0 #55588b;
}
}
@keyframes submit_second{
0%{
-webkit-box-shadow: 0 28px 0 -28px #55588b;
box-shadow: 0 28px 0 -28px #55588b;
}
100%{
-webkit-box-shadow: 0 28px 0 #55588b;
box-shadow: 0 28px 0 #55588b;
}
}
.animate-submit_second{
-webkit-animation: submit_second 0.7s ease alternate infinite;
animation: submit_second 0.7s ease alternate infinite;
}
.cursor-auto{
cursor: auto;
}
@ -47306,6 +47334,27 @@ body{
animation: submit 0.7s ease alternate infinite;
}
@keyframes submit_second{
0%{
content: var(--tw-content);
-webkit-box-shadow: 0 28px 0 -28px #55588b;
box-shadow: 0 28px 0 -28px #55588b;
}
100%{
content: var(--tw-content);
-webkit-box-shadow: 0 28px 0 #55588b;
box-shadow: 0 28px 0 #55588b;
}
}
.before\:animate-submit_second::before{
content: var(--tw-content);
-webkit-animation: submit_second 0.7s ease alternate infinite;
animation: submit_second 0.7s ease alternate infinite;
}
.before\:rounded-full::before{
content: var(--tw-content);
border-radius: 9999px;
@ -47441,6 +47490,27 @@ body{
animation: submit 0.7s ease alternate infinite;
}
@keyframes submit_second{
0%{
content: var(--tw-content);
-webkit-box-shadow: 0 28px 0 -28px #55588b;
box-shadow: 0 28px 0 -28px #55588b;
}
100%{
content: var(--tw-content);
-webkit-box-shadow: 0 28px 0 #55588b;
box-shadow: 0 28px 0 #55588b;
}
}
.after\:animate-submit_second::after{
content: var(--tw-content);
-webkit-animation: submit_second 0.7s ease alternate infinite;
animation: submit_second 0.7s ease alternate infinite;
}
.after\:rounded-full::after{
content: var(--tw-content);
border-radius: 9999px;
@ -47693,6 +47763,16 @@ body{
background-color: rgb(197 217 186 / var(--tw-bg-opacity));
}
.disabled\:bg-gray-300:disabled{
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.disabled\:bg-gray-100:disabled{
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.disabled\:opacity-50:disabled{
opacity: 0.5;
}

14
resources/assets/js/views/wizard/Finish.vue
View File

@ -55,8 +55,16 @@
<img :src="image_src" class="absolute top-0 right-2" alt="" />
</div>
<base-button class="flex items-center justify-center text-base rounded-lg disabled:opacity-50 relative m-auto bottom-48 bg-white hover:bg-gray-100 text-purple rounded-md py-3 px-5 font-semibold btn-default" @click="finish()">
{{ translations.finish.create_first_invoice }}
<base-button
class="relative flex items-center justify-center text-base rounded-lg m-auto bottom-48 bg-white hover:bg-gray-100 text-purple py-3 px-5 font-semibold disabled:bg-gray-100 "
:disabled="anchor_loading"
@click="finish()"
>
<i v-if="anchor_loading" class="animate-submit_second delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-2.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit_second before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit_second before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': anchor_loading}]">
{{ translations.finish.create_first_invoice }}
</span>
</base-button>
</div>
</div>
@ -93,6 +101,7 @@ export default {
active: 3,
route_url: url,
image_src: app_url + "/public/img/wizard-modules.png",
anchor_loading: false
};
},
@ -124,6 +133,7 @@ export default {
finish() {
window.location.href = url + "/sales/invoices/create";
this.anchor_loading = true;
},
},
};