aboutsummaryrefslogtreecommitdiffstats
path: root/server/sonar-web/src/main/js/apps/coding-rules
diff options
context:
space:
mode:
Diffstat (limited to 'server/sonar-web/src/main/js/apps/coding-rules')
-rw-r--r--server/sonar-web/src/main/js/apps/coding-rules/components/ActivationSeverityFacet.tsx1
-rw-r--r--server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx21
-rw-r--r--server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx4
-rw-r--r--server/sonar-web/src/main/js/apps/coding-rules/styles.css26
4 files changed, 33 insertions, 19 deletions
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationSeverityFacet.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationSeverityFacet.tsx
index d9dcbf764cc..0faa11ff748 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationSeverityFacet.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationSeverityFacet.tsx
@@ -38,6 +38,7 @@ export default class ActivationSeverityFacet extends React.PureComponent<Props>
{...this.props}
disabled={this.props.disabled}
disabledHelper={translate('coding_rules.filters.active_severity.inactive')}
+ halfWidth={true}
options={SEVERITIES}
property="activationSeverities"
renderName={this.renderName}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
index 3728d1e8c0e..88d81b5faca 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsMeta.tsx
@@ -20,9 +20,10 @@
import * as React from 'react';
import { Link } from 'react-router';
import { Query } from '../query';
-import { RuleDetails } from '../../../app/types';
+import { RuleDetails, RuleScope } from '../../../app/types';
import { getRuleUrl } from '../../../helpers/urls';
import LinkIcon from '../../../components/icons-components/LinkIcon';
+import RuleScopeIcon from '../../../components/icons-components/RuleScopeIcon';
import SimilarRulesFilter from './SimilarRulesFilter';
import Tooltip from '../../../components/controls/Tooltip';
import { translate } from '../../../helpers/l10n';
@@ -72,7 +73,10 @@ export default class RuleDetailsMeta extends React.PureComponent<Props, State> {
renderSeverity = () => (
<Tooltip overlay={translate('default_severity')}>
<li className="coding-rules-detail-property" data-meta="severity">
- <SeverityHelper severity={this.props.ruleDetails.severity} />
+ <SeverityHelper
+ className="display-inline-flex-center"
+ severity={this.props.ruleDetails.severity}
+ />
</li>
</Tooltip>
);
@@ -200,6 +204,18 @@ export default class RuleDetailsMeta extends React.PureComponent<Props, State> {
);
};
+ renderScope = () => {
+ const scope = this.props.ruleDetails.scope || RuleScope.Main;
+ return (
+ <Tooltip overlay={translate('coding_rules.scope.title')}>
+ <li className="coding-rules-detail-property">
+ <RuleScopeIcon className="little-spacer-right" />
+ {translate('coding_rules.scope', scope)}
+ </li>
+ </Tooltip>
+ );
+ };
+
render() {
const { ruleDetails } = this.props;
return (
@@ -223,6 +239,7 @@ export default class RuleDetailsMeta extends React.PureComponent<Props, State> {
{this.renderType()}
{this.renderSeverity()}
{this.renderStatus()}
+ {this.renderScope()}
{this.renderTags()}
{this.renderCreationDate()}
{this.renderRepository()}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
index e713523ac8f..20c045ba704 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
@@ -183,7 +183,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
</td>
<td className="coding-rule-table-meta-cell">
- <div className="coding-rule-meta">
+ <div className="display-flex-center coding-rule-meta">
{rule.status !== 'READY' && (
<span className="spacer-left badge badge-normal-size badge-danger-light">
{translate('rules.status', rule.status)}
@@ -191,7 +191,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
)}
<span className="spacer-left note">{rule.langName}</span>
<Tooltip overlay={translate('coding_rules.type.tooltip', rule.type)}>
- <span className="spacer-left note">
+ <span className="display-inline-flex-center spacer-left note">
<IssueTypeIcon className="little-spacer-right" query={rule.type} />
{translate('issue.type', rule.type)}
</span>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/styles.css b/server/sonar-web/src/main/js/apps/coding-rules/styles.css
index ceef209eeea..5647de8b17c 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/styles.css
+++ b/server/sonar-web/src/main/js/apps/coding-rules/styles.css
@@ -67,8 +67,10 @@
}
.coding-rules-detail-properties {
- margin: 10px 0;
- font-size: 0;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-top: var(--gridSize);
}
.coding-rules-detail-properties + .coding-rules-detail-properties {
@@ -76,8 +78,10 @@
}
.coding-rules-detail-property {
- display: inline-block;
- margin-right: 20px;
+ display: flex;
+ align-items: center;
+ margin-right: calc(2 * var(--gridSize));
+ margin-bottom: var(--gridSize);
font-size: var(--smallFontSize);
}
@@ -173,7 +177,7 @@
}
.coding-rules-detail-quality-profile-severity i {
- margin-top: 4px;
+ margin-top: 2px;
}
.coding-rules-detail-quality-profile-parameters,
@@ -265,13 +269,13 @@ textarea.coding-rules-markdown-description {
}
.coding-rule-title {
- line-height: 19.5px;
+ line-height: calc(2.5 * var(--gridSize));
font-size: var(--baseFontSize);
}
.coding-rule-meta {
+ padding: calc(0.25 * var(--gridSize));
padding-left: 30px;
- line-height: 19.5px;
font-size: var(--smallFontSize);
}
@@ -280,14 +284,6 @@ textarea.coding-rules-markdown-description {
font-size: var(--smallFontSize);
}
-.coding-rule-meta .js-tag:after {
- content: ',';
-}
-
-.coding-rule-meta .js-tag:last-child:after {
- content: '';
-}
-
.coding-rule-activation {
width: 40px;
line-height: 19.5px;