+++ /dev/null
-.navbar-context {
- position: static;
- padding: 0;
- height: 65px;
-}
-
-.navbar-context-inner {
- position: fixed;
- z-index: 420;
- left: 0;
- right: 0;
- height: 65px;
- padding-top: 5px;
- box-sizing: border-box;
- background-color: #f3f3f3;
-}
import { TooltipsContainer } from '../../../../components/mixins/tooltips-mixin';
import { getTasksForComponent } from '../../../../api/ce';
import { STATUSES } from '../../../../apps/background-tasks/constants';
-import './ComponentNav.css';
export default React.createClass({
componentDidMount () {
return null;
}
- const items = breadcrumbs.map(item => {
+ const lastItem = breadcrumbs[breadcrumbs.length - 1];
+
+ const items = breadcrumbs.map((item, index) => {
return (
- <li key={item.key}>
- <Link to={{ pathname: '/dashboard', query: { id: item.key } }}>
- <QualifierIcon qualifier={item.qualifier}/>
- {' '}
- <strong>{item.name}</strong>
+ <span key={item.key}>
+ <Link to={{ pathname: '/dashboard', query: { id: item.key } }} className="link-base-color">
+ {index === breadcrumbs.length - 1 ? (
+ <strong>{item.name}</strong>
+ ) : (
+ <span>{item.name}</span>
+ )}
</Link>
- </li>
+ {index < breadcrumbs.length - 1 && (
+ <span className="slash-separator"/>
+ )}
+ </span>
);
});
return (
- <ul className="nav navbar-nav nav-crumbs">
+ <h2 className="navbar-context-title">
{organization != null && shouldOrganizationBeDisplayed && (
- <li>
- <OrganizationLink organization={organization}>{organization.name}</OrganizationLink>
- </li>
+ <span>
+ <span className="navbar-context-title-qualifier little-spacer-right">
+ <QualifierIcon qualifier={lastItem.qualifier}/>
+ </span>
+ <OrganizationLink organization={organization} className="link-base-color">
+ {organization.name}
+ </OrganizationLink>
+ <span className="slash-separator"/>
+ </span>
)}
{items}
- </ul>
+ </h2>
);
}
}
exports[`test should not render breadcrumbs with one element 1`] = `
-<ul
- className="nav navbar-nav nav-crumbs">
- <li>
+<h2
+ className="navbar-context-title">
+ <span>
<Link
+ className="link-base-color"
onlyActiveOnIndex={false}
style={Object {}}
to={
},
}
}>
- <qualifier-icon
- qualifier="TRK" />
-
<strong>
My Project
</strong>
</Link>
- </li>
-</ul>
+ </span>
+</h2>
`;
exports[`test should render organization 1`] = `
-<ul
- className="nav navbar-nav nav-crumbs">
- <li>
+<h2
+ className="navbar-context-title">
+ <span>
+ <span
+ className="navbar-context-title-qualifier little-spacer-right">
+ <qualifier-icon
+ qualifier="TRK" />
+ </span>
<OrganizationLink
+ className="link-base-color"
organization={
Object {
"key": "foo",
}>
The Foo Organization
</OrganizationLink>
- </li>
- <li>
+ <span
+ className="slash-separator" />
+ </span>
+ <span>
<Link
+ className="link-base-color"
onlyActiveOnIndex={false}
style={Object {}}
to={
},
}
}>
- <qualifier-icon
- qualifier="TRK" />
-
<strong>
My Project
</strong>
</Link>
- </li>
-</ul>
+ </span>
+</h2>
`;
{{/notNull}}
<a href="{{this.url}}" data-title="{{name}}<br>{{key}}" data-toggle="tooltip">
+ {{#if organization}}
+ <div class="pull-right nowrap note">
+ {{organization.name}}
+ </div>
+ {{/if}}
+
{{#if icon}}<i class="icon-{{icon}} text-text-bottom"></i>{{/if}}
{{#if q}}{{qualifierIcon q}}{{/if}}
{{#eq q 'FIL'}}
{{name}}
{{/eq}}
{{/eq}}
-
- {{#if organization}}
- <div class="pull-right nowrap note">
- {{organization.name}}
- </div>
- {{/if}}
</a>
return (
<td>
+ <span className="little-spacer-right">
+ <QualifierIcon qualifier={task.componentQualifier}/>
+ </span>
+
{task.organization != null && (
<Organization organizationKey={task.organization}/>
)}
- <Link to={{ pathname: '/dashboard', query: { id: task.componentKey } }} className="link-with-icon">
- <span className="little-spacer-right">
- <QualifierIcon qualifier={task.componentQualifier}/>
- </span>
- <span>{task.componentName}</span>
+ <Link to={{ pathname: '/dashboard', query: { id: task.componentKey } }}>
+ {task.componentName}
</Link>
{types.length > 1 && (
{{/notNull}}
<a class="link-no-underline" href="{{dashboardUrl project}}">
- <span class="little-spacer-right">{{qualifierIcon "TRK"}}</span>{{projectLongName}}
+ {{projectLongName}}
</a>
{{#if subProject}}
<span class="slash-separator"></span>
<a class="link-no-underline" href="{{dashboardUrl subProject}}">
- <span class="little-spacer-right">{{qualifierIcon "TRK"}}</span>{{subProjectLongName}}
+ {{subProjectLongName}}
</a>
{{/if}}
<span class="slash-separator"></span>
<a class="link-no-underline" href="{{dashboardUrl component}}">
- <span class="little-spacer-right">{{qualifierIcon componentQualifier}}</span>{{collapsePath componentLongName}}
+ {{collapsePath componentLongName}}
</a>
</div>
<nav className="navbar navbar-context page-container" id="context-navigation">
<div className="navbar-context-inner">
<div className="container">
- <ul className="nav navbar-nav nav-crumbs">
- <li>
- <Link to={`/organizations/${organization.key}`}>
- {organization.name}
- </Link>
- </li>
- </ul>
+ <h2 className="navbar-context-title">
+ <Link to={`/organizations/${organization.key}`} className="link-base-color">
+ <strong>{organization.name}</strong>
+ </Link>
+ </h2>
<ul className="nav navbar-nav nav-tabs">
<li>
className="navbar-context-inner">
<div
className="container">
- <ul
- className="nav navbar-nav nav-crumbs">
- <li>
- <Link
- onlyActiveOnIndex={false}
- style={Object {}}
- to="/organizations/foo">
+ <h2
+ className="navbar-context-title">
+ <Link
+ className="link-base-color"
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to="/organizations/foo">
+ <strong>
Foo
- </Link>
- </li>
- </ul>
+ </strong>
+ </Link>
+ </h2>
<ul
className="nav navbar-nav nav-tabs">
<li>
className="navbar-context-inner">
<div
className="container">
- <ul
- className="nav navbar-nav nav-crumbs">
- <li>
- <Link
- onlyActiveOnIndex={false}
- style={Object {}}
- to="/organizations/foo">
+ <h2
+ className="navbar-context-title">
+ <Link
+ className="link-base-color"
+ onlyActiveOnIndex={false}
+ style={Object {}}
+ to="/organizations/foo">
+ <strong>
Foo
- </Link>
- </li>
- </ul>
+ </strong>
+ </Link>
+ </h2>
<ul
className="nav navbar-nav nav-tabs">
<li>
.navbar-context {
+ position: static;
top: @navbarGlobalHeight;
z-index: @navbar-context-z-index;
height: @navbarContextHeight;
- padding-top: 5px;
+ padding: 0;
background-color: @navbarContextBackground;
.nav-tabs {
color: @secondFontColor;
font-size: @smallFontSize;
}
+.navbar-context-inner {
+ position: fixed;
+ z-index: 420;
+ left: 0;
+ right: 0;
+ height: 65px;
+ padding-top: 5px;
+ box-sizing: border-box;
+ background-color: #f3f3f3;
+}
+
+.navbar-context-title {
+ float: left;
+ padding: 2px 10px 0;
+}
+
+.navbar-context-title-qualifier {
+ display: inline-block;
+ vertical-align: top;
+ line-height: 16px;
+ padding-top: 5px;
+ box-sizing: border-box;
+}
+
+.navbar-context-title-qualifier i {
+ vertical-align: top;
+}
+
.navbar-side {
padding: 10px;
}
.slash-separator {
- margin-left: 4px;
- margin-right: 4px;
+ margin-left: 5px;
+ margin-right: 5px;
&:after {
content: "/";