diff --git a/app/assets/images/icons/account-circle.svg b/app/assets/images/icons/account-circle.svg new file mode 100644 index 000000000..ec478f66c --- /dev/null +++ b/app/assets/images/icons/account-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/icons/search-blue.svg b/app/assets/images/icons/search-blue.svg new file mode 100644 index 000000000..e1b35abf2 --- /dev/null +++ b/app/assets/images/icons/search-blue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/icons/sign-out.svg b/app/assets/images/icons/sign-out.svg new file mode 100644 index 000000000..30022a12b --- /dev/null +++ b/app/assets/images/icons/sign-out.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/icons/switch-profile.svg b/app/assets/images/icons/switch-profile.svg new file mode 100644 index 000000000..e5d63c13c --- /dev/null +++ b/app/assets/images/icons/switch-profile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/javascripts/new_design/application.js b/app/assets/javascripts/new_design/application.js new file mode 100644 index 000000000..700bc74fb --- /dev/null +++ b/app/assets/javascripts/new_design/application.js @@ -0,0 +1,18 @@ +// This is a manifest file that'll be compiled into application.js, which will include all the files +// listed below. +// +// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, +// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. +// +// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the +// compiled file. +// +// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details +// about supported directives. +// +//= require jquery +//= require jquery_ujs +//= require turbolinks +//= require highcharts +//= require chartkick +//= require_tree . diff --git a/app/assets/javascripts/new_design/header.js b/app/assets/javascripts/new_design/header.js new file mode 100644 index 000000000..903b0ff96 --- /dev/null +++ b/app/assets/javascripts/new_design/header.js @@ -0,0 +1,10 @@ +window.TPS = window.TPS || {}; + +$(document).on("click", "body", function () { + $(".header-menu").removeClass("open fade-in-down"); +}); + +TPS.toggleHeaderMenu = function(event) { + event.stopPropagation(); + $(".header-menu").toggleClass("open fade-in-down"); +} diff --git a/app/assets/stylesheets/new_design/_placeholders.scss b/app/assets/stylesheets/new_design/_placeholders.scss index fbb5bf9d5..086e5ecfe 100644 --- a/app/assets/stylesheets/new_design/_placeholders.scss +++ b/app/assets/stylesheets/new_design/_placeholders.scss @@ -19,3 +19,8 @@ max-width: $page-width + 2 * $default-padding; margin: 0 auto; } + +%animation { + animation-fill-mode: forwards; + animation-duration: 0.3s; +} diff --git a/app/assets/stylesheets/new_design/animations.scss b/app/assets/stylesheets/new_design/animations.scss new file mode 100644 index 000000000..c9df122d2 --- /dev/null +++ b/app/assets/stylesheets/new_design/animations.scss @@ -0,0 +1,18 @@ +@import "placeholders"; + +@keyframes fade-in-down { + 0% { + opacity: 0; + margin-top: -10px; + } + + 100% { + opacity: 1; + margin-top: 0; + } +} + +.fade-in-down { + @extend %animation; + animation-name: fade-in-down; +} diff --git a/app/assets/stylesheets/new_design/buttons.scss b/app/assets/stylesheets/new_design/buttons.scss index 5e0bf38f3..bd4a512b8 100644 --- a/app/assets/stylesheets/new_design/buttons.scss +++ b/app/assets/stylesheets/new_design/buttons.scss @@ -31,6 +31,7 @@ background-color: #FFFFFF; &:hover { + color: #FFFFFF; background: $light-blue; } } diff --git a/app/assets/stylesheets/new_design/new_header.scss b/app/assets/stylesheets/new_design/new_header.scss index aa542550e..9767723ac 100644 --- a/app/assets/stylesheets/new_design/new_header.scss +++ b/app/assets/stylesheets/new_design/new_header.scss @@ -23,33 +23,98 @@ margin-top: 17px; } -$header-login-button-height: 36px; -$header-login-button-border-size: 1px; +.header-right-content { + display: flex; + align-items: center; + height: 100%; -.header-login-button { - @include horizontal-padding(16px); + > li { + @include horizontal-padding(8px); - display: inline-block; - height: $header-login-button-height; - line-height: $header-login-button-height - (2 * $header-login-button-border-size); - border-radius: $header-login-button-height; - border: $header-login-button-border-size solid $blue; - color: $blue; - font-size: 14px; - margin-top: 18px; - - &:hover { - color: #FFFFFF; - text-decoration: none; - background-color: $light-blue; - } - - &:focus { - color: $blue; - text-decoration: none; - } - - &:hover:focus { - color: #FFFFFF; + &:last-child { + padding-right: 0; + } + } +} + +.header-search { + position: relative; + + .form input[type=text] { + padding: 9px; + padding-right: 42px; + float: right; + width: 300px; + } + + button { + padding: 6px 9px; + border: none; + background: none; + cursor: pointer; + position: absolute; + right: 0; + + &:hover { + opacity: 0.8; + } + } +} + +.header-menu-opener { + position: relative; + + img { + cursor: pointer; + + &:hover { + opacity: 0.8; + } + } +} + +.header-menu { + display: none; + position: absolute; + right: 0; + top: 34px; + 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; + + &.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; + } + } } } diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 8aed47dc2..f5572c1d9 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -5,4 +5,10 @@ module ApplicationHelper when "alert" then "alert-danger" end end + + def current_email + current_user.try(:email) || + current_gestionnaire.try(:email) || + current_administrateur.try(:email) + end end diff --git a/app/views/layouts/_new_header.haml b/app/views/layouts/_new_header.haml index fc6e50e9e..5e590e187 100644 --- a/app/views/layouts/_new_header.haml +++ b/app/views/layouts/_new_header.haml @@ -1,7 +1,46 @@ -.new-header{ class: current_page?(root_path) ? nil : 'new-header-with-border' } +.new-header{ class: current_page?(root_path) ? nil : "new-header-with-border" } .header-inner-content = link_to root_path do %img.header-logo{ src: image_url("header/logo-tps.svg") } - - unless request.path == new_user_session_path - = link_to "Connexion", new_user_session_path, class: "header-login-button" + %ul.header-right-content + - if gestionnaire_signed_in? + %li + .header-search + = form_tag backoffice_dossiers_search_url, method: :get, class: "form" do + = text_field_tag "q", "#{@search_terms unless @search_terms.nil?}", placeholder: "Rechercher" + %button{ title: "Rechercher" } + = image_tag "icons/search-blue.svg" + %li + .header-menu-opener + = image_tag "icons/account-circle.svg", onclick: "javascript:TPS.toggleHeaderMenu(event);", title: "Mon compte" + %ul.header-menu + %li + .menu-item{ title: current_email } + = current_email + + - if SwitchDeviseProfileService.new(warden).multiple_devise_profile_connect? + - if user_signed_in? + %li + = link_to users_dossiers_path, class: "menu-item menu-link" do + = image_tag "icons/switch-profile.svg" + Passer en usager + - if gestionnaire_signed_in? + %li + = link_to backoffice_dossiers_path, class: "menu-item menu-link" do + = image_tag "icons/switch-profile.svg" + Passer en accompagnateur + - if administrateur_signed_in? + %li + = link_to admin_procedures_path, class: "menu-item menu-link" do + = image_tag "icons/switch-profile.svg" + Passer en administrateur + + %li + = link_to destroy_user_session_path, method: :delete, class: "menu-item menu-link" do + = image_tag "icons/sign-out.svg" + Se déconnecter + + - elsif request.path != new_user_session_path + %li + = link_to "Connexion", new_user_session_path, class: "button secondary" diff --git a/app/views/layouts/new_application.html.haml b/app/views/layouts/new_application.html.haml index b12804452..799b9f413 100644 --- a/app/views/layouts/new_application.html.haml +++ b/app/views/layouts/new_application.html.haml @@ -30,14 +30,12 @@ = render partial: "layouts/flash_messages" = yield - = render partial: "layouts/switch_devise_profile_module" - = render partial: "layouts/new_footer" = render partial: "layouts/google_analytics" = render partial: "layouts/mailjet_newsletter" = render partial: "layouts/crisp" - = javascript_include_tag "application", "data-turbolinks-track": true + = javascript_include_tag "new_design/application", "data-turbolinks-track": true = yield :charts_js - if Rails.env == "test" %script{ type: "text/javascript" } diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index a219a9da9..6d2a06f92 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -20,6 +20,8 @@ = link_to ".button.primary", "#", class: "button primary" + = link_to ".button.secondary", "#", class: "button secondary" + = link_to ".button.large", "#", class: "button large" = link_to ".button.large.primary", "#", class: "button large primary" diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index c20bc1259..f6ab56d75 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -8,4 +8,4 @@ Rails.application.config.assets.version = '1.0' # Precompile additional assets. # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. -Rails.application.config.assets.precompile += %w(print.css new_design/new_application.css) +Rails.application.config.assets.precompile += %w(print.css new_design/new_application.css new_design/application.js)