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) {