diff --git a/app/assets/javascripts/new_design/dossier.js b/app/assets/javascripts/new_design/dossier.js new file mode 100644 index 000000000..64b8e3d44 --- /dev/null +++ b/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"); +} diff --git a/app/assets/stylesheets/new_design/backoffice.scss b/app/assets/stylesheets/new_design/backoffice.scss index 2bb195260..3d9751181 100644 --- a/app/assets/stylesheets/new_design/backoffice.scss +++ b/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; +} diff --git a/app/assets/stylesheets/new_design/buttons.scss b/app/assets/stylesheets/new_design/buttons.scss index 64ded5b23..78be9682c 100644 --- a/app/assets/stylesheets/new_design/buttons.scss +++ b/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; } diff --git a/app/assets/stylesheets/new_design/new_application.scss b/app/assets/stylesheets/new_design/new_application.scss index 2069bcfbe..35fa4e2eb 100644 --- a/app/assets/stylesheets/new_design/new_application.scss +++ b/app/assets/stylesheets/new_design/new_application.scss @@ -7,4 +7,4 @@ // = require select2 // = require typeahead // = require_tree . -// = stub "print" +// = stub ./print.scss diff --git a/app/assets/stylesheets/new_design/print.scss b/app/assets/stylesheets/new_design/print.scss index e7617dd75..7c0144a95 100644 --- a/app/assets/stylesheets/new_design/print.scss +++ b/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"; } diff --git a/app/views/layouts/new_application.html.haml b/app/views/layouts/new_application.html.haml index 160fc4176..6bbd3cf51 100644 --- a/app/views/layouts/new_application.html.haml +++ b/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 diff --git a/app/views/new_gestionnaire/dossiers/_header.html.haml b/app/views/new_gestionnaire/dossiers/_header.html.haml index acdd37e64..520c8fa5c 100644 --- a/app/views/new_gestionnaire/dossiers/_header.html.haml +++ b/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 - .icon.printer> + .button.dropdown.icon-only.print-menu-opener{ onclick: "javascript:TPS.togglePrintMenu(event);" } + .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})"