Introduce mixin for global breadcrumb styles. Thus we can avoid the use of component styles in a global style sheet. Further the number of *breadcrumb.sass files was reduced from three to two (global and component)

pull/9554/head
Henriette Darge 3 years ago committed by Oliver Günther
parent e74cf99ef0
commit 303dd6bf9f
  1. 4
      app/controllers/wiki_controller.rb
  2. 40
      app/helpers/breadcrumb_helper.rb
  3. 2
      frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb-parent.html
  4. 4
      frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.html
  5. 16
      frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass
  6. 15
      frontend/src/global_styles/layout/_breadcrumb.sass
  7. 49
      frontend/src/global_styles/layout/work_packages/_breadcrumb.sass
  8. 2
      frontend/src/global_styles/layout/work_packages/_index.sass
  9. 24
      frontend/src/global_styles/openproject/_mixins.sass
  10. 2
      frontend/src/global_styles/openproject/_variables.scss

@ -439,10 +439,6 @@ class WikiController < ApplicationController
@page&.ancestors&.any?
end
def show_local_breadcrumb_defaults
false
end
def redirect_to_show
redirect_to action: :show, project_id: @project, id: @page
end

@ -30,13 +30,7 @@
module BreadcrumbHelper
def full_breadcrumb
if show_defaults
breadcrumb_list(link_to(icon_wrapper('icon2 icon-home', I18n.t(:label_home)), home_path),
link_to_project_ancestors(@project),
*breadcrumb_paths)
else
breadcrumb_list(*breadcrumb_paths)
end
breadcrumb_list(*breadcrumb_paths)
end
def breadcrumb(*args)
@ -48,17 +42,13 @@ module BreadcrumbHelper
elements = args.flatten
breadcrumb_elements = [content_tag(:li,
elements.shift.to_s,
class: 'first-breadcrumb-element',
style: 'list-style-image:none;')]
class: 'first-breadcrumb-element')]
breadcrumb_elements += elements.map do |element|
if element
css_class = if element.try(:include?, 'op-breadcrumb-project-title')
'op-breadcrumb-project-element '
end
content_tag(:li,
h(element.to_s),
class: "#{css_class} icon4 icon-small icon-arrow-right5")
class: "icon4 icon-small icon-arrow-right5")
end
end
@ -83,28 +73,4 @@ module BreadcrumbHelper
false
end
end
def show_defaults
if !!(defined? show_local_breadcrumb_defaults)
show_local_breadcrumb_defaults
else
false
end
end
private
def link_to_project_ancestors(project)
if project && !project.new_record?
ancestors = (project.root? ? [] : project.ancestors.visible.to_a)
ancestors << project
ancestors.map do |p|
if p == project
link_to_project(p, { only_path: false }, title: p, class: 'op-breadcrumb-project-title nocut').html_safe
else
link_to_project(p, { jump: current_menu_item }, title: p, class: 'op-breadcrumb-project-title').html_safe
end
end
end
end
end

@ -3,7 +3,7 @@
[attr.title]="parent.name"
uiSref="work-packages.show"
[uiParams]="{workPackageId: parent.id}"
class="op-wp-breadcrumb-parent op-breadcrumb-project-title nocut"
class="op-wp-breadcrumb-parent nocut"
data-qa-selector="op-wp-breadcrumb-parent">
<span [textContent]="parent.name"></span>
</a>

@ -16,12 +16,12 @@
[textContent]="ancestor.name"
uiSref="work-packages.show"
[uiParams]="{workPackageId: ancestor.id}"
class="op-breadcrumb-project-title nocut"></a>
class="nocut"></a>
</li>
</ng-container>
</ng-container>
<li
[ngClass]="{ 'active-parent-select': inputActive, 'icon4 icon-small icon-arrow-right5': !inputActive && hierarchyCount > 1 }">
[ngClass]="{ 'op-wp-breadcrumb--active-parent-select': inputActive, 'icon4 icon-small icon-arrow-right5': !inputActive && hierarchyCount > 1 }">
<wp-breadcrumb-parent (onSwitch)="updateActiveInput($event)" [workPackage]="workPackage"></wp-breadcrumb-parent>
</li>
</ul>

@ -1,3 +1,15 @@
@import "src/assets/sass/helpers"
.op-wp-breadcrumb
.active-parent-select
min-width: 320px
@include global-breadcrumb-styles
height: initial
&--ellipsed
max-width: 420px
@include text-shortener
&--active-parent-select
min-width: 320px
@media screen and (max-width: 1248px)
margin-top: 0

@ -27,18 +27,7 @@
//++
#breadcrumb
@include global-breadcrumb-styles
min-height: var(--breadcrumb-height)
li
white-space: nowrap
ul.op-breadcrumb
margin: 0 0 0 0
padding: 0
list-style: none
list-style-position: outside
// width: 10000px
height: var(--breadcrumb-height)
line-height: var(--breadcrumb-height)
// Hide projects in normal mode
.op-breadcrumb .op-breadcrumb-project-element
display: none

@ -1,49 +0,0 @@
%breadcrumb--default-font
@include default-font(var(--breadcrumb-font-color), var(--breadcrumb-font-size), bold)
#breadcrumb,
.op-wp-breadcrumb
margin-top: 10px
height: initial
display: none
@include default-transition
height: var(--breadcrumb-height)
overflow: hidden
background: none repeat scroll 0 0
background-color: var(--body-background)
border: none
width: auto
position: relative
&.nosidebar
// 7px of the icon to align breadcrumb with content
margin-left: -7px
ul
margin: 0
a
font-size: 12px
color: var(--content-link-color)
font-weight: normal
ul.op-breadcrumb
height: initial
li
float: left
margin: 0 5px 0 0
padding: 0
line-height: 20px
.op-wp-breadcrumb--ellipsed
max-width: 420px
@include text-shortener
li
@extend %breadcrumb--default-font
// TODO was lighten($breadcrumb-font-color, 20)
color: #666
list-style-type: none
&.-show
display: block

@ -4,5 +4,3 @@
@import full_view
@import mobile
@import print
@import breadcrumb

@ -222,3 +222,27 @@ $scrollbar-size: 10px
border: 0
font: inherit
text-align: inherit
@mixin global-breadcrumb-styles
margin-top: 10px
display: none
@include default-transition
overflow: hidden
width: auto
ul.op-breadcrumb
height: initial
margin: 0
padding: 0
li
@include default-font(var(--breadcrumb-font-color), var(--breadcrumb-font-size), normal)
list-style-type: none
float: left
margin: 0 5px 0 0
padding: 0
line-height: 20px
max-width: 100%
@include text-shortener
&.-show
display: block

@ -112,7 +112,7 @@
--breadcrumb-border-color: #E7E7E7;
--breadcrumb-font-size: 12px;
--breadcrumb-highlighted-font-size: 14px;
--breadcrumb-font-color: var(--body-font-color);
--breadcrumb-font-color: lighten(var(--body-font-color), 20);
--content-default-border-color: #EAEAEA;
--content-default-border-width: 1px;
--content-link-hover-active-color: var(--primary-color-dark);

Loading…
Cancel
Save