New layout proposal

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## main (unreleased)
 
+* New layout and style ([#12](https://github.com/petalmd/gravity_mailbox/pull/12))
+
 ## v0.2.0 (2022-12-15)
 
 * New look ([#7](https://github.com/petalmd/gravity_mailbox/pull/7))

README.md

@@ -1,7 +1,9 @@
 [![Gem Version](https://badge.fury.io/rb/gravity_mailbox.svg)](https://badge.fury.io/rb/gravity_mailbox)
 [![Ruby](https://github.com/petalmd/gravity_mailbox/actions/workflows/main.yml/badge.svg)](https://github.com/petalmd/gravity_mailbox/actions/workflows/main.yml)
 
-# GravityMailbox
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/7858787/213794938-f55aef73-ce49-45b5-a388-d16f2435de15.png" />
+</p>
 
 Development tools that aim to make it simple to visualize mail sent by your Rails app directly through your Rails app.
 It works in development and also in a staging environment by using the `Rails.cache` to store the mails.
@@ -34,7 +36,9 @@ config.action_mailer.perform_deliveries = true
 * Send mails
 * Go to http://localhost:3000/gravity_mailbox to see the mails.
 
-<img width="520" alt="image" src="https://user-images.githubusercontent.com/7858787/206336575-e1455a43-154d-4632-bc80-ecb849e2e224.png">
+<p align="center">
+    <img width="520" alt="image" src="https://user-images.githubusercontent.com/7858787/213796119-a22ac9da-3943-4cd0-95e6-2fb724de999a.png">
+</p>
 
 ## Development
 

lib/gravity_mailbox/templates/gravity_mailbox/mailbox/_mail.html.erb

@@ -1,5 +1,5 @@
 
-<div class="p-4 mail-list-item <%= mail.message_id == params[:id] ? 'selected-mail' : '' %>" data-mail-id="<%= mail.message_id %>">
+<div class="mail-list-item <%= mail.message_id == params[:id] ? 'selected-mail' : '' %>" data-mail-id="<%= mail.message_id %>">
   <div class="level" style="margin-bottom: 12px">
     <div class="level-left" style="width: 80%">
       <span class="has-text-weight-semibold	mail-subject"><%= mail.subject %></span>

lib/gravity_mailbox/templates/gravity_mailbox/mailbox/index.html.erb

@@ -1,5 +1,5 @@
 <% content_for :style do %>
-  body, iframe {
+    body, iframe {
     height: 100vh;
   }
 
@@ -8,6 +8,14 @@
     width: 100%;
   }
 
+  .navbar {
+    background-color: #007bff !important;
+  }
+
+  .navbar-brand > h1 {
+    font-family: 'Righteous', cursive !important;
+  }
+
   .mail-list-column {
     height: 100vh;
     overflow: scroll;
@@ -21,14 +29,42 @@
     font-family: arial, sans-serif;
     color: #000;
     cursor: pointer;
+    width: 100%;
+    text-align: left;
+  }
+
+  .mail-list-item {
+    background-color: #fff!important;
+    padding: 1rem;
+    box-shadow: inset 0 -1px 0 0 rgb(100 121 143 / 12%) !important;
   }
 
-  .selected-mail {
+  .mail-list-item.selected-mail {
     background-color: #ffffff!important;
+    border-left: 8px solid #ed900c;
+   padding-left: calc(1rem - 8px);
   }
 
-  .mail-list-item {
-    background-color: hsl(206deg 27% 96%);
+  .mail-list-item:hover {
+    cursor: pointer !important;
+    border-left: 8px solid lightgrey;
+    padding-left: calc(1rem - 8px);
+  }
+
+  .mail-list-item.selected-mail:hover {
+    border-left: 8px solid #ed900c;
+  }
+
+  #iframe-mail-container {
+    background-color: whitesmoke !important;
+  }
+
+  .dropdown-trigger:hover {
+    cursor: pointer !important;
+  }
+
+  .dropdown-item:hover {
+    background-color: whitesmoke !important;
   }
 <% end %>
 
@@ -67,45 +103,71 @@
       </div>
     </div>
 
-      <% @mails.each_with_index do |mail, index| %>
-        <%= render partial: 'mail', locals: { mail: mail, index: index } %>
-      <% end %>
+    <% @mails.each_with_index do |mail, index| %>
+      <%= render partial: 'mail', locals: { mail: mail, index: index } %>
+    <% end %>
   </div>
   <div class="column pb-0 pt-0 pl-0">
-      <iframe id="iframe-mail-container" seamless name="messageBody" src="<%= params[:id] ? "?part=true&id=#{params[:id]}" : '' %>"></iframe>
+    <iframe id="iframe-mail-container" seamless name="messageBody" src="<%= params[:id] ? "?part=true&id=#{params[:id]}" : '' %>"></iframe>
   </div>
 </div>
 
 <script>
-  function closeAllOtherDropdown(e) {
-      document.querySelectorAll(".dropdown").forEach((dropdown) => {
-          dropdown.classList.remove('is-active');
-      })
-  }
+    function closeAllOtherDropdown(e) {
+        document.querySelectorAll(".dropdown").forEach((dropdown) => {
+            dropdown.classList.remove('is-active');
+        })
+    }
 
-  // Click on mail and change iframe src
-  let mailItems = document.querySelectorAll(".mail-list-item")
-  mailItems.forEach(mailItem => {
-  mailItem.addEventListener("click", () => {
-      document.querySelector("#iframe-mail-container").src = "/gravity_mailbox?part=true&id=" + mailItem.dataset.mailId
-      mailItems.forEach(mailItem => mailItem.classList.remove("selected-mail"))
-      mailItem.classList.add("selected-mail")
+    // Click on mail and change iframe src
+    let mailItems = document.querySelectorAll(".mail-list-item")
+    mailItems.forEach(mailItem => {
+        mailItem.addEventListener("click", () => {
+            document.querySelector("#iframe-mail-container").src = "/gravity_mailbox?part=true&id=" + mailItem.dataset.mailId
+            mailItems.forEach(mailItem => mailItem.classList.remove("selected-mail"))
+            mailItem.classList.add("selected-mail")
+        })
     })
-  })
 
-  // Close all dropdowns if the user clicks outside of them
-  document.addEventListener("click", (e) => {
-    document.querySelectorAll(".dropdown").forEach((dropdown) => {
-        dropdown.classList.remove("is-active")
-    })
-  });
-
-  // Each mail menu dropdown
-  document.querySelectorAll('.dropdown-trigger').forEach((dropdown) => {
-      dropdown.addEventListener('click', function (e) {
-          closeAllOtherDropdown(e)
-          e.target.closest(".dropdown").classList.toggle('is-active');
-          e.stopPropagation();
-      })
+    // Close all dropdowns if the user clicks outside of them
+    document.addEventListener("click", (e) => {
+        document.querySelectorAll(".dropdown").forEach((dropdown) => {
+            dropdown.classList.remove("is-active")
+        })
+    });
+
+    // Each mail menu dropdown
+    document.querySelectorAll('.dropdown-trigger').forEach((dropdown) => {
+        dropdown.addEventListener('click', function (e) {
+            closeAllOtherDropdown(e)
+            e.target.closest(".dropdown").classList.toggle('is-active');
+            e.stopPropagation();
+        })
     })
+
+    function displayAutomaticallyTheFirstEmail() {
+        const mailItems = document.querySelectorAll(".mail-list-item");
+        if (mailItems.length) {
+            const mailItem = mailItems[0];
+            document.querySelector("#iframe-mail-container").src = "/gravity_mailbox?part=true&id=" + mailItem.dataset.mailId;
+            mailItem.classList.add("selected-mail");
+        } else {
+            const iframe = document.querySelector("#iframe-mail-container");
+
+            const iframeBody = iframe.contentDocument.body;
+            if (iframeBody) {
+                const p = document.createElement('p');
+                p.textContent = "No email received yet.";
+                p.style.fontFamily = "sans-serif";
+                p.style.fontSize = "20px";
+                p.style.fontWeight = "100";
+                iframeBody.appendChild(p);
+                iframeBody.style.display = "flex";
+                iframeBody.style.justifyContent = "center";
+                iframeBody.style.alignItems = "center";
+            }
+        }
+    }
+
+    document.addEventListener("DOMContentLoaded", displayAutomaticallyTheFirstEmail);
 </script>

lib/gravity_mailbox/templates/layouts/application.html.erb

@@ -3,14 +3,16 @@
 <head>
   <meta name="viewport" content="width=device-width" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
-
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
   <style>
     <%= yield :style %>
   </style>
 </head>
 <body>
-  <%= yield %>
-  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+<%= yield %>
+<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 </body>
 </html>