Merge pull request #989 from sgmap/fix-929

[Fix #929] Add a current-tab only print feature

app/assets/javascripts/new_design/dossier.js

@@ -0,0 +1,8 @@
+$(document).on("click", "body", function () {
+  $(".print-menu").removeClass("open fade-in-down");
+});
+
+TPS.togglePrintMenu = function(event) {
+  event.stopPropagation();
+  $(".print-menu").toggleClass("open fade-in-down");
+}

app/assets/stylesheets/new_design/backoffice.scss

@@ -30,3 +30,58 @@
   font-size: 14px;
   line-height: 20px;
 }
+
+.print-menu-opener {
+  position: relative;
+}
+
+.print-menu {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 45px;
+  font-size: 14px;
+  background: #FFFFFF;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  border: 1px solid $border-grey;
+  min-width: 270px;
+  max-width: 340px;
+  z-index: 20;
+
+  &.open {
+    display: block;
+  }
+
+  li {
+    border-bottom: 1px solid $border-grey;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .menu-item {
+      align-items: center;
+      padding: 14px;
+      color: $grey;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      img {
+        margin-right: 14px;
+      }
+    }
+
+    .menu-link {
+      display: flex;
+      color: $black;
+
+      &:hover {
+        background: $light-grey;
+      }
+    }
+  }
+}
+
+.print-header {
+  display: none;
+}

app/assets/stylesheets/new_design/buttons.scss

@@ -104,6 +104,13 @@
       font-weight: bold;
     }
 
+    &.icon-only {
+      &::after {
+        margin-left: 2px;
+        color: $blue;
+      }
+    }
+
     .dropdown-content {
       display: none;
     }

app/assets/stylesheets/new_design/new_application.scss

@@ -7,4 +7,4 @@
 // = require select2
 // = require typeahead
 // = require_tree .
-// = stub "print"
+// = stub ./print.scss

app/assets/stylesheets/new_design/print.scss

@@ -1,6 +1,20 @@
 @import "colors";
 @import "fonts";
 
+.new-header,
+.backoffice-header,
+footer {
+  display: none;
+}
+
+.print-header {
+  display: block;
+  margin-top: 30px;
+  font-size: 30px;
+  line-height: 50px;
+  font-weight: bold;
+}
+
 body {
   font-family: "Muli";
 }

app/views/layouts/new_application.html.haml

@@ -14,7 +14,7 @@
     = favicon_link_tag(image_url("favicons/96x96.png"), type: "image/png", sizes: "96x96")
 
     = stylesheet_link_tag "new_design/new_application", media: "all", "data-turbolinks-track": "reload"
-    = stylesheet_link_tag "print", media: "print", "data-turbolinks-track": true
+    = stylesheet_link_tag "new_design/print", media: "print", "data-turbolinks-track": true
 
   %body
     .page-wrapper

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

@@ -7,8 +7,14 @@
         %li
           = "Dossier nº #{dossier.id}"
       .mixed-buttons-bar
-        = link_to print_dossier_path(dossier.procedure, dossier), target: "_blank", class: "button icon-only" do
+        .button.dropdown.icon-only.print-menu-opener{ onclick: "javascript:TPS.togglePrintMenu(event);" }
-          .icon.printer>
+          .icon.printer
+          %ul.print-menu
+            %li
+              = link_to "Tout le dossier", print_dossier_path(dossier.procedure, dossier), target: "_blank", class: "menu-item menu-link"
+            %li
+              = link_to "Uniquement cet onglet", "#", onclick: "TPS.togglePrintMenu; 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 }
     %ul.tabs
@@ -29,3 +35,9 @@
         - if notifications_summary[:messagerie]
           %span.notifications{ 'aria-label': 'notifications' }
         = link_to "Messagerie", messagerie_dossier_path(dossier.procedure, dossier)
+
+.container
+  .print-header
+    = dossier.procedure.libelle.truncate_words(10)
+    >
+    = "Dossier nº #{dossier.id} (#{dossier.statut})"