Change main menu design (#5661)

* Change main menu design

- General link color can be customized.
- Selected items have grey background with primary color text.
- Background color can be configured.
- Children have smaller font and no icon.
- Border on the right goes down the whole screen.

* Simplify translations

[ci skip]
pull/5664/head
Wieland Lindenthal 7 years ago committed by Oliver Günther
parent 82b0b605d7
commit 1d7c5f5e99
  1. 2
      app/assets/stylesheets/layout/_base.sass
  2. 22
      app/assets/stylesheets/layout/_main_menu.sass
  3. 18
      app/views/custom_styles/show.html.erb
  4. 3
      config/initializers/menus.rb
  5. 4
      config/locales/en.yml
  6. 26
      lib/open_project/design.rb
  7. 1
      lib/redmine/menu_manager/menu_helper.rb

@ -39,7 +39,7 @@ body
#wrapper
@include default-transition
background: linear-gradient(to bottom, $main-menu-bg-color 0%, $main-menu-bg-color 100%) no-repeat
@include varprop(background-color, main-menu-bg-color)
background-size: $main-menu-width 100%
min-height: 100%
height: auto

@ -33,8 +33,14 @@ $toggler-width: 40px
width: $main-menu-width
float: left
left: 0
background-color: $main-menu-bg-color
border-right: $main-menu-border-width solid $main-menu-border-color
position: absolute
// min-height is full height minus header and footer.
min-height: calc(100% - 55px - 55px)
@include varprop(background-color, main-menu-bg-color)
@include default-transition
@include breakpoint(680px down)
min-height: initial
#menu-sidebar
// 40px is the height of the toggler
@ -50,7 +56,6 @@ $toggler-width: 40px
padding: 0
&.menu_root
border-right: $main-menu-border-width solid $main-menu-border-color
// -------------------- ALL menu items ---------------------------
li
@ -144,7 +149,7 @@ $toggler-width: 40px
@if $main-menu-enable-toggle-highlighting != true
// simultaneously hover all menu item anchor tags
> a
color: $main-menu-child-selected-font-color
@include varprop(color, main-menu-child-selected-font-color)
> a
@include default-transition
@ -154,10 +159,11 @@ $toggler-width: 40px
&:hover, &.selected, &.selected + a
color: $main-menu-child-selected-font-color
@include varprop(color, main-menu-child-selected-font-color)
a
padding-left: 12px
// children have no icon so we need to push them right.
padding-left: 54px
font-size: $main-menu-child-font-size
line-height: $main-menu-child-item-height
height: $main-menu-child-item-height
@ -166,10 +172,10 @@ $toggler-width: 40px
&:hover
text-decoration: none
color: $main-menu-child-selected-font-color
@include varprop(color, main-menu-child-selected-font-color)
&.selected
border: none !important
color: $main-menu-child-selected-font-color
@include varprop(color, main-menu-child-selected-font-color)
font-weight: bold
a
@ -195,7 +201,7 @@ $toggler-width: 40px
border: $main-menu-item-border-width solid $main-menu-item-border-color
height: $main-menu-item-height
width: $main-menu-width
background-color: $main-menu-bg-color
@include varprop(background-color, main-menu-bg-color)
@include default-transition
&:hover
@include varprop(background, main-menu-bg-hover-background)

@ -87,23 +87,7 @@ See doc/COPYRIGHT.rdoc for more details.
class: 'timelines-x-update-color timelines-color-properties-preview',
data: { target: '#color_hexcode' } %>
<div class="form--field-instructions">
<% if design_color.variable == "primary-color" %>
<%= t("admin.custom_styles.instructions.primary_color") %>
<% elsif design_color.variable == "primary-color-dark" %>
<%= t("admin.custom_styles.instructions.primary_color_dark") %>
<% elsif design_color.variable == "alternative-color" %>
<%= t("admin.custom_styles.instructions.alternative_color") %>
<% elsif design_color.variable == "header-bg-color" %>
<%= t("admin.custom_styles.instructions.header_bg_color") %>
<% elsif design_color.variable == "header-item-bg-hover-color" %>
<%= t("admin.custom_styles.instructions.header_item_bg_hover_color") %>
<% elsif design_color.variable == "header-item-font-color" %>
<%= t("admin.custom_styles.instructions.header_item_font_color") %>
<% elsif design_color.variable == "header-item-font-hover-color" %>
<%= t("admin.custom_styles.instructions.header_item_font_hover_color") %>
<% elsif design_color.variable == "header-border-bottom-color" %>
<%= t("admin.custom_styles.instructions.header_border_bottom_color") %>
<% end %>
<%= t("admin.custom_styles.instructions.#{design_color.variable.tr('-', '_')}") %>
</div>
</div>
<% end %>

@ -245,8 +245,7 @@ Redmine::MenuManager.map :project_menu do |menu|
{ controller: '/work_packages/reports', action: 'report' },
param: :project_id,
caption: :label_workflow_summary,
parent: :work_packages,
icon: 'icon2 icon-chart3'
parent: :work_packages
menu.push :timelines,
{ controller: '/timelines', action: 'index' },

@ -45,14 +45,16 @@ en:
enterprise_notice: "As a special 'Thank you!' for their financial contribution to develop OpenProject, this tiny feature is only available for Enterprise Edition support subscribers."
manage_colors: "Edit color select options"
instructions:
alternative_color: "Strong accent color, typically used for most the important button on a screen."
content_link_color: "Font color of most of the links."
primary_color: "Main color."
primary_color_dark: "Typically a darker version of the main color used for hover effects."
alternative_color: "Strong accent color, typically used for most the important button on a screen."
header_bg_color: "Background color of the header."
header_item_bg_hover_color: "Background color of clickable header items when hovered with the mouse."
header_item_font_color: "Font color of clickable header items."
header_item_font_hover_color: "Font color of clickable header items when hovered with the mouse."
header_border_bottom_color: "Thin line under the header. Leave this field empty if you don't want any line."
main_menu_bg_color: "Left side menu's background color."
enterprise:
upgrade_to_ee: "Upgrade to Enterprise Edition"
add_token: "Upload an Enterprise Edition support token"

@ -43,6 +43,7 @@ module OpenProject
'body-font-color' => "#333333",
'base-line-height' => "1.5",
'secondary-color' => "#bfbfbf",
'content-link-color' => "$primary-color-dark",
'font-color-on-primary' => "#FFFFFF",
'font-color-on-primary-dark' => "#FFFFFF",
'font-color-on-secondary' => "#FFFFFF",
@ -91,25 +92,25 @@ module OpenProject
'main-menu-item-border-width' => "1px",
'main-menu-enable-toggle-highlighting' => "false",
'main-menu-bg-color' => "#F8F8F8",
'main-menu-bg-selected-background' => "$primary-color",
'main-menu-bg-hover-background' => "$primary-color-dark",
'main-menu-bg-selected-background' => "rgba(0, 0, 0, 0.05)",
'main-menu-bg-hover-background' => "rgba(0, 0, 0, 0.015)",
'main-menu-font-color' => "#333333",
'main-menu-selected-font-color' => "$font-color-on-primary",
'main-menu-selected-font-color' => "$content-link-color",
'main-menu-font-size' => "15px",
'main-menu-selected-indicator-color' => "$primary-color",
'main-menu-selected-indicator-color' => "#E0E0E0",
'main-menu-hover-indicator-color' => "$primary-color-dark",
'main-menu-selected-hover-indicator-width' => "4px",
'main-menu-selected-hover-border-color' => "$main-menu-border-color",
'main-menu-navigation-toggler-font-hover-color' => "#FFFFFF",
'main-menu-navigation-toggler-font-hover-color' => "$main-menu-selected-font-color",
'main-menu-toggler-separator-color' => "#EAEAEA",
'main-menu-child-item-height' => "35px",
'main-menu-child-item-height' => "30px",
'main-menu-child-menu-bg-color' => "#FFFFFF",
'main-menu-child-bg-selected-color' => "$primary-color",
'main-menu-child-bg-hover-color' => "$primary-color-dark",
'main-menu-child-bg-selected-color' => "$main-menu-bg-selected-background",
'main-menu-child-bg-hover-color' => "$main-menu-bg-hover-background",
'main-menu-child-menu-border-color' => "#E7E7E7",
'main-menu-child-font-color' => "#04232F",
'main-menu-child-font-size' => "13px",
'main-menu-child-selected-font-color' => "#FFFFFF",
'main-menu-child-font-size' => "12px",
'main-menu-child-selected-font-color' => "$main-menu-selected-font-color",
'main-menu-sidebar-font-color' => "#333333",
'main-menu-sidebar-h3-color' => "#333333",
'main-menu-sidebar-link-color' => "#333333",
@ -127,7 +128,6 @@ module OpenProject
'breadcrumb-font-color' => "$body-font-color",
'content-default-border-color' => "#EAEAEA",
'content-default-border-width' => "1px",
'content-link-color' => "$primary-color-dark",
'content-link-hover-active-color' => "$primary-color-dark",
'content-icon-link-color' => "#4b4b4b",
'content-icon-link-hover-color' => "$primary-color-dark",
@ -252,7 +252,9 @@ module OpenProject
header-item-font-color
header-item-font-hover-color
header-item-bg-hover-color
header-border-bottom-color )
header-border-bottom-color
content-link-color
main-menu-bg-color )
end
end
end

@ -61,7 +61,6 @@ module Redmine::MenuManager::MenuHelper
param: :project_id,
caption: query_menu_item.title,
parent: :work_packages,
icon: 'icon2 icon-pin',
html: {
class: 'query-menu-item',
'data-ui-route' => 'work-packages.list',

Loading…
Cancel
Save