pvincent
/
notification
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

toastify styled

main
pvincent 6 days ago
parent
1fcc316a1c
commit
23e429e54e
9 changed files with 116 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      README.md
  2. 4
      TODO.md
  3. 57
      app/assets/stylesheets/toastify.css
  4. 18
      app/javascript/controllers/flash_controller.js
  5. 2
      app/views/layouts/application.html.erb
  6. 9
      app/views/layouts/components/_flash.html.erb
  7. 4
      app/views/layouts/components/_navbar.html.erb
  8. 24
      app/views/notification/index.html.erb
  9. 11
      vendor/javascript/toastify-js.js

1
README.md
View File

@ -9,3 +9,4 @@ quick try-out app for displaying toaster as flash message based on Rails8
## building process ## building process
* bin/importmap pin toastify-js * 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

4
TODO.md
View File

@ -1,4 +1,6 @@
TODO TODO
==== ====
* [ ] resolve daisyui and daisyui-theme via importmap
* [ ] resolve daisyui and daisyui-theme via importmap
* [ ] use a simpler toast library
* [ ] https://codeshack.io/elegant-toast-notifications-javascript/

57
app/assets/stylesheets/toastify.css
View File

@ -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;
}
}

18
app/javascript/controllers/flash_controller.js
View File

@ -1,13 +1,31 @@
import { Controller } from "@hotwired/stimulus" import { Controller } from "@hotwired/stimulus"
import Toastify from 'toastify-js'
// Connects to data-controller="flash" // Connects to data-controller="flash"
export default class extends Controller { export default class extends Controller {
count = 0
connect() { connect() {
console.log('FLASH stimulus ready!') console.log('FLASH stimulus ready!')
} }
notice() { notice() {
console.warn('show 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() { alert() {

2
app/views/layouts/application.html.erb
View File

@ -24,7 +24,7 @@
<body > <body >
<%= render 'layouts/components/navbar'%> <%= render 'layouts/components/navbar'%>
<main class="flex flex-col gap-8">
<main class="flex flex-col gap-8 m-4">
<%= yield %> <%= yield %>
</main> </main>
<%= render 'layouts/components/flash'%> <%= render 'layouts/components/flash'%>

9
app/views/layouts/components/_flash.html.erb
View File

@ -3,7 +3,8 @@
<p>Copyleft AGPLv3</p> <p>Copyleft AGPLv3</p>
</aside> </aside>
<aside data-controller="flash">
<aside data-controller="flash"
data-action="popup-toast@window->flash#notice">
<% if flash.any? %> <% if flash.any? %>
<h2 class='bold text-2xl'>FLASH</h2> <h2 class='bold text-2xl'>FLASH</h2>
<ul> <ul>
@ -21,9 +22,9 @@
</ul> </ul>
<% end %> <% end %>
<div class='flex flex-row gap-4'> <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> <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 Random
</button> </button>

4
app/views/layouts/components/_navbar.html.erb
View File

@ -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"> <div class="flex-none">
<button class="btn btn-square btn-ghost"> <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> <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> <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> </button>
</div> </div>
</div>
</nav>

24
app/views/notification/index.html.erb
View File

@ -3,12 +3,8 @@
</div> </div>
<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"> <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
<%= link_to 'Notice', notification_show_notice_path, class: 'btn btn-primary'%> <%= link_to 'Notice', notification_show_notice_path, class: 'btn btn-primary'%>
</li> </li>
@ -19,4 +15,20 @@
<%= link_to 'Nothing', notification_index_path, class: 'btn btn-accent btn-outline'%> <%= link_to 'Nothing', notification_index_path, class: 'btn btn-accent btn-outline'%>
</li> </li>
</ul> </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> </div>

11
vendor/javascript/toastify-js.js
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save