Merge branch 'new_design' into develop
This commit is contained in:
Mathieu Magnin
commit
b3796af470
15 changed files with 199 additions and 33 deletions
1
app/assets/images/icons/account-circle.svg
Normal file
1
app/assets/images/icons/account-circle.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><g stroke="#4393F3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M18.938 20.625C17.055 22.127 14.6 23.084 12 23.084c-2.614 0-5.015-.954-6.902-2.476l-.1-.943v-.831c0-2.33 4.67-3.5 7.002-3.5 2.33 0 6.999 1.17 6.999 3.5V20l-.063.625zM12 11.333a2.989 2.989 0 0 0 2.995-2.999c0-1.66-1.332-3-2.995-3a2.998 2.998 0 0 0-3.005 3A2.997 2.997 0 0 0 12 11.333z"/><path d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11z"/></g><path d="M0 0h24v24H0z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 620 B |
1
app/assets/images/icons/search-blue.svg
Normal file
1
app/assets/images/icons/search-blue.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M17 9A8 8 0 1 1 1 9a8 8 0 0 1 16 0zm-2.187 5.875l8 8" stroke="#4393F3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/><path d="M0 0h24v24H0z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 298 B |
1
app/assets/images/icons/sign-out.svg
Normal file
1
app/assets/images/icons/sign-out.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><g stroke="#4393F3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M13 12H3m6.438 4.242L13.68 12 9.437 7.757"/><path d="M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5c0-1.1-.901-2-2-2H5c-1.099 0-2 .9-2 2v3"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
1
app/assets/images/icons/switch-profile.svg
Normal file
1
app/assets/images/icons/switch-profile.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><g stroke="#4393F3" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M11.595 11.813a2.319 2.319 0 0 0 2.323-2.327 2.319 2.319 0 0 0-2.323-2.326c-1.29 0-2.33 1.04-2.33 2.326a2.324 2.324 0 0 0 2.33 2.327zm-4.508 7.288V17.63c0-1.808 2.977-2.716 4.783-2.716 1.807 0 4.782.908 4.782 2.716v1.471l-.002.433a8.953 8.953 0 0 1-4.923 1.464A8.999 8.999 0 0 1 3.56 8.22m16.843 6.18A8.998 8.998 0 0 0 6.978 4.355"/><path d="M1 9.259l2.667-1.094 1.092 2.667m17.816 2.045l-2.154 1.606-1.607-2.152"/></g><path d="M0 0h24v24H0z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 665 B |
18
app/assets/javascripts/new_design/application.js
Normal file
18
app/assets/javascripts/new_design/application.js
Normal file
|
|
@ -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 .
|
||||
10
app/assets/javascripts/new_design/header.js
Normal file
10
app/assets/javascripts/new_design/header.js
Normal file
|
|
@ -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");
|
||||
}
|
||||
|
|
@ -19,3 +19,8 @@
|
|||
max-width: $page-width + 2 * $default-padding;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
%animation {
|
||||
animation-fill-mode: forwards;
|
||||
animation-duration: 0.3s;
|
||||
}
|
||||
|
|
|
|||
18
app/assets/stylesheets/new_design/animations.scss
Normal file
18
app/assets/stylesheets/new_design/animations.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -31,6 +31,7 @@
|
|||
background-color: #FFFFFF;
|
||||
|
||||
&:hover {
|
||||
color: #FFFFFF;
|
||||
background: $light-blue;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
&: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 {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
background-color: $light-blue;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
.header-menu-opener {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:focus {
|
||||
color: #FFFFFF;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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" }
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue