mirror of
https://github.com/enso-org/enso.git
synced 2024-09-11 13:15:52 +03:00
Display initialization message (#8573)
Implements #8525 [Screencast from 18-12-23 14:40:29.webm](https://github.com/enso-org/enso/assets/1428930/c7db2a9d-0020-4bce-b44c-d6712df58098) # Important Notes Previously, we re-used the API from the dashboard. But this mechanism is brittle and is currently even broken with the new GUI. So instead, I just used the Vue equivalent toast API, which seems easier to use.
This commit is contained in:
parent
cbd7397b5e
commit
2d6e4b4813
@ -30,7 +30,8 @@ import { Rect } from '@/util/data/rect'
|
||||
import { Vec2 } from '@/util/data/vec2'
|
||||
import * as set from 'lib0/set'
|
||||
import type { ExprId, NodeMetadata } from 'shared/yjsModel'
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { toast } from 'vue3-toastify'
|
||||
import { type Usage } from './ComponentBrowser/input'
|
||||
|
||||
const EXECUTION_MODES = ['design', 'live']
|
||||
@ -50,6 +51,26 @@ const componentBrowserUsage = ref<Usage>({ type: 'newNode' })
|
||||
const suggestionDb = useSuggestionDbStore()
|
||||
const interaction = provideInteractionHandler()
|
||||
|
||||
function initStartupToast() {
|
||||
const startupToast = toast.info('Initializing the project. This can take up to one minute.', {
|
||||
autoClose: false,
|
||||
})
|
||||
projectStore.firstExecution.then(() => {
|
||||
if (startupToast != null) {
|
||||
toast.remove(startupToast)
|
||||
}
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if (startupToast != null) {
|
||||
toast.remove(startupToast)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initStartupToast()
|
||||
})
|
||||
|
||||
const nodeSelection = provideGraphSelection(graphNavigator, graphStore.nodeRects, {
|
||||
onSelected(id) {
|
||||
graphStore.db.moveNodeToTop(id)
|
||||
@ -522,6 +543,14 @@ function handleEdgeDrop(source: ExprId, position: Vec2) {
|
||||
@dragover.prevent
|
||||
@drop.prevent="handleFileDrop($event)"
|
||||
>
|
||||
<ToastContainer
|
||||
position="top-center"
|
||||
theme="light"
|
||||
closeOnClick="false"
|
||||
draggable="false"
|
||||
toastClassName="text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl"
|
||||
transition="Vue-Toastification__bounce"
|
||||
/>
|
||||
<svg :viewBox="graphNavigator.viewBox">
|
||||
<GraphEdges @createNodeFromEdge="handleEdgeDrop" />
|
||||
</svg>
|
||||
|
@ -3,6 +3,7 @@ import '@/assets/main.css'
|
||||
import type { ApplicationConfig } from '@/util/config'
|
||||
import { createPinia } from 'pinia'
|
||||
import { createApp } from 'vue'
|
||||
import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify'
|
||||
|
||||
export function mountProjectApp(rootProps: {
|
||||
config: ApplicationConfig
|
||||
@ -12,6 +13,13 @@ export function mountProjectApp(rootProps: {
|
||||
}) {
|
||||
const app = createApp(App, rootProps)
|
||||
app.use(createPinia())
|
||||
app.use(Vue3Toastify, {
|
||||
position: 'top-center',
|
||||
theme: 'light',
|
||||
closeOnClick: false,
|
||||
draggable: false,
|
||||
toastClassName: 'text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl',
|
||||
} as ToastContainerOptions)
|
||||
app.mount('#app')
|
||||
return app
|
||||
}
|
||||
|
20
package-lock.json
generated
20
package-lock.json
generated
@ -14,7 +14,8 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"chromedriver": "^106.0.1",
|
||||
"tslib": "^2.6.2"
|
||||
"tslib": "^2.6.2",
|
||||
"vue3-toastify": "^0.1.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"npm-run-all": "^4.1.5",
|
||||
@ -17711,6 +17712,23 @@
|
||||
"typescript": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-toastify": {
|
||||
"version": "0.1.14",
|
||||
"resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.1.14.tgz",
|
||||
"integrity": "sha512-2wyzMhWq8IjTclL25tqKWknDFdFI1vPueMGZpHNlPWf6TBfxBycBANS+2n4W1xD7tHhX4G6HhCe31sle6OpwYQ==",
|
||||
"engines": {
|
||||
"node": ">=16",
|
||||
"npm": ">=7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">=3.2.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"vue": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-keyname": {
|
||||
"version": "2.2.8",
|
||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
||||
|
@ -5,7 +5,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"chromedriver": "^106.0.1",
|
||||
"tslib": "^2.6.2"
|
||||
"tslib": "^2.6.2",
|
||||
"vue3-toastify": "^0.1.14"
|
||||
},
|
||||
"name": "root",
|
||||
"scripts": {
|
||||
|
Loading…
Reference in New Issue
Block a user