Merge pull request #2688 from betagouv/wip/refactor-dropdowns

dropdown: refactor to make the button an actual button

app/assets/stylesheets/new_design/buttons.scss

@@ -6,6 +6,7 @@
   padding: 8px 16px;
   border-radius: 30px;
   border: 1px solid $border-grey;
+  font-family: "Muli";
   font-size: 14px;
   line-height: 20px;
   background-color: #FFFFFF;
@@ -113,9 +114,20 @@
     margin-right: $default-spacer;
   }
 
-  &.dropdown {
+  &.icon-only {
+    padding: 9px 16px;
+
+    .icon {
+      margin-right: 0;
+    }
+  }
+}
+
+.dropdown {
+  display: inline-block;
   position: relative;
 
+  .dropdown-button {
     &::after {
       content: "▾";
       margin-left: $default-spacer;
@@ -128,25 +140,15 @@
         color: $blue;
       }
     }
+  }
 
   .dropdown-content {
     display: none;
   }
 
-    &.open {
-      .dropdown-content {
+  &.open .dropdown-content {
     display: block;
   }
-    }
-  }
-
-  &.icon-only {
-    padding: 9px 16px;
-
-    .icon {
-      margin-right: 0;
-    }
-  }
 }
 
 .dropdown-content {

app/assets/stylesheets/new_design/new_header.scss

@@ -159,6 +159,19 @@ $landing-breakpoint: 1040px;
   }
 }
 
+.header-menu-button {
+  border: none;
+  padding: 0;
+
+  &:hover {
+    background: none;
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
 .header-menu {
   display: none;
   position: absolute;

app/javascript/new_design/buttons.js

@@ -1,13 +0,0 @@
-import $ from 'jquery';
-
-$(document).on('click', 'body', () => {
-  $('.button.dropdown').removeClass('open');
-});
-
-$(document).on('click', '.button.dropdown', event => {
-  event.stopPropagation();
-  const $target = $(event.target);
-  if ($target.hasClass('button', 'dropdown')) {
-    $target.toggleClass('open');
-  }
-});

app/javascript/new_design/dossier.js

@@ -1,10 +0,0 @@
-import $ from 'jquery';
-
-$(document).on('click', 'body', () => {
-  $('.print-menu').removeClass('open fade-in-down');
-});
-
-export function togglePrintMenu(event) {
-  event.stopPropagation();
-  $('.print-menu').toggleClass('open fade-in-down');
-}

app/javascript/new_design/dropdown.js

@@ -0,0 +1,19 @@
+import Rails from 'rails-ujs';
+
+const { delegate } = Rails;
+
+delegate(document, 'body', 'click', event => {
+  if (!event.target.closest('.dropdown')) {
+    [...document.querySelectorAll('.dropdown')].forEach(element =>
+      element.classList.remove('open', 'fade-in-down')
+    );
+  }
+});
+
+delegate(document, '.dropdown-button', 'click', event => {
+  event.stopPropagation();
+  const parent = event.target.closest('.dropdown-button').parentElement;
+  if (parent.classList.contains('dropdown')) {
+    parent.classList.toggle('open');
+  }
+});

app/javascript/new_design/header.js

@@ -1,10 +0,0 @@
-import $ from 'jquery';
-
-$(document).on('click', 'body', () => {
-  $('.header-menu').removeClass('open fade-in-down');
-});
-
-export function toggleHeaderMenu(event) {
-  event.stopPropagation();
-  $('.header-menu').toggleClass('open fade-in-down');
-}

app/javascript/packs/application.js

@@ -13,7 +13,7 @@ import '../shared/autocomplete';
 import '../shared/remote-input';
 
 import '../new_design/spinner';
-import '../new_design/buttons';
+import '../new_design/dropdown';
 import '../new_design/form-validation';
 import '../new_design/carto';
 import '../new_design/select2';
@@ -21,8 +21,6 @@ import '../new_design/select2';
 import '../new_design/champs/linked-drop-down-list';
 
 import { toggleCondidentielExplanation } from '../new_design/avis';
-import { togglePrintMenu } from '../new_design/dossier';
-import { toggleHeaderMenu } from '../new_design/header';
 import { scrollMessagerie } from '../new_design/messagerie';
 import { showMotivation, motivationCancel } from '../new_design/state-button';
 import { toggleChart } from '../new_design/toggle-chart';
@@ -30,8 +28,6 @@ import { toggleChart } from '../new_design/toggle-chart';
 // This is the global application namespace where we expose helpers used from rails views
 const DS = {
   toggleCondidentielExplanation,
-  togglePrintMenu,
-  toggleHeaderMenu,
   scrollMessagerie,
   showMotivation,
   motivationCancel,

app/views/invites/_dropdown.html.haml

@@ -1,4 +1,5 @@
-%span.button.dropdown.invite-user-action
+%span.dropdown.invite-user-action
+  %button.button.dropdown-button
     %span.icon.person
     - if dossier.invites.count > 0
       Voir les personnes invitées

app/views/layouts/_new_header.haml

@@ -57,9 +57,10 @@
 
       - if gestionnaire_signed_in? || user_signed_in?
         %li
-          .header-menu-opener
-            = image_tag "icons/account-circle.svg", onclick: "javascript:DS.toggleHeaderMenu(event);", title: "Mon compte"
-            %ul.header-menu
+          %span.dropdown.header-menu-opener
+            %button.button.dropdown-button.header-menu-button
+              = image_tag "icons/account-circle.svg", title: "Mon compte"
+            %ul.header-menu.dropdown-content
               %li
                 .menu-item{ title: current_email }
                   = current_email

app/views/new_gestionnaire/dossiers/_header.html.haml

@@ -7,13 +7,14 @@
         %li
           = "Dossier nº #{dossier.id}"
       .mixed-buttons-bar
-        .button.dropdown.icon-only.print-menu-opener{ onclick: "javascript:DS.togglePrintMenu(event);" }
+        %span.dropdown.print-menu-opener
+          %button.button.dropdown-button.icon-only
             %span.icon.printer
-          %ul.print-menu
+          %ul.print-menu.dropdown-content
             %li
               = link_to "Tout le dossier", print_gestionnaire_dossier_path(dossier.procedure, dossier), target: "_blank", class: "menu-item menu-link"
             %li
-              = link_to "Uniquement cet onglet", "#", onclick: "DS.togglePrintMenu; window.print()", class: "menu-item menu-link"
+              = link_to "Uniquement cet onglet", "#", onclick: "window.print()", class: "menu-item menu-link"
 
         = render partial: "new_gestionnaire/procedures/dossier_actions", locals: { procedure: dossier.procedure, dossier: dossier, dossier_is_followed: current_gestionnaire&.follow?(dossier) }
         = render partial: "state_button", locals: { dossier: dossier }

app/views/new_gestionnaire/dossiers/_state_button.html.haml

@@ -1,5 +1,6 @@
 - if dossier.en_construction? || dossier.en_instruction?
-  %span.button.primary.dropdown
+  %span.dropdown
+    %button.button.primary.dropdown-button
       = dossier.decorate.display_state
     .dropdown-content.fade-in-down
       %ul.dropdown-items
@@ -49,7 +50,8 @@
 
 - else
   - if dossier.motivation.present? || dossier.attestation.present?
-    %span.button.dropdown{ class: button_or_label_class(dossier) }
+    %span.dropdown
+      %button.button.dropdown-button{ class: button_or_label_class(dossier) }
         = dossier.statut
       .dropdown-content.fade-in-down.terminated
         - if dossier.motivation.present?

app/views/new_gestionnaire/procedures/_download_dossiers.html.haml

@@ -1,5 +1,6 @@
 - if procedure.dossiers.state_not_brouillon.any?
-  %span.button.dropdown
+  %span.dropdown
+    %button.button.dropdown-button
       Télécharger tous les dossiers
     .dropdown-content.fade-in-down
       %ul.dropdown-items

app/views/new_gestionnaire/procedures/show.html.haml

@@ -43,7 +43,8 @@
 
   .container
     - if @dossiers.present? || @current_filters.count > 0
-      %span.button.dropdown
+      %span.dropdown
+        %button.button.dropdown-button
           Filtrer
         .dropdown-content.left-aligned.fade-in-down
           = form_tag add_filter_gestionnaire_procedure_path(@procedure), method: :post, class: 'dropdown-form large' do
@@ -78,7 +79,8 @@
             = render partial: "header_field", locals: { field: { "label" => "Statut", "table" => "self", "column" => "state" },  classname: "status-col" }
 
             %th.follow-col
-              %span.button.dropdown
+              %span.dropdown
+                %button.button.dropdown-button
                   Personnaliser
                 .dropdown-content.fade-in-down
                   = form_tag update_displayed_fields_gestionnaire_procedure_path(@procedure), method: :patch, class: 'dropdown-form columns-form' do

app/views/shared/dossiers/_pieces_jointes.html.haml

@@ -13,7 +13,8 @@
             = link_to "Télécharger", pj.content_url, class: "link", target: :blank
             - if pjs.present?
               %br
-              %span.button.dropdown
+              %span.dropdown
+                %button.button.dropdown-button
                   anciennes versions
                 .dropdown-content.fade-in-down
                   %ul.dropdown-items

spec/features/new_gestionnaire/procedure_filters_spec.rb

@@ -82,23 +82,23 @@ feature "procedure filters" do
   end
 
   def add_filter(column_name, filter_value)
-    find(:xpath, "//span[contains(text(), 'Filtrer')]").click
+    click_on 'Filtrer'
     select column_name, from: "Colonne"
     fill_in "Valeur", with: filter_value
     click_button "Ajouter le filtre"
   end
 
   def add_column(column_name)
-    find(:xpath, "//span[contains(text(), 'Personnaliser')]").click
+    click_on 'Personnaliser'
     find("span.select2-container").click
     find(:xpath, "//li[text()='#{column_name}']").click
     click_button "Enregistrer"
   end
 
   def remove_column(column_name)
-    find(:xpath, "//span[contains(text(), 'Personnaliser')]").click
+    click_on 'Personnaliser'
     find(:xpath, "//li[contains(@title, '#{column_name}')]/span[contains(text(), '×')]").click
-    find(:xpath, "//span[contains(text(), 'Personnaliser')]//span[contains(@class, 'select2-container')]").click
+    find(:xpath, "//form[contains(@class, 'columns-form')]//span[contains(@class, 'select2-container')]").click
     click_button "Enregistrer"
   end
 end

spec/features/new_user/invite_spec.rb

@@ -178,7 +178,7 @@ feature 'Invitations' do
   end
 
   def send_invite_to(invited_email)
-    find('.button.invite-user-action').click()
+    click_on "Inviter une personne à modifier ce dossier"
     expect(page).to have_button("Envoyer une invitation", visible: true)
 
     fill_in 'invite_email', with: invited_email