Added icons, helperfunction and new fancy notice message
Added icons from webcrunch resp. heroicons Added helperfunction to display inline svg with the plugin inline-svg Implemented fancy notice message webcrunch. Realy nice but does only work with javascript on.
This commit is contained in:
29
app/javascript/controllers/flash_controller.js
Normal file
29
app/javascript/controllers/flash_controller.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import { Controller } from "@hotwired/stimulus";
|
||||
|
||||
// Connects to data-controller="flash"
|
||||
export default class extends Controller {
|
||||
static targets = ["toast"];
|
||||
|
||||
connect() {
|
||||
requestAnimationFrame(() => {
|
||||
this.toastTarget.classList.remove("translate-x-full");
|
||||
this.toastTarget.classList.add("translate-x-0");
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.dismiss();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
this.toastTarget.classList.add(
|
||||
"opacity-0",
|
||||
"transition-opacity",
|
||||
"duration-300",
|
||||
"translate-x-full"
|
||||
);
|
||||
setTimeout(() => {
|
||||
this.toastTarget.remove();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user