diff options
author | Phil Hughes <me@iamphill.com> | 2017-07-18 14:18:11 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-07-19 09:53:07 +0100 |
commit | e35a56c5ae807af87736bd9a8bc64c3369194056 (patch) | |
tree | f509af619b2479c7a56268ca8ad4243a0b7950af | |
parent | 1c7893c5c1bf3ee78351765c0db41c9247ec8e88 (diff) | |
download | gitlab-ce-e35a56c5ae807af87736bd9a8bc64c3369194056.tar.gz |
Fly-out dropdown menu in new sidebar
Closes #34026
[ci skip]
-rw-r--r-- | app/assets/javascripts/main.js | 17 | ||||
-rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 45 | ||||
-rw-r--r-- | app/views/layouts/nav/_new_project_sidebar.html.haml | 2 |
3 files changed, 62 insertions, 2 deletions
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 26c67fb721c..9364d19def1 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -347,4 +347,21 @@ $(function () { gl.utils.renderTimeago(); $(document).trigger('init.scrolling-tabs'); + + $('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => { + const windowHeight = window.innerHeight; + const $this = e.currentTarget; + const $subitems = $('.sidebar-sub-level-items', $this).show(); + + if ($subitems.length) { + const boundingRect = $this.getBoundingClientRect(); + + const bottomOverflow = windowHeight - (boundingRect.top + $subitems.outerHeight()); + const top = bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top; + + $subitems.css({ + top, + }); + } + }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide()); }); diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index bd9a5d7392d..527d47d5353 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -98,6 +98,7 @@ $new-sidebar-width: 220px; } li { + position: relative; white-space: nowrap; a { @@ -126,8 +127,21 @@ $new-sidebar-width: 220px; padding-bottom: 8px; > li { + &:not(.active) { + @media (min-width: $screen-sm-min) { + a { + padding: 11px 16px 11px 24px; + + &:hover, + &:focus { + background: transparent; + font-weight: 600; + } + } + } + } + a { - font-size: 12px; padding: 8px 16px 8px 24px; &:hover, @@ -152,6 +166,34 @@ $new-sidebar-width: 220px; .sidebar-top-level-items { > li { + &:not(.active) { + .sidebar-sub-level-items { + @media (min-width: $screen-sm-min) { + position: fixed; + left: 220px; + width: 150px; + margin-left: -1px; + padding-bottom: 0; + background-color: #fff; + box-shadow: 2px 1px 3px rgba(0,0,0,.1); + border: 1px solid #e5e5e5; + border-left: 0; + + &::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 21px 12px; + border-color: transparent transparent transparent $hover-background; + } + } + } + } + .badge { float: right; background-color: $inactive-badge-background; @@ -171,6 +213,7 @@ $new-sidebar-width: 220px; } } + &:not(.active):hover > a, > a:hover { background-color: $hover-background; color: $hover-color; diff --git a/app/views/layouts/nav/_new_project_sidebar.html.haml b/app/views/layouts/nav/_new_project_sidebar.html.haml index 882123c0b0a..da8f9ce1908 100644 --- a/app/views/layouts/nav/_new_project_sidebar.html.haml +++ b/app/views/layouts/nav/_new_project_sidebar.html.haml @@ -173,7 +173,7 @@ %ul.sidebar-sub-level-items - can_edit = can?(current_user, :admin_project, @project) - if can_edit - = nav_link(controller: :projects) do + = nav_link(path: %w[projects#edit]) do = link_to edit_project_path(@project), title: 'General' do %span General |