Merge pull request #19170 from opf/implementation/63889-move-toggle-button-to-the-sidebar

[63889] Move toggle button to the sidebar

Author: HDinger

app/components/_index.sass

@@ -6,6 +6,7 @@
 @import "open_project/common/attribute_help_text_component"
 @import "open_project/common/attribute_label_component"
 @import "open_project/common/submenu_component"
+@import "open_project/common/main_menu_toggle_component"
 @import "projects/row_component"
 @import "projects/phases/hover_card_component"
 @import "shares/invite_user_form_component"

app/components/open_project/common/main_menu_toggle_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+# -- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+# ++
+#
+module OpenProject
+  module Common
+    class MainMenuToggleComponent < ApplicationComponent
+      def initialize(expanded:)
+        super()
+
+        @expanded = expanded
+      end
+
+      def call
+        render(Primer::Beta::IconButton.new(icon:,
+                                            id:,
+                                            aria: { label: aria_label },
+                                            scheme:,
+                                            size:,
+                                            data:))
+      end
+
+      private
+
+      def icon
+        @expanded ? "sidebar-expand" : :"sidebar-collapse"
+      end
+
+      def id
+        "menu-toggle--#{@expanded ? 'collapse-button' : 'expand-button'}"
+      end
+
+      def aria_label
+        @expanded ? I18n.t("js.label_hide_project_menu") : I18n.t("js.label_expand_project_menu")
+      end
+
+      def scheme
+        :invisible
+      end
+
+      def size
+        @expanded ? :medium : :small
+      end
+
+      def data
+        {
+          action: "click->menus--main-toggle#toggleNavigation"
+        }
+      end
+    end
+  end
+end

app/components/open_project/common/main_menu_toggle_component.sass

@@ -0,0 +1,52 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+#menu-toggle--expand-button
+  position: absolute
+  left: 11px
+  z-index: 1
+
+  @at-root .nosidebar &
+    display: none
+
+#menu-toggle--collapse-button
+  margin-right: 5px
+
+  .Button-visual
+    color: var(--main-menu-font-color)
+
+#wrapper
+  .hidden-navigation
+    // Push the breadcrumb to the right when the sidebar is collapsed
+    .PageHeader-contextBar,
+    .op-breadcrumbs
+      margin-left: 30px
+
+  &:not(.hidden-navigation)
+    #menu-toggle--expand-button
+      display: none

app/components/open_project/common/submenu_component.sass

@@ -5,8 +5,7 @@
 
   &--search
     position: sticky
-    // Header item + 10px padding + 77px project selector
-    top: calc(var(--main-menu-item-height) + 10px + 77px)
+    top: 0
     z-index: 1
     background: var(--main-menu-bg-color)
     padding: 12px var(--main-menu-x-spacing)
@@ -52,10 +51,9 @@
     cursor: pointer
     width: 100%
 
-
     &:hover
-      background: var(--main-menu-bg-hover-background)
-      color: var(--main-menu-hover-font-color)
+      background: var(--control-transparent-bgColor-hover)
+      color: var(--main-menu-font-color)
       border-color: var(--main-menu-hover-border-color)
 
   &--items
@@ -71,8 +69,8 @@
     padding: 8px 12px 8px 32px
 
     &:hover
-      background: var(--main-menu-bg-hover-background)
-      color: var(--main-menu-hover-font-color)
+      background: var(--control-transparent-bgColor-hover)
+      color: var(--main-menu-font-color)
 
     &_active
       background: var(--main-menu-bg-selected-background)

app/models/attribute_help_text.rb

@@ -30,7 +30,9 @@ class AttributeHelpText < ApplicationRecord
   acts_as_attachable viewable_by_all_users: true
 
   def self.cached(user)
-    OpenProject::Cache.fetch([name, user]) { visible(user).select(:id, :attribute_name).index_by(&:attribute_name) }
+    RequestStore.fetch(name) do
+      visible(user).select(:id, :attribute_name).index_by(&:attribute_name)
+    end
   end
 
   def self.for(model)

app/views/custom_styles/_inline_css.erb

@@ -51,9 +51,6 @@ See COPYRIGHT and LICENSE files for more details.
     <% if design_color.variable == "main-menu-bg-selected-background" %>
       --main-menu-selected-font-color: <%= design_color.contrasting_font_color %>;
     <% end %>
-    <% if design_color.variable == "main-menu-bg-hover-background" %>
-      --main-menu-hover-font-color: <%= design_color.contrasting_font_color %>;
-    <% end %>
     <% if design_color.variable == "primary-button-color" %>
         --primary-button-color--major1: <%= design_color.darken 0.18 %>;
         --primary-button-color--minor1: <%= design_color.lighten 0.8 %>;

app/views/custom_styles/_primer_color_mapping.erb

@@ -52,9 +52,7 @@
     --header-item-bg-hover-color: var(--control-transparent-bgColor-hover);
     --header-item-font-hover-color: var(--fgColor-default);
     --header-border-bottom-color: var(--borderColor-muted) !important;
-    --main-menu-hover-font-color: var(--fgColor-default);
-    --main-menu-bg-selected-background: var(--control-transparent-bgColor-hover);
-    --main-menu-bg-hover-background: var(--control-transparent-bgColor-hover);
+    --main-menu-bg-selected-background: var(--control-checked-borderColor-rest);
     --main-menu-border-color: var(--borderColor-muted);
     --main-menu-resizer-color: var(--borderColor-muted);
     --main-menu-fieldset-header-color: var(--fgColor-muted) !important;

app/views/layouts/base.html.erb

@@ -30,9 +30,9 @@ See COPYRIGHT and LICENSE files for more details.
 <html xmlns="http://www.w3.org/1999/xhtml"
       lang="<%= I18n.locale.to_s %>"
       xml:lang="<%= I18n.locale.to_s %>"
-      class="<%= 'in_modal' unless show_decoration %>">
+      class="<%= "in_modal" unless show_decoration %>">
 <head>
-  <%= render partial: 'layouts/common_head' %>
+  <%= render partial: "layouts/common_head" %>
   <!-- project specific tags -->
   <%= call_hook :view_layouts_base_html_head %>
   <!-- page specific tags -->
@@ -43,13 +43,13 @@ See COPYRIGHT and LICENSE files for more details.
 </head>
 <%= content_tag :body,
                 class: "#{body_css_classes}  __overflowing_element_container __overflowing_body",
-                data: body_data_attributes(local_assigns) do  %>
-<%= render partial: 'warning_bar/warning_bar' %>
+                data: body_data_attributes(local_assigns) do %>
+<%= render partial: "warning_bar/warning_bar" %>
 <noscript>
   <div class="top-shelf">
     <p>
       <span>
-        <%= op_icon 'icon3 icon-warning' %>
+        <%= op_icon "icon3 icon-warning" %>
         <strong><%= t(:noscript_heading) %></strong>
       </span>
       <%= t(:noscript_description) %>
@@ -69,16 +69,15 @@ See COPYRIGHT and LICENSE files for more details.
 <% initial_classes = initial_menu_classes(side_displayed, show_decoration) %>
 <div id="wrapper" style="<%= initial_menu_styles(side_displayed) %>" class="<%= initial_classes %>">
   <% if show_decoration %>
-    <header class="op-app-header<%= ' op-app-header_development' if OpenProject::Configuration.development_highlight_enabled? %>">
+    <header class="op-app-header<%= " op-app-header_development" if OpenProject::Configuration.development_highlight_enabled? %>">
       <div class="op-app-header--start">
         <h1 class="hidden-for-sighted">
           <%= t(:label_top_menu) %>
         </h1>
-        <opce-main-menu-toggle></opce-main-menu-toggle>
         <a href="" class="hidden-for-sighted skip-navigation-link"
            id="skip-navigation--content"
-           aria-label="<%= I18n.t('js.work_packages.jump_marks.label_content') %>">
-          <%= I18n.t('js.work_packages.jump_marks.content') %>
+           aria-label="<%= I18n.t("js.work_packages.jump_marks.label_content") %>">
+          <%= I18n.t("js.work_packages.jump_marks.content") %>
         </a>
         <%= render_top_menu_left %>
       </div>
@@ -92,23 +91,37 @@ See COPYRIGHT and LICENSE files for more details.
     </header>
   <% end %>
   <div id="main"
-       class="<%= initial_classes %>">
+       class="<%= initial_classes %>"
+       data-controller="menus--main-toggle">
     <% if (side_displayed && show_decoration) %>
       <div
         id="main-menu"
         class="main-menu"
-        data-controller="menus--main"
-      >
+        data-controller="menus--main">
         <h1 class="hidden-for-sighted"><%= t(:label_main_menu) %></h1>
         <opce-main-menu-resizer></opce-main-menu-resizer>
         <div id="menu-sidebar">
-          <%= render_projects_top_menu_node %>
-          <%= render(Primer::BaseComponent.new(tag: :hr,
-                                               classes: "main-menu--projects-divider",
-                                               role: :presentation,
-                                               aria: {
-                                                 hidden: true
-                                               })) %>
+          <div class="main-menu--top-container">
+            <%= render(Primer::OpenProject::FlexLayout.new(align_items: :center, pt: 3)) do |flex|
+              flex.with_column(overflow: :hidden, ml: 2) do
+                render_projects_top_menu_node
+              end
+              flex.with_column(text_align: :right, flex: :auto) do
+                render(OpenProject::Common::MainMenuToggleComponent.new(expanded: true))
+              end
+            end %>
+
+            <%= render(
+                  Primer::BaseComponent.new(
+                    tag: :hr,
+                    classes: "main-menu--projects-divider",
+                    role: :presentation,
+                    aria: {
+                      hidden: true
+                    }
+                  )
+                ) %>
+          </div>
           <%= main_menu %>
           <%= content_for :main_menu %>
           <%= call_hook :view_layouts_base_main_menu %>
@@ -130,11 +143,11 @@ See COPYRIGHT and LICENSE files for more details.
         <section data-augmented-model-wrapper
                  data-modal-initialize-now="true"
                  data-modal-class-name="onboarding-modal">
-          <%= render partial: '/onboarding/configuration_modal' %>
+          <%= render partial: "/onboarding/configuration_modal" %>
         </section>
       <% end %>
       <%= content_tag :div,
-                      id: 'content',
+                      id: "content",
                       class: "#{initial_classes} #{'content--split' if content_for?(:content_body_right)}" do %>
         <h1 class="hidden-for-sighted accessibility-helper"><%= t(:label_content) %></h1>
         <% if content_for?(:content_header) %>
@@ -144,6 +157,7 @@ See COPYRIGHT and LICENSE files for more details.
         <% end %>
 
         <div id="content-body">
+          <%= render(OpenProject::Common::MainMenuToggleComponent.new(expanded: false)) %>
           <%= content_for :content_body %>
           <% unless local_assigns[:no_layout_yield] %>
             <%= yield %>

config/locales/en.yml

@@ -75,7 +75,6 @@ en:
         header-item-bg-hover-color: "Header background on hover"
         main-menu-bg-color: "Main menu background"
         main-menu-bg-selected-background: "Main menu when selected"
-        main-menu-bg-hover-background: "Main menu on hover"
       custom_colors: "Custom colors"
       manage_colors: "Edit color select options"
       instructions:

config/locales/js-en.yml

@@ -373,6 +373,7 @@ en:
     label_added_time_by: 'Added by <a href="%{authorLink}">%{author}</a> at %{age}'
     label_ago: "days ago"
     label_all: "all"
+    label_all_projects: "All projects"
     label_all_uppercase: "All"
     label_all_work_packages: "all work packages"
     label_and: "and"
@@ -482,7 +483,6 @@ en:
     label_repository_plural: "Repositories"
     label_save_as: "Save as"
     label_search_columns: "Search a column"
-    label_select_project: "Select a project"
     label_select_watcher: "Select a watcher..."
     label_selected_filter_list: "Selected filters"
     label_show_attributes: "Show all attributes"