TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change main menu design (#5661)

Browse Source 
* 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
7 changed files with 34 additions and 42 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

2
app/assets/stylesheets/layout/_base.sass
Unescape View File

@ -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

22
app/assets/stylesheets/layout/_main_menu.sass
Unescape View File

@ -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)

18
app/views/custom_styles/show.html.erb
Unescape View File

@ -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 %>

3
config/initializers/menus.rb
Unescape View File

@ -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' },

4
config/locales/en.yml
Unescape View File

@ -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"

26
lib/open_project/design.rb
Unescape View File

@ -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

1
lib/redmine/menu_manager/menu_helper.rb
Unescape View File

@ -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',

Write Preview
Loading…
Cancel
Save