Account menu on header
This commit is contained in:
Mathieu Magnin
parent
b7dc511a7d
commit
33af09cae5
8 changed files with 115 additions and 1 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/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 |
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;
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
li {
|
||||
> li {
|
||||
@include horizontal-padding(8px);
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -54,6 +54,68 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -11,6 +11,17 @@
|
|||
= 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
|
||||
%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
|
||||
|
|
|
|||
Loading…
Reference in a new issue