diff --git a/app/components/toast.gjs b/app/components/toast.gjs new file mode 100644 index 0000000..e7f1a58 --- /dev/null +++ b/app/components/toast.gjs @@ -0,0 +1,14 @@ +import Component from '@glimmer/component'; +import { service } from '@ember/service'; + +export default class ToastComponent extends Component { + @service toast; + + +} diff --git a/app/services/toast.js b/app/services/toast.js new file mode 100644 index 0000000..4116944 --- /dev/null +++ b/app/services/toast.js @@ -0,0 +1,21 @@ +import Service from '@ember/service'; +import { tracked } from '@glimmer/tracking'; + +export default class ToastService extends Service { + @tracked message = null; + @tracked isVisible = false; + timeoutId = null; + + show(message, duration = 3000) { + this.message = message; + this.isVisible = true; + + if (this.timeoutId) { + clearTimeout(this.timeoutId); + } + + this.timeoutId = setTimeout(() => { + this.isVisible = false; + }, duration); + } +} diff --git a/app/styles/app.css b/app/styles/app.css index 8c53979..f27c8e5 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -1321,3 +1321,36 @@ button.create-place { cursor: not-allowed; pointer-events: none; } + +/* Toast Notification */ +.toast-notification { + position: fixed; + bottom: 2rem; + left: 50%; + transform: translateX(-50%); + background-color: rgb(51 51 51 / 85%); + backdrop-filter: blur(4px); + color: white; + padding: 0.75rem 1.5rem; + border-radius: 999px; + z-index: 9999; + box-shadow: 0 4px 12px rgb(0 0 0 / 15%); + animation: fade-in-up 0.3s ease-out forwards; + text-align: center; + max-width: 90%; + font-size: 0.9rem; + font-weight: 500; + pointer-events: none; +} + +@keyframes fade-in-up { + from { + opacity: 0; + transform: translate(-50%, 1rem); + } + + to { + opacity: 1; + transform: translate(-50%, 0); + } +} diff --git a/app/templates/application.gjs b/app/templates/application.gjs index 8dae51b..8dfd51b 100644 --- a/app/templates/application.gjs +++ b/app/templates/application.gjs @@ -3,6 +3,7 @@ import { pageTitle } from 'ember-page-title'; import Map from '#components/map'; import AppHeader from '#components/app-header'; import AppMenu from '#components/app-menu/index'; +import Toast from '#components/toast'; import { service } from '@ember/service'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; @@ -89,6 +90,8 @@ export default class ApplicationComponent extends Component { {{/if}} + + {{outlet}} }