jlecour
/
EvoBal
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP: mise en place de template et d'interactions avec Stimulus

This commit is contained in:
Jérémy Lecour 2021-02-09 14:26:05 +01:00 committed by Jérémy Lecour
parent 69b5e3e542
commit ee9c40391f
8 changed files with 59 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/controllers/hello_controller.js
View File

@ -1,7 +0,0 @@
import { Controller } from "stimulus"
export default class extends Controller {
connect() {
this.element.textContent = "Hello World!"
}
}

25
app/javascript/controllers/main_nav_controller.js Normal file
View File

@ -0,0 +1,25 @@
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "userButton", "userMenu" ]
toggle_user_menu () {
if (this.userButtonTarget.getAttribute('aria-expanded') == "false") {
// Show
this.userButtonTargets.forEach((element, index) => {
element.setAttribute('aria-expanded', 'true');
})
this.userMenuTargets.forEach((element, index) => {
element.classList.remove("hidden")
})
} else {
// Hide
this.userButtonTargets.forEach((element, index) => {
element.setAttribute('aria-expanded', 'false');
})
this.userMenuTargets.forEach((element, index) => {
element.classList.add("hidden")
})
}
}
}

16
app/javascript/stylesheets/application.scss
View File

@ -1,3 +1,19 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@layer base {
h1 {
@apply text-3xl font-bold leading-tight text-gray-900;
}
}
@layer components {
.nav-tab--current {
@apply bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium;
}
.nav-tab {
@apply text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium;
}
}

4
app/views/emails/index.html.erb
View File

@ -1,5 +1,5 @@
<% content_for :main_title do %>
Emails
<% content_for :main_header do %>
<h1>Emails</h1>
<% end %>
<p id="notice"><%= notice %></p>

4
app/views/emails/show.html.erb
View File

@ -1,5 +1,5 @@
<% content_for :main_title do %>
Email #
<% content_for :main_header do %>
<h1>Email #</h1>
<% end %>
<p id="notice"><%= notice %></p>

4
app/views/filters/index.html.erb
View File

@ -1,5 +1,5 @@
<% content_for :main_title do %>
Filters
<% content_for :main_header do %>
<h1>Filters</h1>
<% end %>
<p id="notice"><%= notice %></p>

4
app/views/filters/show.html.erb
View File

@ -1,5 +1,5 @@
<% content_for :main_title do %>
Filter #<%= @filter.id %>
<% content_for :main_header do %>
<h1>Filter #<%= @filter.id %></h1>
<% end %>
<p id="notice"><%= notice %></p>

22
app/views/layouts/application.html.erb
View File

@ -13,7 +13,7 @@
<body class="bg-gray-100">
<div>
<nav class="bg-gray-800">
<nav class="bg-gray-800" data-controller="main-nav">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
@ -23,8 +23,8 @@
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<%= link_to "Emails", emails_path, class: "#{ current_page?(emails_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-sm font-medium" %>
<%= link_to "Filters", filters_path, class: "#{ current_page?(filters_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-sm font-medium" %>
<%= link_to "Emails", emails_path, class: (current_page?(emails_path) ? "nav-tab--current" : "nav-tab") %>
<%= link_to "Filters", filters_path, class: (current_page?(filters_path) ? "nav-tab--current" : "nav-tab") %>
</div>
</div>
</div>
@ -34,7 +34,7 @@
<!-- Profile dropdown -->
<div class="ml-3 relative">
<div>
<button class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-haspopup="true">
<button id="user-menu-button" data-action="main-nav#toggle_user_menu focusout->main-nav#toggle_user_menu" data-main-nav-target="userButton" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-haspopup="true" aria-expanded="false" aria-controls="user-menu">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
@ -49,7 +49,7 @@
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<div data-main-nav-target="userMenu" id="user-menu" class="hidden origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button">
<%= button_to "Sign out", destroy_user_session_path, class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", role: "menuitem", method: :delete, data: { confirm: 'Are you sure?', "turbo-frame": "_top" } %>
</div>
</div>
@ -57,7 +57,7 @@
</div>
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<button data-action="main-nav#toggle_user_menu" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">Open main menu</span>
<!--
Heroicon name: outline/menu
@ -85,11 +85,11 @@
Open: "block", closed: "hidden"
-->
<div class="hidden md:hidden">
<div data-main-nav-target="userMenu" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-whites" -->
<%= link_to "Emails", emails_path, class: "#{ current_page?(emails_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-base font-medium" %>
<%= link_to "Filters", filters_path, class: "#{ current_page?(filters_path) ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white"} px-3 py-2 rounded-md text-base font-medium" %>
<%= link_to "Emails", emails_path, class: (current_page?(emails_path) ? "nav-tab--current" : "nav-tab") %>
<%= link_to "Filters", filters_path, class: (current_page?(filters_path) ? "nav-tab--current" : "nav-tab") %>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
@ -110,9 +110,7 @@
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold leading-tight text-gray-900">
<%= yield :main_title %>
</h1>
<%= yield :main_header %>
</div>
</header>
<main>