diff --git a/resources/css/app.scss b/resources/css/app.scss
index 0236d1a..bd4c172 100644
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -3,7 +3,6 @@
@import "data-table.scss";
@import "tinymce.scss";
@import "prism.css";
-@import "progressbar.scss";
* {
box-sizing: border-box;
diff --git a/resources/css/progressbar.scss b/resources/css/progressbar.scss
deleted file mode 100644
index b8c2bed..0000000
--- a/resources/css/progressbar.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-$vue3-progress-bar-container-z-index: 999999 !default;
-$vue3-progress-bar-container-transition: all 500ms ease !default;
-
-$vue3-progress-bar-color: $primary-color-dark !default;
-$vue3-progress-bar-height: 4px !default;
-$vue3-progress-bar-transition: all 200ms ease !default;
-
-.vue3-progress-bar-container {
- position: fixed;
- z-index: $vue3-progress-bar-container-z-index;
- top: 0;
- left: 0;
- width: 100%;
- opacity: 0;
- background-color: #eee;
- transition: $vue3-progress-bar-container-transition;
- &[active="true"] {
- opacity: 1;
- transition: none;
- }
- .vue3-progress-bar {
- width: 100%;
- height: $vue3-progress-bar-height;
- transform: translate3d(-100%, 0, 0);
- background-color: $vue3-progress-bar-color;
- transition: $vue3-progress-bar-transition;
- }
-}
diff --git a/resources/js/components/SMProgress.vue b/resources/js/components/SMProgress.vue
index 25e61c6..19a9115 100644
--- a/resources/js/components/SMProgress.vue
+++ b/resources/js/components/SMProgress.vue
@@ -9,10 +9,10 @@
width: `${(progressStore.status || 0) * 100}%`,
}">
-
@@ -48,7 +48,7 @@ const progressStore = useProgressStore();
position: fixed;
top: 10px;
right: 10px;
- transition: opacity 0.2s ease-in-out;
+ opacity: 0.5;
.sm-spinner-icon {
width: 18px;
@@ -60,6 +60,8 @@ const progressStore = useProgressStore();
border-left-color: #29d;
border-radius: 50%;
+ transition: opacity 0.2s ease-in-out;
+
-webkit-animation: sm-progress-spinner 500ms linear infinite;
animation: sm-progress-spinner 500ms linear infinite;
}
diff --git a/resources/js/main.js b/resources/js/main.js
index f9afcff..c283797 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -12,7 +12,6 @@ import SMColumn from "./components/SMColumn.vue";
import { PromiseDialog } from "vue3-promise-dialog";
import { VueReCaptcha } from "vue-recaptcha-v3";
import "./lib/prism";
-import { Vue3ProgressPlugin } from "@marcoschulte/vue3-progress";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
@@ -27,7 +26,6 @@ createApp(App)
autoHideBadge: true,
},
})
- .use(Vue3ProgressPlugin)
.component("SMContainer", SMContainer)
.component("SMRow", SMRow)
.component("SMColumn", SMColumn)
diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index 56bd202..fe26375 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -4,8 +4,6 @@ import { useApplicationStore } from "../store/ApplicationStore";
import { useProgressStore } from "../store/ProgressStore";
import { api } from "../helpers/api";
-const progresses = [];
-
export const routes = [
{
path: "/",
@@ -379,7 +377,6 @@ router.beforeEach(async (to, from, next) => {
const applicationStore = useApplicationStore();
const progressStore = useProgressStore();
- // progressStore.reset();
progressStore.start();
applicationStore.clearDynamicTitle();
diff --git a/resources/js/store/ProgressStore.ts b/resources/js/store/ProgressStore.ts
index ec3bbf3..d03cb97 100644
--- a/resources/js/store/ProgressStore.ts
+++ b/resources/js/store/ProgressStore.ts
@@ -21,12 +21,12 @@ export const useProgressStore = defineStore({
actions: {
start() {
- if (this.queue == 0) {
+ if (this.queue == 0 && this.opacity == 0) {
this.set(0);
const work = () => {
window.setTimeout(() => {
- if (this.status != null) {
+ if (this.status < 1) {
this._trickle();
work();
}
@@ -43,7 +43,7 @@ export const useProgressStore = defineStore({
this.timeoutID = window.setTimeout(() => {
this._show();
this.timeoutID = null;
- }, 200);
+ }, 2000);
}
if (this.spinner == 0) {
@@ -55,7 +55,8 @@ export const useProgressStore = defineStore({
},
set(number: number) {
- this.status = clamp(number, 0.08, 1);
+ const n = clamp(number, 0.08, 1);
+ this.status = n;
},
finish() {
@@ -67,21 +68,29 @@ export const useProgressStore = defineStore({
_trickle() {
const n = this.status;
- if (this.queue == 0 && this.timeoutID == null) {
- this.timeoutID = window.setTimeout(() => {
- this.set(1);
+ if (this.queue == 0) {
+ if (this.opacity == 0 && this.timeoutID != null) {
+ this._hide();
+ window.clearTimeout(this.timeoutID);
this.timeoutID = null;
-
+ } else if (this.timeoutID == null) {
this.timeoutID = window.setTimeout(() => {
- this._hide();
+ this.set(1);
this.timeoutID = null;
+
+ this.timeoutID = window.setTimeout(() => {
+ this._hide();
+ this.timeoutID = null;
+
+ window.setTimeout(() => {
+ this.status = 0;
+ }, 150);
+ }, 500);
}, 500);
- }, 200);
+ }
}
- if (n == 0) {
- this.start();
- } else if (n < 1) {
+ if (n > 0 && n < 1) {
let amount = 0;
if (n >= 0 && n < 0.2) {