flashbar turbo-permanent

2 months ago · 3a82f10cae
8 changed files with 51 additions and 90 deletions
--- a/app/assets/stylesheets/toastify.css
+++ b/app/assets/stylesheets/toastify.css
@ -11,29 +11,6 @@
  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;
@ -41,14 +18,6 @@
  right: 0;
 }
@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;
  }
 .toastify-top {
  top: -150px;
 }
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@ -6,4 +6,8 @@
  /* themes: light --default; */
  logs: false;
 }
 .toast-close {
  @apply btn btn-outline;
 }
--- a/app/javascript/controllers/flash_controller.js
+++ b/app/javascript/controllers/flash_controller.js
@ -4,7 +4,7 @@ import Toastify from 'toastify-js'
 export default class extends Controller {
  OPTIONS = {
    selector: 'flash-container',
    selector: 'flashbar',
    escapeMarkup: false,
    close: true,
    position: 'center',
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -23,10 +23,11 @@
  </head>
  <body >
    <%= render 'layouts/components/flashbar'%>
    <%= render 'layouts/components/navbar'%>
    <main class="flex flex-col gap-8 m-4">
      <%= yield %>
    </main>
    <%= render 'layouts/components/flash'%>
    <%= render 'layouts/components/footer'%>
  </body>
 </html>
--- a/app/views/layouts/components/_flash.html.erb
+++ b/app/views/layouts/components/_flash.html.erb
@ -1,46 +0,0 @@
 <div 
    id='flash-container' 
    style='max-width: calc(50% - 20px)' 
    data-controller='flash'
    data-action="popup-toast@window->flash#popup"
  >
  <!-- 
  here is a shadow root which serves as a placeholder for the toaster area.
  max-width gets inherited from this node.
  -->
 </div>
 <footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4">
  <aside>
    <%= Rails.application.name.upcase %> app is free software<br/>
    Copyleft: AGPLv3<br/>
    source code<br/>
  </aside>
  <aside data-controller='flash'>
    <% if flash.any? %>
      <h2 class='bold text-2xl'>FLASH</h2>
      <ul>
        <li>
          <% if flash.key?(:alert) %>
            ALERT = <%= flash.alert %>
          <% end %>
        </li>
        <li>
          <% if flash.key?(:notice) %>
            NOTICE = <%= flash.notice %>
          <% end %>
        </li>
      </ul>
    <% end %>
    <div class='flex flex-row gap-4'>
      <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>
    </div>
  </aside>
 </footer>
--- a/app/views/layouts/components/_flashbar.html.erb
+++ b/app/views/layouts/components/_flashbar.html.erb
@ -0,0 +1,12 @@
 <div 
    id='flashbar' 
    style='max-width: calc(50% - 20px)' 
    data-controller='flash'
    data-action="popup-toast@window->flash#popup" data-turbo-permanent
  >
  <!-- 
  here is a shadow root which serves as a placeholder for the toaster area.
  max-width gets inherited from this node.
  data-turbo-permant prevents morphing to dismiss active toasts
  -->
 </div>
--- a/app/views/layouts/components/_footer.html.erb
+++ b/app/views/layouts/components/_footer.html.erb
@ -0,0 +1,26 @@
 <footer class="footer sm:footer-horizontal footer-center bg-base-300 text-base-content p-4">
  <aside>
    <%= Rails.application.name.upcase %> app is free software<br/>
    Copyleft: AGPLv3<br/>
    source code<br/>
  </aside>
  <aside>
    <% if flash.any? %>
      <h2 class='bold text-2xl'>FLASH</h2>
      <ul>
        <li>
          <% if flash.key?(:alert) %>
            ALERT = <%= flash.alert %>
          <% end %>
        </li>
        <li>
          <% if flash.key?(:notice) %>
            NOTICE = <%= flash.notice %>
          <% end %>
        </li>
      </ul>
    <% end %>
  </aside>
 </footer>
--- a/app/views/notification/index.html.erb
+++ b/app/views/notification/index.html.erb
@ -17,7 +17,7 @@
  </ul>
 </div>
 <section class='w-full max-w-96'>
 <%# <section class='w-full max-w-96'>
  <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" />
@ -27,15 +27,10 @@
      Your purchase has been confirmed!<br/>
      Your purchase has been confirmed!<br/>
    </div>
    <button class='toast-close'>x</button>
  </div>
  <div role="alert" class="alert alert-error 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Error! Task failed successfully.</span>
  </div>
 </section>
 </section> %>
 <div>
  <h2 class="text-bold text-2xl">By using <span class="italic">stimulus</span></h2>
@ -50,7 +45,7 @@
      <%= link_to 'Alert', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
        type: 'alert',
        message: 'this is an alert'
      }}))", class: 'btn btn-primary'%>
      }}))", class: 'btn btn-secondary'%>
    </li>
  </ul>
 </div>