Merge pull request #5277 from opf/feature/24888-show-and-hide-project-sidebar

[24888] Show and hide project sidebar

app/assets/stylesheets/layout/_main_menu.sass

@@ -130,6 +130,9 @@ $toggler-width: 40px
           // explicitly reset to zero to avoid selector precedence problems
           padding-left: 0
 
+      &:first-of-type
+        border-top: 1px solid $main-menu-item-border-color
+
       // all menu items
       li
         float: none
@@ -214,30 +217,6 @@ $toggler-width: 40px
   .sub-menu-heading
     float: left
 
-  #toggle-project-menu
-    border: $main-menu-item-border-width solid $main-menu-item-border-color
-    border-left: none
-    height: $main-menu-item-height
-    width: $main-menu-width
-    background-color: $main-menu-bg-color
-    @include default-transition
-    &:hover
-      @include varprop(background, main-menu-bg-hover-background)
-    &.show
-      width: $main-menu-folded-width
-      a.navigation-toggler
-        height: 100%
-        padding: 0 10px 0 0
-        &:before
-          @extend .icon-double-arrow-right:before
-    a.navigation-toggler
-      @include default-transition
-      position: relative
-      height: $main-menu-item-height
-      text-align: right
-      padding: 0 6px 0 0
-      &:hover
-        @include varprop(color, main-menu-navigation-toggler-font-hover-color)
   .toggle-follow
     position: absolute
     width: 140px
@@ -254,6 +233,8 @@ $toggler-width: 40px
       -ms-text-overflow: clip
     .toggler
       display: none
+
+  #menu-sidebar,
   #sidebar,
   .menu-children
     display: none

app/assets/stylesheets/layout/_main_menu_mobile.sass

@@ -27,9 +27,6 @@
 //++
 
 @include breakpoint(680px down)
-  #toggle-project-menu.show + #menu-sidebar
-    display: none
-
   #main-menu
     position: absolute !important
     height: initial !important

app/assets/stylesheets/layout/_top_menu.sass

@@ -184,7 +184,7 @@
 
   .skip-navigation-link:focus
     top: 40px
-    left: 220px
+    left: 260px
     @include varprop(color, font-color-on-primary)
 
 .top-menu-search
@@ -307,7 +307,7 @@ input.top-menu-search--input
 
 #account-nav-left
   .drop-down
-    max-width: 230px
+    max-width: 186px
 
   #projects-menu
     overflow: hidden

app/assets/stylesheets/layout/_top_menu_mobile.sass

@@ -76,21 +76,26 @@
           text-align: center
 
           &:before
-            content: "\e0d0" !important
+            content: "\e0be" !important
             padding: 0.25rem
             @include icon-font-common
 
-          + ul
-            top: $header-height-mobile
-            width: 100vw
-            box-shadow: 1px 1px 4px #cccccc
-            border: solid 1px rgba(0, 0, 0, 0.2)
-
-            li
-              max-width: none
           > img
             display: none
 
+      > ul
+        top: $header-height-mobile
+        width: 100vw
+        box-shadow: 1px 1px 4px #cccccc
+        border: solid 1px rgba(0, 0, 0, 0.2)
+
+        li
+          max-width: none
+
+    #more-menu.drop-down--modules
+      // 58 = Width of one menu item
+      right: -58px
+
   #account-nav-left
     #projects-menu
       font-size: 15px

app/views/layouts/base.html.erb

@@ -101,14 +101,7 @@ See doc/COPYRIGHT.rdoc for more details.
            class="<%= initial_classes %>"
            ng-class="{ 'hidden-navigation': !showNavigation }">
         <% if (side_displayed && show_decoration) %>
-          <div id="main-menu" ng-controller="MainMenuController as mainMenu">
-            <h1 class="hidden-for-sighted"><%= l(:label_main_menu) %></h1>
-            <div id="toggle-project-menu"
-          ng-class="{ 'show': !showNavigation }">
-              <a href="javascript:;" title="<%= l(:show_hide_project_menu) %>"
-            ng-click="mainMenu.toggleNavigation()"
-            class="navigation-toggler icon4 icon-double-arrow-left"></a>
-            </div>
+          <div id="main-menu">
             <div id="menu-sidebar">
               <%= main_menu %>
               <%= content_for :main_menu %>

lib/open_project/design.rb

@@ -83,7 +83,7 @@ module OpenProject
       'footer-content-line-height'                           => "55px",
       'footer-content-link-color'                            => "$font-color-on-primary",
       'main-menu-width'                                      => "230px",
-      'main-menu-folded-width'                               => "50px",
+      'main-menu-folded-width'                               => "0px",
       'main-menu-border-color'                               => "#E7E7E7",
       'main-menu-border-width'                               => "1px",
       'main-menu-item-height'                                => "40px",

lib/redmine/menu_manager/top_menu/projects_menu.rb

@@ -47,7 +47,7 @@ module Redmine::MenuManager::TopMenu::ProjectsMenu
   end
 
   def render_projects_dropdown
-    label = @project ? @project.name : t(:label_select_project)
+    label = !!(@project && !@project.name.empty?) ? @project.name : t(:label_select_project)
     render_menu_dropdown_with_items(
       label: label,
       label_options: { id: 'projects-menu' },

lib/redmine/menu_manager/top_menu_helper.rb

@@ -35,6 +35,7 @@ module Redmine::MenuManager::TopMenuHelper
   def render_top_menu_left
     content_tag :ul, id: 'account-nav-left', class: 'menu_root account-nav' do
       [render_main_top_menu_nodes,
+       render_sidebar_top_menu_node,
        render_projects_top_menu_node].join.html_safe
     end
   end
@@ -109,10 +110,29 @@ module Redmine::MenuManager::TopMenuHelper
       label: '',
       label_options: { class: 'icon-menu', title: I18n.t('label_modules') },
       items: items,
-      options: { drop_down_id: 'more-menu', drop_down_class: 'drop-down--modules ', menu_item_class: '-hide-icon' }
+      options: { drop_down_id: 'more-menu', drop_down_class: 'drop-down--modules', menu_item_class: '-hide-icon' }
     )
   end
 
+  def render_sidebar_top_menu_node
+    show_decoration = params["layout"].nil?
+    main_menu = render_main_menu(@project)
+    side_displayed = content_for?(:sidebar) || content_for?(:main_menu) || !main_menu.blank?
+
+    if side_displayed && show_decoration
+      content_tag(:li,
+                  id: 'toggle-project-menu',
+                  "ng-class" => "{ 'show': !showNavigation }",
+                  "ng-controller" => 'MainMenuController as mainMenu') do
+        link_to '',
+                '',
+                title: l(:show_hide_project_menu),
+                class: 'navigation-toggler icon-hamburger',
+                "ng-click" => 'mainMenu.toggleNavigation()'
+      end
+    end
+  end
+
   def render_main_top_menu_nodes(items = main_top_menu_items)
     items.map { |item|
       render_menu_node(item)