<ProjectsListContainer/>
<ProjectsListFooterContainer query={this.state.query}/>
</div>
- <aside className="page-sidebar-fixed">
+ <aside className="page-sidebar-fixed projects-sidebar">
<FavoriteFilterContainer/>
<PageSidebarContainer query={this.state.query}/>
</aside>
<div className="page-main">
<ProjectsListContainer/>
</div>
- <aside className="page-sidebar-fixed">
+ <aside className="page-sidebar-fixed projects-sidebar">
<FavoriteFilterContainer/>
<p className="note text-center">Filters are not available.</p>
return (
<div className="search-navigator-facets-list">
+ <QualityGateFilter query={this.props.query}/>
<ReliabilityFilter query={this.props.query}/>
<SecurityFilter query={this.props.query}/>
<MaintainabilityFilter query={this.props.query}/>
<CoverageFilter query={this.props.query}/>
<DuplicationsFilter query={this.props.query}/>
<SizeFilter query={this.props.query}/>
- <QualityGateFilter query={this.props.query}/>
{isFiltered && (
<div className="projects-facets-reset">
*/
import React from 'react';
import classNames from 'classnames';
+import ProjectCardQualityGate from './ProjectCardQualityGate';
import ProjectCardMeasures from './ProjectCardMeasures';
import { getComponentUrl } from '../../../helpers/urls';
return (
<div className={className}>
+ {this.props.measures != null && (
+ <div className="boxed-group-actions">
+ <ProjectCardQualityGate status={this.props.measures['alert_status']}/>
+ </div>
+ )}
<h2 className="project-card-name">
<a className="link-base-color" href={getComponentUrl(project.key)}>{project.name}</a>
</h2>
*/
import React from 'react';
import ProjectCardLanguages from './ProjectCardLanguages';
-import ProjectCardQualityGate from './ProjectCardQualityGate';
import Measure from '../../component-measures/components/Measure';
import Rating from '../../../components/ui/Rating';
import CoverageRating from '../../../components/ui/CoverageRating';
</div>
</div>
</div>
-
- <ProjectCardQualityGate status={measures['alert_status']}/>
</div>
);
}
}
return (
- <div className="project-card-measure pull-right">
+ <div className="project-card-measure">
<div className="project-card-measure-inner">
- <div>
- <Level level={status}/>
- </div>
- <div className="project-card-measure-label">
+ <span className="small spacer-right">
{translate('overview.quality_gate')}
- </div>
+ {':'}
+ </span>
+ <Level level={status} small={true}/>
</div>
</div>
);
renderOption = option => {
return (
<span>
- <CoverageRating value={getCoverageRatingAverageValue(option)}/>
+ <CoverageRating value={getCoverageRatingAverageValue(option)} small={true}/>
<span className="spacer-left">
{getCoverageRatingLabel(option)}
</span>
return (
<FilterContainer
property="coverage"
- options={[1, 2, 3, 4, 5]}
+ options={[5, 4, 3, 2, 1]}
renderName={() => 'Coverage'}
renderOption={this.renderOption}
getFacetValueForOption={this.getFacetValueForOption}
renderOption = option => {
return (
<span>
- <DuplicationsRating value={getDuplicationsRatingAverageValue(option)}/>
+ <DuplicationsRating value={getDuplicationsRatingAverageValue(option)} small={true}/>
<span className="spacer-left">
{getDuplicationsRatingLabel(option)}
</span>
export default class IssuesFilter extends React.Component {
renderOption = option => {
return (
- <Rating value={option}/>
+ <span>
+ <Rating value={option} small={true}/>
+ </span>
);
};
export default class QualityGateFilter extends React.Component {
renderOption = option => {
return (
- <Level level={option}/>
+ <Level level={option} small={true}/>
);
};
renderOption = option => {
return (
<span>
- <SizeRating value={getSizeRatingAverageValue(option)}/>
+ <SizeRating value={getSizeRatingAverageValue(option)} small={true}/>
<span className="spacer-left">
{getSizeRatingLabel(option)}
</span>
+.projects-sidebar {
+ width: 260px;
+}
+
.projects-list {
outline: none;
}
}
.project-card-measures {
- margin: 0 -20px;
+ margin: 0 -15px;
+}
+
+.project-card-measures .project-card-measure {
+ width: 120px;
+ box-sizing: border-box;
+ padding: 0 15px;
+}
+
+.project-card-measures .project-card-measure:nth-child(-n+2) {
+ width: 90px;
}
.project-card-measure {
position: relative;
display: inline-block;
vertical-align: top;
- padding: 0 15px;
text-align: center;
}
transition: none;
}
-.projects-facet .facet-name,
-.projects-facet .facet-stat {
- line-height: 24px !important;
-}
-
.projects-facets-reset {
margin-top: 20px;
padding: 10px;
export default class CoverageRating extends React.Component {
static propTypes = {
- value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string])
+ value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
+ small: React.PropTypes.bool
+ };
+
+ static defaultProps = {
+ small: false
};
render () {
];
}
+ const size = this.props.small ? 16 : 24;
+ const thickness = this.props.small ? 2 : 3;
+
return (
<DonutChart
data={data}
- width={24}
- height={24}
- thickness={3}/>
+ width={size}
+ height={size}
+ thickness={thickness}/>
);
}
}
box-sizing: border-box;
}
+.duplications-rating-small {
+ width: 16px;
+ height: 16px;
+ border-width: 2px;
+}
+
.duplications-rating:after {
border-radius: 24px;
background-color: #f3ca8e;
height: 6px;
}
+.duplications-rating-small.duplications-rating-B:after {
+ width: 2px;
+ height: 2px;
+}
+
.duplications-rating-C:after {
width: 8px;
height: 8px;
}
+.duplications-rating-small.duplications-rating-C:after {
+ width: 6px;
+ height: 6px;
+}
+
.duplications-rating-D {
border-color: #d4333f;
}
background-color: #d4333f;
}
+.duplications-rating-small.duplications-rating-D:after {
+ width: 8px;
+ height: 8px;
+ background-color: #d4333f;
+}
+
.duplications-rating-E {
border-color: #d4333f;
}
+.duplications-rating-small.duplications-rating-E:after {
+ width: 10px;
+ height: 10px;
+ background-color: #d4333f;
+}
+
.duplications-rating-E:after {
width: 14px;
height: 14px;
export default class DuplicationsRating extends React.Component {
static propTypes = {
- value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]).isRequired
+ value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]).isRequired,
+ small: React.PropTypes.bool
+ };
+
+ static defaultProps = {
+ small: false
};
render () {
const { value } = this.props;
const className = classNames('duplications-rating', {
+ 'duplications-rating-small': this.props.small,
'duplications-rating-A': inRange(value, 3),
'duplications-rating-B': inRange(value, 3, 5),
'duplications-rating-C': inRange(value, 5, 10),
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import React from 'react';
+import classNames from 'classnames';
import { formatMeasure } from '../../helpers/measures';
import './Level.css';
export default class Level extends React.Component {
static propTypes = {
- level: React.PropTypes.oneOf(['ERROR', 'WARN', 'OK']).isRequired
+ level: React.PropTypes.oneOf(['ERROR', 'WARN', 'OK']).isRequired,
+ small: React.PropTypes.bool
+ };
+
+ static defaultProps = {
+ small: false
};
render () {
const formatted = formatMeasure(this.props.level, 'LEVEL');
- const className = 'level level-' + this.props.level;
+ const className = classNames('level', 'level-' + this.props.level, { 'level-small': this.props.small });
return <span className={className}>{formatted}</span>;
}
}
text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
}
+.rating-small {
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+ margin-top: -1px;
+ margin-bottom: -1px;
+ font-size: 12px;
+}
+
a > .rating {
margin-bottom: -1px;
border-bottom: 1px solid;
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import React from 'react';
+import classNames from 'classnames';
import { formatMeasure } from '../../helpers/measures';
import './Rating.css';
throw new Error(
`Invalid prop "${propName}" passed to "${componentName}".`);
}
- }
+ },
+ small: React.PropTypes.bool
+ };
+
+ static defaultProps = {
+ small: false
};
render () {
const formatted = formatMeasure(this.props.value, 'RATING');
- const className = 'rating rating-' + formatted;
+ const className = classNames('rating', 'rating-' + formatted, { 'rating-small': this.props.small });
return <span className={className}>{formatted}</span>;
}
}
text-align: center;
}
+.size-rating-small {
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+ margin-top: -1px;
+ margin-bottom: -1px;
+ font-size: 10px;
+}
+
.size-rating-muted {
background-color: #ccc;
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import React from 'react';
+import classNames from 'classnames';
import inRange from 'lodash/inRange';
import './SizeRating.css';
export default class SizeRating extends React.Component {
static propTypes = {
- value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string])
+ value: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
+ small: React.PropTypes.bool
+ };
+
+ static defaultProps = {
+ small: false
};
render () {
letter = 'XL';
}
+ const className = classNames('size-rating', { 'size-rating-small': this.props.small });
+
return (
- <div className="size-rating">{letter}</div>
+ <div className={className}>{letter}</div>
);
}
}
top: 0;
right: 0;
margin-left: 5px;
- padding: 3px 5px;
+ padding: 4px 5px;
background-color: @barBackgroundColor;
color: @secondFontColor;
font-size: @smallFontSize;
projects / sonarqube.git / commitdiff