toastify styled

6 days ago · 23e429e54e
9 changed files with 116 additions and 14 deletions
--- a/README.md
+++ b/README.md
@ -9,3 +9,4 @@ quick try-out app for displaying toaster as flash message based on Rails8
 ## building process

 * bin/importmap pin toastify-js
+* curl -sLO --output-dir app/assets/stylesheets https://github.com/apvarun/toastify-js/raw/refs/heads/master/src/toastify.css
--- a/TODO.md
+++ b/TODO.md
@ -2,3 +2,5 @@ TODO
 ====

 * [ ] resolve daisyui and daisyui-theme via importmap
+* [ ] use a simpler toast library
+  * [ ] https://codeshack.io/elegant-toast-notifications-javascript/
--- a/app/assets/stylesheets/toastify.css
+++ b/app/assets/stylesheets/toastify.css
@ -0,0 +1,57 @@
+.toastify {
+  display: inline-block;
+  position: fixed;
+  opacity: 0;
+  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+  cursor: pointer;
+  max-width: calc(50% - 20px);
+  z-index: 1000;
+}
+
+.toastify.on {
+  opacity: 1;
+}
+
+.toast-close {
+  background: transparent;
+  cursor: pointer;
+  opacity: 0.4;
+  padding: 0 0 0 2em;
+}
+
+.toastify-right {
+  right: 15px;
+}
+
+.toastify-left {
+  left: 15px;
+}
+
+.toastify-top {
+  top: -150px;
+}
+
+.toastify-bottom {
+  bottom: -150px;
+}
+
+.toastify-center {
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+  max-width: fit-content;
+  max-width: -moz-fit-content;
+}
+
+@media only screen and (max-width: 360px) {
+
+  .toastify-right,
+  .toastify-left {
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    max-width: fit-content;
+  }
+}
--- a/app/javascript/controllers/flash_controller.js
+++ b/app/javascript/controllers/flash_controller.js
@ -1,13 +1,31 @@
 import { Controller } from "@hotwired/stimulus"
+import Toastify from 'toastify-js'

 // Connects to data-controller="flash"
 export default class extends Controller {
+
+  count = 0
+
  connect() {
    console.log('FLASH stimulus ready!')
  }

  notice() {
    console.warn('show notice')
+    Toastify({
+      text: `This is toast #${this.count++} + a long message which should wrap over 2 or more lines`,
+      className: 'alert alert-success inset-ring-2 shadow-xl/30',
+      close: true,
+      position: 'center',
+      // gravity: "top", // `top` or `bottom`
+      // stopOnFocus: true, // Prevents dismissing of toast on hover
+      // duration: 3000,
+      offset: {
+        // x: 50, // horizontal axis - can be a number or a string indicating unity. eg: '2em'
+        y: 30 // vertical axis - can be a number or a string indicating unity. eg: '2em'
+      },
+    }).showToast();
+
  }

  alert() {
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -24,7 +24,7 @@

  <body >
    <%= render 'layouts/components/navbar'%>
-    <main class="flex flex-col gap-8">
+    <main class="flex flex-col gap-8 m-4">
      <%= yield %>
    </main>
    <%= render 'layouts/components/flash'%>
--- a/app/views/layouts/components/_flash.html.erb
+++ b/app/views/layouts/components/_flash.html.erb
@ -3,7 +3,8 @@
    <p>Copyleft AGPLv3</p>
  </aside>

-  <aside data-controller="flash">
+  <aside data-controller="flash"
+  data-action="popup-toast@window->flash#notice">
    <% if flash.any? %>
      <h2 class='bold text-2xl'>FLASH</h2>
      <ul>
@ -21,9 +22,9 @@
      </ul>
    <% end %>
    <div class='flex flex-row gap-4'>
-      <button data-action="click->flash#notice" class='btn btn-primary'>Notice</button>
-      <button data-action="click->flash#alert" class='btn btn-secondary'>Alert</button>
-      <button data-action="click->flash#random" class='btn btn-warning btn-dash'>
+      <button data-action="flash#notice" class='btn btn-primary'>Notice</button>
+      <button data-action="flash#alert" class='btn btn-secondary'>Alert</button>
+      <button data-action="flash#random" class='btn btn-warning btn-dash'>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
        Random
      </button>
--- a/app/views/layouts/components/_navbar.html.erb
+++ b/app/views/layouts/components/_navbar.html.erb
@ -1,4 +1,4 @@
-<div class="navbar bg-base-100 shadow-sm">
+<nav class="navbar bg-base-100 shadow-xl mb-6">
  <div class="flex-none">
    <button class="btn btn-square btn-ghost">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg>
@ -12,4 +12,4 @@
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-5 w-5 stroke-current"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path> </svg>
    </button>
  </div>
-</div>
+</nav>
--- a/app/views/notification/index.html.erb
+++ b/app/views/notification/index.html.erb
@ -3,12 +3,8 @@
 </div>

 <div>
-  <h2 class="text-bold text-2xl">
-    By using
-    <span class="italic">redirect_to</span>
-  </h2>
-
-  <ul class="list bg-base-100 rounded-box shadow-md">
+  <h2 class="text-bold text-2xl">By using <span class="italic">redirect_to</span></h2>
+  <ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
      <%= link_to 'Notice', notification_show_notice_path, class: 'btn btn-primary'%>
    </li>
@ -20,3 +16,19 @@
    </li>
  </ul>
 </div>
+
+<div role="alert" class="alert alert-success inset-ring-2">
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+  <span>Your purchase has been confirmed!</span>
+</div>
+
+<div>
+  <h2 class="text-bold text-2xl">By using <span class="italic">stimulus</span></h2>
+  <ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
+    <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
+      <%= link_to 'Notice', "javascript: window.dispatchEvent(new Event('popup-toast'))", class: 'btn btn-primary'%>
+    </li>
+  </ul>
+</div>
--- a/vendor/javascript/toastify-js.js
+++ b/vendor/javascript/toastify-js.js