refactor user modal (#137)

caley-io · Mar 16, 2024 · 5785108 · 5785108
1 parent 502978c
commit 5785108
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 170 deletions.
diff --git a/app/javascript/controllers/root_controller.js b/app/javascript/controllers/root_controller.js
@@ -2,10 +2,9 @@ import { Controller } from "@hotwired/stimulus"
 
 // TODO: Refactor this entire file
 export default class extends Controller {
-  static targets = [ "filter", "listItem", "commandPalette", "commandPaletteItem" ]
+  static targets = [ "filter", "listItem", "commandPalette", "commandPaletteItem", "userModal", "userSettingsModal" ]
   connect() {
     this.commandPaletteOpen =
-    this.userModalOpen =
     this.userSettingsModalOpen = false
 
     this.filterIndex =
@@ -19,11 +18,11 @@ export default class extends Controller {
   // Command Palette
   openCommandPalette() {
     this.commandPaletteTarget.classList.remove('hidden')
+    this.highlightPaletteItem()
     this.commandPaletteOpen = true
   }
 
   closeCommandPalette() {
-    console.log("closing command palette")
     this.commandPaletteTarget.classList.add('hidden')
     this.commandPaletteOpen = false
   }
@@ -132,12 +131,16 @@ export default class extends Controller {
 
     if (event.key === 'Escape') {
       this.closeCommandPalette()
+      this.closeUserModal()
     }
 
     // "/"
     if (event.keyCode === 191) {
-      this.openCommandPalette(true)
-      this.highlightPaletteItem()
+      if (this.userModalOpen || this.commandPaletteOpen) {
+        event.preventDefault()
+      } else {
+        this.openCommandPalette()
+      }
     }
   }
 }
diff --git a/app/javascript/controllers/user_controller.js b/app/javascript/controllers/user_controller.js
diff --git a/app/javascript/controllers/user_dropdown_controller.js b/app/javascript/controllers/user_dropdown_controller.js
@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class UserController extends Controller {
+  static targets = [ "dropdown" ]
+
+  toggleDropdown(event) {
+    event.preventDefault()
+    this.dropdownTarget.classList.toggle('hidden')
+  }
+}
diff --git a/app/views/email_threads/_medium_profile_placeholder.html.erb b/app/views/email_threads/_medium_profile_placeholder.html.erb
@@ -1,18 +1,18 @@
 <% case color %>
   <% when :blue %>
-    <div class="flex items-center justify-center w-[22px] h-[22px] bg-sky-200 rounded-full">
+    <div class="flex items-center justify-center w-[22px] h-[22px] bg-sky-200 rounded-lg">
       <p class="text-xs font-medium text-sky-800"><%= name %></p>
     </div>
   <% when :green %>
-    <div class="flex items-center justify-center w-[22px] h-[22px] bg-emerald-200 rounded-full">
+    <div class="flex items-center justify-center w-[22px] h-[22px] bg-emerald-200 rounded-lg">
       <p class="text-xs  text-emerald-800"><%= name %></p>
     </div>
   <% when :red %>
     <div class="flex items-center justify-center w-[22px] h-[22px] bg-red-200 rounded-lg">
       <p class="text-xs font-medium text-red-800"><%= name %></p>
     </div>
   <% else %>
-    <div class="flex items-center justify-center w-[22px] h-[22px] bg-red-200 rounded-full">
+    <div class="flex items-center justify-center w-[22px] h-[22px] bg-amber-200 rounded-lg">
       <p class="text-xs font-medium text-red-800"><%= name %></p>
     </div>
 <% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -30,19 +30,12 @@
 
   <body data-controller="theme" data-theme-target="body">
     <div data-controller="root" class="min-h-screen dark:text-white bg-white dark:bg-background-dark">
-      <!-- TODO: Clean this mess up -->
+      <!-- TODO: Remove menu controller -->
       <div data-controller="menu">
-        <%= render 'shared/navigation/floating_menu' %>
-
-        <div data-controller="user" data-action="keydown@window->user#userModalKeydown">
-          <%= render 'shared/modals/user' %>
-        </div>
-
         <%= render 'shared/command_palette' %>
-
-        <div>
-          <%= render 'shared/modals/settings' %>
-        </div>
+        <%= render 'shared/navigation/floating_menu' %>
+        <%= render 'shared/modals/settings' %>
+        <%= render 'shared/modals/user' %>
       </div>
 
       <div class="fixed w-screen bg-white dark:bg-background-dark">

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -1,5 +1,4 @@
-<nav data-controller="navbar"
-    class="flex items-center justify-between w-full p-1 border-b dark:border-neutral-800">
+<nav class="flex items-center justify-between w-full p-1 border-b dark:border-neutral-800">
   <div class="flex items-center gap-x-1">
     <% @filters.each do |filter| %>
       <div data-root-target="filter"
@@ -12,4 +11,11 @@
       </div>
     <% end %>
   </div>
+  <div data-controller="user-dropdown">
+    <div data-action="click->user-dropdown#toggleDropdown"
+         class="flex items-center justify-center w-8 h-8 text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer">
+      <%= render 'medium_profile_placeholder', color: :yellow, name: current_user.first_name.first %>
+    </div>
+    <%= render 'shared/modals/user' %>
+  </div>
 </nav>
diff --git a/app/views/shared/modals/_user.html.erb b/app/views/shared/modals/_user.html.erb
@@ -1,66 +1,17 @@
-<div data-menu-target="userModal"
-     data-user-target="userModal"
-     class="hidden absolute bottom-16">
-  <div class="flex justify-center w-screen">
-    <div class="w-[500px] dark:bg-neutral-800/80 backdrop-filter backdrop-blur border border-neutral-200 dark:border-neutral-700/70 rounded-xl shadow-md">
-      <div class="">
-        <div class="p-0.5 border-b border-neutral-200 dark:border-neutral-700/70">
-          <div data-user-target="userModalItem"
-               data-action="click->menu#openUserSettingsModal"
-               class="flex items-center justify-between p-2 text-neutral-600 dark:text-neutral-400 hover:text-black hover:bg-neutral-200 dark:bg-neutral-700/50 dark:hover:bg-neutral-700/50 rounded-lg">
-            <div class="flex items-center gap-x-1.5">
-              <div class="flex items-center justify-center w-5 h-5 bg-black dark:bg-white rounded-full">
-                <p class="text-xs font-medium text-white dark:text-neutral-900"><%= current_user.first_name.first %></p>
-              </div>
-              <p class="text-xs font-medium"><%= current_user.full_name %></p>
-            </div>
-            <div>
-              <p class="text-xs font-medium text-neutral-500"><%= current_user.email_servers.count %> accounts</p>
-            </div>
-          </div>
-        </div>
-        <div class="p-0.5 border-b border-neutral-200 dark:border-neutral-700/70">
-          <div class="flex flex-col gap-y-0.5">
-            <% current_user.email_servers.each do |server| %>
-              <div data-user-target="userModalItem"
-                   class="flex items-center justify-between p-2 text-neutral-600 dark:text-neutral-400 hover:text-black hover:bg-neutral-200 dark:bg-neutral-700/50 dark:hover:bg-neutral-700/50 rounded-lg">
-                <div class="flex items-center gap-x-1.5">
-                  <div class="flex items-center justify-center w-5 h-5 bg-indigo-300 rounded-full">
-                    <p class="text-xs font-medium text-neutral-900"><%= server.email.first.capitalize %></p>
-                  </div>
-                  <p class="text-xs font-medium"><%= server.email %></p>
-                </div>
-                <div>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 5v.01m3.502.928-.005.01m2.57 2.554-.01.005m.948 3.497h-.01m-.928 3.502-.009-.005m-2.555 2.57-.005-.01M12 19v.01m-3.498-.947-.005.009m-2.555-2.57-.008.005m-.929-3.502h-.01m.947-3.498-.008-.005m2.568-2.555-.005-.008"></path>
-                  </svg>
-                </div>
-              </div>
-            <% end %>
-          </div>
-        </div>
-        <div class="flex flex-col gap-y-0.5 p-0.5">
-          <div data-user-target="userModalItem" class="px-2 py-2.5 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/50 rounded-lg">
-            <div>
-              <p class="text-xs font-medium">Create workspace</p>
-            </div>
-          </div>
-          <div data-user-target="userModalItem"
-               class="px-2 py-2.5 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/50 rounded-lg">
-            <div>
-              <p class="text-xs font-medium">Add account</p>
-            </div>
+<div data-user-dropdown-target="dropdown"
+     class="hidden absolute top-12 right-2 z-20">
+  <div class="flex justify-end w-screen">
+    <div data-root-target="user-settings" class="flex flex-col gap-y-0.5 p-0.5 dark:bg-neutral-800/80 backdrop-filter backdrop-blur border border-neutral-200 dark:border-neutral-700/70 rounded-xl shadow-md">
+      <div class="w-44 p-2 text-neutral-600 dark:text-neutral-400 hover:text-black hover:bg-neutral-200 dark:bg-neutral-700/50 dark:hover:bg-neutral-700/50 rounded-lg">
+        <p class="text-xs font-medium text-neutral-400 dark:text-neutral-200">Settings</p>
+      </div>
+      <%= button_to destroy_user_session_path, class: 'w-full', method: :delete do %>
+        <div class="logout-btn flex items-center justify-between w-44 px-2 py-2.5 hover:bg-red-200/20 dark:hover:bg-red-200/10 rounded-lg">
+          <div>
+            <p class="text-xs font-medium text-red-400 dark:text-red-200">Log out</p>
           </div>
-          <%= button_to destroy_user_session_path, class: 'w-full', method: :delete do %>
-            <div data-user-target="userModalItem"
-                 class="logout-btn flex items-center justify-between px-2 py-2.5 hover:bg-red-200/20 dark:hover:bg-red-200/10 rounded-lg">
-              <div>
-                <p class="text-xs font-medium text-red-400 dark:text-red-200">Log out</p>
-              </div>
-            </div>
-          <% end %>
         </div>
-      </div>
+      <% end %>
     </div>
   </div>
-</div>
+</div>
diff --git a/app/views/shared/navigation/_floating_menu.html.erb b/app/views/shared/navigation/_floating_menu.html.erb
@@ -1,12 +1,13 @@
 <div class="fixed bottom-3">
   <div class="flex justify-center w-screen">
     <div class="flex items-center gap-x-1 p-1 dark:bg-neutral-800/80 backdrop-filter backdrop-blur border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg">
-      <div data-action="click->menu#toggleUserModal"
-           class="flex items-center justify-center w-8 h-8 text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer">
-        <div class="flex items-center justify-center w-6 h-6 bg-indigo-200 dark:bg-sky-200 rounded-full">
-          <p class="text-neutral-900 text-xs font-medium"><%= current_user.first_name.first %></p>
+      <%= link_to root_path do %>
+        <div class="flex items-center justify-center w-8 h-8 text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 10.75v4a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4v-4m-14 0v-1.5a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v1.5m-14 0h4m10 0h-4m-6 0h6m-6 0a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5"></path>
+          </svg>
         </div>
-      </div>
+      <% end %>
       <div data-action="click->menu#toggleSearchModal"
            class="flex items-center justify-center w-8 h-8 text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer"
       >