feature/Use tooltips to denote current page

Author: LewisYoul

app/controllers/folders_controller.rb

@@ -1,6 +1,4 @@
 class FoldersController < ApplicationController
-  # layout 'application_mid_width', only: :index
-
   MINIMUM_FOLDERS = 1.freeze
 
   before_action :authenticate_user!
@@ -17,12 +15,9 @@ def popover
 
   def index
     @snippets = Snippet.last(5)
-    @page_title = 'Folders'
 
     @folders = current_user.folders
-
     @folders = @folders.where('name ILIKE ?', "%#{params[:search]}%") if params[:search].present?
-
     @folders = @folders
       .order(name: :asc)
       .paginate(page: params[:page] || 1, per_page: 30)

app/controllers/home_controller.rb

@@ -5,7 +5,6 @@ def index
     @languages = Language.order(name: :asc).to_json
 
     if user_signed_in?
-      @page_title = 'Feed'
       @snippets = current_user
         .snippets_for_feed
         .includes(:language)
@@ -31,8 +30,6 @@ def index
   end
 
   def connect
-    @page_title = 'Connect'
-
     @users = if user_signed_in?
       current_user.not_following
       .paginate(page: params[:page] || 1, per_page: 16)

app/controllers/notifications_controller.rb

@@ -2,7 +2,6 @@ class NotificationsController < ApplicationController
   after_action -> { current_user.mark_notifications_as_read }, only: :index
 
   def index
-    @page_title = 'Notifications'
     @notifications = current_user.notifications.order(created_at: :desc)
   end
 end

app/controllers/registrations_controller.rb

@@ -33,6 +33,7 @@ def create
   end
 
   def edit
+    @page_title = 'Account'
     @tab_id = params[:tab_id] || :account
     super
   end

app/controllers/snippets_controller.rb

@@ -2,7 +2,6 @@ class SnippetsController < ApplicationController
   before_action :authenticate_user!, except: :show
 
   def index
-    @page_title = "Snippets"
     @user = User.find_by(id: params[:user_id]) || current_user
     @display_popover = true
     @snippets = @user.filed_snippets.includes(:user, :folders)

app/javascript/controllers/tooltip_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from 'stimulus';
+import { events } from '../mixins/events'
+
+export default class extends Controller {
+	static targets = ['tooltip']
+
+	initialize() {
+	  events(this);
+	}
+
+	display() {
+	  this.tooltipTarget.classList.remove('hidden')
+	  this.emitEvent('hide-tooltip')
+	}
+
+	hide() {
+	  this.tooltipTarget.classList.add('hidden')
+	  this.emitEvent('display-tooltip')
+	}
+}

app/javascript/controllers/tooltip_listener_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+	static targets = ['tooltip']
+
+	display() {
+	  this.tooltipTarget.classList.remove('hidden')
+	}
+
+	hide() {
+	  this.tooltipTarget.classList.add('hidden')
+	}
+}

app/views/layouts/application.html.erb

@@ -62,7 +62,6 @@
           </main>
           <aside class="xl:block xl:col-span-3">
             <div class="sticky position-sticky--topbar space-y-4">
-
               <% if user_signed_in? %>
                 <%= 
                   button_tag(

app/views/shared/_nav_item.html.erb

@@ -3,9 +3,22 @@
 <% color = active ? 'text-cyan' : 'text-gray-400 hover:text-cyan transition' %>
 <% css_class = active ? 'active' : 'inactive' %>
 
-<%= link_to(path, class: 'relative px-3') do %>
+<%= link_to(path, class: 'relative px-3', data: { controller: 'tooltip', action: 'mouseenter->tooltip#display mouseleave->tooltip#hide' }) do %>
   <%= render partial: "shared/icons/#{icon}", locals: { width: 7, height: 7, color: color } %>
   <% if path == notifications_path %>
     <%= notification_counter(current_user) %>
   <% end %>
+
+  <div 
+    class="hidden shadow-sm transition px-2 absolute text-sm bg-white text-cyan transform rounded-sm m-auto -bottom-6 left-1/2 -translate-x-2/4"
+    data-tooltip-target="tooltip"
+  >
+    <span><%= page_title %></span>
+  </div>
+
+  <% if active %>
+    <div data-controller="tooltip-listener" data-tooltip-listener-target="tooltip" data-action="hide-tooltip@window->tooltip-listener#hide display-tooltip@window->tooltip-listener#display" class="transition shadow-sm px-2 absolute text-sm bg-white text-cyan transform rounded-sm m-auto -bottom-6 left-1/2 -translate-x-2/4">
+      <span><%= page_title %></span>
+    </div>
+  <% end %>
 <% end %>

app/views/shared/_topbar.html.erb

@@ -7,13 +7,19 @@
         <% end %>
       </div>
 
-      <div class="flex v-center">
+      <div class="flex v-center relative">
         <% if user_signed_in? %>
-          <%= render partial: 'shared/nav_item', locals: { path: root_path, icon: 'home' } %>
-          <%= render partial: 'shared/nav_item', locals: { path: folders_path, icon: 'folder' } %>
-          <%= render partial: 'shared/nav_item', locals: { path: snippets_path, icon: 'snippet' } %>
-          <%= render partial: 'shared/nav_item', locals: { path: notifications_path, icon: 'bell' } %>
-          <%= render partial: 'shared/nav_item', locals: { path: connect_path, icon: 'connect' } %>
+          <%= render partial: 'shared/nav_item', locals: { path: root_path, page_title: 'Feed', icon: 'home' } %>
+          <%= render partial: 'shared/nav_item', locals: { path: folders_path, page_title: 'Folders', icon: 'folder' } %>
+          <%= render partial: 'shared/nav_item', locals: { path: snippets_path, page_title: 'Snippets', icon: 'snippet' } %>
+          <%= render partial: 'shared/nav_item', locals: { path: notifications_path, page_title: 'Notifications', icon: 'bell' } %>
+          <%= render partial: 'shared/nav_item', locals: { path: connect_path, page_title: 'Connect', icon: 'connect' } %>
+        <% end %>
+        
+        <% if @page_title %>
+          <div data-controller="tooltip-listener" data-tooltip-listener-target="tooltip" data-action="hide-tooltip@window->tooltip-listener#hide display-tooltip@window->tooltip-listener#display" class="transition shadow-sm px-2 absolute text-sm bg-white text-cyan transform rounded-sm m-auto -bottom-2.5 left-1/2 -translate-x-2/4">
+            <span><%= @page_title %></span>
+          </div>
         <% end %>
       </div>