rails_toastify 0.1.3 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4c911f3af15f4890c1444105b9f61e171df86f803c36b673664876fd1b5df78
-  data.tar.gz: 925b7c0a30747f92a1e9f2bf7d1ee306a000a445e7d35722c35b35dcb79bd87a
+  metadata.gz: dbe4093e4b00ca6aed884608e36832d9b4739c4101147ed6fb4f09725132c7d8
+  data.tar.gz: bdeae6a73e70c205c253d6e428425e18d130df7b0368708a6430225a9e053ea1
 SHA512:
-  metadata.gz: 928bab3cac6f526bb1b5261a5fbedb31e33412e335344e60a377c6500c17c14496af4fbe85fb8fa4c8ce7856f29678bf386d38689a431a1cff318872dab7b11b
-  data.tar.gz: 4af1c98f67a8b37f05089c8d11060398a7a0046dcfd8c6d5d9361e93eff8a2a6c28eef410eb24247eda7f105c3683501bfc9bb63931c38c8f6ccd724c87313bf
+  metadata.gz: 65d7805c01a912990470de84c7de94abcfb62d0c62fcaa1cb10669dfff05f84c24f014b69657aa497f95d5eca406cc8f73cdf4ab3f8f9dd9872e8d7e68aac78e
+  data.tar.gz: a16b9a1874d6cb99b7b6cce8caa1bd0d57b77856a5e55ead272184bdfd82397318a5b1852eb05575cd22afbf5a5db7e6dcbacbb71c2304eeb107d39756927ba9

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 0.1.4
+
+- Adjustments CSS progress bar and shadow
+  
+# 0.1.4
+
+- Change CSS
+- Change JS
+
 ## 0.1.3
 
 - Change README

data/app/assets/javascripts/rails_toastify.js

@@ -1,8 +1,8 @@
 document.addEventListener('DOMContentLoaded', () => {
   window.RailsToastify = {
-    showToast(message, type = 'info', duration = 3000) {
+    showToast(message, type = 'info', duration = 5000) {
       const toastContainer = document.querySelector('.toast-container') || createToastContainer();
-      const toast = createToast(message, type);
+      const toast = createToast(message, type, duration);
       toastContainer.appendChild(toast);
       setTimeout(() => {
         toast.classList.add('fade-out');
@@ -18,10 +18,39 @@ document.addEventListener('DOMContentLoaded', () => {
     return container;
   }
 
-  function createToast(message, type) {
+  function createToast(message, type, duration) {
     const toast = document.createElement('div');
     toast.className = `toast toast--${type}`;
-    toast.textContent = message;
+    toast.classList.add('show');
+  
+    const closeButton = document.createElement('button');
+    closeButton.className = 'toast__close-button';
+    closeButton.innerHTML = '<svg aria-hidden="true" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"></path></svg>';
+    closeButton.addEventListener('click', () => {
+      toast.classList.add('hide');
+      toast.addEventListener('transitionend', () => toast.remove());
+    });
+  
+    const progressBar = document.createElement('div');
+    progressBar.className = `toast__progress-bar toast__progress-bar--${type}`;
+    progressBar.style.animationDuration = `${duration}ms`;
+  
+    const body = document.createElement('div');
+    body.className = 'toast__body';
+    body.textContent = message;
+  
+    toast.appendChild(body);
+    toast.appendChild(closeButton);
+    toast.appendChild(progressBar);
+  
+    toast.addEventListener('click', () => {
+      toast.classList.add('hide');
+      toast.addEventListener('transitionend', () => toast.remove());
+    });
+    toast.addEventListener('mouseover', () => progressBar.style.animationPlayState = 'paused');
+    toast.addEventListener('mouseout', () => progressBar.style.animationPlayState = 'running');
+  
     return toast;
   }
-});
+  
+});

data/app/assets/stylesheets/rails_toastify.css

@@ -12,26 +12,72 @@
     align-items: center;
     background-color: #fff;
     border-radius: 4px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
     padding: 16px;
     margin: 8px;
     color: #333;
+    position: relative;
+    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+    transform: translateX(100%);
+    max-width: 300px;
   }
 
-  .toast--success {
-    border-left: 5px solid #4caf50;
+  .toast.show {
+    transform: translateX(0);
   }
 
-  .toast--error {
-    border-left: 5px solid #f44336;
+  .toast.hide {
+    transform: translateX(100%);
   }
 
-  .toast--info {
-    border-left: 5px solid #2196f3;
+  .toast--success .toast__progress-bar {
+    background-color: #4caf50;
   }
 
-  .toast--warning {
-    border-left: 5px solid #ff9800;
+  .toast--error .toast__progress-bar {
+    background-color: #f44336;
+  }
+
+  .toast--info .toast__progress-bar {
+    background-color: #2196f3;
+  }
+
+  .toast--warning .toast__progress-bar {
+    background-color: #ff9800;
+  }
+
+  .toast__close-button {
+    color: #333;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.3s;
+    align-self: flex-start;
+    margin-left: auto;
+  }
+
+  .toast__close-button:hover {
+    opacity: 1;
+  }
+
+  .toast__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    animation: progress-bar 5s linear forwards;
+  }
+
+  @keyframes progress-bar {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0;
+    }
   }
 <% elsif RailsToastify.configuration.framework == :tailwind %>
   .toast-container {
@@ -39,22 +85,53 @@
   }
 
   .toast {
-    @apply flex items-center bg-white rounded shadow p-4 my-2 text-gray-800;
+    @apply flex items-center bg-white rounded-lg shadow-lg p-4 my-2 text-gray-800 relative max-w-sm;
+    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+    transform: translateX(100%);
+  }
+  
+  .toast.show {
+    transform: translateX(0);
+  }
+  
+  .toast.hide {
+    transform: translateX(100%);
+  }
+
+  .toast--success .toast__progress-bar {
+    @apply bg-green-500;
+  }
+
+  .toast--error .toast__progress-bar {
+    @apply bg-red-500;
+  }
+
+  .toast--info .toast__progress-bar {
+    @apply bg-blue-500;
   }
 
-  .toast--success {
-    @apply border-l-4 border-green-500;
+  .toast--warning .toast__progress-bar {
+    @apply bg-yellow-500;
   }
 
-  .toast--error {
-    @apply border-l-4 border-red-500;
+  .toast__close-button {
+    @apply text-gray-800 bg-transparent border-none p-0 cursor-pointer opacity-70 transition-opacity duration-300 self-start ml-auto;
+    &:hover {
+      @apply opacity-100;
+    }
   }
 
-  .toast--info {
-    @apply border-l-4 border-blue-500;
+  .toast__progress-bar {
+    @apply absolute bottom-0 left-0 w-full h-1;
+    animation: progress-bar 5s linear forwards;
   }
 
-  .toast--warning {
-    @apply border-l-4 border-yellow-500;
+  @keyframes progress-bar {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0;
+    }
   }
-<% end %>
+<% end %>

data/lib/rails_toastify/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsToastify
-  VERSION = "0.1.3"
+  VERSION = "0.1.5"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_toastify
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.5
 platform: ruby
 authors:
 - Elton Santos
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2024-06-25 00:00:00.000000000 Z
+date: 2024-06-27 00:00:00.000000000 Z
 dependencies: []
 description: "\U0001F389 Rails Toastify allows you to add notifications to your app
   with ease. Pay Attention: this gem still is in development. Please CONTRIBUTE"