Refs #2475: adding top menu right panels

8 files changed, 113 insertions, 35 deletions

diff --git a/app/assets/javascripts/nav_panels.coffee b/app/assets/javascripts/nav_panels.coffee
new file mode 100644
index 000000000..97c307d8a
--- /dev/null
+++ b/app/assets/javascripts/nav_panels.coffee
@@ -0,0 +1,12 @@
+@navpanel = ->
+  $('#menu_top').each ->
+    $(this).on 'click', "[data-panel='toggle']", (e) ->
+      e.preventDefault()
+      $(this).siblings().removeClass 'active'
+      $(this).toggleClass 'active'
+
+      target = $(this).data('target')
+      $(target).siblings().removeClass 'open'
+      $(target).toggleClass 'open'
+
+$(document).on 'ready turbolinks:load', navpanel
diff --git a/app/assets/stylesheets/application_new.sass b/app/assets/stylesheets/application_new.sass
index 7fa753a01..3713be739 100644
--- a/app/assets/stylesheets/application_new.sass
+++ b/app/assets/stylesheets/application_new.sass
@@ -4,6 +4,7 @@
 
 @import 'new/config'
 
+@import 'new/fonts'
 @import 'new/typography'
 
 @import 'new/layout'
diff --git a/app/assets/stylesheets/new/_fonts.sass b/app/assets/stylesheets/new/_fonts.sass
new file mode 100644
index 000000000..cb370eb86
--- /dev/null
+++ b/app/assets/stylesheets/new/_fonts.sass
@@ -0,0 +1,31 @@
+//---------//
+//  Fonts  //
+//---------//
+
+@font-face
+  // Regular
+  font-family: 'Open Sans'
+  src: url(asset-path('OpenSans/Regular/OpenSans-Regular.woff2')) format('woff2'), url(asset-path('OpenSans/Regular/OpenSans-Regular.woff')) format('woff'), url(asset-path('OpenSans/Regular/OpenSans-Regular.ttf')) format('ttf')
+  font-weight: 400
+  font-style: normal
+
+@font-face
+  // Regular Italic
+  font-family: 'Open Sans'
+  src: url(asset-path('OpenSans/Regular/OpenSans-Italic.woff2')) format('woff2'), url(asset-path('OpenSans/Regular/OpenSans-Italic.woff')) format('woff'), url(asset-path('OpenSans/Regular/OpenSans-Italic.ttf')) format('ttf')
+  font-weight: 400
+  font-style: italic
+
+@font-face
+  // Bold
+  font-family: 'Open Sans'
+  src: url(asset-path('OpenSans/Bold/OpenSans-Bold.woff2')) format('woff2'), url(asset-path('OpenSans/Bold/OpenSans-Bold.woff')) format('woff'), url(asset-path('OpenSans/Bold/OpenSans-Bold.ttf')) format('ttf')
+  font-weight: 700
+  font-style: normal
+
+@font-face
+  // Bold Italic
+  font-family: 'Open Sans'
+  src: url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.woff2')) format('woff2'), url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.woff')) format('woff'), url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.ttf')) format('ttf')
+  font-weight: 700
+  font-style: italic
diff --git a/app/assets/stylesheets/new/_typography.sass b/app/assets/stylesheets/new/_typography.sass
index cb370eb86..4060a2449 100644
--- a/app/assets/stylesheets/new/_typography.sass
+++ b/app/assets/stylesheets/new/_typography.sass
@@ -1,31 +1,22 @@
-//---------//
-//  Fonts  //
-//---------//
+h1
+  font-size: $h1-size
+  font-weight: 700
 
-@font-face
-  // Regular
-  font-family: 'Open Sans'
-  src: url(asset-path('OpenSans/Regular/OpenSans-Regular.woff2')) format('woff2'), url(asset-path('OpenSans/Regular/OpenSans-Regular.woff')) format('woff'), url(asset-path('OpenSans/Regular/OpenSans-Regular.ttf')) format('ttf')
-  font-weight: 400
-  font-style: normal
+h2
+  font-size: $h2-size
+  font-weight: 700
 
-@font-face
-  // Regular Italic
-  font-family: 'Open Sans'
-  src: url(asset-path('OpenSans/Regular/OpenSans-Italic.woff2')) format('woff2'), url(asset-path('OpenSans/Regular/OpenSans-Italic.woff')) format('woff'), url(asset-path('OpenSans/Regular/OpenSans-Italic.ttf')) format('ttf')
-  font-weight: 400
-  font-style: italic
+p
+  &:last-child
+    margin-bottom: 0
 
-@font-face
-  // Bold
-  font-family: 'Open Sans'
-  src: url(asset-path('OpenSans/Bold/OpenSans-Bold.woff2')) format('woff2'), url(asset-path('OpenSans/Bold/OpenSans-Bold.woff')) format('woff'), url(asset-path('OpenSans/Bold/OpenSans-Bold.ttf')) format('ttf')
-  font-weight: 700
-  font-style: normal
+  a
+    color: inherit
+    border-bottom: 1px dashed rgba($blue, 0.5)
+    transition: 0.2s
 
-@font-face
-  // Bold Italic
-  font-family: 'Open Sans'
-  src: url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.woff2')) format('woff2'), url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.woff')) format('woff'), url(asset-path('OpenSans/Bold/OpenSans-BoldItalic.ttf')) format('ttf')
-  font-weight: 700
-  font-style: italic
+    &:hover, &:focus
+      text-decoration: none
+      color: $blue
+      border-color: $blue
+      transition: 0.2s
diff --git a/app/assets/stylesheets/new/components/_main_nav.sass b/app/assets/stylesheets/new/components/_main_nav.sass
index 5a86245f3..7420b9bff 100644
--- a/app/assets/stylesheets/new/components/_main_nav.sass
+++ b/app/assets/stylesheets/new/components/_main_nav.sass
@@ -4,7 +4,6 @@ $menuW: 300px
 #main_nav
   display: block
   height: $menuH
-  // Main nav is fixed to top
   position: fixed
   top: 0
   left: 0
@@ -99,7 +98,7 @@ $menuW: 300px
                 color: rgba(#fff, 0.75)
                 transition: 0.2s
 
-                &:hover, &:focus
+                &:hover
                   text-decoration: none
                   color: rgba(#fff, 1)
                   transition: 0.2s
@@ -203,7 +202,7 @@ $menuW: 300px
     background-color: $blue
     color: #fff
 
-    > *
+    > .brandname, > .menu-content
       display: inline-block
       letter-spacing: normal
       word-spacing: normal
@@ -220,7 +219,6 @@ $menuW: 300px
         width: calc(100% - 65px)
         height: $menuH
         line-height: $menuH
-        // padding: 0 10px
 
         &:before
           content: ''
@@ -248,8 +246,9 @@ $menuW: 300px
         .menu-item-group
           > .menu-item
             background-color: rgba(#fff, 0)
+            text-decoration: none
 
-            &:hover, &:focus
+            &:hover, &.active
               text-decoration: none
               background-color: rgba(#fff, 0.2)
 
@@ -265,7 +264,7 @@ $menuW: 300px
         color: rgba(#fff, 0.9)
         transition: 0.2s
 
-        &:hover, &:focus
+        &:hover
           text-decoration: none
           color: rgba(#fff, 1)
           transition: 0.2s
@@ -277,3 +276,30 @@ $menuW: 300px
         content: '\003e'
         color: #fff
         padding: 0 0.5em
+
+  // Nav panels
+  .nav_panel
+    display: none
+    letter-spacing: normal
+    word-spacing: normal
+    text-rendering: auto
+    width: $menuW
+    float: right
+    background-color: #fff
+    color: $darkgrey
+    box-shadow: 0 0 3px $darkgrey
+
+    &.open
+      display: block
+
+    .panel-title
+      margin: 0
+      padding: 15px 20px
+      font-size: inherit
+      border-bottom: 1px solid $grey
+
+      > h1, > h2, h3
+        margin: 0
+
+    .panel-body
+      padding: 15px 20px
diff --git a/app/views/layouts/new/_main_nav_top.html.slim b/app/views/layouts/new/_main_nav_top.html.slim
index 9b8633944..298cf8ac9 100644
--- a/app/views/layouts/new/_main_nav_top.html.slim
+++ b/app/views/layouts/new/_main_nav_top.html.slim
@@ -6,12 +6,16 @@
       = render 'layouts/new/breadcrumb'
 
     .menu-item-group.pull-right
-      = link_to '#', class: 'menu-item', title: 'Opérations' do
+      = link_to '#', class: 'menu-item', data: { panel: 'toggle', target: '#operations_panel' }, title: 'Opérations' do
         span.fa.fa-lg.fa-tasks
 
-      = link_to '#', class: 'menu-item', title: 'Profil' do
+      = link_to '#', class: 'menu-item', data: { panel: 'toggle', target: '#profile_panel' }, title: 'Profil' do
         span = current_user.username
         span.fa.fa-lg.fa-user
 
+
       = link_to destroy_user_session_path, method: :delete, class: 'menu-item', title: 'Se déconnecter' do
         span.fa.fa-lg.fa-sign-out
+
+  = render 'layouts/new/nav_panel_operations'
+  = render 'layouts/new/nav_panel_profile'
diff --git a/app/views/layouts/new/_nav_panel_operations.html.slim b/app/views/layouts/new/_nav_panel_operations.html.slim
new file mode 100644
index 000000000..8dce829cd
--- /dev/null
+++ b/app/views/layouts/new/_nav_panel_operations.html.slim
@@ -0,0 +1,5 @@
+#operations_panel.nav_panel
+  .panel-title
+    h2 Opérations
+  .panel-body
+    p = "Lorem ipsum dolor sit amet..."
diff --git a/app/views/layouts/new/_nav_panel_profile.html.slim b/app/views/layouts/new/_nav_panel_profile.html.slim
new file mode 100644
index 000000000..82e8dda76
--- /dev/null
+++ b/app/views/layouts/new/_nav_panel_profile.html.slim
@@ -0,0 +1,8 @@
+#profile_panel.nav_panel
+  .panel-title
+    h2 Mon Profil
+  .panel-body
+    p = current_user.name
+    p = current_organisation.name
+    p
+      = mail_to current_user.email, current_user.email